diff --git a/.claude/skills/add-unit-tests/SKILL.md b/.claude/skills/add-unit-tests/SKILL.md new file mode 100644 index 00000000..d66934b3 --- /dev/null +++ b/.claude/skills/add-unit-tests/SKILL.md @@ -0,0 +1,72 @@ +--- +description: Write missing unit tests for a makeup-js module based on coverage gaps +args: `` +--- + +You are writing missing unit tests for a makeup-js module. Your goal is to fill coverage gaps with well-structured tests that follow the existing conventions — not to rewrite existing tests or pad coverage with low-value assertions. + +**Input** + +The user will provide a module name (e.g., "makeup-next-id" or full path like "packages/core/makeup-next-id"). Optionally, the user may paste a gap report from `/test-coverage` — if so, use it to skip re-running coverage and go straight to writing. + +**Process** + +**1. Locate the module** + +- Find the module in `packages/core/` or `packages/ui/` +- Read `src/index.js` (or all files in `src/`) +- Read `test/index.js` (or all files in `test/`) + +**2. Identify gaps** + +If the user did not provide a gap report, run coverage to find them: + +``` +npm run test:coverage -- --coverage.include="packages/core//src/**" packages/core/ +``` + +Read the source and tests side by side to identify: + +- Uncovered branches (`if`/`else`, ternaries, `?.`, `??`) +- Uncovered functions +- Missing edge cases (empty input, boundary values, error conditions) +- Missing negative cases (invalid input that is guarded in code) + +Skip gaps that are not worth testing (non-deterministic internals, unreachable defensive guards, browser-only paths that jsdom cannot exercise). + +**3. Write the tests** + +Append the new tests to `test/index.js`. Do not modify existing tests. + +Follow the existing conventions exactly: + +- BDD structure: `describe("given X") > describe("when Y") > it("should Z")` +- One assertion per `it` block where practical +- Use `beforeEach`/`beforeAll` for setup, matching the pattern already in the file +- Use `vi.spyOn()` for mocking, `vi.useFakeTimers()` for timers — restore in `afterEach` +- Import only what is needed; do not add imports already present at the top of the file +- Match the indentation and formatting of the existing file + +**4. Run and verify** + +Run the tests to confirm they pass: + +``` +npm run test:unit -- packages/core/ +``` + +If any test fails, fix it before proceeding. Do not leave failing tests. + +Then re-run coverage to confirm the gaps are closed: + +``` +npm run test:coverage -- --coverage.include="packages/core//src/**" packages/core/ +``` + +**5. Summary** + +Report: + +- Which gaps were addressed and which were intentionally skipped (and why) +- Updated coverage numbers +- Number of tests added diff --git a/.claude/skills/refactor-module/SKILL.md b/.claude/skills/refactor-module/SKILL.md new file mode 100644 index 00000000..23f08fb3 --- /dev/null +++ b/.claude/skills/refactor-module/SKILL.md @@ -0,0 +1,147 @@ +--- +description: Systematically refactor a makeup-js module with modern JavaScript patterns +args: +--- + +You are refactoring a module in the makeup-js monorepo to use modern JavaScript features while maintaining readability and test compatibility. + +# Input + +The user will provide a module name (e.g., "makeup-next-id" or full path like "packages/core/makeup-next-id"). + +# Process + +## 1. Locate and analyze the module + +- Find the module in `packages/core/` or `packages/ui/` +- Read the README.md **first** — it describes intended behavior from the consumer's perspective and is the authoritative source for what the module should do. Use it to inform all refactoring decisions, especially around edge cases and event behavior. +- Read the source file(s) in `src/` +- Read the test file(s) in `test/` +- Check the package.json for any specific configuration + +## 2. Analyze refactoring opportunities + +Identify modernization opportunities based on browserslist (modern browsers): + +**Prioritize readability over cleverness** + +Common patterns to modernize: + +- Replace deprecated `keyCode` with `key` property +- Replace magic numbers with named constants +- Use `const`/`let` consistently (no `var`) +- Replace `Object.assign({}, obj1, obj2)` with spread: `{...obj1, ...obj2}` — rename the result only if the existing name is genuinely unclear; do not rename variables solely to remove a `_` prefix +- Use arrow functions for callbacks and simple functions +- Use `Set` or `Map` where appropriate for better performance/readability +- Remove unnecessary `"use strict"` (not needed in ES modules) +- Use template literals for string concatenation +- Use optional chaining `?.` where it improves readability +- Use nullish coalescing `??` for default values (prefer over `||` when appropriate) +- Use `Array.from()`, `.forEach()`, `.map()`, `.filter()` etc. where readable +- Do NOT simplify `=== true` / `=== false` comparisons — they carry type information that TypeScript would otherwise provide. Leave them as-is. + +**Avoid over-engineering:** + +- Don't use private fields (`#`) unless there's a clear encapsulation benefit +- Don't restructure class architecture unnecessarily +- Keep logic simple and straightforward + +**Preserve existing comments:** + +- Do NOT remove comments from code you are refactoring +- Comments often explain non-obvious behavior, browser quirks, or intentional decisions that aren't evident from the code alone +- Only remove a comment if it is purely restating what the code already clearly says (e.g. `i++ // increment i`) + +**Optimize for tree shaking:** + +- Prefer named exports over default exports where possible +- Prefer named imports (`import { foo } from "pkg"`) over namespace imports (`import * as Pkg from "pkg"`) — named imports allow bundlers to tree-shake unused exports + +**CRITICAL - No API changes:** + +- Maintain existing API surface exactly +- Do NOT change exported functions, classes, or methods +- Do NOT change function signatures (parameters, return types) +- Do NOT change event names or event detail structures +- Do NOT introduce breaking changes +- This is internal refactoring only - the public API must remain unchanged + +## 3. Explain your understanding and ask questions + +Before making any suggestions or changes, write a plain-text explanation of the module: + +- What the module does from a consumer's perspective (what problem it solves, how it is used) +- What its key internal mechanisms are (how it works) +- Any non-obvious design decisions you noticed (e.g. why certain patterns are used, what tradeoffs are made) +- Any questions you have — about intent, edge cases, or anything in the source or tests that is unclear or surprising + +Then **wait for the user to respond** before proceeding. Do not begin refactoring until the user has confirmed your understanding is correct and answered any questions. + +## 5. Refactor tests FIRST + +**CRITICAL:** Maintain the given/when/then BDD test format. + +Test improvements: + +- Remove redundant import existence checks +- Replace `keyCode` with `key` in KeyboardEvent tests +- Use `vi.spyOn()` instead of manually mocking functions +- Add specific test cases for edge cases +- Use descriptive test names following given/when/then +- Ensure proper cleanup in beforeEach/afterEach +- Structure: `describe("given X") > describe("when Y") > it("should Z")` + +## 6. Refactor module code + +Before writing any code changes, explain each planned source change as a learning opportunity: + +- State what is changing and show the before/after +- Explain _why_ the new form is preferred — the underlying principle, not just the rule (e.g. what problem does `Object.assign` have that spread solves? why does eliminating the intermediate variable improve readability?) +- Connect the change to a broader pattern where relevant (e.g. "this is the same idea as destructuring — pulling out only what you need") + +Then apply all changes. + +## 7. Update README + +- Verify README is in sync with the refactored code +- Check that: + - Usage examples are accurate (no API changes, so should still work) + - Code examples use correct variable names and syntax + - Examples are clear and follow current code +- **Verify every listed property actually exists** — check each entry in the Properties section against the source. Look for getters, public instance fields, and properties set in the constructor. Remove or correct any that don't exist. +- **Verify every listed method actually exists** — check each entry in the Methods section against the source. Look for class methods and exported functions. +- **Verify every listed event name matches a `dispatchEvent` call** — search the source for `new CustomEvent(...)` and confirm the names match what the Events section documents. +- **Verify every listed option is present in `defaultOptions`** — confirm each option key in the Options section exists in the module's default options object. +- Fix any typos or inconsistencies in examples +- Do NOT change the API in the README - this is verification only +- Remove the "Dependencies" section if present — it duplicates package.json and drifts out of sync +- Keep documentation concise and accurate + +## 8. Compile and test + +- Run `npm run compile --workspace=` +- Run `npm run test:unit -- packages/core/` or `packages/ui/` +- Verify all tests pass +- If tests fail, analyze and fix + +## 9. Summary + +Provide a concise summary: + +- Module name and location +- Test improvements made +- Code improvements made +- Test results +- Lines of code before/after (if significantly different) + +# Browser Support + +Target modern browsers per @ebay/browserslist-config. All modern ES features are supported. + +# Testing + +Tests use Vitest. Maintain compatibility with existing test infrastructure. + +# Output Format + +Be concise. Show what was changed and why. Confirm tests pass. diff --git a/.claude/skills/revamp-demo/SKILL.md b/.claude/skills/revamp-demo/SKILL.md new file mode 100644 index 00000000..bb95bf7b --- /dev/null +++ b/.claude/skills/revamp-demo/SKILL.md @@ -0,0 +1,196 @@ +--- +description: Revamp a makeup-js module demo page with consistent style and structure +args: +--- + +You are revamping a demo page for a makeup-js module. The goal is a minimal, utilitarian page that serves as quick manual testing and demonstrates available features — not a showcase. + +# Input + +The user will provide a module name (e.g., "makeup-next-id" or full path like "packages/core/makeup-next-id"). + +# Process + +## 1. Locate the module + +- Find the module in `packages/core/` or `packages/ui/` +- Determine whether it is a **core** or **ui** module — the pattern differs (see sections 3 and 4) +- Determine the demo path: `docs/core//` or `docs/ui//` +- Read the README.md **first** — it is the authoritative source for what the module does and what options/events/methods it exposes. Use it to decide what to demonstrate. +- Read the existing `docs///index.html` and `index.js` +- For ui modules, also read the existing `index.css` to understand what Skin packages are imported + +## 2. Design the demo + +Based on the README, decide: + +- What is the minimal interaction that demonstrates the module working? +- Are there multiple distinct features or options worth showing as separate sections? +- What state changes are visible to the user without opening DevTools? + +**Principles:** + +- Each feature or option worth testing should have its own `

` section +- Prefer visible on-page output over console logging +- Keep the HTML minimal — don't add decorative content +- For modules that trap keyboard focus, include focusable elements (e.g. links) both before and after the primary interactive element so focus wrapping can be verified in both tab directions +- The demo is for developers, not end users + +## 3. Rewrite `index.html` + +### Core modules + +```html + + + + <module-name> demo + + + + + + +
+

core /

+

One-line description of what the module does.

+ +
+ +

Section title

+

Brief instruction or context for this demo section.

+ + + +
+ + + +``` + +### UI modules + +UI modules use [eBay Skin](https://ebay.github.io/skin/) for styling. The HTML links both `docs.css` and the webpack-extracted `index.css`: + +```html + + + + <module-name> demo + + + + + + + +
+

ui /

+

One-line description of what the module does.

+ +
+ +

Section title

+

Brief instruction or context for this demo section.

+ + + +
+ + + +``` + +`index.css` is the webpack-extracted output of the Skin CSS imports in `index.js` — do not edit it directly. + +Skin styling applies only to the widget/component markup (e.g. `.switch`, `.listbox`). Page-level styles (body, headings, layout, `.demo-output`) come from `docs.css` as normal. + +### Rules (both core and ui) + +- Always include `` to suppress favicon requests +- Breadcrumb in `

`: `core / ` or `ui / ` +- Use `
` between sections +- Module-specific ` + -
-

Core Modules

+
+

makeup-js / core

The following modules assist with common accessibility logic (e.g. maintaining a roving tabindex).

    diff --git a/docs/core/makeup-active-descendant/index.html b/docs/core/makeup-active-descendant/index.html index 3d977219..903f0947 100644 --- a/docs/core/makeup-active-descendant/index.html +++ b/docs/core/makeup-active-descendant/index.html @@ -3,6 +3,8 @@ makeup-active-descendant demo + + -
    -

    makeup-active-descendant demo

    -

    Use ARROW keys to move the active descendant.

    +
    +

    core / makeup-active-descendant

    - For the purpose of demonstration, aria-disabled items are greyed out; hidden items have strike-through (in the - real world they would obviously be actually hidden). Disabled and hidden items are included in indexing, but - skipped in navigation. + Implements ARIA active descendant keyboard navigation. Focus stays on the owner element while + aria-activedescendant communicates the current item to assistive technology.

    +

    + For demonstration purposes, aria-disabled items are greyed out and hidden items have + strike-through. Both are included in the index but skipped during navigation. +

    + +
    + Controls + + + + + + +
    -

    Example 1 - Hierarchical Relationship

    -
    +

    Hierarchical relationship

    +

    + The focusable element is an ancestor of the items. Focus the list and use arrow keys to navigate. + aria-activedescendant is set on the list itself. +

    + +
    • Item 1
    • Item 2
      • @@ -40,13 +59,22 @@

      Example 1 - Hierarchical Relationship

    +
      + +
      -

      Example 2 - Programmatic Relationship

      -
      - +

      Programmatic relationship

      +

      + The focusable element is not an ancestor of the items. The module adds aria-owns to link them. + Focus the text input and use arrow keys to navigate. The button next to the input uses + ignoreByDelegateSelector — arrow keys while focused on it do not trigger navigation. +

      + +
      + -
        +
        • Item 1
        • Item 2
        • Item 3
          • @@ -56,17 +84,8 @@

          Example 2 - Programmatic Relationship

      -
      - -
      - Tools - - - - - - -
      +
        +
        diff --git a/docs/core/makeup-active-descendant/index.js b/docs/core/makeup-active-descendant/index.js index 3b093fba..84794206 100644 --- a/docs/core/makeup-active-descendant/index.js +++ b/docs/core/makeup-active-descendant/index.js @@ -1,83 +1,90 @@ -// REQUIRE -//const ActiveDescendant = require('makeup-active-descendant'); - -// IMPORT -import * as ActiveDescendant from "makeup-active-descendant"; - -const navs = []; -const append = document.getElementById("append"); -const prepend = document.getElementById("prepend"); -const removeFirst = document.getElementById("removeFirst"); -const removeLast = document.getElementById("removeLast"); -const widgetEls = document.querySelectorAll(".widget"); -const wrapCheckbox = document.getElementById("wrap"); -const log = (e) => console.log(e.type, e.detail); - -prepend.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const list = el.querySelector("ul"); - const newListItem = document.createElement("li"); - newListItem.setAttribute("role", "option"); - const numListItems = parseInt(list.querySelectorAll("li").length, 10); - newListItem.innerText = `Item ${numListItems + 1}`; - list.insertBefore(newListItem, list.children[0]); - }); +import { createLinear } from "makeup-active-descendant"; +import { add as addPreventScrollKeys } from "makeup-prevent-scroll-keys"; + +const widget1El = document.getElementById("widget-1"); +const widget2El = document.getElementById("widget-2"); +const logEl1 = document.getElementById("log-1"); +const logEl2 = document.getElementById("log-2"); + +const logEvent = (logEl, e) => { + const item = document.createElement("li"); + item.textContent = `${e.type} — from: ${e.detail.fromIndex}, to: ${e.detail.toIndex}`; + logEl.prepend(item); +}; + +// Hierarchical: focusEl is the ul (ancestor of items) +const focusEl1 = widget1El.querySelector("ul"); +const nav1 = createLinear(widget1El, focusEl1, focusEl1, "li"); + +addPreventScrollKeys(focusEl1); + +["activeDescendantInit", "activeDescendantChange", "activeDescendantReset", "activeDescendantMutation"].forEach( + (eventName) => widget1El.addEventListener(eventName, (e) => logEvent(logEl1, e)), +); + +// Programmatic: focusEl is the input (not an ancestor of items) +const focusEl2 = widget2El.querySelector("input[type='text']"); +const containerEl2 = widget2El.querySelector("ul"); +const nav2 = createLinear(widget2El, focusEl2, containerEl2, "li", { + ignoreByDelegateSelector: 'input[type="button"]', }); -append.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const list = el.querySelector("ul"); - const newListItem = document.createElement("li"); - newListItem.setAttribute("role", "option"); - const numListItems = parseInt(list.querySelectorAll("li").length, 10); - newListItem.innerText = `Item ${numListItems + 1}`; - list.appendChild(newListItem); +addPreventScrollKeys(focusEl2); + +["activeDescendantInit", "activeDescendantChange", "activeDescendantReset", "activeDescendantMutation"].forEach( + (eventName) => widget2El.addEventListener(eventName, (e) => logEvent(logEl2, e)), +); + +// Controls — apply to both widgets +const navs = [nav1, nav2]; +const widgetEls = [widget1El, widget2El]; + +document.getElementById("append").addEventListener("click", () => { + widgetEls.forEach((el) => { + const ul = el.querySelector("ul"); + const item = document.createElement("li"); + item.setAttribute("role", "option"); + item.textContent = `Item ${ul.children.length + 1}`; + ul.appendChild(item); }); }); -removeFirst.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const list = el.querySelector("ul"); - const node = list.firstElementChild; - list.removeChild(node); +document.getElementById("prepend").addEventListener("click", () => { + widgetEls.forEach((el) => { + const ul = el.querySelector("ul"); + const item = document.createElement("li"); + item.setAttribute("role", "option"); + item.textContent = `Item ${ul.children.length + 1}`; + ul.insertBefore(item, ul.firstElementChild); }); }); -removeLast.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const list = el.querySelector("ul"); - const node = list.lastElementChild; - list.removeChild(node); +document.getElementById("removeFirst").addEventListener("click", () => { + widgetEls.forEach((el) => { + const first = el.querySelector("ul").firstElementChild; + if (first) first.remove(); }); }); -disableCurrent.addEventListener("click", function () { - navs.forEach(function (nav) { - if (nav.currentItem) nav.currentItem.setAttribute("aria-disabled", "true"); +document.getElementById("removeLast").addEventListener("click", () => { + widgetEls.forEach((el) => { + const last = el.querySelector("ul").lastElementChild; + if (last) last.remove(); }); }); -widgetEls.forEach(function (el) { - el.addEventListener("activeDescendantInit", log); - el.addEventListener("activeDescendantChange", log); - el.addEventListener("activeDescendantReset", log); - el.addEventListener("activeDescendantMutation", log); - - const widget = ActiveDescendant.createLinear( - el, - el.querySelector("input") || el.querySelector("ul"), - el.querySelector("ul"), - "li", - { - nonEmittingElementSelector: 'input[type="button"]', - }, - ); - - navs.push(widget); +document.getElementById("disableCurrent").addEventListener("click", () => { + navs.forEach((nav) => nav.currentItem?.setAttribute("aria-disabled", "true")); }); -wrapCheckbox.addEventListener("change", function (e) { - navs.forEach(function (nav) { - nav.wrap = e.target.checked; - }); +document.getElementById("wrap").addEventListener("change", (e) => { + navs.forEach((nav) => (nav.wrap = e.target.checked)); +}); + +document.getElementById("clear-1").addEventListener("click", () => { + logEl1.innerHTML = ""; +}); + +document.getElementById("clear-2").addEventListener("click", () => { + logEl2.innerHTML = ""; }); diff --git a/docs/core/makeup-active-descendant/index.min.js b/docs/core/makeup-active-descendant/index.min.js index 02cbe864..c6ffda9f 100644 --- a/docs/core/makeup-active-descendant/index.min.js +++ b/docs/core/makeup-active-descendant/index.min.js @@ -11,16 +11,16 @@ Object.defineProperty(exports, "__esModule", ({ value: true })); exports.createLinear = createLinear; -var NavigationEmitter = _interopRequireWildcard(__webpack_require__(841)); +var _makeupNavigationEmitter = __webpack_require__(841); var _makeupNextId = _interopRequireDefault(__webpack_require__(333)); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } const defaultOptions = { activeDescendantClassName: "active-descendant", autoInit: "none", autoReset: "none", autoScroll: false, axis: "both", + ignoreByDelegateSelector: null, wrap: false }; function onModelInit(e) { @@ -61,7 +61,7 @@ function onModelChange(e) { function onModelReset(e) { const toIndex = e.detail.toIndex; const activeClassName = this._options.activeDescendantClassName; - this.items.forEach(function (el) { + this.items.forEach(el => { el.classList.remove(activeClassName); }); if (toIndex !== null && toIndex !== -1) { @@ -80,7 +80,7 @@ function onModelMutation(e) { toIndex } = e.detail; const activeDescendantClassName = this._options.activeDescendantClassName; - this.items.forEach(function (item, index) { + this.items.forEach((item, index) => { (0, _makeupNextId.default)(item); if (index !== toIndex) { item.classList.remove(activeDescendantClassName); @@ -114,7 +114,10 @@ class ActiveDescendant { class LinearActiveDescendant extends ActiveDescendant { constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) { super(el); - this._options = Object.assign({}, defaultOptions, selectedOptions); + this._options = { + ...defaultOptions, + ...selectedOptions + }; this._focusEl = focusEl; this._itemContainerEl = itemContainerEl; this._itemSelector = itemSelector; @@ -126,7 +129,7 @@ class LinearActiveDescendant extends ActiveDescendant { if (this._itemContainerEl !== this._focusEl) { focusEl.setAttribute("aria-owns", this._itemContainerEl.id); } - this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, { + this._navigationEmitter = (0, _makeupNavigationEmitter.createLinear)(el, itemSelector, { autoInit: this._options.autoInit, autoReset: this._options.autoReset, axis: this._options.axis, @@ -135,7 +138,7 @@ class LinearActiveDescendant extends ActiveDescendant { }); // ensure each item has an id - this.items.forEach(function (itemEl) { + this.items.forEach(itemEl => { (0, _makeupNextId.default)(itemEl); }); } @@ -760,6 +763,33 @@ function _default(el) { } +/***/ }, + +/***/ 795 +(__unused_webpack_module, exports) { + + + +Object.defineProperty(exports, "__esModule", ({ + value: true +})); +exports.remove = exports.add = void 0; +const SCROLL_KEYS = new Set([" ", "PageUp", "PageDown", "End", "Home", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"]); +const onKeyDown = e => { + if (SCROLL_KEYS.has(e.key)) { + e.preventDefault(); + } +}; +const add = el => { + el.addEventListener("keydown", onKeyDown); +}; +exports.add = add; +const remove = el => { + el.removeEventListener("keydown", onKeyDown); +}; +exports.remove = remove; + + /***/ } /******/ }); @@ -792,74 +822,77 @@ function _default(el) { var __webpack_exports__ = {}; -var ActiveDescendant = _interopRequireWildcard(__webpack_require__(960)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } -// REQUIRE -//const ActiveDescendant = require('makeup-active-descendant'); - -// IMPORT - -const navs = []; -const append = document.getElementById("append"); -const prepend = document.getElementById("prepend"); -const removeFirst = document.getElementById("removeFirst"); -const removeLast = document.getElementById("removeLast"); -const widgetEls = document.querySelectorAll(".widget"); -const wrapCheckbox = document.getElementById("wrap"); -const log = e => console.log(e.type, e.detail); -prepend.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const list = el.querySelector("ul"); - const newListItem = document.createElement("li"); - newListItem.setAttribute("role", "option"); - const numListItems = parseInt(list.querySelectorAll("li").length, 10); - newListItem.innerText = `Item ${numListItems + 1}`; - list.insertBefore(newListItem, list.children[0]); - }); +var _makeupActiveDescendant = __webpack_require__(960); +var _makeupPreventScrollKeys = __webpack_require__(795); +const widget1El = document.getElementById("widget-1"); +const widget2El = document.getElementById("widget-2"); +const logEl1 = document.getElementById("log-1"); +const logEl2 = document.getElementById("log-2"); +const logEvent = (logEl, e) => { + const item = document.createElement("li"); + item.textContent = `${e.type} — from: ${e.detail.fromIndex}, to: ${e.detail.toIndex}`; + logEl.prepend(item); +}; + +// Hierarchical: focusEl is the ul (ancestor of items) +const focusEl1 = widget1El.querySelector("ul"); +const nav1 = (0, _makeupActiveDescendant.createLinear)(widget1El, focusEl1, focusEl1, "li"); +(0, _makeupPreventScrollKeys.add)(focusEl1); +["activeDescendantInit", "activeDescendantChange", "activeDescendantReset", "activeDescendantMutation"].forEach(eventName => widget1El.addEventListener(eventName, e => logEvent(logEl1, e))); + +// Programmatic: focusEl is the input (not an ancestor of items) +const focusEl2 = widget2El.querySelector("input[type='text']"); +const containerEl2 = widget2El.querySelector("ul"); +const nav2 = (0, _makeupActiveDescendant.createLinear)(widget2El, focusEl2, containerEl2, "li", { + ignoreByDelegateSelector: 'input[type="button"]' }); -append.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const list = el.querySelector("ul"); - const newListItem = document.createElement("li"); - newListItem.setAttribute("role", "option"); - const numListItems = parseInt(list.querySelectorAll("li").length, 10); - newListItem.innerText = `Item ${numListItems + 1}`; - list.appendChild(newListItem); +(0, _makeupPreventScrollKeys.add)(focusEl2); +["activeDescendantInit", "activeDescendantChange", "activeDescendantReset", "activeDescendantMutation"].forEach(eventName => widget2El.addEventListener(eventName, e => logEvent(logEl2, e))); + +// Controls — apply to both widgets +const navs = [nav1, nav2]; +const widgetEls = [widget1El, widget2El]; +document.getElementById("append").addEventListener("click", () => { + widgetEls.forEach(el => { + const ul = el.querySelector("ul"); + const item = document.createElement("li"); + item.setAttribute("role", "option"); + item.textContent = `Item ${ul.children.length + 1}`; + ul.appendChild(item); }); }); -removeFirst.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const list = el.querySelector("ul"); - const node = list.firstElementChild; - list.removeChild(node); +document.getElementById("prepend").addEventListener("click", () => { + widgetEls.forEach(el => { + const ul = el.querySelector("ul"); + const item = document.createElement("li"); + item.setAttribute("role", "option"); + item.textContent = `Item ${ul.children.length + 1}`; + ul.insertBefore(item, ul.firstElementChild); }); }); -removeLast.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const list = el.querySelector("ul"); - const node = list.lastElementChild; - list.removeChild(node); +document.getElementById("removeFirst").addEventListener("click", () => { + widgetEls.forEach(el => { + const first = el.querySelector("ul").firstElementChild; + if (first) first.remove(); }); }); -disableCurrent.addEventListener("click", function () { - navs.forEach(function (nav) { - if (nav.currentItem) nav.currentItem.setAttribute("aria-disabled", "true"); +document.getElementById("removeLast").addEventListener("click", () => { + widgetEls.forEach(el => { + const last = el.querySelector("ul").lastElementChild; + if (last) last.remove(); }); }); -widgetEls.forEach(function (el) { - el.addEventListener("activeDescendantInit", log); - el.addEventListener("activeDescendantChange", log); - el.addEventListener("activeDescendantReset", log); - el.addEventListener("activeDescendantMutation", log); - const widget = ActiveDescendant.createLinear(el, el.querySelector("input") || el.querySelector("ul"), el.querySelector("ul"), "li", { - nonEmittingElementSelector: 'input[type="button"]' - }); - navs.push(widget); +document.getElementById("disableCurrent").addEventListener("click", () => { + navs.forEach(nav => nav.currentItem?.setAttribute("aria-disabled", "true")); }); -wrapCheckbox.addEventListener("change", function (e) { - navs.forEach(function (nav) { - nav.wrap = e.target.checked; - }); +document.getElementById("wrap").addEventListener("change", e => { + navs.forEach(nav => nav.wrap = e.target.checked); +}); +document.getElementById("clear-1").addEventListener("click", () => { + logEl1.innerHTML = ""; +}); +document.getElementById("clear-2").addEventListener("click", () => { + logEl2.innerHTML = ""; }); /******/ })() ; diff --git a/docs/core/makeup-active-descendant/index.min.js.map b/docs/core/makeup-active-descendant/index.min.js.map index 3853b6a8..97c611d7 100644 --- a/docs/core/makeup-active-descendant/index.min.js.map +++ b/docs/core/makeup-active-descendant/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-active-descendant/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,gDAAgD,mBAAO,CAAC,GAA2B;AACnF,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;ACxKa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;ACrEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,yCAAyC,mBAAO,CAAC,GAAoB;AACrE,0CAA0C,mBAAO,CAAC,GAAqB;AACvE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA,iBAAiB,uBAAuB;AACxC,mCAAmC;;AAEnC,iBAAiB,aAAa;AAC9B;;AAEA,iBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;;ACjXa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;UCvCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,+CAA+C,mBAAO,CAAC,GAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC,iBAAiB;AACrD;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC,iBAAiB;AACrD;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,CAAC;AACD;AACA;AACA;AACA,GAAG;AACH,CAAC,E","sources":["webpack://root/./packages/core/makeup-active-descendant/dist/cjs/index.js","webpack://root/./packages/core/makeup-active-descendant/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-active-descendant/node_modules/makeup-key-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-active-descendant/node_modules/makeup-navigation-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-active-descendant/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-active-descendant/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar NavigationEmitter = _interopRequireWildcard(require(\"makeup-navigation-emitter\"));\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n activeDescendantClassName: \"active-descendant\",\n autoInit: \"none\",\n autoReset: \"none\",\n autoScroll: false,\n axis: \"both\",\n wrap: false\n};\nfunction onModelInit(e) {\n const {\n items,\n toIndex\n } = e.detail;\n const itemEl = items[toIndex];\n if (itemEl) {\n itemEl.classList.add(this._options.activeDescendantClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantInit\", {\n detail: e.detail\n }));\n}\nfunction onModelChange(e) {\n const {\n fromIndex,\n toIndex\n } = e.detail;\n const fromItem = this.items[fromIndex];\n const toItem = this.items[toIndex];\n if (fromItem) {\n fromItem.classList.remove(this._options.activeDescendantClassName);\n }\n if (toItem) {\n toItem.classList.add(this._options.activeDescendantClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", toItem.id);\n if (this._options.autoScroll && this._itemContainerEl) {\n this._itemContainerEl.scrollTop = toItem.offsetTop - this._itemContainerEl.offsetHeight / 2;\n }\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantChange\", {\n detail: e.detail\n }));\n}\nfunction onModelReset(e) {\n const toIndex = e.detail.toIndex;\n const activeClassName = this._options.activeDescendantClassName;\n this.items.forEach(function (el) {\n el.classList.remove(activeClassName);\n });\n if (toIndex !== null && toIndex !== -1) {\n const itemEl = this.items[toIndex];\n itemEl.classList.add(activeClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n } else {\n this._focusEl.removeAttribute(\"aria-activedescendant\");\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantReset\", {\n detail: e.detail\n }));\n}\nfunction onModelMutation(e) {\n const {\n toIndex\n } = e.detail;\n const activeDescendantClassName = this._options.activeDescendantClassName;\n this.items.forEach(function (item, index) {\n (0, _makeupNextId.default)(item);\n if (index !== toIndex) {\n item.classList.remove(activeDescendantClassName);\n } else {\n item.classList.add(activeDescendantClassName);\n }\n });\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantMutation\", {\n detail: e.detail\n }));\n}\nclass ActiveDescendant {\n constructor(el) {\n this._el = el;\n this._onMutationListener = onModelMutation.bind(this);\n this._onChangeListener = onModelChange.bind(this);\n this._onResetListener = onModelReset.bind(this);\n this._onInitListener = onModelInit.bind(this);\n this._el.addEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.addEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.addEventListener(\"navigationModelReset\", this._onResetListener);\n this._el.addEventListener(\"navigationModelInit\", this._onInitListener);\n }\n destroy() {\n this._el.removeEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.removeEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.removeEventListener(\"navigationModelReset\", this._onResetListener);\n this._el.removeEventListener(\"navigationModelInit\", this._onInitListener);\n }\n}\nclass LinearActiveDescendant extends ActiveDescendant {\n constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n super(el);\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this._focusEl = focusEl;\n this._itemContainerEl = itemContainerEl;\n this._itemSelector = itemSelector;\n\n // ensure container has an id\n (0, _makeupNextId.default)(this._itemContainerEl);\n\n // if programmatic relationship set aria-owns\n if (this._itemContainerEl !== this._focusEl) {\n focusEl.setAttribute(\"aria-owns\", this._itemContainerEl.id);\n }\n this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {\n autoInit: this._options.autoInit,\n autoReset: this._options.autoReset,\n axis: this._options.axis,\n ignoreByDelegateSelector: this._options.ignoreByDelegateSelector,\n wrap: this._options.wrap\n });\n\n // ensure each item has an id\n this.items.forEach(function (itemEl) {\n (0, _makeupNextId.default)(itemEl);\n });\n }\n get index() {\n return this._navigationEmitter.model.index;\n }\n set index(newIndex) {\n this._navigationEmitter.model.index = newIndex;\n }\n reset() {\n this._navigationEmitter.model.reset();\n }\n get currentItem() {\n return this._navigationEmitter.model.currentItem;\n }\n get items() {\n return this._navigationEmitter.model.items;\n }\n set wrap(newWrap) {\n this._navigationEmitter.model.options.wrap = newWrap;\n }\n destroy() {\n super.destroy();\n this._navigationEmitter.destroy();\n }\n}\n\n/*\nclass GridActiveDescendant extends ActiveDescendant {\n constructor(el, focusEl, containerEl, rowSelector, cellSelector) {\n super(el);\n }\n}\n*/\n\nfunction createLinear(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n return new LinearActiveDescendant(el, focusEl, itemContainerEl, itemSelector, selectedOptions);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n if (!evt.shiftKey) {\n const key = evt.key;\n switch (key) {\n case \"Enter\":\n case \"Escape\":\n case \"PageUp\":\n case \"PageDown\":\n case \"End\":\n case \"Home\":\n case \"ArrowLeft\":\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"ArrowDown\":\n el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n detail: evt,\n bubbles: true\n }));\n break;\n case \" \":\n el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n detail: evt,\n bubbles: true\n }));\n break;\n default:\n return;\n }\n }\n}\nfunction onKeyDown(e) {\n onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n addKeyDown(el);\n addKeyUp(el);\n}\nfunction remove(el) {\n removeKeyDown(el);\n removeKeyUp(el);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar KeyEmitter = _interopRequireWildcard(require(\"makeup-key-emitter\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n axis: \"both\",\n autoInit: \"interactive\",\n autoReset: \"current\",\n ignoreByDelegateSelector: null,\n wrap: false\n};\nfunction isItemNavigable(el) {\n return !el.hidden && el.getAttribute(\"aria-disabled\") !== \"true\";\n}\nfunction isIndexNavigable(items, index) {\n return index >= 0 && index < items.length ? isItemNavigable(items[index]) : false;\n}\nfunction findNavigableItems(items) {\n return items.filter(isItemNavigable);\n}\nfunction findFirstNavigableIndex(items) {\n return items.findIndex(item => isItemNavigable(item));\n}\nfunction findLastNavigableIndex(items) {\n // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it\n return items.indexOf(findNavigableItems(items).reverse()[0]);\n}\nfunction findIndexByAttribute(items, attribute, value) {\n return items.findIndex(item => isItemNavigable(item) && item.getAttribute(attribute) === value);\n}\nfunction findFirstNavigableAriaCheckedIndex(items) {\n return findIndexByAttribute(items, \"aria-checked\", \"true\");\n}\nfunction findFirstNavigableAriaSelectedIndex(items) {\n return findIndexByAttribute(items, \"aria-selected\", \"true\");\n}\nfunction findIgnoredByDelegateItems(el, options) {\n return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];\n}\nfunction findPreviousNavigableIndex(items, index, wrap) {\n let previousNavigableIndex = -1;\n if (index === null || atStart(items, index)) {\n if (wrap === true) {\n previousNavigableIndex = findLastNavigableIndex(items);\n }\n } else {\n let i = index;\n while (--i >= 0) {\n if (isItemNavigable(items[i])) {\n previousNavigableIndex = i;\n break;\n }\n }\n }\n return previousNavigableIndex;\n}\nfunction findNextNavigableIndex(items, index, wrap) {\n let nextNavigableIndex = -1;\n if (index === null) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n } else if (atEnd(items, index)) {\n if (wrap === true) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n }\n } else {\n let i = index;\n while (++i < items.length) {\n if (isItemNavigable(items[i])) {\n nextNavigableIndex = i;\n break;\n }\n }\n }\n return nextNavigableIndex;\n}\n\n// returning -1 means not found\nfunction findIndexPositionByType(typeOrNum, items, currentIndex) {\n let index = -1;\n switch (typeOrNum) {\n case \"none\":\n index = null;\n break;\n case \"current\":\n index = currentIndex;\n break;\n case \"interactive\":\n index = findFirstNavigableIndex(items);\n break;\n case \"ariaChecked\":\n index = findFirstNavigableAriaCheckedIndex(items);\n break;\n case \"ariaSelected\":\n index = findFirstNavigableAriaSelectedIndex(items);\n break;\n case \"ariaSelectedOrInteractive\":\n index = findFirstNavigableAriaSelectedIndex(items);\n index = index === -1 ? findFirstNavigableIndex(items) : index;\n break;\n default:\n index = typeof typeOrNum === \"number\" || typeOrNum === null ? typeOrNum : -1;\n }\n return index;\n}\nfunction atStart(items, index) {\n return index === findFirstNavigableIndex(items);\n}\nfunction atEnd(items, index) {\n return index === findLastNavigableIndex(items);\n}\nfunction onKeyPrev(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onKeyNext(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onClick(e) {\n const itemIndex = this.indexOf(e.target.closest(this._itemSelector));\n if (isIndexNavigable(this.items, itemIndex)) {\n this.index = itemIndex;\n }\n}\nfunction onKeyHome(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findFirstNavigableIndex(this.items);\n }\n}\nfunction onKeyEnd(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findLastNavigableIndex(this.items);\n }\n}\nfunction onFocusExit() {\n if (this.options.autoReset !== null) {\n this.reset();\n }\n}\nfunction onMutation(e) {\n const fromIndex = this.index;\n let toIndex = this.index;\n // https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n const {\n addedNodes,\n attributeName,\n removedNodes,\n target,\n type\n } = e[0];\n if (type === \"attributes\") {\n if (target === this.currentItem) {\n if (attributeName === \"aria-disabled\") {\n // current item was disabled - keep it as current index (until a keyboard navigation happens)\n toIndex = this.index;\n } else if (attributeName === \"hidden\") {\n // current item was hidden and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n }\n } else {\n toIndex = this.index;\n }\n } else if (type === \"childList\") {\n if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {\n // current item was removed and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n // nodes were added and/or removed - keep current item and resync its index\n toIndex = this.indexOf(this._cachedElement);\n }\n }\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n}\nclass NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n /** @member {typeof defaultOptions} */\n this.options = Object.assign({}, defaultOptions, selectedOptions);\n\n /** @member {HTMLElement} */\n this._el = el;\n\n /** @member {string} */\n this._itemSelector = itemSelector;\n }\n}\nclass LinearNavigationModel extends NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n super(el, itemSelector, selectedOptions);\n const fromIndex = this._index;\n const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);\n\n // do not use setter as it will trigger a change event\n this._index = toIndex;\n\n // always keep an element reference to the last item (for use in mutation observer)\n // todo: convert index to Tuple to store last/current values instead?\n this._cachedElement = this.items[toIndex];\n this._el.dispatchEvent(new CustomEvent(\"navigationModelInit\", {\n bubbles: false,\n detail: {\n firstInteractiveIndex: this.firstNavigableIndex,\n fromIndex,\n items: this.items,\n toIndex\n }\n }));\n }\n get currentItem() {\n return this.items[this.index];\n }\n\n // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed\n get items() {\n return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n }\n get index() {\n return this._index;\n }\n\n /**\n * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)\n */\n set index(toIndex) {\n if (toIndex === this.index) {\n return;\n } else if (!isIndexNavigable(this.items, toIndex)) {\n // no-op. throw exception?\n } else {\n const fromIndex = this.index;\n // update cached element reference (for use in mutation observer if DOM node gets removed)\n this._cachedElement = this.items[toIndex];\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n indexOf(element) {\n return this.items.indexOf(element);\n }\n reset() {\n const fromIndex = this.index;\n const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);\n if (toIndex !== fromIndex) {\n // do not use setter as it will trigger a navigationModelChange event\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n}\n\n// 2D Grid Model will go here\n\n/*\nclass GridModel extends NavigationModel {\n constructor(el, rowSelector, colSelector) {\n super();\n this._coords = null;\n }\n}\n*/\n\nclass NavigationEmitter {\n /**\n * @param {HTMLElement} el\n * @param {LinearNavigationModel} model\n */\n constructor(el, model) {\n this.model = model;\n this.el = el;\n this._keyPrevListener = onKeyPrev.bind(model);\n this._keyNextListener = onKeyNext.bind(model);\n this._keyHomeListener = onKeyHome.bind(model);\n this._keyEndListener = onKeyEnd.bind(model);\n this._clickListener = onClick.bind(model);\n this._focusExitListener = onFocusExit.bind(model);\n this._observer = new MutationObserver(onMutation.bind(model));\n KeyEmitter.addKeyDown(this.el);\n ExitEmitter.addFocusExit(this.el);\n const axis = model.options.axis;\n if (axis === \"both\" || axis === \"x\") {\n this.el.addEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n }\n if (axis === \"both\" || axis === \"y\") {\n this.el.addEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n }\n this.el.addEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.addEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.addEventListener(\"click\", this._clickListener);\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n this._observer.observe(this.el, {\n childList: true,\n subtree: true,\n attributeFilter: [\"aria-disabled\", \"hidden\"],\n attributes: true,\n attributeOldValue: true\n });\n }\n destroy() {\n KeyEmitter.removeKeyDown(this.el);\n ExitEmitter.removeFocusExit(this.el);\n this.el.removeEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.removeEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.removeEventListener(\"click\", this._clickListener);\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n this._observer.disconnect();\n }\n}\nfunction createLinear(el, itemSelector, selectedOptions) {\n const model = new LinearNavigationModel(el, itemSelector, selectedOptions);\n return new NavigationEmitter(el, model);\n}\n\n/*\nstatic createGrid(el, rowSelector, colSelector, selectedOptions) {\n return null;\n}\n*/\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar ActiveDescendant = _interopRequireWildcard(require(\"makeup-active-descendant\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// REQUIRE\n//const ActiveDescendant = require('makeup-active-descendant');\n\n// IMPORT\n\nconst navs = [];\nconst append = document.getElementById(\"append\");\nconst prepend = document.getElementById(\"prepend\");\nconst removeFirst = document.getElementById(\"removeFirst\");\nconst removeLast = document.getElementById(\"removeLast\");\nconst widgetEls = document.querySelectorAll(\".widget\");\nconst wrapCheckbox = document.getElementById(\"wrap\");\nconst log = e => console.log(e.type, e.detail);\nprepend.addEventListener(\"click\", function () {\n widgetEls.forEach(function (el) {\n const list = el.querySelector(\"ul\");\n const newListItem = document.createElement(\"li\");\n newListItem.setAttribute(\"role\", \"option\");\n const numListItems = parseInt(list.querySelectorAll(\"li\").length, 10);\n newListItem.innerText = `Item ${numListItems + 1}`;\n list.insertBefore(newListItem, list.children[0]);\n });\n});\nappend.addEventListener(\"click\", function () {\n widgetEls.forEach(function (el) {\n const list = el.querySelector(\"ul\");\n const newListItem = document.createElement(\"li\");\n newListItem.setAttribute(\"role\", \"option\");\n const numListItems = parseInt(list.querySelectorAll(\"li\").length, 10);\n newListItem.innerText = `Item ${numListItems + 1}`;\n list.appendChild(newListItem);\n });\n});\nremoveFirst.addEventListener(\"click\", function () {\n widgetEls.forEach(function (el) {\n const list = el.querySelector(\"ul\");\n const node = list.firstElementChild;\n list.removeChild(node);\n });\n});\nremoveLast.addEventListener(\"click\", function () {\n widgetEls.forEach(function (el) {\n const list = el.querySelector(\"ul\");\n const node = list.lastElementChild;\n list.removeChild(node);\n });\n});\ndisableCurrent.addEventListener(\"click\", function () {\n navs.forEach(function (nav) {\n if (nav.currentItem) nav.currentItem.setAttribute(\"aria-disabled\", \"true\");\n });\n});\nwidgetEls.forEach(function (el) {\n el.addEventListener(\"activeDescendantInit\", log);\n el.addEventListener(\"activeDescendantChange\", log);\n el.addEventListener(\"activeDescendantReset\", log);\n el.addEventListener(\"activeDescendantMutation\", log);\n const widget = ActiveDescendant.createLinear(el, el.querySelector(\"input\") || el.querySelector(\"ul\"), el.querySelector(\"ul\"), \"li\", {\n nonEmittingElementSelector: 'input[type=\"button\"]'\n });\n navs.push(widget);\n});\nwrapCheckbox.addEventListener(\"change\", function (e) {\n navs.forEach(function (nav) {\n nav.wrap = e.target.checked;\n });\n});"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-active-descendant/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,+BAA+B,mBAAO,CAAC,GAA2B;AAClE,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;AC3Ka;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;ACrEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,yCAAyC,mBAAO,CAAC,GAAoB;AACrE,0CAA0C,mBAAO,CAAC,GAAqB;AACvE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA,iBAAiB,uBAAuB;AACxC,mCAAmC;;AAEnC,iBAAiB,aAAa;AAC9B;;AAEA,iBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;;ACjXa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;;ACvCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,cAAc,GAAG,WAAW;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA,cAAc;;;;;;;UCnBd;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,8BAA8B,mBAAO,CAAC,GAA0B;AAChE,+BAA+B,mBAAO,CAAC,GAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,QAAQ,UAAU,mBAAmB,QAAQ,iBAAiB;AACtF;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,uBAAuB;AACtD;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,+BAA+B,uBAAuB;AACtD;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-active-descendant/dist/cjs/index.js","webpack://root/./packages/core/makeup-active-descendant/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-active-descendant/node_modules/makeup-key-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-active-descendant/node_modules/makeup-navigation-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-active-descendant/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/./packages/core/makeup-prevent-scroll-keys/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-active-descendant/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar _makeupNavigationEmitter = require(\"makeup-navigation-emitter\");\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n activeDescendantClassName: \"active-descendant\",\n autoInit: \"none\",\n autoReset: \"none\",\n autoScroll: false,\n axis: \"both\",\n ignoreByDelegateSelector: null,\n wrap: false\n};\nfunction onModelInit(e) {\n const {\n items,\n toIndex\n } = e.detail;\n const itemEl = items[toIndex];\n if (itemEl) {\n itemEl.classList.add(this._options.activeDescendantClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantInit\", {\n detail: e.detail\n }));\n}\nfunction onModelChange(e) {\n const {\n fromIndex,\n toIndex\n } = e.detail;\n const fromItem = this.items[fromIndex];\n const toItem = this.items[toIndex];\n if (fromItem) {\n fromItem.classList.remove(this._options.activeDescendantClassName);\n }\n if (toItem) {\n toItem.classList.add(this._options.activeDescendantClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", toItem.id);\n if (this._options.autoScroll && this._itemContainerEl) {\n this._itemContainerEl.scrollTop = toItem.offsetTop - this._itemContainerEl.offsetHeight / 2;\n }\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantChange\", {\n detail: e.detail\n }));\n}\nfunction onModelReset(e) {\n const toIndex = e.detail.toIndex;\n const activeClassName = this._options.activeDescendantClassName;\n this.items.forEach(el => {\n el.classList.remove(activeClassName);\n });\n if (toIndex !== null && toIndex !== -1) {\n const itemEl = this.items[toIndex];\n itemEl.classList.add(activeClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n } else {\n this._focusEl.removeAttribute(\"aria-activedescendant\");\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantReset\", {\n detail: e.detail\n }));\n}\nfunction onModelMutation(e) {\n const {\n toIndex\n } = e.detail;\n const activeDescendantClassName = this._options.activeDescendantClassName;\n this.items.forEach((item, index) => {\n (0, _makeupNextId.default)(item);\n if (index !== toIndex) {\n item.classList.remove(activeDescendantClassName);\n } else {\n item.classList.add(activeDescendantClassName);\n }\n });\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantMutation\", {\n detail: e.detail\n }));\n}\nclass ActiveDescendant {\n constructor(el) {\n this._el = el;\n this._onMutationListener = onModelMutation.bind(this);\n this._onChangeListener = onModelChange.bind(this);\n this._onResetListener = onModelReset.bind(this);\n this._onInitListener = onModelInit.bind(this);\n this._el.addEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.addEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.addEventListener(\"navigationModelReset\", this._onResetListener);\n this._el.addEventListener(\"navigationModelInit\", this._onInitListener);\n }\n destroy() {\n this._el.removeEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.removeEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.removeEventListener(\"navigationModelReset\", this._onResetListener);\n this._el.removeEventListener(\"navigationModelInit\", this._onInitListener);\n }\n}\nclass LinearActiveDescendant extends ActiveDescendant {\n constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n super(el);\n this._options = {\n ...defaultOptions,\n ...selectedOptions\n };\n this._focusEl = focusEl;\n this._itemContainerEl = itemContainerEl;\n this._itemSelector = itemSelector;\n\n // ensure container has an id\n (0, _makeupNextId.default)(this._itemContainerEl);\n\n // if programmatic relationship set aria-owns\n if (this._itemContainerEl !== this._focusEl) {\n focusEl.setAttribute(\"aria-owns\", this._itemContainerEl.id);\n }\n this._navigationEmitter = (0, _makeupNavigationEmitter.createLinear)(el, itemSelector, {\n autoInit: this._options.autoInit,\n autoReset: this._options.autoReset,\n axis: this._options.axis,\n ignoreByDelegateSelector: this._options.ignoreByDelegateSelector,\n wrap: this._options.wrap\n });\n\n // ensure each item has an id\n this.items.forEach(itemEl => {\n (0, _makeupNextId.default)(itemEl);\n });\n }\n get index() {\n return this._navigationEmitter.model.index;\n }\n set index(newIndex) {\n this._navigationEmitter.model.index = newIndex;\n }\n reset() {\n this._navigationEmitter.model.reset();\n }\n get currentItem() {\n return this._navigationEmitter.model.currentItem;\n }\n get items() {\n return this._navigationEmitter.model.items;\n }\n set wrap(newWrap) {\n this._navigationEmitter.model.options.wrap = newWrap;\n }\n destroy() {\n super.destroy();\n this._navigationEmitter.destroy();\n }\n}\n\n/*\nclass GridActiveDescendant extends ActiveDescendant {\n constructor(el, focusEl, containerEl, rowSelector, cellSelector) {\n super(el);\n }\n}\n*/\n\nfunction createLinear(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n return new LinearActiveDescendant(el, focusEl, itemContainerEl, itemSelector, selectedOptions);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n if (!evt.shiftKey) {\n const key = evt.key;\n switch (key) {\n case \"Enter\":\n case \"Escape\":\n case \"PageUp\":\n case \"PageDown\":\n case \"End\":\n case \"Home\":\n case \"ArrowLeft\":\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"ArrowDown\":\n el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n detail: evt,\n bubbles: true\n }));\n break;\n case \" \":\n el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n detail: evt,\n bubbles: true\n }));\n break;\n default:\n return;\n }\n }\n}\nfunction onKeyDown(e) {\n onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n addKeyDown(el);\n addKeyUp(el);\n}\nfunction remove(el) {\n removeKeyDown(el);\n removeKeyUp(el);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar KeyEmitter = _interopRequireWildcard(require(\"makeup-key-emitter\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n axis: \"both\",\n autoInit: \"interactive\",\n autoReset: \"current\",\n ignoreByDelegateSelector: null,\n wrap: false\n};\nfunction isItemNavigable(el) {\n return !el.hidden && el.getAttribute(\"aria-disabled\") !== \"true\";\n}\nfunction isIndexNavigable(items, index) {\n return index >= 0 && index < items.length ? isItemNavigable(items[index]) : false;\n}\nfunction findNavigableItems(items) {\n return items.filter(isItemNavigable);\n}\nfunction findFirstNavigableIndex(items) {\n return items.findIndex(item => isItemNavigable(item));\n}\nfunction findLastNavigableIndex(items) {\n // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it\n return items.indexOf(findNavigableItems(items).reverse()[0]);\n}\nfunction findIndexByAttribute(items, attribute, value) {\n return items.findIndex(item => isItemNavigable(item) && item.getAttribute(attribute) === value);\n}\nfunction findFirstNavigableAriaCheckedIndex(items) {\n return findIndexByAttribute(items, \"aria-checked\", \"true\");\n}\nfunction findFirstNavigableAriaSelectedIndex(items) {\n return findIndexByAttribute(items, \"aria-selected\", \"true\");\n}\nfunction findIgnoredByDelegateItems(el, options) {\n return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];\n}\nfunction findPreviousNavigableIndex(items, index, wrap) {\n let previousNavigableIndex = -1;\n if (index === null || atStart(items, index)) {\n if (wrap === true) {\n previousNavigableIndex = findLastNavigableIndex(items);\n }\n } else {\n let i = index;\n while (--i >= 0) {\n if (isItemNavigable(items[i])) {\n previousNavigableIndex = i;\n break;\n }\n }\n }\n return previousNavigableIndex;\n}\nfunction findNextNavigableIndex(items, index, wrap) {\n let nextNavigableIndex = -1;\n if (index === null) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n } else if (atEnd(items, index)) {\n if (wrap === true) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n }\n } else {\n let i = index;\n while (++i < items.length) {\n if (isItemNavigable(items[i])) {\n nextNavigableIndex = i;\n break;\n }\n }\n }\n return nextNavigableIndex;\n}\n\n// returning -1 means not found\nfunction findIndexPositionByType(typeOrNum, items, currentIndex) {\n let index = -1;\n switch (typeOrNum) {\n case \"none\":\n index = null;\n break;\n case \"current\":\n index = currentIndex;\n break;\n case \"interactive\":\n index = findFirstNavigableIndex(items);\n break;\n case \"ariaChecked\":\n index = findFirstNavigableAriaCheckedIndex(items);\n break;\n case \"ariaSelected\":\n index = findFirstNavigableAriaSelectedIndex(items);\n break;\n case \"ariaSelectedOrInteractive\":\n index = findFirstNavigableAriaSelectedIndex(items);\n index = index === -1 ? findFirstNavigableIndex(items) : index;\n break;\n default:\n index = typeof typeOrNum === \"number\" || typeOrNum === null ? typeOrNum : -1;\n }\n return index;\n}\nfunction atStart(items, index) {\n return index === findFirstNavigableIndex(items);\n}\nfunction atEnd(items, index) {\n return index === findLastNavigableIndex(items);\n}\nfunction onKeyPrev(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onKeyNext(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onClick(e) {\n const itemIndex = this.indexOf(e.target.closest(this._itemSelector));\n if (isIndexNavigable(this.items, itemIndex)) {\n this.index = itemIndex;\n }\n}\nfunction onKeyHome(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findFirstNavigableIndex(this.items);\n }\n}\nfunction onKeyEnd(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findLastNavigableIndex(this.items);\n }\n}\nfunction onFocusExit() {\n if (this.options.autoReset !== null) {\n this.reset();\n }\n}\nfunction onMutation(e) {\n const fromIndex = this.index;\n let toIndex = this.index;\n // https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n const {\n addedNodes,\n attributeName,\n removedNodes,\n target,\n type\n } = e[0];\n if (type === \"attributes\") {\n if (target === this.currentItem) {\n if (attributeName === \"aria-disabled\") {\n // current item was disabled - keep it as current index (until a keyboard navigation happens)\n toIndex = this.index;\n } else if (attributeName === \"hidden\") {\n // current item was hidden and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n }\n } else {\n toIndex = this.index;\n }\n } else if (type === \"childList\") {\n if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {\n // current item was removed and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n // nodes were added and/or removed - keep current item and resync its index\n toIndex = this.indexOf(this._cachedElement);\n }\n }\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n}\nclass NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n /** @member {typeof defaultOptions} */\n this.options = Object.assign({}, defaultOptions, selectedOptions);\n\n /** @member {HTMLElement} */\n this._el = el;\n\n /** @member {string} */\n this._itemSelector = itemSelector;\n }\n}\nclass LinearNavigationModel extends NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n super(el, itemSelector, selectedOptions);\n const fromIndex = this._index;\n const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);\n\n // do not use setter as it will trigger a change event\n this._index = toIndex;\n\n // always keep an element reference to the last item (for use in mutation observer)\n // todo: convert index to Tuple to store last/current values instead?\n this._cachedElement = this.items[toIndex];\n this._el.dispatchEvent(new CustomEvent(\"navigationModelInit\", {\n bubbles: false,\n detail: {\n firstInteractiveIndex: this.firstNavigableIndex,\n fromIndex,\n items: this.items,\n toIndex\n }\n }));\n }\n get currentItem() {\n return this.items[this.index];\n }\n\n // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed\n get items() {\n return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n }\n get index() {\n return this._index;\n }\n\n /**\n * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)\n */\n set index(toIndex) {\n if (toIndex === this.index) {\n return;\n } else if (!isIndexNavigable(this.items, toIndex)) {\n // no-op. throw exception?\n } else {\n const fromIndex = this.index;\n // update cached element reference (for use in mutation observer if DOM node gets removed)\n this._cachedElement = this.items[toIndex];\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n indexOf(element) {\n return this.items.indexOf(element);\n }\n reset() {\n const fromIndex = this.index;\n const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);\n if (toIndex !== fromIndex) {\n // do not use setter as it will trigger a navigationModelChange event\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n}\n\n// 2D Grid Model will go here\n\n/*\nclass GridModel extends NavigationModel {\n constructor(el, rowSelector, colSelector) {\n super();\n this._coords = null;\n }\n}\n*/\n\nclass NavigationEmitter {\n /**\n * @param {HTMLElement} el\n * @param {LinearNavigationModel} model\n */\n constructor(el, model) {\n this.model = model;\n this.el = el;\n this._keyPrevListener = onKeyPrev.bind(model);\n this._keyNextListener = onKeyNext.bind(model);\n this._keyHomeListener = onKeyHome.bind(model);\n this._keyEndListener = onKeyEnd.bind(model);\n this._clickListener = onClick.bind(model);\n this._focusExitListener = onFocusExit.bind(model);\n this._observer = new MutationObserver(onMutation.bind(model));\n KeyEmitter.addKeyDown(this.el);\n ExitEmitter.addFocusExit(this.el);\n const axis = model.options.axis;\n if (axis === \"both\" || axis === \"x\") {\n this.el.addEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n }\n if (axis === \"both\" || axis === \"y\") {\n this.el.addEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n }\n this.el.addEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.addEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.addEventListener(\"click\", this._clickListener);\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n this._observer.observe(this.el, {\n childList: true,\n subtree: true,\n attributeFilter: [\"aria-disabled\", \"hidden\"],\n attributes: true,\n attributeOldValue: true\n });\n }\n destroy() {\n KeyEmitter.removeKeyDown(this.el);\n ExitEmitter.removeFocusExit(this.el);\n this.el.removeEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.removeEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.removeEventListener(\"click\", this._clickListener);\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n this._observer.disconnect();\n }\n}\nfunction createLinear(el, itemSelector, selectedOptions) {\n const model = new LinearNavigationModel(el, itemSelector, selectedOptions);\n return new NavigationEmitter(el, model);\n}\n\n/*\nstatic createGrid(el, rowSelector, colSelector, selectedOptions) {\n return null;\n}\n*/\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.remove = exports.add = void 0;\nconst SCROLL_KEYS = new Set([\" \", \"PageUp\", \"PageDown\", \"End\", \"Home\", \"ArrowLeft\", \"ArrowUp\", \"ArrowRight\", \"ArrowDown\"]);\nconst onKeyDown = e => {\n if (SCROLL_KEYS.has(e.key)) {\n e.preventDefault();\n }\n};\nconst add = el => {\n el.addEventListener(\"keydown\", onKeyDown);\n};\nexports.add = add;\nconst remove = el => {\n el.removeEventListener(\"keydown\", onKeyDown);\n};\nexports.remove = remove;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupActiveDescendant = require(\"makeup-active-descendant\");\nvar _makeupPreventScrollKeys = require(\"makeup-prevent-scroll-keys\");\nconst widget1El = document.getElementById(\"widget-1\");\nconst widget2El = document.getElementById(\"widget-2\");\nconst logEl1 = document.getElementById(\"log-1\");\nconst logEl2 = document.getElementById(\"log-2\");\nconst logEvent = (logEl, e) => {\n const item = document.createElement(\"li\");\n item.textContent = `${e.type} — from: ${e.detail.fromIndex}, to: ${e.detail.toIndex}`;\n logEl.prepend(item);\n};\n\n// Hierarchical: focusEl is the ul (ancestor of items)\nconst focusEl1 = widget1El.querySelector(\"ul\");\nconst nav1 = (0, _makeupActiveDescendant.createLinear)(widget1El, focusEl1, focusEl1, \"li\");\n(0, _makeupPreventScrollKeys.add)(focusEl1);\n[\"activeDescendantInit\", \"activeDescendantChange\", \"activeDescendantReset\", \"activeDescendantMutation\"].forEach(eventName => widget1El.addEventListener(eventName, e => logEvent(logEl1, e)));\n\n// Programmatic: focusEl is the input (not an ancestor of items)\nconst focusEl2 = widget2El.querySelector(\"input[type='text']\");\nconst containerEl2 = widget2El.querySelector(\"ul\");\nconst nav2 = (0, _makeupActiveDescendant.createLinear)(widget2El, focusEl2, containerEl2, \"li\", {\n ignoreByDelegateSelector: 'input[type=\"button\"]'\n});\n(0, _makeupPreventScrollKeys.add)(focusEl2);\n[\"activeDescendantInit\", \"activeDescendantChange\", \"activeDescendantReset\", \"activeDescendantMutation\"].forEach(eventName => widget2El.addEventListener(eventName, e => logEvent(logEl2, e)));\n\n// Controls — apply to both widgets\nconst navs = [nav1, nav2];\nconst widgetEls = [widget1El, widget2El];\ndocument.getElementById(\"append\").addEventListener(\"click\", () => {\n widgetEls.forEach(el => {\n const ul = el.querySelector(\"ul\");\n const item = document.createElement(\"li\");\n item.setAttribute(\"role\", \"option\");\n item.textContent = `Item ${ul.children.length + 1}`;\n ul.appendChild(item);\n });\n});\ndocument.getElementById(\"prepend\").addEventListener(\"click\", () => {\n widgetEls.forEach(el => {\n const ul = el.querySelector(\"ul\");\n const item = document.createElement(\"li\");\n item.setAttribute(\"role\", \"option\");\n item.textContent = `Item ${ul.children.length + 1}`;\n ul.insertBefore(item, ul.firstElementChild);\n });\n});\ndocument.getElementById(\"removeFirst\").addEventListener(\"click\", () => {\n widgetEls.forEach(el => {\n const first = el.querySelector(\"ul\").firstElementChild;\n if (first) first.remove();\n });\n});\ndocument.getElementById(\"removeLast\").addEventListener(\"click\", () => {\n widgetEls.forEach(el => {\n const last = el.querySelector(\"ul\").lastElementChild;\n if (last) last.remove();\n });\n});\ndocument.getElementById(\"disableCurrent\").addEventListener(\"click\", () => {\n navs.forEach(nav => nav.currentItem?.setAttribute(\"aria-disabled\", \"true\"));\n});\ndocument.getElementById(\"wrap\").addEventListener(\"change\", e => {\n navs.forEach(nav => nav.wrap = e.target.checked);\n});\ndocument.getElementById(\"clear-1\").addEventListener(\"click\", () => {\n logEl1.innerHTML = \"\";\n});\ndocument.getElementById(\"clear-2\").addEventListener(\"click\", () => {\n logEl2.innerHTML = \"\";\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-exit-emitter/index.html b/docs/core/makeup-exit-emitter/index.html index 972748bd..ea64a639 100644 --- a/docs/core/makeup-exit-emitter/index.html +++ b/docs/core/makeup-exit-emitter/index.html @@ -3,62 +3,53 @@ makeup-exit-emitter demo + + -
        -

        makeup-exit-emitter demo

        +
        +

        core / makeup-exit-emitter

        +

        Emits a focusExit event when keyboard focus leaves an element and all of its descendants.

        - The dotted border marks the confines of a widget. Background will be grey whilst focus remains on or inside - widget. + Note: in some browsers (e.g. Safari), clicking buttons, checkboxes, and radios does not move + keyboard focus.

        + +
        + +

        Focus exit detection

        - Note that a mouse click on buttons, checkboxes and radios does not set focus in some browsers - (e.g. Safari)! + Tab between elements. The widget border highlights while focus is inside; focusExit fires when + focus moves out.

        -
        -
        -

        Test Area

        - - -

        text before widgets

        + -
        - - text inside widget - +
        + +
        -
        - - text inside widget - +
        + +
        -

        text after widgets

        - - + + +
          +
          diff --git a/docs/core/makeup-exit-emitter/index.js b/docs/core/makeup-exit-emitter/index.js index 7510158b..0266063f 100644 --- a/docs/core/makeup-exit-emitter/index.js +++ b/docs/core/makeup-exit-emitter/index.js @@ -1,17 +1,26 @@ -// REQUIRE -//const ExitEmitter = require('makeup-exit-emitter'); +import { addFocusExit } from "makeup-exit-emitter"; -// IMPORT -import * as ExitEmitter from "makeup-exit-emitter"; +const logEl = document.getElementById("log"); + +function logEvent(text) { + const item = document.createElement("li"); + item.textContent = text; + logEl.prepend(item); +} document.querySelectorAll(".widget").forEach((el) => { - ExitEmitter.addFocusExit(el); + addFocusExit(el); - el.addEventListener("focusin", function () { - this.classList.add("focusin"); - }); + el.addEventListener("focusin", () => el.classList.add("widget--active")); - el.addEventListener("focusExit", function () { - this.classList.remove("focusin"); + el.addEventListener("focusExit", (e) => { + el.classList.remove("widget--active"); + const from = e.detail.fromElement?.tagName.toLowerCase() ?? "unknown"; + const to = e.detail.toElement?.tagName.toLowerCase() ?? "window"; + logEvent(`focusExit (${el.id}) — from: ${from}, to: ${to}`); }); }); + +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; +}); diff --git a/docs/core/makeup-exit-emitter/index.min.js b/docs/core/makeup-exit-emitter/index.min.js index ef5a93f9..d75954ac 100644 --- a/docs/core/makeup-exit-emitter/index.min.js +++ b/docs/core/makeup-exit-emitter/index.min.js @@ -14,7 +14,7 @@ exports.addFocusExit = addFocusExit; exports.removeFocusExit = removeFocusExit; var _makeupNextId = _interopRequireDefault(__webpack_require__(334)); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } -const focusExitEmitters = {}; +const focusExitEmitters = new Map(); function doFocusExit(el, fromElement, toElement) { el.dispatchEvent(new CustomEvent("focusExit", { detail: { @@ -65,20 +65,22 @@ class FocusExitEmitter { this.el.removeEventListener("focusin", this.onWidgetFocusInListener); } } + +// TODO: rename to enableFocusExit when module is renamed to makeup-focus-exit function addFocusExit(el) { - let exitEmitter = null; (0, _makeupNextId.default)(el); - if (!focusExitEmitters[el.id]) { - exitEmitter = new FocusExitEmitter(el); - focusExitEmitters[el.id] = exitEmitter; + if (!focusExitEmitters.has(el.id)) { + focusExitEmitters.set(el.id, new FocusExitEmitter(el)); } - return exitEmitter; + return focusExitEmitters.get(el.id); } + +// TODO: rename to disableFocusExit when module is renamed to makeup-focus-exit function removeFocusExit(el) { - const exitEmitter = focusExitEmitters[el.id]; + const exitEmitter = focusExitEmitters.get(el.id); if (exitEmitter) { exitEmitter.removeEventListeners(); - delete focusExitEmitters[el.id]; + focusExitEmitters.delete(el.id); } } @@ -162,22 +164,26 @@ function _default(el) { var __webpack_exports__ = {}; -var ExitEmitter = _interopRequireWildcard(__webpack_require__(923)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } -// REQUIRE -//const ExitEmitter = require('makeup-exit-emitter'); - -// IMPORT - +var _makeupExitEmitter = __webpack_require__(923); +const logEl = document.getElementById("log"); +function logEvent(text) { + const item = document.createElement("li"); + item.textContent = text; + logEl.prepend(item); +} document.querySelectorAll(".widget").forEach(el => { - ExitEmitter.addFocusExit(el); - el.addEventListener("focusin", function () { - this.classList.add("focusin"); - }); - el.addEventListener("focusExit", function () { - this.classList.remove("focusin"); + (0, _makeupExitEmitter.addFocusExit)(el); + el.addEventListener("focusin", () => el.classList.add("widget--active")); + el.addEventListener("focusExit", e => { + el.classList.remove("widget--active"); + const from = e.detail.fromElement?.tagName.toLowerCase() ?? "unknown"; + const to = e.detail.toElement?.tagName.toLowerCase() ?? "window"; + logEvent(`focusExit (${el.id}) — from: ${from}, to: ${to}`); }); }); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; +}); /******/ })() ; //# sourceMappingURL=index.min.js.map \ No newline at end of file diff --git a/docs/core/makeup-exit-emitter/index.min.js.map b/docs/core/makeup-exit-emitter/index.min.js.map index 1c0488aa..b5195480 100644 --- a/docs/core/makeup-exit-emitter/index.min.js.map +++ b/docs/core/makeup-exit-emitter/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-exit-emitter/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;UCvCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,0CAA0C,mBAAO,CAAC,GAAqB;AACvE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH,CAAC,E","sources":["webpack://root/./packages/core/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-exit-emitter/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-exit-emitter/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// REQUIRE\n//const ExitEmitter = require('makeup-exit-emitter');\n\n// IMPORT\n\ndocument.querySelectorAll(\".widget\").forEach(el => {\n ExitEmitter.addFocusExit(el);\n el.addEventListener(\"focusin\", function () {\n this.classList.add(\"focusin\");\n });\n el.addEventListener(\"focusExit\", function () {\n this.classList.remove(\"focusin\");\n });\n});"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-exit-emitter/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC7Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;UCvCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,yBAAyB,mBAAO,CAAC,GAAqB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,MAAM,YAAY,KAAK,QAAQ,GAAG;AAC7D,GAAG;AACH,CAAC;AACD;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-exit-emitter/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-exit-emitter/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = new Map();\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\n\n// TODO: rename to enableFocusExit when module is renamed to makeup-focus-exit\nfunction addFocusExit(el) {\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters.has(el.id)) {\n focusExitEmitters.set(el.id, new FocusExitEmitter(el));\n }\n return focusExitEmitters.get(el.id);\n}\n\n// TODO: rename to disableFocusExit when module is renamed to makeup-focus-exit\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters.get(el.id);\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n focusExitEmitters.delete(el.id);\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupExitEmitter = require(\"makeup-exit-emitter\");\nconst logEl = document.getElementById(\"log\");\nfunction logEvent(text) {\n const item = document.createElement(\"li\");\n item.textContent = text;\n logEl.prepend(item);\n}\ndocument.querySelectorAll(\".widget\").forEach(el => {\n (0, _makeupExitEmitter.addFocusExit)(el);\n el.addEventListener(\"focusin\", () => el.classList.add(\"widget--active\"));\n el.addEventListener(\"focusExit\", e => {\n el.classList.remove(\"widget--active\");\n const from = e.detail.fromElement?.tagName.toLowerCase() ?? \"unknown\";\n const to = e.detail.toElement?.tagName.toLowerCase() ?? \"window\";\n logEvent(`focusExit (${el.id}) — from: ${from}, to: ${to}`);\n });\n});\ndocument.getElementById(\"clear\").addEventListener(\"click\", () => {\n logEl.innerHTML = \"\";\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-expander/index.html b/docs/core/makeup-expander/index.html index 6e82aa47..9a69ec0a 100644 --- a/docs/core/makeup-expander/index.html +++ b/docs/core/makeup-expander/index.html @@ -4,19 +4,17 @@ makeup-expander demo + -
          -

          makeup-expander demo

          +
          +

          core / makeup-expander

          +

          + Creates expand/collapse interactivity between a host element and its content, with support for click, focus, and + hover triggers. +

          -

          Auto Collapse Off

          +
          +

          Click (no auto-collapse)

          +

          Content stays expanded until the host is clicked again.

          - +
          -

          Any kind of HTML control can go inside...

          -

          A link: www.ebay.com

          -

          A button:

          -

          An input:

          -

          A checkbox:

          +

          Expanded content. A link

          -

          Auto Collapse On

          +

          Auto-collapse flyouts

          +

          Each flyout collapses when focus or the mouse leaves.

          +

          Click:

          - +
          -

          Any kind of HTML control can go inside...

          -

          A link: www.ebay.com

          -

          A button:

          -

          An input:

          -

          A checkbox:

          +

          Click flyout. A link

          +

          Focus:

          - +
          -

          Any kind of HTML control can go inside...

          -

          A link: www.ebay.com

          -

          A button:

          -

          An input:

          -

          A checkbox:

          +

          Focus flyout. A link

           +

          Focus or hover:

          - +
          -

          Any kind of HTML control can go inside...

          -

          A link: www.ebay.com

          -

          A button:

          -

          An input:

          -

          A checkbox:

          +

          Focus or hover flyout. A link

           +

          Hover (with stealth button for keyboard access):

          - Hover for Flyout + Hover to expand
          - +
          -

          Any kind of HTML control can go inside...

          -

          A link: www.ebay.com

          -

          A button:

          -

          An input:

          -

          A checkbox:

          +

          Hover flyout. A link

           +

          Click or spacebar (readonly input with icon):

          - - + +
          -

          Any kind of HTML control can go inside...

          -

          A link: www.ebay.com

          -

          A button:

          -

          An input:

          -

          A checkbox:

          +

          Click or spacebar flyout. A link

           -

          UseAriaExpanded=false

          +
          +

          Tooltip (useAriaExpanded=false)

          +

          + Uses a CSS class instead of aria-expanded. Suitable for tooltips where the ARIA role handles state. +

          - +
          -

          A link: www.ebay.com

          +

          Tooltip content.

           + +
          + +

          Events

          +

          expander-expand and expander-collapse fired by any expander on this page.

          +
            +
            diff --git a/docs/core/makeup-expander/index.js b/docs/core/makeup-expander/index.js index 87860561..2f65d736 100644 --- a/docs/core/makeup-expander/index.js +++ b/docs/core/makeup-expander/index.js @@ -1,34 +1,39 @@ -// REQUIRE -// const Expander = require('makeup-expander').default; - -// IMPORT import Expander from "makeup-expander"; const clickExpanderEls = document.querySelectorAll(".expander--click-only"); const focusExpanderEls = document.querySelectorAll(".expander--focus-only"); const hoverExpanderEls = document.querySelectorAll(".expander--hover-only"); -const hoverAndFocusExpanderEls = document.querySelectorAll(".expander--focus-and-hover"); +const focusAndHoverExpanderEls = document.querySelectorAll(".expander--focus-and-hover"); const stealthExpanderEls = document.querySelectorAll(".expander--stealth-only"); const clickAndSpacebarExpanderEls = document.querySelectorAll(".expander--click-and-spacebar"); const tooltipEls = document.querySelectorAll(".expander--tooltip"); + +const logEl = document.getElementById("log"); + +function logEvent(name) { + const item = document.createElement("li"); + item.textContent = name; + logEl.prepend(item); +} + const expanderWidgets = []; expanderWidgets.push(new Expander(clickExpanderEls[0], { expandOnClick: true })); expanderWidgets.push(new Expander(clickExpanderEls[1], { autoCollapse: true, expandOnClick: true })); -focusExpanderEls.forEach(function (el) { +focusExpanderEls.forEach((el) => { expanderWidgets.push(new Expander(el, { autoCollapse: true, expandOnFocus: true })); }); -hoverExpanderEls.forEach(function (el) { +hoverExpanderEls.forEach((el) => { expanderWidgets.push(new Expander(el, { autoCollapse: true, expandOnHover: true })); }); -hoverAndFocusExpanderEls.forEach(function (el) { +focusAndHoverExpanderEls.forEach((el) => { expanderWidgets.push(new Expander(el, { autoCollapse: true, expandOnFocus: true, expandOnHover: true })); }); -stealthExpanderEls.forEach(function (el) { +stealthExpanderEls.forEach((el) => { expanderWidgets.push( new Expander(el, { collapseOnClickOut: true, @@ -39,7 +44,7 @@ stealthExpanderEls.forEach(function (el) { ); }); -clickAndSpacebarExpanderEls.forEach(function (el) { +clickAndSpacebarExpanderEls.forEach((el) => { expanderWidgets.push( new Expander(el, { autoCollapse: true, @@ -50,7 +55,7 @@ clickAndSpacebarExpanderEls.forEach(function (el) { ); }); -tooltipEls.forEach(function (el) { +tooltipEls.forEach((el) => { expanderWidgets.push( new Expander(el, { ariaControls: false, @@ -61,13 +66,13 @@ tooltipEls.forEach(function (el) { expandedClass: "expander__host-container--expanded", }), ); +}); + +expanderWidgets.forEach((widget) => { + widget.el.addEventListener("expander-expand", () => logEvent("expander-expand")); + widget.el.addEventListener("expander-collapse", () => logEvent("expander-collapse")); +}); - expanderWidgets.forEach(function (item) { - item.el.addEventListener("expander-expand", function (e) { - console.log(e); - }); - item.el.addEventListener("expander-collapse", function (e) { - console.log(e); - }); - }); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; }); diff --git a/docs/core/makeup-expander/index.min.js b/docs/core/makeup-expander/index.min.js index 7778357d..f613edde 100644 --- a/docs/core/makeup-expander/index.min.js +++ b/docs/core/makeup-expander/index.min.js @@ -12,9 +12,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports["default"] = void 0; var _makeupNextId = _interopRequireDefault(__webpack_require__(346)); -var ExitEmitter = _interopRequireWildcard(__webpack_require__(654)); +var _makeupExitEmitter = __webpack_require__(654); var _makeupFocusables = _interopRequireDefault(__webpack_require__(436)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } const defaultOptions = { alwaysDoFocusManagement: false, @@ -35,12 +34,12 @@ const defaultOptions = { useAriaExpanded: true }; function onHostKeyDown(e) { - if (e.keyCode === 13 || e.keyCode === 32) { + if (e.key === "Enter" || e.key === " ") { this._keyboardClickFlag = true; } // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here. // careful! if host already triggers click events naturally, we end up with a "double-click". - if (e.keyCode === 32 && this.options.simulateSpacebarClick === true) { + if (e.key === " " && this.options.simulateSpacebarClick === true) { this.hostEl.click(); } } @@ -115,11 +114,14 @@ function manageFocus(focusManagement, contentEl) { } class _default { constructor(el, selectedOptions) { - this.options = Object.assign({}, defaultOptions, selectedOptions); + this.options = { + ...defaultOptions, + ...selectedOptions + }; this.el = el; this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el this.contentEl = el.querySelector(this.options.contentSelector); - ExitEmitter.addFocusExit(this.el); + (0, _makeupExitEmitter.addFocusExit)(this.el); this._hostKeyDownListener = onHostKeyDown.bind(this); this._hostMouseDownListener = onHostMouseDown.bind(this); this._documentClickListener = _onDocumentClick.bind(this); @@ -509,18 +511,19 @@ var __webpack_exports__ = {}; var _makeupExpander = _interopRequireDefault(__webpack_require__(271)); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } -// REQUIRE -// const Expander = require('makeup-expander').default; - -// IMPORT - const clickExpanderEls = document.querySelectorAll(".expander--click-only"); const focusExpanderEls = document.querySelectorAll(".expander--focus-only"); const hoverExpanderEls = document.querySelectorAll(".expander--hover-only"); -const hoverAndFocusExpanderEls = document.querySelectorAll(".expander--focus-and-hover"); +const focusAndHoverExpanderEls = document.querySelectorAll(".expander--focus-and-hover"); const stealthExpanderEls = document.querySelectorAll(".expander--stealth-only"); const clickAndSpacebarExpanderEls = document.querySelectorAll(".expander--click-and-spacebar"); const tooltipEls = document.querySelectorAll(".expander--tooltip"); +const logEl = document.getElementById("log"); +function logEvent(name) { + const item = document.createElement("li"); + item.textContent = name; + logEl.prepend(item); +} const expanderWidgets = []; expanderWidgets.push(new _makeupExpander.default(clickExpanderEls[0], { expandOnClick: true @@ -529,26 +532,26 @@ expanderWidgets.push(new _makeupExpander.default(clickExpanderEls[1], { autoCollapse: true, expandOnClick: true })); -focusExpanderEls.forEach(function (el) { +focusExpanderEls.forEach(el => { expanderWidgets.push(new _makeupExpander.default(el, { autoCollapse: true, expandOnFocus: true })); }); -hoverExpanderEls.forEach(function (el) { +hoverExpanderEls.forEach(el => { expanderWidgets.push(new _makeupExpander.default(el, { autoCollapse: true, expandOnHover: true })); }); -hoverAndFocusExpanderEls.forEach(function (el) { +focusAndHoverExpanderEls.forEach(el => { expanderWidgets.push(new _makeupExpander.default(el, { autoCollapse: true, expandOnFocus: true, expandOnHover: true })); }); -stealthExpanderEls.forEach(function (el) { +stealthExpanderEls.forEach(el => { expanderWidgets.push(new _makeupExpander.default(el, { collapseOnClickOut: true, collapseOnFocusOut: true, @@ -556,7 +559,7 @@ stealthExpanderEls.forEach(function (el) { focusManagement: "focusable" })); }); -clickAndSpacebarExpanderEls.forEach(function (el) { +clickAndSpacebarExpanderEls.forEach(el => { expanderWidgets.push(new _makeupExpander.default(el, { autoCollapse: true, expandOnClick: true, @@ -564,7 +567,7 @@ clickAndSpacebarExpanderEls.forEach(function (el) { expandedClass: "expander__host-container--expanded" })); }); -tooltipEls.forEach(function (el) { +tooltipEls.forEach(el => { expanderWidgets.push(new _makeupExpander.default(el, { ariaControls: false, autoCollapse: true, @@ -573,14 +576,13 @@ tooltipEls.forEach(function (el) { useAriaExpanded: false, expandedClass: "expander__host-container--expanded" })); - expanderWidgets.forEach(function (item) { - item.el.addEventListener("expander-expand", function (e) { - console.log(e); - }); - item.el.addEventListener("expander-collapse", function (e) { - console.log(e); - }); - }); +}); +expanderWidgets.forEach(widget => { + widget.el.addEventListener("expander-expand", () => logEvent("expander-expand")); + widget.el.addEventListener("expander-collapse", () => logEvent("expander-collapse")); +}); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; }); /******/ })() ; diff --git a/docs/core/makeup-expander/index.min.js.map b/docs/core/makeup-expander/index.min.js.map index bc105eef..1ec74891 100644 --- a/docs/core/makeup-expander/index.min.js.map +++ b/docs/core/makeup-expander/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-expander/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,0CAA0C,mBAAO,CAAC,GAAqB;AACvE,+CAA+C,mBAAO,CAAC,GAAmB;AAC1E,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA,IAAI;AACJ;AACA,IAAI;AACJ,2CAA2C,gBAAgB;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA,+DAA+D;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,kDAAkD,WAAW;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;;;;;;;;ACtSF;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;UCvCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,6CAA6C,mBAAO,CAAC,GAAiB;AACtE,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL,GAAG;AACH,CAAC,E","sources":["webpack://root/./packages/core/makeup-expander/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-expander/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n alwaysDoFocusManagement: false,\n ariaControls: true,\n autoCollapse: false,\n collapseOnFocusOut: false,\n collapseOnMouseOut: false,\n collapseOnClickOut: false,\n collapseOnHostReFocus: false,\n contentSelector: \".expander__content\",\n expandedClass: null,\n expandOnClick: false,\n expandOnFocus: false,\n expandOnHover: false,\n focusManagement: null,\n hostSelector: \".expander__host\",\n simulateSpacebarClick: false,\n useAriaExpanded: true\n};\nfunction onHostKeyDown(e) {\n if (e.keyCode === 13 || e.keyCode === 32) {\n this._keyboardClickFlag = true;\n }\n // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here.\n // careful! if host already triggers click events naturally, we end up with a \"double-click\".\n if (e.keyCode === 32 && this.options.simulateSpacebarClick === true) {\n this.hostEl.click();\n }\n}\nfunction onHostMouseDown() {\n this._mouseClickFlag = true;\n}\nfunction onHostClick() {\n this._expandWasKeyboardClickActivated = this._keyboardClickFlag;\n this._expandWasMouseClickActivated = this._mouseClickFlag;\n this._widgetHasKeyboardFocus = this._keyboardClickFlag;\n this.expanded = !this.expanded;\n}\nfunction onHostFocus() {\n this._expandWasFocusActivated = true;\n this.expanded = true;\n}\n\n// NOTE: collapseOnHostReFocus cannot be used when expandOnFocus is true\nfunction onHostReFocus() {\n if (this.expanded && this._widgetHasKeyboardFocus) {\n this.expanded = false;\n }\n}\nfunction onHostHover() {\n clearTimeout(this._mouseLeft);\n this._expandWasHoverActivated = true;\n this.expanded = true;\n}\nfunction onFocusExit() {\n this._widgetHasKeyboardFocus = false;\n this.expanded = false;\n}\nfunction onMouseLeave() {\n clearTimeout(this._mouseLeft);\n this._mouseLeft = setTimeout(() => {\n this.expanded = false;\n }, 300);\n}\nfunction _onDocumentClick(e) {\n if (this.el.contains(e.target) === false) {\n this.expanded = false;\n }\n}\nfunction _onDocumentTouchStart() {\n this.documentClick = true;\n}\nfunction _onDocumentTouchMove() {\n this.documentClick = false;\n}\nfunction _onDocumentTouchEnd(e) {\n if (this.documentClick === true) {\n this.documentClick = false;\n if (this.el.contains(e.target) === false) {\n this.expanded = false;\n }\n }\n}\nfunction manageFocus(focusManagement, contentEl) {\n if (focusManagement === \"content\") {\n contentEl.setAttribute(\"tabindex\", \"-1\");\n contentEl.focus();\n } else if (focusManagement === \"focusable\") {\n (0, _makeupFocusables.default)(contentEl)[0]?.focus();\n } else if (focusManagement === \"interactive\") {\n (0, _makeupFocusables.default)(contentEl, true)[0]?.focus();\n } else if (focusManagement !== null) {\n const el = contentEl.querySelector(`#${focusManagement}`);\n if (el) {\n el.focus();\n }\n }\n}\nclass _default {\n constructor(el, selectedOptions) {\n this.options = Object.assign({}, defaultOptions, selectedOptions);\n this.el = el;\n this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el\n this.contentEl = el.querySelector(this.options.contentSelector);\n ExitEmitter.addFocusExit(this.el);\n this._hostKeyDownListener = onHostKeyDown.bind(this);\n this._hostMouseDownListener = onHostMouseDown.bind(this);\n this._documentClickListener = _onDocumentClick.bind(this);\n this._documentTouchStartListener = _onDocumentTouchStart.bind(this);\n this._documentTouchMoveListener = _onDocumentTouchMove.bind(this);\n this._documentTouchEndListener = _onDocumentTouchEnd.bind(this);\n this._hostClickListener = onHostClick.bind(this);\n this._hostFocusListener = onHostFocus.bind(this);\n this._hostReFocusListener = onHostReFocus.bind(this);\n this._hostHoverListener = onHostHover.bind(this);\n this._focusExitListener = onFocusExit.bind(this);\n this._mouseLeaveListener = onMouseLeave.bind(this);\n if (this.options.useAriaExpanded === true) {\n const initialAriaExpanded = this.hostEl.getAttribute(\"aria-expanded\");\n this._expanded = initialAriaExpanded === \"true\";\n if (initialAriaExpanded === null) {\n this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n }\n } else {\n this._expanded = false;\n }\n if (this.options.ariaControls === true) {\n // ensure the widget has an id\n (0, _makeupNextId.default)(this.el, \"expander\");\n this.contentEl.id = this.contentEl.id || `${this.el.id}-content`;\n this.hostEl.setAttribute(\"aria-controls\", this.contentEl.id);\n }\n this.expandOnClick = this.options.expandOnClick;\n this.expandOnFocus = this.options.expandOnFocus;\n this.expandOnHover = this.options.expandOnHover;\n this.collapseOnHostReFocus = this.options.collapseOnHostReFocus;\n if (this.options.autoCollapse === false) {\n this.collapseOnClickOut = this.options.collapseOnClickOut;\n this.collapseOnFocusOut = this.options.collapseOnFocusOut;\n this.collapseOnMouseOut = this.options.collapseOnMouseOut;\n }\n }\n set expandOnClick(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"keydown\", this._hostKeyDownListener);\n this.hostEl.addEventListener(\"mousedown\", this._hostMouseDownListener);\n this.hostEl.addEventListener(\"click\", this._hostClickListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnClickOut = true;\n this.collapseOnFocusOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"click\", this._hostClickListener);\n this.hostEl.removeEventListener(\"mousedown\", this._hostMouseDownListener);\n this.hostEl.removeEventListener(\"keydown\", this._hostKeyDownListener);\n }\n }\n set expandOnFocus(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"focus\", this._hostFocusListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnClickOut = true;\n this.collapseOnFocusOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"focus\", this._hostFocusListener);\n }\n }\n set collapseOnHostReFocus(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"focus\", this._hostReFocusListener);\n } else {\n this.hostEl.removeEventListener(\"focus\", this._hostReFocusListener);\n }\n }\n set expandOnHover(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n this.contentEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnMouseOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n this.contentEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n }\n }\n set collapseOnClickOut(bool) {\n if (bool === true) {\n document.addEventListener(\"click\", this._documentClickListener);\n document.addEventListener(\"touchstart\", this._documentTouchStartListener);\n document.addEventListener(\"touchmove\", this._documentTouchMoveListener);\n document.addEventListener(\"touchend\", this._documentTouchEndListener);\n } else {\n document.removeEventListener(\"click\", this._documentClickListener);\n document.removeEventListener(\"touchstart\", this._documentTouchStartListener);\n document.removeEventListener(\"touchmove\", this._documentTouchMoveListener);\n document.removeEventListener(\"touchend\", this._documentTouchEndListener);\n }\n }\n set collapseOnFocusOut(bool) {\n if (bool === true) {\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n } else {\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n }\n }\n set collapseOnMouseOut(bool) {\n if (bool === true) {\n this.el.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n this.contentEl.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n } else {\n this.el.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n this.contentEl.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n }\n }\n get expanded() {\n return this._expanded;\n }\n set expanded(bool) {\n if (bool === true && this.expanded === false) {\n if (this.options.useAriaExpanded === true) {\n this.hostEl.setAttribute(\"aria-expanded\", \"true\");\n }\n if (this.options.expandedClass) {\n this.el.classList.add(this.options.expandedClass);\n }\n if (this._expandWasKeyboardClickActivated || this._expandWasMouseClickActivated && this.options.alwaysDoFocusManagement) {\n manageFocus(this.options.focusManagement, this.contentEl);\n }\n this.el.dispatchEvent(new CustomEvent(\"expander-expand\", {\n bubbles: true,\n detail: this.contentEl\n }));\n }\n if (bool === false && this.expanded === true) {\n if (this.options.useAriaExpanded === true) {\n this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n }\n if (this.options.expandedClass) {\n this.el.classList.remove(this.options.expandedClass);\n }\n this.el.dispatchEvent(new CustomEvent(\"expander-collapse\", {\n bubbles: true,\n detail: this.contentEl\n }));\n }\n this._expanded = bool;\n this._expandWasKeyboardClickActivated = false;\n this._expandWasMouseClickActivated = false;\n this._expandWasFocusActivated = false;\n this._expandWasHoverActivated = false;\n this._keyboardClickFlag = false;\n this._mouseClickFlag = false;\n }\n sleep() {\n if (this._destroyed !== true) {\n this.expandOnClick = false;\n this.expandOnFocus = false;\n this.expandOnHover = false;\n this.collapseOnClickOut = false;\n this.collapseOnFocusOut = false;\n this.collapseOnMouseOut = false;\n this.collapseOnHostReFocus = false;\n }\n }\n destroy() {\n this.sleep();\n this._destroyed = true;\n this._hostKeyDownListener = null;\n this._hostMouseDownListener = null;\n this._documentClickListener = null;\n this._documentTouchStartListener = null;\n this._documentTouchMoveListener = null;\n this._documentTouchEndListener = null;\n this._hostClickListener = null;\n this._hostFocusListener = null;\n this._hostReFocusListener = null;\n this._hostHoverListener = null;\n this._focusExitListener = null;\n this._mouseLeaveListener = null;\n this._widgetHasKeyboardFocus = null;\n }\n}\nexports.default = _default;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupExpander = _interopRequireDefault(require(\"makeup-expander\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const Expander = require('makeup-expander').default;\n\n// IMPORT\n\nconst clickExpanderEls = document.querySelectorAll(\".expander--click-only\");\nconst focusExpanderEls = document.querySelectorAll(\".expander--focus-only\");\nconst hoverExpanderEls = document.querySelectorAll(\".expander--hover-only\");\nconst hoverAndFocusExpanderEls = document.querySelectorAll(\".expander--focus-and-hover\");\nconst stealthExpanderEls = document.querySelectorAll(\".expander--stealth-only\");\nconst clickAndSpacebarExpanderEls = document.querySelectorAll(\".expander--click-and-spacebar\");\nconst tooltipEls = document.querySelectorAll(\".expander--tooltip\");\nconst expanderWidgets = [];\nexpanderWidgets.push(new _makeupExpander.default(clickExpanderEls[0], {\n expandOnClick: true\n}));\nexpanderWidgets.push(new _makeupExpander.default(clickExpanderEls[1], {\n autoCollapse: true,\n expandOnClick: true\n}));\nfocusExpanderEls.forEach(function (el) {\n expanderWidgets.push(new _makeupExpander.default(el, {\n autoCollapse: true,\n expandOnFocus: true\n }));\n});\nhoverExpanderEls.forEach(function (el) {\n expanderWidgets.push(new _makeupExpander.default(el, {\n autoCollapse: true,\n expandOnHover: true\n }));\n});\nhoverAndFocusExpanderEls.forEach(function (el) {\n expanderWidgets.push(new _makeupExpander.default(el, {\n autoCollapse: true,\n expandOnFocus: true,\n expandOnHover: true\n }));\n});\nstealthExpanderEls.forEach(function (el) {\n expanderWidgets.push(new _makeupExpander.default(el, {\n collapseOnClickOut: true,\n collapseOnFocusOut: true,\n expandOnClick: true,\n focusManagement: \"focusable\"\n }));\n});\nclickAndSpacebarExpanderEls.forEach(function (el) {\n expanderWidgets.push(new _makeupExpander.default(el, {\n autoCollapse: true,\n expandOnClick: true,\n simulateSpacebarClick: true,\n expandedClass: \"expander__host-container--expanded\"\n }));\n});\ntooltipEls.forEach(function (el) {\n expanderWidgets.push(new _makeupExpander.default(el, {\n ariaControls: false,\n autoCollapse: true,\n expandOnFocus: true,\n expandOnHover: true,\n useAriaExpanded: false,\n expandedClass: \"expander__host-container--expanded\"\n }));\n expanderWidgets.forEach(function (item) {\n item.el.addEventListener(\"expander-expand\", function (e) {\n console.log(e);\n });\n item.el.addEventListener(\"expander-collapse\", function (e) {\n console.log(e);\n });\n });\n});"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-expander/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,yBAAyB,mBAAO,CAAC,GAAqB;AACtD,+CAA+C,mBAAO,CAAC,GAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA,IAAI;AACJ;AACA,IAAI;AACJ,2CAA2C,gBAAgB;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+DAA+D;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,kDAAkD,WAAW;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;;;;;;;;ACxSF;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;UCvCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,6CAA6C,mBAAO,CAAC,GAAiB;AACtE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-expander/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-expander/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nvar _makeupExitEmitter = require(\"makeup-exit-emitter\");\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n alwaysDoFocusManagement: false,\n ariaControls: true,\n autoCollapse: false,\n collapseOnFocusOut: false,\n collapseOnMouseOut: false,\n collapseOnClickOut: false,\n collapseOnHostReFocus: false,\n contentSelector: \".expander__content\",\n expandedClass: null,\n expandOnClick: false,\n expandOnFocus: false,\n expandOnHover: false,\n focusManagement: null,\n hostSelector: \".expander__host\",\n simulateSpacebarClick: false,\n useAriaExpanded: true\n};\nfunction onHostKeyDown(e) {\n if (e.key === \"Enter\" || e.key === \" \") {\n this._keyboardClickFlag = true;\n }\n // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here.\n // careful! if host already triggers click events naturally, we end up with a \"double-click\".\n if (e.key === \" \" && this.options.simulateSpacebarClick === true) {\n this.hostEl.click();\n }\n}\nfunction onHostMouseDown() {\n this._mouseClickFlag = true;\n}\nfunction onHostClick() {\n this._expandWasKeyboardClickActivated = this._keyboardClickFlag;\n this._expandWasMouseClickActivated = this._mouseClickFlag;\n this._widgetHasKeyboardFocus = this._keyboardClickFlag;\n this.expanded = !this.expanded;\n}\nfunction onHostFocus() {\n this._expandWasFocusActivated = true;\n this.expanded = true;\n}\n\n// NOTE: collapseOnHostReFocus cannot be used when expandOnFocus is true\nfunction onHostReFocus() {\n if (this.expanded && this._widgetHasKeyboardFocus) {\n this.expanded = false;\n }\n}\nfunction onHostHover() {\n clearTimeout(this._mouseLeft);\n this._expandWasHoverActivated = true;\n this.expanded = true;\n}\nfunction onFocusExit() {\n this._widgetHasKeyboardFocus = false;\n this.expanded = false;\n}\nfunction onMouseLeave() {\n clearTimeout(this._mouseLeft);\n this._mouseLeft = setTimeout(() => {\n this.expanded = false;\n }, 300);\n}\nfunction _onDocumentClick(e) {\n if (this.el.contains(e.target) === false) {\n this.expanded = false;\n }\n}\nfunction _onDocumentTouchStart() {\n this.documentClick = true;\n}\nfunction _onDocumentTouchMove() {\n this.documentClick = false;\n}\nfunction _onDocumentTouchEnd(e) {\n if (this.documentClick === true) {\n this.documentClick = false;\n if (this.el.contains(e.target) === false) {\n this.expanded = false;\n }\n }\n}\nfunction manageFocus(focusManagement, contentEl) {\n if (focusManagement === \"content\") {\n contentEl.setAttribute(\"tabindex\", \"-1\");\n contentEl.focus();\n } else if (focusManagement === \"focusable\") {\n (0, _makeupFocusables.default)(contentEl)[0]?.focus();\n } else if (focusManagement === \"interactive\") {\n (0, _makeupFocusables.default)(contentEl, true)[0]?.focus();\n } else if (focusManagement !== null) {\n const el = contentEl.querySelector(`#${focusManagement}`);\n if (el) {\n el.focus();\n }\n }\n}\nclass _default {\n constructor(el, selectedOptions) {\n this.options = {\n ...defaultOptions,\n ...selectedOptions\n };\n this.el = el;\n this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el\n this.contentEl = el.querySelector(this.options.contentSelector);\n (0, _makeupExitEmitter.addFocusExit)(this.el);\n this._hostKeyDownListener = onHostKeyDown.bind(this);\n this._hostMouseDownListener = onHostMouseDown.bind(this);\n this._documentClickListener = _onDocumentClick.bind(this);\n this._documentTouchStartListener = _onDocumentTouchStart.bind(this);\n this._documentTouchMoveListener = _onDocumentTouchMove.bind(this);\n this._documentTouchEndListener = _onDocumentTouchEnd.bind(this);\n this._hostClickListener = onHostClick.bind(this);\n this._hostFocusListener = onHostFocus.bind(this);\n this._hostReFocusListener = onHostReFocus.bind(this);\n this._hostHoverListener = onHostHover.bind(this);\n this._focusExitListener = onFocusExit.bind(this);\n this._mouseLeaveListener = onMouseLeave.bind(this);\n if (this.options.useAriaExpanded === true) {\n const initialAriaExpanded = this.hostEl.getAttribute(\"aria-expanded\");\n this._expanded = initialAriaExpanded === \"true\";\n if (initialAriaExpanded === null) {\n this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n }\n } else {\n this._expanded = false;\n }\n if (this.options.ariaControls === true) {\n // ensure the widget has an id\n (0, _makeupNextId.default)(this.el, \"expander\");\n this.contentEl.id = this.contentEl.id || `${this.el.id}-content`;\n this.hostEl.setAttribute(\"aria-controls\", this.contentEl.id);\n }\n this.expandOnClick = this.options.expandOnClick;\n this.expandOnFocus = this.options.expandOnFocus;\n this.expandOnHover = this.options.expandOnHover;\n this.collapseOnHostReFocus = this.options.collapseOnHostReFocus;\n if (this.options.autoCollapse === false) {\n this.collapseOnClickOut = this.options.collapseOnClickOut;\n this.collapseOnFocusOut = this.options.collapseOnFocusOut;\n this.collapseOnMouseOut = this.options.collapseOnMouseOut;\n }\n }\n set expandOnClick(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"keydown\", this._hostKeyDownListener);\n this.hostEl.addEventListener(\"mousedown\", this._hostMouseDownListener);\n this.hostEl.addEventListener(\"click\", this._hostClickListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnClickOut = true;\n this.collapseOnFocusOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"click\", this._hostClickListener);\n this.hostEl.removeEventListener(\"mousedown\", this._hostMouseDownListener);\n this.hostEl.removeEventListener(\"keydown\", this._hostKeyDownListener);\n }\n }\n set expandOnFocus(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"focus\", this._hostFocusListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnClickOut = true;\n this.collapseOnFocusOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"focus\", this._hostFocusListener);\n }\n }\n set collapseOnHostReFocus(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"focus\", this._hostReFocusListener);\n } else {\n this.hostEl.removeEventListener(\"focus\", this._hostReFocusListener);\n }\n }\n set expandOnHover(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n this.contentEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnMouseOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n this.contentEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n }\n }\n set collapseOnClickOut(bool) {\n if (bool === true) {\n document.addEventListener(\"click\", this._documentClickListener);\n document.addEventListener(\"touchstart\", this._documentTouchStartListener);\n document.addEventListener(\"touchmove\", this._documentTouchMoveListener);\n document.addEventListener(\"touchend\", this._documentTouchEndListener);\n } else {\n document.removeEventListener(\"click\", this._documentClickListener);\n document.removeEventListener(\"touchstart\", this._documentTouchStartListener);\n document.removeEventListener(\"touchmove\", this._documentTouchMoveListener);\n document.removeEventListener(\"touchend\", this._documentTouchEndListener);\n }\n }\n set collapseOnFocusOut(bool) {\n if (bool === true) {\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n } else {\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n }\n }\n set collapseOnMouseOut(bool) {\n if (bool === true) {\n this.el.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n this.contentEl.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n } else {\n this.el.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n this.contentEl.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n }\n }\n get expanded() {\n return this._expanded;\n }\n set expanded(bool) {\n if (bool === true && this.expanded === false) {\n if (this.options.useAriaExpanded === true) {\n this.hostEl.setAttribute(\"aria-expanded\", \"true\");\n }\n if (this.options.expandedClass) {\n this.el.classList.add(this.options.expandedClass);\n }\n if (this._expandWasKeyboardClickActivated || this._expandWasMouseClickActivated && this.options.alwaysDoFocusManagement) {\n manageFocus(this.options.focusManagement, this.contentEl);\n }\n this.el.dispatchEvent(new CustomEvent(\"expander-expand\", {\n bubbles: true,\n detail: this.contentEl\n }));\n }\n if (bool === false && this.expanded === true) {\n if (this.options.useAriaExpanded === true) {\n this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n }\n if (this.options.expandedClass) {\n this.el.classList.remove(this.options.expandedClass);\n }\n this.el.dispatchEvent(new CustomEvent(\"expander-collapse\", {\n bubbles: true,\n detail: this.contentEl\n }));\n }\n this._expanded = bool;\n this._expandWasKeyboardClickActivated = false;\n this._expandWasMouseClickActivated = false;\n this._expandWasFocusActivated = false;\n this._expandWasHoverActivated = false;\n this._keyboardClickFlag = false;\n this._mouseClickFlag = false;\n }\n sleep() {\n if (this._destroyed !== true) {\n this.expandOnClick = false;\n this.expandOnFocus = false;\n this.expandOnHover = false;\n this.collapseOnClickOut = false;\n this.collapseOnFocusOut = false;\n this.collapseOnMouseOut = false;\n this.collapseOnHostReFocus = false;\n }\n }\n destroy() {\n this.sleep();\n this._destroyed = true;\n this._hostKeyDownListener = null;\n this._hostMouseDownListener = null;\n this._documentClickListener = null;\n this._documentTouchStartListener = null;\n this._documentTouchMoveListener = null;\n this._documentTouchEndListener = null;\n this._hostClickListener = null;\n this._hostFocusListener = null;\n this._hostReFocusListener = null;\n this._hostHoverListener = null;\n this._focusExitListener = null;\n this._mouseLeaveListener = null;\n this._widgetHasKeyboardFocus = null;\n }\n}\nexports.default = _default;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupExpander = _interopRequireDefault(require(\"makeup-expander\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst clickExpanderEls = document.querySelectorAll(\".expander--click-only\");\nconst focusExpanderEls = document.querySelectorAll(\".expander--focus-only\");\nconst hoverExpanderEls = document.querySelectorAll(\".expander--hover-only\");\nconst focusAndHoverExpanderEls = document.querySelectorAll(\".expander--focus-and-hover\");\nconst stealthExpanderEls = document.querySelectorAll(\".expander--stealth-only\");\nconst clickAndSpacebarExpanderEls = document.querySelectorAll(\".expander--click-and-spacebar\");\nconst tooltipEls = document.querySelectorAll(\".expander--tooltip\");\nconst logEl = document.getElementById(\"log\");\nfunction logEvent(name) {\n const item = document.createElement(\"li\");\n item.textContent = name;\n logEl.prepend(item);\n}\nconst expanderWidgets = [];\nexpanderWidgets.push(new _makeupExpander.default(clickExpanderEls[0], {\n expandOnClick: true\n}));\nexpanderWidgets.push(new _makeupExpander.default(clickExpanderEls[1], {\n autoCollapse: true,\n expandOnClick: true\n}));\nfocusExpanderEls.forEach(el => {\n expanderWidgets.push(new _makeupExpander.default(el, {\n autoCollapse: true,\n expandOnFocus: true\n }));\n});\nhoverExpanderEls.forEach(el => {\n expanderWidgets.push(new _makeupExpander.default(el, {\n autoCollapse: true,\n expandOnHover: true\n }));\n});\nfocusAndHoverExpanderEls.forEach(el => {\n expanderWidgets.push(new _makeupExpander.default(el, {\n autoCollapse: true,\n expandOnFocus: true,\n expandOnHover: true\n }));\n});\nstealthExpanderEls.forEach(el => {\n expanderWidgets.push(new _makeupExpander.default(el, {\n collapseOnClickOut: true,\n collapseOnFocusOut: true,\n expandOnClick: true,\n focusManagement: \"focusable\"\n }));\n});\nclickAndSpacebarExpanderEls.forEach(el => {\n expanderWidgets.push(new _makeupExpander.default(el, {\n autoCollapse: true,\n expandOnClick: true,\n simulateSpacebarClick: true,\n expandedClass: \"expander__host-container--expanded\"\n }));\n});\ntooltipEls.forEach(el => {\n expanderWidgets.push(new _makeupExpander.default(el, {\n ariaControls: false,\n autoCollapse: true,\n expandOnFocus: true,\n expandOnHover: true,\n useAriaExpanded: false,\n expandedClass: \"expander__host-container--expanded\"\n }));\n});\nexpanderWidgets.forEach(widget => {\n widget.el.addEventListener(\"expander-expand\", () => logEvent(\"expander-expand\"));\n widget.el.addEventListener(\"expander-collapse\", () => logEvent(\"expander-collapse\"));\n});\ndocument.getElementById(\"clear\").addEventListener(\"click\", () => {\n logEl.innerHTML = \"\";\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-focusables/index.html b/docs/core/makeup-focusables/index.html index b5b08da8..ab479cef 100644 --- a/docs/core/makeup-focusables/index.html +++ b/docs/core/makeup-focusables/index.html @@ -3,20 +3,52 @@ makeup-focusables demo + + + -
            -

            makeup-focusables demo

            +
            +

            core / makeup-focusables

            +

            Returns focusable descendants of an element. Excludes hidden elements and their children.

            -

            Num Focusables: 0

            +
            - - - - +

            All focusables vs keyboard-only

            +

            + focusables(el) returns all focusable descendants. focusables(el, true) returns only + those reachable by sequential keyboard navigation (excludes tabindex="-1"). +

            -
              +
              + + Link + +
              tabindex="-1" div
              + +
              + +

              + All focusable:    Keyboard-only: + +

              + +

              + + + + +

              + - diff --git a/docs/core/makeup-focusables/index.js b/docs/core/makeup-focusables/index.js index 490520f0..629c18e9 100644 --- a/docs/core/makeup-focusables/index.js +++ b/docs/core/makeup-focusables/index.js @@ -1,42 +1,41 @@ -// REQUIRE -//const focusables = require('makeup-focusables').default; - -// IMPORT import focusables from "makeup-focusables"; -const listEl = document.getElementById("list"); -const appender1 = document.getElementById("appender1"); -const appender2 = document.getElementById("appender2"); -const appender3 = document.getElementById("appender3"); -const appender4 = document.getElementById("appender4"); -const output = document.getElementById("output"); - -function onButtonClick(e) { - e.preventDefault(); - - const listItem = document.createElement("li"); - listItem.innerText = `Item ${listEl.childNodes.length}`; - - if (e.target.id === "appender1") { - listItem.setAttribute("tabindex", "0"); - } else if (e.target.id === "appender2") { - listItem.setAttribute("tabindex", "-1"); - } else if (e.target.id === "appender3") { - listItem.setAttribute("tabindex", "0"); - listItem.setAttribute("hidden", "hidden"); - } else { - const listItemChild = document.createElement("button"); - listItem.setAttribute("hidden", "hidden"); - listItem.appendChild(listItemChild); - } - - listEl.appendChild(listItem); +const widgetEl = document.getElementById("widget"); +const countAllEl = document.getElementById("count-all"); +const countKeyboardEl = document.getElementById("count-keyboard"); +const originalHTML = widgetEl.innerHTML; - const focusableEls = focusables(listEl); - output.innerText = focusableEls.length; +function updateCounts() { + countAllEl.textContent = focusables(widgetEl).length; + countKeyboardEl.textContent = focusables(widgetEl, true).length; } -appender1.addEventListener("click", onButtonClick); -appender2.addEventListener("click", onButtonClick); -appender3.addEventListener("click", onButtonClick); -appender4.addEventListener("click", onButtonClick); +updateCounts(); + +document.getElementById("append-keyboard").addEventListener("click", () => { + const el = document.createElement("button"); + el.textContent = "Appended button"; + widgetEl.appendChild(el); + updateCounts(); +}); + +document.getElementById("append-programmatic").addEventListener("click", () => { + const el = document.createElement("div"); + el.setAttribute("tabindex", "-1"); + el.textContent = "Appended tabindex=-1"; + widgetEl.appendChild(el); + updateCounts(); +}); + +document.getElementById("append-hidden").addEventListener("click", () => { + const el = document.createElement("button"); + el.setAttribute("hidden", ""); + el.textContent = "Appended hidden button"; + widgetEl.appendChild(el); + updateCounts(); +}); + +document.getElementById("reset").addEventListener("click", () => { + widgetEl.innerHTML = originalHTML; + updateCounts(); +}); diff --git a/docs/core/makeup-focusables/index.min.js b/docs/core/makeup-focusables/index.min.js index 0d1cba27..f5676efe 100644 --- a/docs/core/makeup-focusables/index.min.js +++ b/docs/core/makeup-focusables/index.min.js @@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", ({ })); exports["default"] = _default; const focusableElList = ["a[href]", "area[href]", "button:not([disabled])", "embed", "iframe", "input:not([disabled])", "object", "select:not([disabled])", "textarea:not([disabled])", "*[tabindex]", "*[contenteditable]"]; -const focusableElSelector = focusableElList.join(); +const focusableElSelector = focusableElList.join(","); function _default(el) { let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; let callback = arguments.length > 2 ? arguments[2] : undefined; @@ -28,16 +28,10 @@ function _default(el) { } function getFocusables(el) { let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector)); - // filter out elements with display: none or nested in a display: none parent - focusableEls = focusableEls.filter(function (focusableEl) { - return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length); - }); + let focusableEls = [...el.querySelectorAll(focusableElSelector)].filter(focusableEl => !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length)); if (keyboardOnly === true) { - focusableEls = focusableEls.filter(function (focusableEl) { - return focusableEl.getAttribute("tabindex") !== "-1"; - }); + focusableEls = focusableEls.filter(focusableEl => focusableEl.getAttribute("tabindex") !== "-1"); } return focusableEls; } @@ -77,41 +71,39 @@ var __webpack_exports__ = {}; var _makeupFocusables = _interopRequireDefault(__webpack_require__(257)); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } -// REQUIRE -//const focusables = require('makeup-focusables').default; - -// IMPORT - -const listEl = document.getElementById("list"); -const appender1 = document.getElementById("appender1"); -const appender2 = document.getElementById("appender2"); -const appender3 = document.getElementById("appender3"); -const appender4 = document.getElementById("appender4"); -const output = document.getElementById("output"); -function onButtonClick(e) { - e.preventDefault(); - const listItem = document.createElement("li"); - listItem.innerText = `Item ${listEl.childNodes.length}`; - if (e.target.id === "appender1") { - listItem.setAttribute("tabindex", "0"); - } else if (e.target.id === "appender2") { - listItem.setAttribute("tabindex", "-1"); - } else if (e.target.id === "appender3") { - listItem.setAttribute("tabindex", "0"); - listItem.setAttribute("hidden", "hidden"); - } else { - const listItemChild = document.createElement("button"); - listItem.setAttribute("hidden", "hidden"); - listItem.appendChild(listItemChild); - } - listEl.appendChild(listItem); - const focusableEls = (0, _makeupFocusables.default)(listEl); - output.innerText = focusableEls.length; +const widgetEl = document.getElementById("widget"); +const countAllEl = document.getElementById("count-all"); +const countKeyboardEl = document.getElementById("count-keyboard"); +const originalHTML = widgetEl.innerHTML; +function updateCounts() { + countAllEl.textContent = (0, _makeupFocusables.default)(widgetEl).length; + countKeyboardEl.textContent = (0, _makeupFocusables.default)(widgetEl, true).length; } -appender1.addEventListener("click", onButtonClick); -appender2.addEventListener("click", onButtonClick); -appender3.addEventListener("click", onButtonClick); -appender4.addEventListener("click", onButtonClick); +updateCounts(); +document.getElementById("append-keyboard").addEventListener("click", () => { + const el = document.createElement("button"); + el.textContent = "Appended button"; + widgetEl.appendChild(el); + updateCounts(); +}); +document.getElementById("append-programmatic").addEventListener("click", () => { + const el = document.createElement("div"); + el.setAttribute("tabindex", "-1"); + el.textContent = "Appended tabindex=-1"; + widgetEl.appendChild(el); + updateCounts(); +}); +document.getElementById("append-hidden").addEventListener("click", () => { + const el = document.createElement("button"); + el.setAttribute("hidden", ""); + el.textContent = "Appended hidden button"; + widgetEl.appendChild(el); + updateCounts(); +}); +document.getElementById("reset").addEventListener("click", () => { + widgetEl.innerHTML = originalHTML; + updateCounts(); +}); /******/ })() ; //# sourceMappingURL=index.min.js.map \ No newline at end of file diff --git a/docs/core/makeup-focusables/index.min.js.map b/docs/core/makeup-focusables/index.min.js.map index 05523c2b..3cce34c6 100644 --- a/docs/core/makeup-focusables/index.min.js.map +++ b/docs/core/makeup-focusables/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-focusables/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;UCnCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,+CAA+C,mBAAO,CAAC,GAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,yBAAyB;AACxD;AACA;AACA,IAAI;AACJ;AACA,IAAI;AACJ;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mD","sources":["webpack://root/./packages/core/makeup-focusables/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-focusables/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n//const focusables = require('makeup-focusables').default;\n\n// IMPORT\n\nconst listEl = document.getElementById(\"list\");\nconst appender1 = document.getElementById(\"appender1\");\nconst appender2 = document.getElementById(\"appender2\");\nconst appender3 = document.getElementById(\"appender3\");\nconst appender4 = document.getElementById(\"appender4\");\nconst output = document.getElementById(\"output\");\nfunction onButtonClick(e) {\n e.preventDefault();\n const listItem = document.createElement(\"li\");\n listItem.innerText = `Item ${listEl.childNodes.length}`;\n if (e.target.id === \"appender1\") {\n listItem.setAttribute(\"tabindex\", \"0\");\n } else if (e.target.id === \"appender2\") {\n listItem.setAttribute(\"tabindex\", \"-1\");\n } else if (e.target.id === \"appender3\") {\n listItem.setAttribute(\"tabindex\", \"0\");\n listItem.setAttribute(\"hidden\", \"hidden\");\n } else {\n const listItemChild = document.createElement(\"button\");\n listItem.setAttribute(\"hidden\", \"hidden\");\n listItem.appendChild(listItemChild);\n }\n listEl.appendChild(listItem);\n const focusableEls = (0, _makeupFocusables.default)(listEl);\n output.innerText = focusableEls.length;\n}\nappender1.addEventListener(\"click\", onButtonClick);\nappender2.addEventListener(\"click\", onButtonClick);\nappender3.addEventListener(\"click\", onButtonClick);\nappender4.addEventListener(\"click\", onButtonClick);"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-focusables/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;UC7BA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,+CAA+C,mBAAO,CAAC,GAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-focusables/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-focusables/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join(\",\");\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n // filter out elements with display: none or nested in a display: none parent\n let focusableEls = [...el.querySelectorAll(focusableElSelector)].filter(focusableEl => !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length));\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(focusableEl => focusableEl.getAttribute(\"tabindex\") !== \"-1\");\n }\n return focusableEls;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst widgetEl = document.getElementById(\"widget\");\nconst countAllEl = document.getElementById(\"count-all\");\nconst countKeyboardEl = document.getElementById(\"count-keyboard\");\nconst originalHTML = widgetEl.innerHTML;\nfunction updateCounts() {\n countAllEl.textContent = (0, _makeupFocusables.default)(widgetEl).length;\n countKeyboardEl.textContent = (0, _makeupFocusables.default)(widgetEl, true).length;\n}\nupdateCounts();\ndocument.getElementById(\"append-keyboard\").addEventListener(\"click\", () => {\n const el = document.createElement(\"button\");\n el.textContent = \"Appended button\";\n widgetEl.appendChild(el);\n updateCounts();\n});\ndocument.getElementById(\"append-programmatic\").addEventListener(\"click\", () => {\n const el = document.createElement(\"div\");\n el.setAttribute(\"tabindex\", \"-1\");\n el.textContent = \"Appended tabindex=-1\";\n widgetEl.appendChild(el);\n updateCounts();\n});\ndocument.getElementById(\"append-hidden\").addEventListener(\"click\", () => {\n const el = document.createElement(\"button\");\n el.setAttribute(\"hidden\", \"\");\n el.textContent = \"Appended hidden button\";\n widgetEl.appendChild(el);\n updateCounts();\n});\ndocument.getElementById(\"reset\").addEventListener(\"click\", () => {\n widgetEl.innerHTML = originalHTML;\n updateCounts();\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-key-emitter/index.html b/docs/core/makeup-key-emitter/index.html index aa974f5f..b86fa202 100644 --- a/docs/core/makeup-key-emitter/index.html +++ b/docs/core/makeup-key-emitter/index.html @@ -3,33 +3,38 @@ makeup-key-emitter demo + +
              -

              makeup-key-emitter demo

              -

              - Move keyboard focus to buttons and press UP, DOWN, ESC etc. Open your developer console to see debug output. -

              -

              - NOTE: pressing UP and DOWN is not expected to move the focus, it should just - trigger an event. -

              -

              +

              core / makeup-key-emitter

              +

              Emits custom events for accessibility keys (e.g. arrowDownKeyDown, escapeKeyUp).

              +

              Note: arrow keys emit events only — they do not move focus.

              +
              -

              On Container (delegated)

              +

              On container (delegated)

              +

              A single listener on the container catches key events bubbling up from any child.

              +
                + + +
                -

                On Buttons (directly bound)

                +

                On buttons (directly bound)

                +

                A listener bound to each button individually.

                +
                  +
                  diff --git a/docs/core/makeup-key-emitter/index.js b/docs/core/makeup-key-emitter/index.js index 510c9aa2..743fbe47 100644 --- a/docs/core/makeup-key-emitter/index.js +++ b/docs/core/makeup-key-emitter/index.js @@ -1,50 +1,60 @@ -// REQUIRE -//const KeyEmitter = require('makeup-key-emitter'); - -// IMPORT -import * as KeyEmitter from "makeup-key-emitter"; - -const widgetEl1 = document.getElementById("widget-1"); -const widget2ButtonEls = document.querySelectorAll("#widget-2 button"); - -const events = [ - "arrowUpKey", - "arrowDownKey", - "arrowLeftKey", - "arrowRightKey", - "escapeKey", - "spacebarKey", - "enterKey", - "homeKey", - "endKey", - "pageDownKey", - "pageUpKey", +import { add } from "makeup-key-emitter"; + +const keyEventNames = [ + "arrowUpKeyDown", + "arrowUpKeyUp", + "arrowDownKeyDown", + "arrowDownKeyUp", + "arrowLeftKeyDown", + "arrowLeftKeyUp", + "arrowRightKeyDown", + "arrowRightKeyUp", + "escapeKeyDown", + "escapeKeyUp", + "spacebarKeyDown", + "spacebarKeyUp", + "enterKeyDown", + "enterKeyUp", + "homeKeyDown", + "homeKeyUp", + "endKeyDown", + "endKeyUp", + "pageUpKeyDown", + "pageUpKeyUp", + "pageDownKeyDown", + "pageDownKeyUp", ]; -// on widget1 container +function logEvent(logEl, eventName) { + const item = document.createElement("li"); + item.textContent = eventName; + logEl.prepend(item); +} -KeyEmitter.add(widgetEl1); +// Widget 1: delegated on container +const widget1El = document.getElementById("widget-1"); +const log1El = document.getElementById("log-1"); -events.forEach(function (eventName) { - widgetEl1.addEventListener(`${eventName}Down`, function (e) { - console.log(this, e); - }); - widgetEl1.addEventListener(`${eventName}Up`, function (e) { - console.log(this, e); - }); +add(widget1El); + +keyEventNames.forEach((eventName) => { + widget1El.addEventListener(eventName, () => logEvent(log1El, eventName)); }); -// on widget2 buttons +document.getElementById("clear-1").addEventListener("click", () => { + log1El.innerHTML = ""; +}); -[...widget2ButtonEls].forEach(function (el) { - KeyEmitter.add(el); +// Widget 2: directly bound on each button +const log2El = document.getElementById("log-2"); - events.forEach(function (eventName) { - el.addEventListener(`${eventName}Down`, function (e) { - console.log(this, e); - }); - el.addEventListener(`${eventName}Up`, function (e) { - console.log(this, e); - }); +[...document.querySelectorAll("#widget-2 button")].forEach((btn) => { + add(btn); + keyEventNames.forEach((eventName) => { + btn.addEventListener(eventName, () => logEvent(log2El, eventName)); }); }); + +document.getElementById("clear-2").addEventListener("click", () => { + log2El.innerHTML = ""; +}); diff --git a/docs/core/makeup-key-emitter/index.min.js b/docs/core/makeup-key-emitter/index.min.js index dd78648c..54b527b7 100644 --- a/docs/core/makeup-key-emitter/index.min.js +++ b/docs/core/makeup-key-emitter/index.min.js @@ -55,22 +55,34 @@ function onKeyDown(e) { function onKeyUp(e) { onKeyDownOrUp(e, this, "Up"); } + +// TODO: rename to enableKeyDown function addKeyDown(el) { el.addEventListener("keydown", onKeyDown); } + +// TODO: rename to enableKeyUp function addKeyUp(el) { el.addEventListener("keyup", onKeyUp); } + +// TODO: rename to disableKeyDown function removeKeyDown(el) { el.removeEventListener("keydown", onKeyDown); } + +// TODO: rename to disableKeyUp function removeKeyUp(el) { el.removeEventListener("keyup", onKeyUp); } + +// TODO: rename to enableKeyDownAndUp function add(el) { addKeyDown(el); addKeyUp(el); } + +// TODO: rename to disableKeyDownAndUp function remove(el) { removeKeyDown(el); removeKeyUp(el); @@ -109,42 +121,36 @@ function remove(el) { var __webpack_exports__ = {}; -var KeyEmitter = _interopRequireWildcard(__webpack_require__(550)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } -// REQUIRE -//const KeyEmitter = require('makeup-key-emitter'); - -// IMPORT - -const widgetEl1 = document.getElementById("widget-1"); -const widget2ButtonEls = document.querySelectorAll("#widget-2 button"); -const events = ["arrowUpKey", "arrowDownKey", "arrowLeftKey", "arrowRightKey", "escapeKey", "spacebarKey", "enterKey", "homeKey", "endKey", "pageDownKey", "pageUpKey"]; - -// on widget1 container +var _makeupKeyEmitter = __webpack_require__(550); +const keyEventNames = ["arrowUpKeyDown", "arrowUpKeyUp", "arrowDownKeyDown", "arrowDownKeyUp", "arrowLeftKeyDown", "arrowLeftKeyUp", "arrowRightKeyDown", "arrowRightKeyUp", "escapeKeyDown", "escapeKeyUp", "spacebarKeyDown", "spacebarKeyUp", "enterKeyDown", "enterKeyUp", "homeKeyDown", "homeKeyUp", "endKeyDown", "endKeyUp", "pageUpKeyDown", "pageUpKeyUp", "pageDownKeyDown", "pageDownKeyUp"]; +function logEvent(logEl, eventName) { + const item = document.createElement("li"); + item.textContent = eventName; + logEl.prepend(item); +} -KeyEmitter.add(widgetEl1); -events.forEach(function (eventName) { - widgetEl1.addEventListener(`${eventName}Down`, function (e) { - console.log(this, e); - }); - widgetEl1.addEventListener(`${eventName}Up`, function (e) { - console.log(this, e); - }); +// Widget 1: delegated on container +const widget1El = document.getElementById("widget-1"); +const log1El = document.getElementById("log-1"); +(0, _makeupKeyEmitter.add)(widget1El); +keyEventNames.forEach(eventName => { + widget1El.addEventListener(eventName, () => logEvent(log1El, eventName)); +}); +document.getElementById("clear-1").addEventListener("click", () => { + log1El.innerHTML = ""; }); -// on widget2 buttons - -[...widget2ButtonEls].forEach(function (el) { - KeyEmitter.add(el); - events.forEach(function (eventName) { - el.addEventListener(`${eventName}Down`, function (e) { - console.log(this, e); - }); - el.addEventListener(`${eventName}Up`, function (e) { - console.log(this, e); - }); +// Widget 2: directly bound on each button +const log2El = document.getElementById("log-2"); +[...document.querySelectorAll("#widget-2 button")].forEach(btn => { + (0, _makeupKeyEmitter.add)(btn); + keyEventNames.forEach(eventName => { + btn.addEventListener(eventName, () => logEvent(log2El, eventName)); }); }); +document.getElementById("clear-2").addEventListener("click", () => { + log2El.innerHTML = ""; +}); /******/ })() ; //# sourceMappingURL=index.min.js.map \ No newline at end of file diff --git a/docs/core/makeup-key-emitter/index.min.js.map b/docs/core/makeup-key-emitter/index.min.js.map index 9f170dca..9d59e1eb 100644 --- a/docs/core/makeup-key-emitter/index.min.js.map +++ b/docs/core/makeup-key-emitter/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-key-emitter/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;UCrEA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,yCAAyC,mBAAO,CAAC,GAAoB;AACrE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA,gCAAgC,UAAU;AAC1C;AACA,GAAG;AACH,gCAAgC,UAAU;AAC1C;AACA,GAAG;AACH,CAAC;;AAED;;AAEA;AACA;AACA;AACA,2BAA2B,UAAU;AACrC;AACA,KAAK;AACL,2BAA2B,UAAU;AACrC;AACA,KAAK;AACL,GAAG;AACH,CAAC,E","sources":["webpack://root/./packages/core/makeup-key-emitter/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-key-emitter/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n if (!evt.shiftKey) {\n const key = evt.key;\n switch (key) {\n case \"Enter\":\n case \"Escape\":\n case \"PageUp\":\n case \"PageDown\":\n case \"End\":\n case \"Home\":\n case \"ArrowLeft\":\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"ArrowDown\":\n el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n detail: evt,\n bubbles: true\n }));\n break;\n case \" \":\n el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n detail: evt,\n bubbles: true\n }));\n break;\n default:\n return;\n }\n }\n}\nfunction onKeyDown(e) {\n onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n addKeyDown(el);\n addKeyUp(el);\n}\nfunction remove(el) {\n removeKeyDown(el);\n removeKeyUp(el);\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar KeyEmitter = _interopRequireWildcard(require(\"makeup-key-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// REQUIRE\n//const KeyEmitter = require('makeup-key-emitter');\n\n// IMPORT\n\nconst widgetEl1 = document.getElementById(\"widget-1\");\nconst widget2ButtonEls = document.querySelectorAll(\"#widget-2 button\");\nconst events = [\"arrowUpKey\", \"arrowDownKey\", \"arrowLeftKey\", \"arrowRightKey\", \"escapeKey\", \"spacebarKey\", \"enterKey\", \"homeKey\", \"endKey\", \"pageDownKey\", \"pageUpKey\"];\n\n// on widget1 container\n\nKeyEmitter.add(widgetEl1);\nevents.forEach(function (eventName) {\n widgetEl1.addEventListener(`${eventName}Down`, function (e) {\n console.log(this, e);\n });\n widgetEl1.addEventListener(`${eventName}Up`, function (e) {\n console.log(this, e);\n });\n});\n\n// on widget2 buttons\n\n[...widget2ButtonEls].forEach(function (el) {\n KeyEmitter.add(el);\n events.forEach(function (eventName) {\n el.addEventListener(`${eventName}Down`, function (e) {\n console.log(this, e);\n });\n el.addEventListener(`${eventName}Up`, function (e) {\n console.log(this, e);\n });\n });\n});"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-key-emitter/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;UCjFA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,wBAAwB,mBAAO,CAAC,GAAoB;AACpD;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-key-emitter/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-key-emitter/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n if (!evt.shiftKey) {\n const key = evt.key;\n switch (key) {\n case \"Enter\":\n case \"Escape\":\n case \"PageUp\":\n case \"PageDown\":\n case \"End\":\n case \"Home\":\n case \"ArrowLeft\":\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"ArrowDown\":\n el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n detail: evt,\n bubbles: true\n }));\n break;\n case \" \":\n el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n detail: evt,\n bubbles: true\n }));\n break;\n default:\n return;\n }\n }\n}\nfunction onKeyDown(e) {\n onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n onKeyDownOrUp(e, this, \"Up\");\n}\n\n// TODO: rename to enableKeyDown\nfunction addKeyDown(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\n\n// TODO: rename to enableKeyUp\nfunction addKeyUp(el) {\n el.addEventListener(\"keyup\", onKeyUp);\n}\n\n// TODO: rename to disableKeyDown\nfunction removeKeyDown(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\n\n// TODO: rename to disableKeyUp\nfunction removeKeyUp(el) {\n el.removeEventListener(\"keyup\", onKeyUp);\n}\n\n// TODO: rename to enableKeyDownAndUp\nfunction add(el) {\n addKeyDown(el);\n addKeyUp(el);\n}\n\n// TODO: rename to disableKeyDownAndUp\nfunction remove(el) {\n removeKeyDown(el);\n removeKeyUp(el);\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupKeyEmitter = require(\"makeup-key-emitter\");\nconst keyEventNames = [\"arrowUpKeyDown\", \"arrowUpKeyUp\", \"arrowDownKeyDown\", \"arrowDownKeyUp\", \"arrowLeftKeyDown\", \"arrowLeftKeyUp\", \"arrowRightKeyDown\", \"arrowRightKeyUp\", \"escapeKeyDown\", \"escapeKeyUp\", \"spacebarKeyDown\", \"spacebarKeyUp\", \"enterKeyDown\", \"enterKeyUp\", \"homeKeyDown\", \"homeKeyUp\", \"endKeyDown\", \"endKeyUp\", \"pageUpKeyDown\", \"pageUpKeyUp\", \"pageDownKeyDown\", \"pageDownKeyUp\"];\nfunction logEvent(logEl, eventName) {\n const item = document.createElement(\"li\");\n item.textContent = eventName;\n logEl.prepend(item);\n}\n\n// Widget 1: delegated on container\nconst widget1El = document.getElementById(\"widget-1\");\nconst log1El = document.getElementById(\"log-1\");\n(0, _makeupKeyEmitter.add)(widget1El);\nkeyEventNames.forEach(eventName => {\n widget1El.addEventListener(eventName, () => logEvent(log1El, eventName));\n});\ndocument.getElementById(\"clear-1\").addEventListener(\"click\", () => {\n log1El.innerHTML = \"\";\n});\n\n// Widget 2: directly bound on each button\nconst log2El = document.getElementById(\"log-2\");\n[...document.querySelectorAll(\"#widget-2 button\")].forEach(btn => {\n (0, _makeupKeyEmitter.add)(btn);\n keyEventNames.forEach(eventName => {\n btn.addEventListener(eventName, () => logEvent(log2El, eventName));\n });\n});\ndocument.getElementById(\"clear-2\").addEventListener(\"click\", () => {\n log2El.innerHTML = \"\";\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-keyboard-trap/index.html b/docs/core/makeup-keyboard-trap/index.html index 86d60baa..8f706df2 100644 --- a/docs/core/makeup-keyboard-trap/index.html +++ b/docs/core/makeup-keyboard-trap/index.html @@ -3,11 +3,12 @@ makeup-keyboard-trap demo + + -
                  -

                  makeup-keyboard-trap demo

                  +
                  +

                  core / makeup-keyboard-trap

                  +

                  Restricts keyboard tab focus to a single subtree in the DOM.

                  +
                  + +

                  Tab trap

                  - Use keyboard to activate the 'trap' button. Keyboard focus will be trapped inside the bordered element. For best - results, keyboard focus should be inside trapped element before trap is activated. + Tab through the page. Click Trap to activate — focus will be locked inside the bordered area. + Hidden links inside the trap are ignored.

                  - -

                  Test Area

                  - -

                  text before trap

                  +
                  - - ebay - - ebay - + + Link A + + Link B +
                  -

                  text after trap

                  - + + +
                  + +

                  Events

                  +
                    +
                    diff --git a/docs/core/makeup-keyboard-trap/index.js b/docs/core/makeup-keyboard-trap/index.js index 3a71df5d..40bf86df 100644 --- a/docs/core/makeup-keyboard-trap/index.js +++ b/docs/core/makeup-keyboard-trap/index.js @@ -1,36 +1,35 @@ -// REQUIRE -// const keyboardTrap = require('makeup-keyboard-trap'); +import { trap, untrap } from "makeup-keyboard-trap"; -// IMPORT -import * as keyboardTrap from "makeup-keyboard-trap"; +const trapEl = document.getElementById("trap"); +const toggleBtn = document.getElementById("toggle"); +const logEl = document.getElementById("log"); -const trap = document.getElementById("trap"); -const btn = document.querySelector("button"); +function logEvent(name) { + const item = document.createElement("li"); + item.textContent = name; + logEl.prepend(item); +} -btn.addEventListener("click", function () { - if (this.getAttribute("aria-pressed") === "true") { - keyboardTrap.untrap(); +toggleBtn.addEventListener("click", () => { + if (toggleBtn.getAttribute("aria-pressed") === "true") { + untrap(); } else { - keyboardTrap.trap(this.parentNode); + trap(trapEl); } }); -document.addEventListener("keyboardTrap", function (e) { - console.log(this, e); +trapEl.addEventListener("keyboardTrap", () => { + toggleBtn.textContent = "Untrap"; + toggleBtn.setAttribute("aria-pressed", "true"); + logEvent("keyboardTrap"); }); -document.addEventListener("keyboardUntrap", function (e) { - console.log(this, e); +trapEl.addEventListener("keyboardUntrap", () => { + toggleBtn.textContent = "Trap"; + toggleBtn.setAttribute("aria-pressed", "false"); + logEvent("keyboardUntrap"); }); -trap.addEventListener("keyboardUntrap", function (e) { - console.log(this, e); - btn.innerText = "Trap"; - btn.setAttribute("aria-pressed", "false"); -}); - -trap.addEventListener("keyboardTrap", function (e) { - console.log(this, e); - btn.innerText = "Untrap"; - btn.setAttribute("aria-pressed", "true"); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; }); diff --git a/docs/core/makeup-keyboard-trap/index.min.js b/docs/core/makeup-keyboard-trap/index.min.js index 5e356869..99a78c18 100644 --- a/docs/core/makeup-keyboard-trap/index.min.js +++ b/docs/core/makeup-keyboard-trap/index.min.js @@ -116,9 +116,7 @@ function trap(el) { function refresh() { if (topTrap && trappedEl) { let focusableElements = (0, _makeupFocusables.default)(trappedEl, true); - focusableElements = focusableElements.filter(function (el) { - return !el.classList.contains("keyboard-trap-boundary"); - }); + focusableElements = focusableElements.filter(el => !el.classList.contains("keyboard-trap-boundary")); firstFocusableElement = focusableElements[0]; lastFocusableElement = focusableElements[focusableElements.length - 1]; } @@ -200,37 +198,34 @@ function getFocusables(el) { var __webpack_exports__ = {}; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(251)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } -// REQUIRE -// const keyboardTrap = require('makeup-keyboard-trap'); - -// IMPORT - -const trap = document.getElementById("trap"); -const btn = document.querySelector("button"); -btn.addEventListener("click", function () { - if (this.getAttribute("aria-pressed") === "true") { - keyboardTrap.untrap(); +var _makeupKeyboardTrap = __webpack_require__(251); +const trapEl = document.getElementById("trap"); +const toggleBtn = document.getElementById("toggle"); +const logEl = document.getElementById("log"); +function logEvent(name) { + const item = document.createElement("li"); + item.textContent = name; + logEl.prepend(item); +} +toggleBtn.addEventListener("click", () => { + if (toggleBtn.getAttribute("aria-pressed") === "true") { + (0, _makeupKeyboardTrap.untrap)(); } else { - keyboardTrap.trap(this.parentNode); + (0, _makeupKeyboardTrap.trap)(trapEl); } }); -document.addEventListener("keyboardTrap", function (e) { - console.log(this, e); -}); -document.addEventListener("keyboardUntrap", function (e) { - console.log(this, e); +trapEl.addEventListener("keyboardTrap", () => { + toggleBtn.textContent = "Untrap"; + toggleBtn.setAttribute("aria-pressed", "true"); + logEvent("keyboardTrap"); }); -trap.addEventListener("keyboardUntrap", function (e) { - console.log(this, e); - btn.innerText = "Trap"; - btn.setAttribute("aria-pressed", "false"); +trapEl.addEventListener("keyboardUntrap", () => { + toggleBtn.textContent = "Trap"; + toggleBtn.setAttribute("aria-pressed", "false"); + logEvent("keyboardUntrap"); }); -trap.addEventListener("keyboardTrap", function (e) { - console.log(this, e); - btn.innerText = "Untrap"; - btn.setAttribute("aria-pressed", "true"); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; }); /******/ })() ; diff --git a/docs/core/makeup-keyboard-trap/index.min.js.map b/docs/core/makeup-keyboard-trap/index.min.js.map index 928e68e0..ea9aa5d2 100644 --- a/docs/core/makeup-keyboard-trap/index.min.js.map +++ b/docs/core/makeup-keyboard-trap/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-keyboard-trap/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,GAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;UCnCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,2CAA2C,mBAAO,CAAC,GAAsB;AACzE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-keyboard-trap/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-keyboard-trap/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// REQUIRE\n// const keyboardTrap = require('makeup-keyboard-trap');\n\n// IMPORT\n\nconst trap = document.getElementById(\"trap\");\nconst btn = document.querySelector(\"button\");\nbtn.addEventListener(\"click\", function () {\n if (this.getAttribute(\"aria-pressed\") === \"true\") {\n keyboardTrap.untrap();\n } else {\n keyboardTrap.trap(this.parentNode);\n }\n});\ndocument.addEventListener(\"keyboardTrap\", function (e) {\n console.log(this, e);\n});\ndocument.addEventListener(\"keyboardUntrap\", function (e) {\n console.log(this, e);\n});\ntrap.addEventListener(\"keyboardUntrap\", function (e) {\n console.log(this, e);\n btn.innerText = \"Trap\";\n btn.setAttribute(\"aria-pressed\", \"false\");\n});\ntrap.addEventListener(\"keyboardTrap\", function (e) {\n console.log(this, e);\n btn.innerText = \"Untrap\";\n btn.setAttribute(\"aria-pressed\", \"true\");\n});"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-keyboard-trap/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,GAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;ACnHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;UCnCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,0BAA0B,mBAAO,CAAC,GAAsB;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-keyboard-trap/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-keyboard-trap/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(el => !el.classList.contains(\"keyboard-trap-boundary\"));\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nconst trapEl = document.getElementById(\"trap\");\nconst toggleBtn = document.getElementById(\"toggle\");\nconst logEl = document.getElementById(\"log\");\nfunction logEvent(name) {\n const item = document.createElement(\"li\");\n item.textContent = name;\n logEl.prepend(item);\n}\ntoggleBtn.addEventListener(\"click\", () => {\n if (toggleBtn.getAttribute(\"aria-pressed\") === \"true\") {\n (0, _makeupKeyboardTrap.untrap)();\n } else {\n (0, _makeupKeyboardTrap.trap)(trapEl);\n }\n});\ntrapEl.addEventListener(\"keyboardTrap\", () => {\n toggleBtn.textContent = \"Untrap\";\n toggleBtn.setAttribute(\"aria-pressed\", \"true\");\n logEvent(\"keyboardTrap\");\n});\ntrapEl.addEventListener(\"keyboardUntrap\", () => {\n toggleBtn.textContent = \"Trap\";\n toggleBtn.setAttribute(\"aria-pressed\", \"false\");\n logEvent(\"keyboardUntrap\");\n});\ndocument.getElementById(\"clear\").addEventListener(\"click\", () => {\n logEl.innerHTML = \"\";\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-modal/index.html b/docs/core/makeup-modal/index.html index b0413886..fc11f512 100644 --- a/docs/core/makeup-modal/index.html +++ b/docs/core/makeup-modal/index.html @@ -3,89 +3,79 @@ makeup-modal demo + +
                    -

                    makeup-modal demo

                    +

                    core / makeup-modal

                    +

                    Restricts keyboard and screen reader access to a single element. All other content becomes inert.

                    - - - - - - - - - - - - - + + +
                    -

                    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. -

                    - link -
                    -
                    -

                    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu - fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. -

                    - link - -

                    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu - fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. -

                    - link +
                    - link -

                    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. -

                    -
                    @@ -97,10 +87,11 @@

                    Modal 2 (shallow nest)

                    @@ -113,27 +104,11 @@

                    Modal 3 (deep nest)

                    - link -

                    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. -

                    +

                    Events

                    +
                      +
                      -
                      - link -

                      - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. -

                      -
                      - diff --git a/docs/core/makeup-modal/index.js b/docs/core/makeup-modal/index.js index c1bc4d18..7b6a87d1 100644 --- a/docs/core/makeup-modal/index.js +++ b/docs/core/makeup-modal/index.js @@ -1,54 +1,54 @@ -// REQUIRE -// const modal = require('makeup-modal'); - -// IMPORT -import * as modal from "makeup-modal"; +import { modal, unmodal } from "makeup-modal"; const modal1 = document.getElementById("modal-1"); const modal2 = document.getElementById("modal-2"); const modal3 = document.getElementById("modal-3"); -const button1 = document.getElementById("button-1"); -const button2 = document.getElementById("button-2"); -const button3 = document.getElementById("button-3"); - -const unmodalButton = document.getElementById("button-unmodal"); - const hoistCheckbox = document.getElementById("hoist-checkbox"); const wrapCheckbox = document.getElementById("wrap-checkbox"); const hiddenCheckbox = document.getElementById("hidden-checkbox"); -modal1.addEventListener("makeup-modal", (e) => console.log(e)); -modal2.addEventListener("makeup-modal", (e) => console.log(e)); -modal3.addEventListener("makeup-modal", (e) => console.log(e)); -modal1.addEventListener("makeup-unmodal", (e) => console.log(e)); -modal2.addEventListener("makeup-unmodal", (e) => console.log(e)); -modal3.addEventListener("makeup-unmodal", (e) => console.log(e)); +const logEl = document.getElementById("log"); -button1.addEventListener("click", () => { - modal.modal(modal1, { +function getOptions() { + return { hoist: hoistCheckbox.checked, - useHiddenProperty: hiddenCheckbox.checked, wrap: wrapCheckbox.checked, + useHiddenProperty: hiddenCheckbox.checked, + }; +} + +function logEvent(name) { + const item = document.createElement("li"); + item.textContent = name; + logEl.prepend(item); +} + +[modal1, modal2, modal3].forEach((el) => { + const btn = el.querySelector(".toggle-btn"); + + btn.addEventListener("click", () => { + if (btn.getAttribute("aria-pressed") === "true") { + unmodal(); + } else { + modal(el, getOptions()); + } }); -}); -button2.addEventListener("click", () => { - modal.modal(modal2, { - hoist: hoistCheckbox.checked, - useHiddenProperty: hiddenCheckbox.checked, - wrap: wrapCheckbox.checked, + el.addEventListener("makeup-modal", () => { + logEvent("makeup-modal"); + btn.textContent = "Unmodal"; + btn.setAttribute("aria-pressed", "true"); + btn.focus(); }); -}); -button3.addEventListener("click", () => { - modal.modal(modal3, { - hoist: hoistCheckbox.checked, - useHiddenProperty: hiddenCheckbox.checked, - wrap: wrapCheckbox.checked, + el.addEventListener("makeup-unmodal", () => { + logEvent("makeup-unmodal"); + btn.textContent = "Modal"; + btn.setAttribute("aria-pressed", "false"); }); }); -unmodalButton.addEventListener("click", () => { - modal.unmodal(); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; }); diff --git a/docs/core/makeup-modal/index.min.js b/docs/core/makeup-modal/index.min.js index 8080d873..508e8378 100644 --- a/docs/core/makeup-modal/index.min.js +++ b/docs/core/makeup-modal/index.min.js @@ -12,9 +12,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(490); +var _makeupScreenreaderTrap = __webpack_require__(448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -37,6 +36,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -45,6 +49,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -52,7 +62,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -63,7 +73,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -79,8 +89,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -93,7 +103,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -102,11 +115,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); @@ -521,52 +534,49 @@ function getSiblingsOfAncestors(el) { var __webpack_exports__ = {}; -var modal = _interopRequireWildcard(__webpack_require__(553)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } -// REQUIRE -// const modal = require('makeup-modal'); - -// IMPORT - +var _makeupModal = __webpack_require__(553); const modal1 = document.getElementById("modal-1"); const modal2 = document.getElementById("modal-2"); const modal3 = document.getElementById("modal-3"); -const button1 = document.getElementById("button-1"); -const button2 = document.getElementById("button-2"); -const button3 = document.getElementById("button-3"); -const unmodalButton = document.getElementById("button-unmodal"); const hoistCheckbox = document.getElementById("hoist-checkbox"); const wrapCheckbox = document.getElementById("wrap-checkbox"); const hiddenCheckbox = document.getElementById("hidden-checkbox"); -modal1.addEventListener("makeup-modal", e => console.log(e)); -modal2.addEventListener("makeup-modal", e => console.log(e)); -modal3.addEventListener("makeup-modal", e => console.log(e)); -modal1.addEventListener("makeup-unmodal", e => console.log(e)); -modal2.addEventListener("makeup-unmodal", e => console.log(e)); -modal3.addEventListener("makeup-unmodal", e => console.log(e)); -button1.addEventListener("click", () => { - modal.modal(modal1, { +const logEl = document.getElementById("log"); +function getOptions() { + return { hoist: hoistCheckbox.checked, - useHiddenProperty: hiddenCheckbox.checked, - wrap: wrapCheckbox.checked + wrap: wrapCheckbox.checked, + useHiddenProperty: hiddenCheckbox.checked + }; +} +function logEvent(name) { + const item = document.createElement("li"); + item.textContent = name; + logEl.prepend(item); +} +[modal1, modal2, modal3].forEach(el => { + const btn = el.querySelector(".toggle-btn"); + btn.addEventListener("click", () => { + if (btn.getAttribute("aria-pressed") === "true") { + (0, _makeupModal.unmodal)(); + } else { + (0, _makeupModal.modal)(el, getOptions()); + } }); -}); -button2.addEventListener("click", () => { - modal.modal(modal2, { - hoist: hoistCheckbox.checked, - useHiddenProperty: hiddenCheckbox.checked, - wrap: wrapCheckbox.checked + el.addEventListener("makeup-modal", () => { + logEvent("makeup-modal"); + btn.textContent = "Unmodal"; + btn.setAttribute("aria-pressed", "true"); + btn.focus(); }); -}); -button3.addEventListener("click", () => { - modal.modal(modal3, { - hoist: hoistCheckbox.checked, - useHiddenProperty: hiddenCheckbox.checked, - wrap: wrapCheckbox.checked + el.addEventListener("makeup-unmodal", () => { + logEvent("makeup-unmodal"); + btn.textContent = "Modal"; + btn.setAttribute("aria-pressed", "false"); }); }); -unmodalButton.addEventListener("click", () => { - modal.unmodal(); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; }); /******/ })() ; diff --git a/docs/core/makeup-modal/index.min.js.map b/docs/core/makeup-modal/index.min.js.map index a63c8e1c..3c7543f5 100644 --- a/docs/core/makeup-modal/index.min.js.map +++ b/docs/core/makeup-modal/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-modal/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,GAAsB;AACzE,+CAA+C,mBAAO,CAAC,GAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,GAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,GAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;UChEA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,oCAAoC,mBAAO,CAAC,GAAc;AAC1D,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-modal/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar modal = _interopRequireWildcard(require(\"makeup-modal\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// REQUIRE\n// const modal = require('makeup-modal');\n\n// IMPORT\n\nconst modal1 = document.getElementById(\"modal-1\");\nconst modal2 = document.getElementById(\"modal-2\");\nconst modal3 = document.getElementById(\"modal-3\");\nconst button1 = document.getElementById(\"button-1\");\nconst button2 = document.getElementById(\"button-2\");\nconst button3 = document.getElementById(\"button-3\");\nconst unmodalButton = document.getElementById(\"button-unmodal\");\nconst hoistCheckbox = document.getElementById(\"hoist-checkbox\");\nconst wrapCheckbox = document.getElementById(\"wrap-checkbox\");\nconst hiddenCheckbox = document.getElementById(\"hidden-checkbox\");\nmodal1.addEventListener(\"makeup-modal\", e => console.log(e));\nmodal2.addEventListener(\"makeup-modal\", e => console.log(e));\nmodal3.addEventListener(\"makeup-modal\", e => console.log(e));\nmodal1.addEventListener(\"makeup-unmodal\", e => console.log(e));\nmodal2.addEventListener(\"makeup-unmodal\", e => console.log(e));\nmodal3.addEventListener(\"makeup-unmodal\", e => console.log(e));\nbutton1.addEventListener(\"click\", () => {\n modal.modal(modal1, {\n hoist: hoistCheckbox.checked,\n useHiddenProperty: hiddenCheckbox.checked,\n wrap: wrapCheckbox.checked\n });\n});\nbutton2.addEventListener(\"click\", () => {\n modal.modal(modal2, {\n hoist: hoistCheckbox.checked,\n useHiddenProperty: hiddenCheckbox.checked,\n wrap: wrapCheckbox.checked\n });\n});\nbutton3.addEventListener(\"click\", () => {\n modal.modal(modal3, {\n hoist: hoistCheckbox.checked,\n useHiddenProperty: hiddenCheckbox.checked,\n wrap: wrapCheckbox.checked\n });\n});\nunmodalButton.addEventListener(\"click\", () => {\n modal.unmodal();\n});"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-modal/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,GAAsB;AACxD,8BAA8B,mBAAO,CAAC,GAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,GAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,GAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;UChEA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,mBAAmB,mBAAO,CAAC,GAAc;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-modal/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupModal = require(\"makeup-modal\");\nconst modal1 = document.getElementById(\"modal-1\");\nconst modal2 = document.getElementById(\"modal-2\");\nconst modal3 = document.getElementById(\"modal-3\");\nconst hoistCheckbox = document.getElementById(\"hoist-checkbox\");\nconst wrapCheckbox = document.getElementById(\"wrap-checkbox\");\nconst hiddenCheckbox = document.getElementById(\"hidden-checkbox\");\nconst logEl = document.getElementById(\"log\");\nfunction getOptions() {\n return {\n hoist: hoistCheckbox.checked,\n wrap: wrapCheckbox.checked,\n useHiddenProperty: hiddenCheckbox.checked\n };\n}\nfunction logEvent(name) {\n const item = document.createElement(\"li\");\n item.textContent = name;\n logEl.prepend(item);\n}\n[modal1, modal2, modal3].forEach(el => {\n const btn = el.querySelector(\".toggle-btn\");\n btn.addEventListener(\"click\", () => {\n if (btn.getAttribute(\"aria-pressed\") === \"true\") {\n (0, _makeupModal.unmodal)();\n } else {\n (0, _makeupModal.modal)(el, getOptions());\n }\n });\n el.addEventListener(\"makeup-modal\", () => {\n logEvent(\"makeup-modal\");\n btn.textContent = \"Unmodal\";\n btn.setAttribute(\"aria-pressed\", \"true\");\n btn.focus();\n });\n el.addEventListener(\"makeup-unmodal\", () => {\n logEvent(\"makeup-unmodal\");\n btn.textContent = \"Modal\";\n btn.setAttribute(\"aria-pressed\", \"false\");\n });\n});\ndocument.getElementById(\"clear\").addEventListener(\"click\", () => {\n logEl.innerHTML = \"\";\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-navigation-emitter/index.html b/docs/core/makeup-navigation-emitter/index.html index 275975da..d03d38cf 100644 --- a/docs/core/makeup-navigation-emitter/index.html +++ b/docs/core/makeup-navigation-emitter/index.html @@ -3,6 +3,8 @@ makeup-navigation-emitter demo + + -
                      -

                      makeup-(keyboard)-navigation-emitter demo

                      -

                      TIP: open developer console to see events!

                      +
                      +

                      core / makeup-navigation-emitter

                      - This module does not do any keyboard focus management, it only models state and triggers - events. It is the job of consumers, such as - makeup-roving-tabindex and - makeup-active-descendant to do focus - management based on the model and the events it emits. You probably don't ever need to use this module directly! -

                      -

                      - Set keyboard focus inside on any of the focusable "widgets", then use ARROW keys to update model. For the - purpose of demonstration/testing, aria-disabled items are greyed out. Hidden items have strike-through. Disabled - and hidden items are included in indexing, but skipped in navigation. + Models keyboard navigation state for a list of items and emits events when the active index changes. Does not + manage focus — that is the job of consumers such as makeup-roving-tabindex and makeup-active-descendant.

                      +
                      + + +
                      + +
                      -

                      Example 1 - Item-Based Relationship

                      -
                      +

                      Item-based relationship

                      +

                      Focus lives on each item (roving tabindex pattern). Use arrow keys to navigate.

                      +
                      • Item 1
                      • Item 2
                        • -
                      • Item 3
                        • +
                      • Item 3 (disabled)
                      • Item 4
                        • - +
                      • Item 6
                      +
                        + -

                        Example 2 - Container-Based Relationship

                        -
                        +
                        + +

                        Container-based relationship

                        +

                        + Focus lives on the container (active descendant pattern). Use arrow keys to navigate. Options: + autoInit: "none", autoReset: "none". +

                        +
                        • Item 1
                        • Item 2
                          • -
                        • Item 3
                          • +
                        • Item 3 (disabled)
                        • Item 4
                          • - +
                        • Item 6
                        +
                          + + +
                          -

                          Example 3 - External-Based Relationship

                          -
                          - +

                          External relationship

                          +

                          + Focus lives on an external element, e.g. an input (combobox pattern). Focus the input then use arrow keys. + Options: autoInit: "none", autoReset: "none". +

                          +
                          +
                          • Item 1
                          • Item 2
                            • -
                          • Item 3
                            • +
                          • Item 3 (disabled)
                          • Item 4
                            • - +
                          • Item 6
                          - - - -
                          - Tools - - -
                          +
                            +
                            diff --git a/docs/core/makeup-navigation-emitter/index.js b/docs/core/makeup-navigation-emitter/index.js index dae6e8a9..8f5d4f84 100644 --- a/docs/core/makeup-navigation-emitter/index.js +++ b/docs/core/makeup-navigation-emitter/index.js @@ -1,39 +1,45 @@ -// REQUIRE -//const NavigationEmitter = require('makeup-navigation-emitter'); - -// IMPORT import * as NavigationEmitter from "makeup-navigation-emitter"; +import { add as addPreventScrollKeys } from "makeup-prevent-scroll-keys"; -const emitters = []; -const appender = document.getElementById("appender"); const widgetEls = document.querySelectorAll(".widget"); -const wrapCheckbox = document.getElementById("wrap"); -const log = (e) => console.log(e.type, e.detail); -const options = [{}, { autoInit: "none", autoReset: "none" }, { autoInit: "none", autoReset: "none" }]; +const perWidgetOptions = [{}, { autoInit: "none", autoReset: "none" }, { autoInit: "none", autoReset: "none" }]; -appender.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const listEl = el.querySelector("ul"); - const listItem = document.createElement("li"); - listItem.innerText = `Item ${parseInt(listEl.querySelectorAll("li").length, 10)}`; - listEl.appendChild(listItem); +const eventNames = ["navigationModelInit", "navigationModelChange", "navigationModelReset", "navigationModelMutation"]; + +// prevent page scroll on arrow keys for widget-1 and widget-2 (widget-3 uses an input which handles this natively) +[document.getElementById("widget-1"), document.getElementById("widget-2")].forEach(addPreventScrollKeys); + +const emitters = [...widgetEls].map((el, index) => { + const logEl = document.getElementById(`log-${index + 1}`); + + function logEvent(e) { + const item = document.createElement("li"); + const detail = e.detail ? ` ${e.detail.fromIndex} → ${e.detail.toIndex}` : ""; + item.textContent = `${e.type}${detail}`; + logEl.prepend(item); + } + + eventNames.forEach((name) => el.addEventListener(name, logEvent)); + + document.getElementById(`clear-${index + 1}`).addEventListener("click", () => { + logEl.innerHTML = ""; }); -}); -widgetEls.forEach(function (el, index) { - el.addEventListener("navigationModelInit", log); - el.addEventListener("navigationModelChange", log); - el.addEventListener("navigationModelReset", log); - el.addEventListener("navigationModelMutation", log); - emitters.push(NavigationEmitter.createLinear(el, "li", options[index])); + return NavigationEmitter.createLinear(el, "li", perWidgetOptions[index]); }); -wrapCheckbox.addEventListener("change", function (e) { - emitters.forEach(function (emitter) { +document.getElementById("wrap").addEventListener("change", (e) => { + emitters.forEach((emitter) => { emitter.model.options.wrap = e.target.checked; }); }); -// emitters[0].model.index = 1; -// emitters[1].model.index = 1; +document.getElementById("appender").addEventListener("click", () => { + widgetEls.forEach((el) => { + const listEl = el.querySelector("ul"); + const newItem = document.createElement("li"); + newItem.textContent = `Item ${listEl.querySelectorAll("li").length + 1}`; + listEl.appendChild(newItem); + }); +}); diff --git a/docs/core/makeup-navigation-emitter/index.min.js b/docs/core/makeup-navigation-emitter/index.min.js index 4301c149..37e7fc6d 100644 --- a/docs/core/makeup-navigation-emitter/index.min.js +++ b/docs/core/makeup-navigation-emitter/index.min.js @@ -11,9 +11,8 @@ Object.defineProperty(exports, "__esModule", ({ value: true })); exports.createLinear = createLinear; -var KeyEmitter = _interopRequireWildcard(__webpack_require__(915)); -var ExitEmitter = _interopRequireWildcard(__webpack_require__(956)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyEmitter = __webpack_require__(915); +var _makeupExitEmitter = __webpack_require__(956); const defaultOptions = { axis: "both", autoInit: "interactive", @@ -31,7 +30,7 @@ function findNavigableItems(items) { return items.filter(isItemNavigable); } function findFirstNavigableIndex(items) { - return items.findIndex(item => isItemNavigable(item)); + return items.findIndex(isItemNavigable); } function findLastNavigableIndex(items) { // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it @@ -213,7 +212,10 @@ class NavigationModel { */ constructor(el, itemSelector, selectedOptions) { /** @member {typeof defaultOptions} */ - this.options = Object.assign({}, defaultOptions, selectedOptions); + this.options = { + ...defaultOptions, + ...selectedOptions + }; /** @member {HTMLElement} */ this._el = el; @@ -329,8 +331,8 @@ class NavigationEmitter { this._clickListener = onClick.bind(model); this._focusExitListener = onFocusExit.bind(model); this._observer = new MutationObserver(onMutation.bind(model)); - KeyEmitter.addKeyDown(this.el); - ExitEmitter.addFocusExit(this.el); + (0, _makeupKeyEmitter.addKeyDown)(this.el); + (0, _makeupExitEmitter.addFocusExit)(this.el); const axis = model.options.axis; if (axis === "both" || axis === "x") { this.el.addEventListener("arrowLeftKeyDown", this._keyPrevListener); @@ -353,8 +355,8 @@ class NavigationEmitter { }); } destroy() { - KeyEmitter.removeKeyDown(this.el); - ExitEmitter.removeFocusExit(this.el); + (0, _makeupKeyEmitter.removeKeyDown)(this.el); + (0, _makeupExitEmitter.removeFocusExit)(this.el); this.el.removeEventListener("arrowLeftKeyDown", this._keyPrevListener); this.el.removeEventListener("arrowRightKeyDown", this._keyNextListener); this.el.removeEventListener("arrowUpKeyDown", this._keyPrevListener); @@ -372,11 +374,14 @@ function createLinear(el, itemSelector, selectedOptions) { } /* +// todo: rename to createGridNavigationEmitter when implemented static createGrid(el, rowSelector, colSelector, selectedOptions) { return null; } */ +// todo: rename createLinear to createLinearNavigationEmitter for unambiguous named import usage + /***/ }, @@ -585,6 +590,33 @@ function _default(el) { } +/***/ }, + +/***/ 795 +(__unused_webpack_module, exports) { + + + +Object.defineProperty(exports, "__esModule", ({ + value: true +})); +exports.remove = exports.add = void 0; +const SCROLL_KEYS = new Set([" ", "PageUp", "PageDown", "End", "Home", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"]); +const onKeyDown = e => { + if (SCROLL_KEYS.has(e.key)) { + e.preventDefault(); + } +}; +const add = el => { + el.addEventListener("keydown", onKeyDown); +}; +exports.add = add; +const remove = el => { + el.removeEventListener("keydown", onKeyDown); +}; +exports.remove = remove; + + /***/ } /******/ }); @@ -618,47 +650,47 @@ var __webpack_exports__ = {}; var NavigationEmitter = _interopRequireWildcard(__webpack_require__(405)); +var _makeupPreventScrollKeys = __webpack_require__(795); function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } -// REQUIRE -//const NavigationEmitter = require('makeup-navigation-emitter'); - -// IMPORT - -const emitters = []; -const appender = document.getElementById("appender"); const widgetEls = document.querySelectorAll(".widget"); -const wrapCheckbox = document.getElementById("wrap"); -const log = e => console.log(e.type, e.detail); -const options = [{}, { +const perWidgetOptions = [{}, { autoInit: "none", autoReset: "none" }, { autoInit: "none", autoReset: "none" }]; -appender.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const listEl = el.querySelector("ul"); - const listItem = document.createElement("li"); - listItem.innerText = `Item ${parseInt(listEl.querySelectorAll("li").length, 10)}`; - listEl.appendChild(listItem); +const eventNames = ["navigationModelInit", "navigationModelChange", "navigationModelReset", "navigationModelMutation"]; + +// prevent page scroll on arrow keys for widget-1 and widget-2 (widget-3 uses an input which handles this natively) +[document.getElementById("widget-1"), document.getElementById("widget-2")].forEach(_makeupPreventScrollKeys.add); +const emitters = [...widgetEls].map((el, index) => { + const logEl = document.getElementById(`log-${index + 1}`); + function logEvent(e) { + const item = document.createElement("li"); + const detail = e.detail ? ` ${e.detail.fromIndex} → ${e.detail.toIndex}` : ""; + item.textContent = `${e.type}${detail}`; + logEl.prepend(item); + } + eventNames.forEach(name => el.addEventListener(name, logEvent)); + document.getElementById(`clear-${index + 1}`).addEventListener("click", () => { + logEl.innerHTML = ""; }); + return NavigationEmitter.createLinear(el, "li", perWidgetOptions[index]); }); -widgetEls.forEach(function (el, index) { - el.addEventListener("navigationModelInit", log); - el.addEventListener("navigationModelChange", log); - el.addEventListener("navigationModelReset", log); - el.addEventListener("navigationModelMutation", log); - emitters.push(NavigationEmitter.createLinear(el, "li", options[index])); -}); -wrapCheckbox.addEventListener("change", function (e) { - emitters.forEach(function (emitter) { +document.getElementById("wrap").addEventListener("change", e => { + emitters.forEach(emitter => { emitter.model.options.wrap = e.target.checked; }); }); - -// emitters[0].model.index = 1; -// emitters[1].model.index = 1; +document.getElementById("appender").addEventListener("click", () => { + widgetEls.forEach(el => { + const listEl = el.querySelector("ul"); + const newItem = document.createElement("li"); + newItem.textContent = `Item ${listEl.querySelectorAll("li").length + 1}`; + listEl.appendChild(newItem); + }); +}); /******/ })() ; //# sourceMappingURL=index.min.js.map \ No newline at end of file diff --git a/docs/core/makeup-navigation-emitter/index.min.js.map b/docs/core/makeup-navigation-emitter/index.min.js.map index f48b50e9..2902ce4a 100644 --- a/docs/core/makeup-navigation-emitter/index.min.js.map +++ b/docs/core/makeup-navigation-emitter/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-navigation-emitter/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,yCAAyC,mBAAO,CAAC,GAAoB;AACrE,0CAA0C,mBAAO,CAAC,GAAqB;AACvE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,kBAAkB;;AAElB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA,iBAAiB,uBAAuB;AACxC,mCAAmC;;AAEnC,iBAAiB,aAAa;AAC9B;;AAEA,iBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;;AClXa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;ACrEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;UCvCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,gDAAgD,mBAAO,CAAC,GAA2B;AACnF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA,iCAAiC,mDAAmD;AACpF;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA,GAAG;AACH,CAAC;;AAED;AACA,+B","sources":["webpack://root/./packages/core/makeup-navigation-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-navigation-emitter/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-navigation-emitter/node_modules/makeup-key-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-navigation-emitter/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-navigation-emitter/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar KeyEmitter = _interopRequireWildcard(require(\"makeup-key-emitter\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n axis: \"both\",\n autoInit: \"interactive\",\n autoReset: \"current\",\n ignoreByDelegateSelector: null,\n wrap: false\n};\nfunction isItemNavigable(el) {\n return !el.hidden && el.getAttribute(\"aria-disabled\") !== \"true\";\n}\nfunction isIndexNavigable(items, index) {\n return index >= 0 && index < items.length ? isItemNavigable(items[index]) : false;\n}\nfunction findNavigableItems(items) {\n return items.filter(isItemNavigable);\n}\nfunction findFirstNavigableIndex(items) {\n return items.findIndex(item => isItemNavigable(item));\n}\nfunction findLastNavigableIndex(items) {\n // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it\n return items.indexOf(findNavigableItems(items).reverse()[0]);\n}\nfunction findIndexByAttribute(items, attribute, value) {\n return items.findIndex(item => isItemNavigable(item) && item.getAttribute(attribute) === value);\n}\nfunction findFirstNavigableAriaCheckedIndex(items) {\n return findIndexByAttribute(items, \"aria-checked\", \"true\");\n}\nfunction findFirstNavigableAriaSelectedIndex(items) {\n return findIndexByAttribute(items, \"aria-selected\", \"true\");\n}\nfunction findIgnoredByDelegateItems(el, options) {\n return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];\n}\nfunction findPreviousNavigableIndex(items, index, wrap) {\n let previousNavigableIndex = -1;\n if (index === null || atStart(items, index)) {\n if (wrap === true) {\n previousNavigableIndex = findLastNavigableIndex(items);\n }\n } else {\n let i = index;\n while (--i >= 0) {\n if (isItemNavigable(items[i])) {\n previousNavigableIndex = i;\n break;\n }\n }\n }\n return previousNavigableIndex;\n}\nfunction findNextNavigableIndex(items, index, wrap) {\n let nextNavigableIndex = -1;\n if (index === null) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n } else if (atEnd(items, index)) {\n if (wrap === true) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n }\n } else {\n let i = index;\n while (++i < items.length) {\n if (isItemNavigable(items[i])) {\n nextNavigableIndex = i;\n break;\n }\n }\n }\n return nextNavigableIndex;\n}\n\n// returning -1 means not found\nfunction findIndexPositionByType(typeOrNum, items, currentIndex) {\n let index = -1; // eslint-disable-line no-useless-assignment\n\n switch (typeOrNum) {\n case \"none\":\n index = null;\n break;\n case \"current\":\n index = currentIndex;\n break;\n case \"interactive\":\n index = findFirstNavigableIndex(items);\n break;\n case \"ariaChecked\":\n index = findFirstNavigableAriaCheckedIndex(items);\n break;\n case \"ariaSelected\":\n index = findFirstNavigableAriaSelectedIndex(items);\n break;\n case \"ariaSelectedOrInteractive\":\n index = findFirstNavigableAriaSelectedIndex(items);\n index = index === -1 ? findFirstNavigableIndex(items) : index;\n break;\n default:\n index = typeof typeOrNum === \"number\" || typeOrNum === null ? typeOrNum : -1;\n }\n return index;\n}\nfunction atStart(items, index) {\n return index === findFirstNavigableIndex(items);\n}\nfunction atEnd(items, index) {\n return index === findLastNavigableIndex(items);\n}\nfunction onKeyPrev(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onKeyNext(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onClick(e) {\n const itemIndex = this.indexOf(e.target.closest(this._itemSelector));\n if (isIndexNavigable(this.items, itemIndex)) {\n this.index = itemIndex;\n }\n}\nfunction onKeyHome(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findFirstNavigableIndex(this.items);\n }\n}\nfunction onKeyEnd(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findLastNavigableIndex(this.items);\n }\n}\nfunction onFocusExit() {\n if (this.options.autoReset !== null) {\n this.reset();\n }\n}\nfunction onMutation(e) {\n const fromIndex = this.index;\n let toIndex = this.index;\n // https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n const {\n addedNodes,\n attributeName,\n removedNodes,\n target,\n type\n } = e[0];\n if (type === \"attributes\") {\n if (target === this.currentItem) {\n if (attributeName === \"aria-disabled\") {\n // current item was disabled - keep it as current index (until a keyboard navigation happens)\n toIndex = this.index;\n } else if (attributeName === \"hidden\") {\n // current item was hidden and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n }\n } else {\n toIndex = this.index;\n }\n } else if (type === \"childList\") {\n if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {\n // current item was removed and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n // nodes were added and/or removed - keep current item and resync its index\n toIndex = this.indexOf(this._cachedElement);\n }\n }\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n}\nclass NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n /** @member {typeof defaultOptions} */\n this.options = Object.assign({}, defaultOptions, selectedOptions);\n\n /** @member {HTMLElement} */\n this._el = el;\n\n /** @member {string} */\n this._itemSelector = itemSelector;\n }\n}\nclass LinearNavigationModel extends NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n super(el, itemSelector, selectedOptions);\n const fromIndex = this._index;\n const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);\n\n // do not use setter as it will trigger a change event\n this._index = toIndex;\n\n // always keep an element reference to the last item (for use in mutation observer)\n // todo: convert index to Tuple to store last/current values instead?\n this._cachedElement = this.items[toIndex];\n this._el.dispatchEvent(new CustomEvent(\"navigationModelInit\", {\n bubbles: false,\n detail: {\n firstInteractiveIndex: this.firstNavigableIndex,\n fromIndex,\n items: this.items,\n toIndex\n }\n }));\n }\n get currentItem() {\n return this.items[this.index];\n }\n\n // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed\n get items() {\n return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n }\n get index() {\n return this._index;\n }\n\n /**\n * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)\n */\n set index(toIndex) {\n if (toIndex === this.index) {\n return;\n } else if (!isIndexNavigable(this.items, toIndex)) {\n // no-op. throw exception?\n } else {\n const fromIndex = this.index;\n // update cached element reference (for use in mutation observer if DOM node gets removed)\n this._cachedElement = this.items[toIndex];\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n indexOf(element) {\n return this.items.indexOf(element);\n }\n reset() {\n const fromIndex = this.index;\n const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);\n if (toIndex !== fromIndex) {\n // do not use setter as it will trigger a navigationModelChange event\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n}\n\n// 2D Grid Model will go here\n\n/*\nclass GridModel extends NavigationModel {\n constructor(el, rowSelector, colSelector) {\n super();\n this._coords = null;\n }\n}\n*/\n\nclass NavigationEmitter {\n /**\n * @param {HTMLElement} el\n * @param {LinearNavigationModel} model\n */\n constructor(el, model) {\n this.model = model;\n this.el = el;\n this._keyPrevListener = onKeyPrev.bind(model);\n this._keyNextListener = onKeyNext.bind(model);\n this._keyHomeListener = onKeyHome.bind(model);\n this._keyEndListener = onKeyEnd.bind(model);\n this._clickListener = onClick.bind(model);\n this._focusExitListener = onFocusExit.bind(model);\n this._observer = new MutationObserver(onMutation.bind(model));\n KeyEmitter.addKeyDown(this.el);\n ExitEmitter.addFocusExit(this.el);\n const axis = model.options.axis;\n if (axis === \"both\" || axis === \"x\") {\n this.el.addEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n }\n if (axis === \"both\" || axis === \"y\") {\n this.el.addEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n }\n this.el.addEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.addEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.addEventListener(\"click\", this._clickListener);\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n this._observer.observe(this.el, {\n childList: true,\n subtree: true,\n attributeFilter: [\"aria-disabled\", \"hidden\"],\n attributes: true,\n attributeOldValue: true\n });\n }\n destroy() {\n KeyEmitter.removeKeyDown(this.el);\n ExitEmitter.removeFocusExit(this.el);\n this.el.removeEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.removeEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.removeEventListener(\"click\", this._clickListener);\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n this._observer.disconnect();\n }\n}\nfunction createLinear(el, itemSelector, selectedOptions) {\n const model = new LinearNavigationModel(el, itemSelector, selectedOptions);\n return new NavigationEmitter(el, model);\n}\n\n/*\nstatic createGrid(el, rowSelector, colSelector, selectedOptions) {\n return null;\n}\n*/\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n if (!evt.shiftKey) {\n const key = evt.key;\n switch (key) {\n case \"Enter\":\n case \"Escape\":\n case \"PageUp\":\n case \"PageDown\":\n case \"End\":\n case \"Home\":\n case \"ArrowLeft\":\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"ArrowDown\":\n el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n detail: evt,\n bubbles: true\n }));\n break;\n case \" \":\n el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n detail: evt,\n bubbles: true\n }));\n break;\n default:\n return;\n }\n }\n}\nfunction onKeyDown(e) {\n onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n addKeyDown(el);\n addKeyUp(el);\n}\nfunction remove(el) {\n removeKeyDown(el);\n removeKeyUp(el);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar NavigationEmitter = _interopRequireWildcard(require(\"makeup-navigation-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// REQUIRE\n//const NavigationEmitter = require('makeup-navigation-emitter');\n\n// IMPORT\n\nconst emitters = [];\nconst appender = document.getElementById(\"appender\");\nconst widgetEls = document.querySelectorAll(\".widget\");\nconst wrapCheckbox = document.getElementById(\"wrap\");\nconst log = e => console.log(e.type, e.detail);\nconst options = [{}, {\n autoInit: \"none\",\n autoReset: \"none\"\n}, {\n autoInit: \"none\",\n autoReset: \"none\"\n}];\nappender.addEventListener(\"click\", function () {\n widgetEls.forEach(function (el) {\n const listEl = el.querySelector(\"ul\");\n const listItem = document.createElement(\"li\");\n listItem.innerText = `Item ${parseInt(listEl.querySelectorAll(\"li\").length, 10)}`;\n listEl.appendChild(listItem);\n });\n});\nwidgetEls.forEach(function (el, index) {\n el.addEventListener(\"navigationModelInit\", log);\n el.addEventListener(\"navigationModelChange\", log);\n el.addEventListener(\"navigationModelReset\", log);\n el.addEventListener(\"navigationModelMutation\", log);\n emitters.push(NavigationEmitter.createLinear(el, \"li\", options[index]));\n});\nwrapCheckbox.addEventListener(\"change\", function (e) {\n emitters.forEach(function (emitter) {\n emitter.model.options.wrap = e.target.checked;\n });\n});\n\n// emitters[0].model.index = 1;\n// emitters[1].model.index = 1;"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-navigation-emitter/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,wBAAwB,mBAAO,CAAC,GAAoB;AACpD,yBAAyB,mBAAO,CAAC,GAAqB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,kBAAkB;;AAElB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA,iBAAiB,uBAAuB;AACxC;AACA;AACA;AACA;;AAEA,iBAAiB,aAAa;AAC9B;;AAEA,iBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;ACvXa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;ACrEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;;ACvCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,cAAc,GAAG,WAAW;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA,cAAc;;;;;;;UCnBd;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,gDAAgD,mBAAO,CAAC,GAA2B;AACnF,+BAA+B,mBAAO,CAAC,GAA4B;AACnE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA,4BAA4B;AAC5B;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC;AACD;;AAEA;AACA;AACA;AACA,+CAA+C,UAAU;AACzD;AACA;AACA,kCAAkC,oBAAoB,IAAI,iBAAiB;AAC3E,0BAA0B,OAAO,EAAE,OAAO;AAC1C;AACA;AACA;AACA,mCAAmC,UAAU;AAC7C;AACA,GAAG;AACH;AACA,CAAC;AACD;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA,kCAAkC,yCAAyC;AAC3E;AACA,GAAG;AACH,CAAC,E","sources":["webpack://root/./packages/core/makeup-navigation-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-navigation-emitter/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-navigation-emitter/node_modules/makeup-key-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-navigation-emitter/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/./packages/core/makeup-prevent-scroll-keys/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-navigation-emitter/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar _makeupKeyEmitter = require(\"makeup-key-emitter\");\nvar _makeupExitEmitter = require(\"makeup-exit-emitter\");\nconst defaultOptions = {\n axis: \"both\",\n autoInit: \"interactive\",\n autoReset: \"current\",\n ignoreByDelegateSelector: null,\n wrap: false\n};\nfunction isItemNavigable(el) {\n return !el.hidden && el.getAttribute(\"aria-disabled\") !== \"true\";\n}\nfunction isIndexNavigable(items, index) {\n return index >= 0 && index < items.length ? isItemNavigable(items[index]) : false;\n}\nfunction findNavigableItems(items) {\n return items.filter(isItemNavigable);\n}\nfunction findFirstNavigableIndex(items) {\n return items.findIndex(isItemNavigable);\n}\nfunction findLastNavigableIndex(items) {\n // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it\n return items.indexOf(findNavigableItems(items).reverse()[0]);\n}\nfunction findIndexByAttribute(items, attribute, value) {\n return items.findIndex(item => isItemNavigable(item) && item.getAttribute(attribute) === value);\n}\nfunction findFirstNavigableAriaCheckedIndex(items) {\n return findIndexByAttribute(items, \"aria-checked\", \"true\");\n}\nfunction findFirstNavigableAriaSelectedIndex(items) {\n return findIndexByAttribute(items, \"aria-selected\", \"true\");\n}\nfunction findIgnoredByDelegateItems(el, options) {\n return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];\n}\nfunction findPreviousNavigableIndex(items, index, wrap) {\n let previousNavigableIndex = -1;\n if (index === null || atStart(items, index)) {\n if (wrap === true) {\n previousNavigableIndex = findLastNavigableIndex(items);\n }\n } else {\n let i = index;\n while (--i >= 0) {\n if (isItemNavigable(items[i])) {\n previousNavigableIndex = i;\n break;\n }\n }\n }\n return previousNavigableIndex;\n}\nfunction findNextNavigableIndex(items, index, wrap) {\n let nextNavigableIndex = -1;\n if (index === null) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n } else if (atEnd(items, index)) {\n if (wrap === true) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n }\n } else {\n let i = index;\n while (++i < items.length) {\n if (isItemNavigable(items[i])) {\n nextNavigableIndex = i;\n break;\n }\n }\n }\n return nextNavigableIndex;\n}\n\n// returning -1 means not found\nfunction findIndexPositionByType(typeOrNum, items, currentIndex) {\n let index = -1; // eslint-disable-line no-useless-assignment\n\n switch (typeOrNum) {\n case \"none\":\n index = null;\n break;\n case \"current\":\n index = currentIndex;\n break;\n case \"interactive\":\n index = findFirstNavigableIndex(items);\n break;\n case \"ariaChecked\":\n index = findFirstNavigableAriaCheckedIndex(items);\n break;\n case \"ariaSelected\":\n index = findFirstNavigableAriaSelectedIndex(items);\n break;\n case \"ariaSelectedOrInteractive\":\n index = findFirstNavigableAriaSelectedIndex(items);\n index = index === -1 ? findFirstNavigableIndex(items) : index;\n break;\n default:\n index = typeof typeOrNum === \"number\" || typeOrNum === null ? typeOrNum : -1;\n }\n return index;\n}\nfunction atStart(items, index) {\n return index === findFirstNavigableIndex(items);\n}\nfunction atEnd(items, index) {\n return index === findLastNavigableIndex(items);\n}\nfunction onKeyPrev(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onKeyNext(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onClick(e) {\n const itemIndex = this.indexOf(e.target.closest(this._itemSelector));\n if (isIndexNavigable(this.items, itemIndex)) {\n this.index = itemIndex;\n }\n}\nfunction onKeyHome(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findFirstNavigableIndex(this.items);\n }\n}\nfunction onKeyEnd(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findLastNavigableIndex(this.items);\n }\n}\nfunction onFocusExit() {\n if (this.options.autoReset !== null) {\n this.reset();\n }\n}\nfunction onMutation(e) {\n const fromIndex = this.index;\n let toIndex = this.index;\n // https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n const {\n addedNodes,\n attributeName,\n removedNodes,\n target,\n type\n } = e[0];\n if (type === \"attributes\") {\n if (target === this.currentItem) {\n if (attributeName === \"aria-disabled\") {\n // current item was disabled - keep it as current index (until a keyboard navigation happens)\n toIndex = this.index;\n } else if (attributeName === \"hidden\") {\n // current item was hidden and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n }\n } else {\n toIndex = this.index;\n }\n } else if (type === \"childList\") {\n if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {\n // current item was removed and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n // nodes were added and/or removed - keep current item and resync its index\n toIndex = this.indexOf(this._cachedElement);\n }\n }\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n}\nclass NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n /** @member {typeof defaultOptions} */\n this.options = {\n ...defaultOptions,\n ...selectedOptions\n };\n\n /** @member {HTMLElement} */\n this._el = el;\n\n /** @member {string} */\n this._itemSelector = itemSelector;\n }\n}\nclass LinearNavigationModel extends NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n super(el, itemSelector, selectedOptions);\n const fromIndex = this._index;\n const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);\n\n // do not use setter as it will trigger a change event\n this._index = toIndex;\n\n // always keep an element reference to the last item (for use in mutation observer)\n // todo: convert index to Tuple to store last/current values instead?\n this._cachedElement = this.items[toIndex];\n this._el.dispatchEvent(new CustomEvent(\"navigationModelInit\", {\n bubbles: false,\n detail: {\n firstInteractiveIndex: this.firstNavigableIndex,\n fromIndex,\n items: this.items,\n toIndex\n }\n }));\n }\n get currentItem() {\n return this.items[this.index];\n }\n\n // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed\n get items() {\n return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n }\n get index() {\n return this._index;\n }\n\n /**\n * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)\n */\n set index(toIndex) {\n if (toIndex === this.index) {\n return;\n } else if (!isIndexNavigable(this.items, toIndex)) {\n // no-op. throw exception?\n } else {\n const fromIndex = this.index;\n // update cached element reference (for use in mutation observer if DOM node gets removed)\n this._cachedElement = this.items[toIndex];\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n indexOf(element) {\n return this.items.indexOf(element);\n }\n reset() {\n const fromIndex = this.index;\n const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);\n if (toIndex !== fromIndex) {\n // do not use setter as it will trigger a navigationModelChange event\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n}\n\n// 2D Grid Model will go here\n\n/*\nclass GridModel extends NavigationModel {\n constructor(el, rowSelector, colSelector) {\n super();\n this._coords = null;\n }\n}\n*/\n\nclass NavigationEmitter {\n /**\n * @param {HTMLElement} el\n * @param {LinearNavigationModel} model\n */\n constructor(el, model) {\n this.model = model;\n this.el = el;\n this._keyPrevListener = onKeyPrev.bind(model);\n this._keyNextListener = onKeyNext.bind(model);\n this._keyHomeListener = onKeyHome.bind(model);\n this._keyEndListener = onKeyEnd.bind(model);\n this._clickListener = onClick.bind(model);\n this._focusExitListener = onFocusExit.bind(model);\n this._observer = new MutationObserver(onMutation.bind(model));\n (0, _makeupKeyEmitter.addKeyDown)(this.el);\n (0, _makeupExitEmitter.addFocusExit)(this.el);\n const axis = model.options.axis;\n if (axis === \"both\" || axis === \"x\") {\n this.el.addEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n }\n if (axis === \"both\" || axis === \"y\") {\n this.el.addEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n }\n this.el.addEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.addEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.addEventListener(\"click\", this._clickListener);\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n this._observer.observe(this.el, {\n childList: true,\n subtree: true,\n attributeFilter: [\"aria-disabled\", \"hidden\"],\n attributes: true,\n attributeOldValue: true\n });\n }\n destroy() {\n (0, _makeupKeyEmitter.removeKeyDown)(this.el);\n (0, _makeupExitEmitter.removeFocusExit)(this.el);\n this.el.removeEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.removeEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.removeEventListener(\"click\", this._clickListener);\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n this._observer.disconnect();\n }\n}\nfunction createLinear(el, itemSelector, selectedOptions) {\n const model = new LinearNavigationModel(el, itemSelector, selectedOptions);\n return new NavigationEmitter(el, model);\n}\n\n/*\n// todo: rename to createGridNavigationEmitter when implemented\nstatic createGrid(el, rowSelector, colSelector, selectedOptions) {\n return null;\n}\n*/\n\n// todo: rename createLinear to createLinearNavigationEmitter for unambiguous named import usage\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n if (!evt.shiftKey) {\n const key = evt.key;\n switch (key) {\n case \"Enter\":\n case \"Escape\":\n case \"PageUp\":\n case \"PageDown\":\n case \"End\":\n case \"Home\":\n case \"ArrowLeft\":\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"ArrowDown\":\n el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n detail: evt,\n bubbles: true\n }));\n break;\n case \" \":\n el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n detail: evt,\n bubbles: true\n }));\n break;\n default:\n return;\n }\n }\n}\nfunction onKeyDown(e) {\n onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n addKeyDown(el);\n addKeyUp(el);\n}\nfunction remove(el) {\n removeKeyDown(el);\n removeKeyUp(el);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.remove = exports.add = void 0;\nconst SCROLL_KEYS = new Set([\" \", \"PageUp\", \"PageDown\", \"End\", \"Home\", \"ArrowLeft\", \"ArrowUp\", \"ArrowRight\", \"ArrowDown\"]);\nconst onKeyDown = e => {\n if (SCROLL_KEYS.has(e.key)) {\n e.preventDefault();\n }\n};\nconst add = el => {\n el.addEventListener(\"keydown\", onKeyDown);\n};\nexports.add = add;\nconst remove = el => {\n el.removeEventListener(\"keydown\", onKeyDown);\n};\nexports.remove = remove;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar NavigationEmitter = _interopRequireWildcard(require(\"makeup-navigation-emitter\"));\nvar _makeupPreventScrollKeys = require(\"makeup-prevent-scroll-keys\");\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst widgetEls = document.querySelectorAll(\".widget\");\nconst perWidgetOptions = [{}, {\n autoInit: \"none\",\n autoReset: \"none\"\n}, {\n autoInit: \"none\",\n autoReset: \"none\"\n}];\nconst eventNames = [\"navigationModelInit\", \"navigationModelChange\", \"navigationModelReset\", \"navigationModelMutation\"];\n\n// prevent page scroll on arrow keys for widget-1 and widget-2 (widget-3 uses an input which handles this natively)\n[document.getElementById(\"widget-1\"), document.getElementById(\"widget-2\")].forEach(_makeupPreventScrollKeys.add);\nconst emitters = [...widgetEls].map((el, index) => {\n const logEl = document.getElementById(`log-${index + 1}`);\n function logEvent(e) {\n const item = document.createElement(\"li\");\n const detail = e.detail ? ` ${e.detail.fromIndex} → ${e.detail.toIndex}` : \"\";\n item.textContent = `${e.type}${detail}`;\n logEl.prepend(item);\n }\n eventNames.forEach(name => el.addEventListener(name, logEvent));\n document.getElementById(`clear-${index + 1}`).addEventListener(\"click\", () => {\n logEl.innerHTML = \"\";\n });\n return NavigationEmitter.createLinear(el, \"li\", perWidgetOptions[index]);\n});\ndocument.getElementById(\"wrap\").addEventListener(\"change\", e => {\n emitters.forEach(emitter => {\n emitter.model.options.wrap = e.target.checked;\n });\n});\ndocument.getElementById(\"appender\").addEventListener(\"click\", () => {\n widgetEls.forEach(el => {\n const listEl = el.querySelector(\"ul\");\n const newItem = document.createElement(\"li\");\n newItem.textContent = `Item ${listEl.querySelectorAll(\"li\").length + 1}`;\n listEl.appendChild(newItem);\n });\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-next-id/index.html b/docs/core/makeup-next-id/index.html index d9dec3db..0d431d2c 100644 --- a/docs/core/makeup-next-id/index.html +++ b/docs/core/makeup-next-id/index.html @@ -3,19 +3,25 @@ makeup-next-id demo + + -
                            -

                            makeup-next-id demo

                            -

                            Click button to append a new list item with generated id. Check console for output.

                            +
                            +

                            core / makeup-next-id

                            +

                            Assigns a unique, sequential ID to an element if it does not already have one.

                            -
                              +
                              -
                              - - +

                              Append element with generated ID

                              +

                              Each new item receives the next available ID for the given prefix.

                              + + + +
                              +
                                + - diff --git a/docs/core/makeup-next-id/index.js b/docs/core/makeup-next-id/index.js index e9c861bc..7dee69cc 100644 --- a/docs/core/makeup-next-id/index.js +++ b/docs/core/makeup-next-id/index.js @@ -1,18 +1,13 @@ -// REQUIRE -//const nextId = require('makeup-next-id').default; - -// IMPORT import nextId from "makeup-next-id"; const listEl = document.getElementById("list"); -const testForm = document.getElementById("testForm"); -const inputEl = document.getElementById("prefix"); +const formEl = document.getElementById("demo-form"); +const prefixEl = document.getElementById("prefix"); -testForm.addEventListener("submit", (e) => { +formEl.addEventListener("submit", (e) => { e.preventDefault(); const listItem = document.createElement("li"); - const id = nextId(listItem, inputEl.value); - listItem.innerText = `Item ${listEl.childNodes.length} (${id})`; - console.log(`id: ${id}`); + const id = nextId(listItem, prefixEl.value); + listItem.textContent = `id="${id}"`; listEl.appendChild(listItem); }); diff --git a/docs/core/makeup-next-id/index.min.js b/docs/core/makeup-next-id/index.min.js index 3612abc1..481504c2 100644 --- a/docs/core/makeup-next-id/index.min.js +++ b/docs/core/makeup-next-id/index.min.js @@ -39,7 +39,7 @@ function _default(el) { const key = `${prefix}${separator}${randomPortion}`; // initialise key in sequence map if necessary - sequenceMap[key] = sequenceMap[key] || 0; + sequenceMap[key] ??= 0; if (!el.id) { el.setAttribute("id", `${key}-${sequenceMap[key]++}`); } @@ -81,20 +81,14 @@ var __webpack_exports__ = {}; var _makeupNextId = _interopRequireDefault(__webpack_require__(937)); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } -// REQUIRE -//const nextId = require('makeup-next-id').default; - -// IMPORT - const listEl = document.getElementById("list"); -const testForm = document.getElementById("testForm"); -const inputEl = document.getElementById("prefix"); -testForm.addEventListener("submit", e => { +const formEl = document.getElementById("demo-form"); +const prefixEl = document.getElementById("prefix"); +formEl.addEventListener("submit", e => { e.preventDefault(); const listItem = document.createElement("li"); - const id = (0, _makeupNextId.default)(listItem, inputEl.value); - listItem.innerText = `Item ${listEl.childNodes.length} (${id})`; - console.log(`id: ${id}`); + const id = (0, _makeupNextId.default)(listItem, prefixEl.value); + listItem.textContent = `id="${id}"`; listEl.appendChild(listItem); }); /******/ })() diff --git a/docs/core/makeup-next-id/index.min.js.map b/docs/core/makeup-next-id/index.min.js.map index 8e28284d..1416dc1e 100644 --- a/docs/core/makeup-next-id/index.min.js.map +++ b/docs/core/makeup-next-id/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-next-id/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;UCvCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,0BAA0B,GAAG,GAAG;AAC/D,qBAAqB,GAAG;AACxB;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-next-id/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-next-id/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n//const nextId = require('makeup-next-id').default;\n\n// IMPORT\n\nconst listEl = document.getElementById(\"list\");\nconst testForm = document.getElementById(\"testForm\");\nconst inputEl = document.getElementById(\"prefix\");\ntestForm.addEventListener(\"submit\", e => {\n e.preventDefault();\n const listItem = document.createElement(\"li\");\n const id = (0, _makeupNextId.default)(listItem, inputEl.value);\n listItem.innerText = `Item ${listEl.childNodes.length} (${id})`;\n console.log(`id: ${id}`);\n listEl.appendChild(listItem);\n});"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-next-id/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;UCvCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gCAAgC,GAAG;AACnC;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-next-id/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-next-id/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] ??= 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst listEl = document.getElementById(\"list\");\nconst formEl = document.getElementById(\"demo-form\");\nconst prefixEl = document.getElementById(\"prefix\");\nformEl.addEventListener(\"submit\", e => {\n e.preventDefault();\n const listItem = document.createElement(\"li\");\n const id = (0, _makeupNextId.default)(listItem, prefixEl.value);\n listItem.textContent = `id=\"${id}\"`;\n listEl.appendChild(listItem);\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-prevent-scroll-keys/index.html b/docs/core/makeup-prevent-scroll-keys/index.html index f75289d5..7ce469d2 100644 --- a/docs/core/makeup-prevent-scroll-keys/index.html +++ b/docs/core/makeup-prevent-scroll-keys/index.html @@ -3,308 +3,56 @@ makeup-prevent-scroll-keys demo + + + -
                                -

                                makeup-prevent-scroll-keys demo

                                +
                                +

                                core / makeup-prevent-scroll-keys

                                +

                                + Prevents the browser from scrolling when accessibility keys (arrows, space, page up/down, home, end) are pressed + on a widget. +

                                +

                                + Note: only use on ARIA widgets (menu, tabs, combobox, etc.) — not on regular buttons or links. +

                                -
                                -

                                - Set keyboard focus on the dumb widget. Page scroll should be prevented when any scroll key is pressed (e.g. - DOWN ARROW, PAGE DOWN, END). Compare this to link, button and textbox behaviour. -

                                -

                                - Use with caution! This plugin should only be used on ARIA widgets such as tab, menu, combobox, etc. Not on - regular buttons and links! -

                                -
                                -
                                -
                                  -
                                • Link
                                  • -
                                  • -
                                  • -
                                • Dumb Widget
                                  • -
                                -

                                - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit blandit ligula, eget dapibus - sapien iaculis et. Cras sit amet metus at sapien dignissim bibendum eget non est. Sed eu semper orci. Nulla - egestas tempus ligula quis scelerisque. Sed eu suscipit leo. Sed egestas efficitur massa. Maecenas venenatis - interdum facilisis. Aenean eleifend ex sit amet tortor auctor pellentesque. Proin semper orci vel consequat - volutpat. Ut eget arcu maximus, mollis nisl non, aliquet odio. Curabitur rhoncus sapien odio, porttitor porta - odio tincidunt id. Nunc ultrices est velit, eu efficitur lacus porttitor sed. Nam vel lorem ullamcorper, - vehicula tortor nec, ultricies erat. Vestibulum pulvinar odio at augue vulputate porta. Nunc ac urna non massa - cursus cursus id fermentum sapien. Phasellus ut enim turpis. Quisque mattis aliquet ligula eget auctor. Duis - rhoncus suscipit fringilla. Donec mattis nec odio vitae tempus. Proin pharetra imperdiet nisl quis maximus. - Nulla facilisi. Praesent at malesuada arcu. Integer in elit at nisl faucibus consequat non eget nibh. Duis - iaculis interdum tincidunt. Pellentesque interdum odio est, tincidunt mattis arcu posuere eu. Pellentesque - habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non ex ut nunc - consequat hendrerit vitae a metus. Donec egestas molestie auctor. Vestibulum vel semper ligula, nec fermentum - eros. Vivamus a metus eget magna molestie tristique non at mi. Praesent aliquet ex vitae arcu rutrum, ac - luctus lectus tincidunt. Donec aliquet urna ac dolor maximus, nec scelerisque nibh lobortis. Sed elementum - mauris erat. Praesent et condimentum massa, vitae tempor diam. Sed tempus feugiat neque, sed venenatis odio - hendrerit sed. Maecenas tristique, nibh quis ultricies ullamcorper, nibh arcu blandit neque, laoreet cursus - turpis augue et sapien. Donec non neque eu metus bibendum porttitor vitae eget risus. Donec sollicitudin - volutpat nisl in consectetur. Aliquam faucibus dui sit amet ultricies euismod. Donec felis purus, congue quis - elit in, placerat luctus felis. Sed non mi dictum nibh consectetur volutpat sit amet in odio. Nulla facilisis - feugiat ipsum suscipit tincidunt. Integer volutpat mattis nibh in suscipit. Vestibulum facilisis consequat - ullamcorper. Donec feugiat neque vel ante congue, id eleifend massa egestas. Duis condimentum orci velit, a - semper libero finibus sit amet. Duis at nisi id metus dictum cursus sed eu metus. Nam aliquam turpis purus, - vitae blandit neque posuere ut. Duis nec lectus vitae nibh pulvinar pretium sit amet eget enim. In aliquet - consectetur nisi, non tincidunt elit. Aenean non leo sit amet odio pellentesque aliquam sit amet consequat - nisl. Sed fringilla felis vel orci eleifend lobortis. Aenean fermentum ante quis est facilisis egestas id - placerat felis. Phasellus ultrices tortor congue blandit finibus. Nullam ullamcorper sed augue sed fermentum. - Nunc ac faucibus sapien, in ullamcorper metus. Aenean vulputate, nunc et varius viverra, est odio porttitor - libero, id hendrerit odio elit congue nisi. Vestibulum vel erat ante. Sed dapibus justo ac semper rutrum. - Nullam lobortis odio quis laoreet accumsan. Phasellus massa dui, facilisis vitae cursus ac, malesuada vitae - mi. Integer laoreet at erat a facilisis. Etiam tempus dignissim leo, at sollicitudin neque rhoncus id. - Curabitur sapien purus, egestas sagittis tincidunt a, molestie sit amet elit. Class aptent taciti sociosqu ad - litora torquent per conubia nostra, per inceptos himenaeos. Etiam venenatis malesuada felis, in blandit nisi - malesuada eget. Nullam et ullamcorper ipsum, luctus mattis lacus. Nunc feugiat ex et semper pretium. Nulla - posuere pretium ligula. Fusce eros urna, semper non euismod eu, porta consectetur arcu. Donec rutrum finibus - turpis et lacinia. Nunc scelerisque ipsum metus, nec semper mauris tincidunt vitae. Pellentesque auctor ornare - mauris ac condimentum. Nulla cursus nibh at orci molestie, eget congue nisi aliquam. Pellentesque ut tellus - ultrices, viverra lorem at, rutrum neque. Nullam ornare condimentum ipsum sed dapibus. Donec ut convallis - tortor. Sed consequat et quam eget aliquet. Ut iaculis pretium est quis convallis. Mauris iaculis ultricies - erat, ut tincidunt mauris dignissim ut. Etiam scelerisque luctus dapibus. Sed eu lobortis risus, et tempus - nisi. Proin porta leo at est ultrices, a dapibus diam interdum. Quisque ultrices eros vel scelerisque - porttitor. Nam faucibus sapien in enim commodo efficitur. Ut id tristique turpis. Nullam faucibus sed nisi sed - eleifend. Donec vitae gravida risus. Cras in leo hendrerit nibh imperdiet finibus at a eros. Nullam dolor - libero, convallis sit amet nunc eu, maximus tempus ex. Sed ut feugiat sem. Ut volutpat nibh id risus cursus - dapibus. Integer vitae sapien nec velit laoreet fermentum. Curabitur at fermentum ante. Curabitur et libero - sed massa imperdiet convallis posuere eget justo. Quisque elit arcu, semper vel dui nec, vestibulum laoreet - ligula. Integer eget rutrum orci. Quisque cursus, erat id viverra posuere, orci lorem posuere ligula, nec - ornare sapien risus vel ex. Nulla in metus non libero sagittis pulvinar at vitae elit. Nunc vel convallis - lorem, in lobortis sem. Donec luctus tortor nunc, eget dapibus ligula rutrum non. Morbi elementum, sapien - eleifend interdum iaculis, eros sapien eleifend erat, ac faucibus lectus ligula nec magna. Mauris lacinia mi - quis nunc auctor, et luctus metus lobortis. Sed convallis quam sodales malesuada mollis. Donec at nibh - faucibus, condimentum dui in, ornare odio. Nam hendrerit neque odio. Quisque sit amet erat sed ipsum gravida - eleifend. Curabitur ultricies velit dui, sit amet congue nunc tempor maximus. Nullam euismod neque vitae - egestas ultrices. Aenean non fringilla felis, ac dictum quam. Phasellus aliquam odio pellentesque lacus - consequat, sit amet placerat sapien vestibulum. Donec aliquet elementum elementum. Sed elementum, urna id - accumsan congue, nisi orci euismod ex, ac sodales nulla urna et augue. Cum sociis natoque penatibus et magnis - dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et - ultrices posuere cubilia Curae; Ut eu blandit sapien. Integer ut enim convallis, blandit purus euismod, - aliquet risus. Morbi at tristique magna. Maecenas faucibus finibus augue, in pharetra velit vestibulum in. - Vestibulum venenatis mauris dolor, ut egestas tortor tempor nec. Donec tincidunt neque nec magna dignissim - semper. Vestibulum maximus enim at nisl auctor, quis pellentesque massa molestie. Sed eget commodo dolor, sed - consectetur augue. Mauris tristique dui at est semper convallis. Integer feugiat tristique sem, in - sollicitudin nisi finibus vulputate. Nam placerat eget orci eu dapibus. Praesent sit amet tellus nec nisl - venenatis ultricies eu ut lorem. Sed nulla ante, aliquet malesuada sollicitudin vel, semper ac felis. Cum - sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ac tempor magna. - Nullam non massa odio. Quisque accumsan gravida neque id sollicitudin. Donec dolor ex, commodo id molestie at, - commodo non sapien. Curabitur commodo lacus sit amet nibh scelerisque faucibus. Nam eget nibh non nibh pretium - ultricies ac ut neque. Ut malesuada mi lacus, vel sagittis leo vestibulum vel. Duis fringilla ipsum gravida - maximus posuere. Vivamus semper enim sit amet ex imperdiet sodales. Ut vulputate sed diam sit amet - scelerisque. Morbi tortor turpis, rutrum vitae laoreet eu, molestie in justo. Aenean luctus laoreet enim - consectetur varius. Duis consequat hendrerit nulla, ut pharetra turpis faucibus quis. Curabitur in venenatis - eros. Vivamus mattis massa ac felis euismod eleifend. Aliquam nisl nulla, dignissim a quam at, eleifend - convallis enim. Integer auctor nibh arcu, et tempor dui ullamcorper vel. Morbi consectetur fermentum enim, vel - finibus mauris vehicula ac. Maecenas neque tortor, porta sit amet turpis nec, sollicitudin volutpat sapien. - Aenean iaculis lectus in lacus elementum dictum. Fusce pretium nibh eu elit aliquet, sit amet finibus ex - scelerisque. Morbi volutpat ornare mauris, sagittis tristique mi. Mauris rutrum faucibus erat, eu pharetra - sapien ultricies eget. Sed eu interdum risus. Class aptent taciti sociosqu ad litora torquent per conubia - nostra, per inceptos himenaeos. Nam sit amet elit a sem faucibus mattis quis sit amet massa. Proin et aliquet - erat. Donec ac venenatis mi. Ut sed pharetra lacus. Quisque rhoncus tellus efficitur nisi imperdiet ultricies. - Cras faucibus, mauris in dignissim ullamcorper, diam justo luctus nulla, vel pretium neque mauris id ante. Nam - sit amet hendrerit sapien, a vestibulum nisi. Cras ut sem sed lacus molestie tincidunt nec quis purus. Ut quis - enim sed dolor faucibus egestas in quis dolor. Donec aliquet nulla sagittis, fermentum ex a, congue enim. - Nullam vitae lacus elit. Proin rhoncus justo nec tellus porta eleifend. Suspendisse orci nibh, gravida eu - lacinia vestibulum, porta vitae mauris. Nunc et placerat nibh. Praesent faucibus, leo vitae tincidunt viverra, - erat elit rhoncus urna, sed laoreet velit quam at libero. Praesent leo urna, commodo eu purus vitae, lobortis - mattis velit. Donec rhoncus elit quis quam volutpat tincidunt. Proin iaculis, felis vel accumsan aliquet, enim - nibh tincidunt dolor, non tristique elit nulla ac metus. Donec et placerat nisl. Maecenas vitae felis id nisi - venenatis placerat in non libero. Nullam interdum, arcu eget suscipit egestas, arcu sapien placerat quam, - vitae molestie eros quam at eros. Ut varius interdum dui, a lobortis sapien rutrum et. Sed consequat nunc - nunc, in finibus risus tincidunt eget. Duis non lectus ut leo accumsan rhoncus. Fusce risus augue, vehicula - nec placerat sed, tristique quis ligula. Duis ut fringilla ipsum, fringilla malesuada lectus. Aenean et odio - nunc. Suspendisse tincidunt, odio vitae interdum lacinia, purus arcu tempor orci, pulvinar tincidunt nisl - lorem sit amet nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis - egestas. In hac habitasse platea dictumst. Nulla euismod, sem quis tincidunt mollis, velit lectus gravida - purus, sit amet dictum justo lacus nec sapien. Nullam vehicula metus aliquet diam mattis rutrum eget non - dolor. Vivamus ut porta massa. Integer tincidunt sit amet purus vel pharetra. Quisque at feugiat tellus. - Phasellus vitae lacus lectus. In malesuada nisl id enim finibus egestas. Proin ac sapien magna. Sed pulvinar - augue a eros feugiat venenatis. Morbi a mauris fermentum, pharetra dolor molestie, feugiat neque. Duis justo - sapien, laoreet ac hendrerit id, dapibus ut erat. Cras mattis velit leo, eu laoreet arcu volutpat in. - Phasellus facilisis urna sit amet sollicitudin tincidunt. Cras blandit erat sit amet aliquam tristique. Nullam - lacinia vestibulum nisi, ut malesuada libero tempus quis. Fusce fermentum ullamcorper erat, nec dictum arcu - fringilla non. Fusce aliquet augue enim, at aliquam ipsum blandit vel. Morbi gravida ornare finibus. Nulla in - turpis mattis, faucibus nibh id, vestibulum justo. Vestibulum dictum felis non massa ullamcorper, sed euismod - purus imperdiet. Vivamus dignissim, nibh eget laoreet ornare, ligula sem dictum ligula, facilisis convallis - odio arcu ac sem. Pellentesque at nibh ut metus egestas maximus. Donec condimentum ullamcorper risus, in - placerat sapien maximus sed. Suspendisse a odio eu leo pulvinar finibus. Cras tempor bibendum eros, non - vestibulum libero luctus quis. In ac nunc id enim hendrerit molestie. Nullam id nisl consectetur, maximus diam - vitae, ultricies mauris. Etiam quis rutrum elit, vitae porttitor diam. Donec a bibendum augue. Pellentesque mi - purus, cursus sed finibus vel, volutpat sed erat. Ut non justo posuere lorem convallis elementum vel eu velit. - Nunc sed nunc dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; - Fusce ultrices volutpat tortor feugiat rhoncus. Sed fermentum viverra nisl, quis vehicula dui pretium ac. - Quisque a placerat ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis - egestas. Suspendisse imperdiet dolor eu odio mollis, efficitur gravida metus rhoncus. Sed placerat eu mauris - id commodo. Vestibulum eros ipsum, pulvinar a ornare vel, aliquet in lectus. Aenean efficitur dictum mi, - viverra euismod lacus viverra id. Nunc sodales sit amet sem sit amet maximus. Etiam ut velit risus. Sed eros - magna, placerat eget tellus eget, viverra luctus mauris. Cum sociis natoque penatibus et magnis dis parturient - montes, nascetur ridiculus mus. In malesuada at felis at venenatis. Mauris tristique dictum mauris, nec - condimentum neque feugiat a. Morbi aliquet eros ut ornare iaculis. In hac habitasse platea dictumst. Nulla - vehicula eros sed sem varius viverra. In finibus mattis tempor. Proin interdum vehicula eros nec ornare. - Aenean convallis turpis ut enim laoreet malesuada. Aenean id odio in sem sodales placerat. Praesent aliquet - iaculis malesuada. Cras eros est, consequat in tincidunt id, rhoncus a diam. In nec interdum nibh, ullamcorper - rhoncus nunc. Nulla venenatis, quam in eleifend dictum, lectus libero molestie tellus, ut viverra urna tellus - nec enim. Sed at neque iaculis, suscipit erat sit amet, feugiat dolor. Duis vehicula purus nulla, eu facilisis - eros rhoncus eu. Suspendisse commodo rutrum felis non malesuada. Duis placerat elit volutpat leo feugiat, a - facilisis sem consectetur. Etiam ligula lacus, gravida a finibus in, tempor et lacus. Praesent rutrum, ipsum - sagittis consectetur ultrices, libero tellus egestas nibh, sed blandit ante massa ac est. Donec accumsan mi - vitae felis pulvinar, et gravida est volutpat. Suspendisse dui tellus, pretium eu lectus at, semper venenatis - dui. Quisque quam tortor, scelerisque et faucibus id, luctus sit amet risus. Nam sodales placerat ipsum, vel - venenatis est finibus sit amet. Curabitur lacinia et augue eget lacinia. Nunc dapibus, mauris a sodales - scelerisque, lacus est ultricies tellus, ut dapibus dolor arcu vitae metus. Nunc mollis, magna sit amet - accumsan semper, libero justo iaculis ipsum, mattis tempus purus metus eget odio. Pellentesque pellentesque - imperdiet cursus. Praesent sollicitudin sit amet dolor quis auctor. Duis iaculis ante vel augue interdum, ac - suscipit erat placerat. Aenean mi risus, ullamcorper sit amet ante aliquet, pellentesque imperdiet tellus. - Duis et lacinia lectus. Ut volutpat laoreet dapibus. Proin commodo nisi eget lectus hendrerit, sit amet rutrum - lorem volutpat. Nulla iaculis ex risus, ac ullamcorper urna placerat in. Vivamus dictum varius nunc feugiat - rhoncus. Nam non nulla quis odio tempor euismod. Sed ornare suscipit commodo. Praesent aliquam turpis id mi - venenatis, vel ultricies risus porttitor. Nullam a orci quis arcu porta sodales. Vivamus dictum diam in - feugiat maximus. Curabitur eget hendrerit nisi, vel vestibulum tortor. Nulla in massa venenatis, iaculis risus - sit amet, sollicitudin ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus - mus. Quisque interdum ultrices quam, sit amet cursus mi dapibus vitae. Etiam laoreet molestie ipsum vitae - porta. Nulla fringilla lacus sit amet rutrum lacinia. Phasellus lectus urna, congue ut feugiat eget, hendrerit - at libero. Integer maximus tristique vulputate. Proin a dui id urna vestibulum eleifend at eget ipsum. Nunc - interdum lacus in nibh congue rutrum. Nulla nec placerat lorem, et interdum neque. Nullam condimentum - ullamcorper justo euismod vestibulum. Sed eu nunc rutrum, vestibulum est id, blandit nulla. Donec pulvinar leo - sed massa porta, et euismod justo molestie. Morbi hendrerit, ante sed ullamcorper consectetur, erat nibh - posuere enim, ac sodales enim massa ac erat. Ut at ex vitae magna euismod pellentesque vitae sit amet risus. - Suspendisse potenti. Sed in tempus odio. Sed id lectus lacus. Sed ultricies eros id felis porta, a elementum - justo interdum. Nam euismod est vel ipsum dignissim interdum. Vivamus eleifend tincidunt urna eu feugiat. - Fusce vitae velit urna. Nunc sodales euismod nibh non accumsan. In faucibus vel lectus in viverra. Fusce - laoreet eget erat quis mollis. Aenean at odio sapien. Aliquam tortor ipsum, auctor nec est non, commodo - fringilla felis. Maecenas sollicitudin lectus velit, id pretium ex pulvinar eget. Quisque convallis auctor - consectetur. Sed efficitur gravida erat eget malesuada. Aliquam finibus erat justo, a porttitor erat laoreet - id. Morbi id eros dolor. Duis porttitor neque massa, non faucibus leo faucibus ut. Quisque pharetra felis - dolor, vel commodo massa pretium eget. Donec ac imperdiet dolor. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Phasellus viverra semper quam quis egestas. Nulla accumsan arcu eu suscipit porttitor. Sed et - ipsum ut mauris convallis scelerisque et congue dolor. Sed feugiat orci vitae laoreet condimentum. Quisque et - facilisis urna, vitae lacinia dui. Proin sodales venenatis est et venenatis. Sed dignissim placerat massa, sed - fermentum lectus. Vivamus fringilla sodales turpis a dictum. Aenean malesuada mauris at velit aliquet, quis - elementum diam condimentum. Pellentesque fermentum in ante in dapibus. Phasellus nec ipsum nec est porta - ultrices vel sed augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec orci urna. Sed - rutrum ligula odio, nec consectetur ex iaculis vel. Quisque tempor ante id metus viverra, et interdum urna - blandit. Quisque sollicitudin, arcu a dapibus imperdiet, lorem nisi ultrices leo, at tempus lorem leo eget - lacus. Nam aliquam augue non urna pharetra, ut scelerisque ante facilisis. Nam ipsum orci, egestas vitae nibh - nec, efficitur malesuada ligula. Ut turpis lorem, fermentum eget orci quis, consequat pulvinar mi. Donec felis - mi, ullamcorper eget eleifend at, eleifend eget quam. Donec mollis rhoncus finibus. Maecenas interdum, sapien - ac semper lobortis, odio nisl accumsan magna, vel euismod ipsum sem at augue. Curabitur quis purus sodales, - laoreet sapien facilisis, scelerisque dolor. Curabitur nibh neque, porttitor vel maximus eu, tempor in ex. Ut - lectus metus, sollicitudin non dapibus consectetur, semper quis eros. Donec gravida libero sed sapien - placerat, facilisis dignissim dolor sagittis. Sed lobortis dui purus, interdum pulvinar nisi bibendum eu. Sed - elementum, felis et consectetur fringilla, augue ex commodo ipsum, imperdiet tincidunt leo tellus nec nisi. - Nam id sollicitudin ipsum, eu posuere ligula. Proin aliquet ultricies tortor vitae suscipit. Duis pulvinar, - lectus a malesuada lacinia, ligula tortor placerat ligula, ac gravida dolor libero ac est. Suspendisse mattis - sodales nisi, nec tristique sem sodales quis. Quisque gravida, est ut vehicula placerat, mi nunc accumsan - ante, et facilisis leo lacus eget nunc. Praesent malesuada iaculis volutpat. Integer purus lorem, posuere sed - arcu sed, finibus sollicitudin nulla. Morbi sit amet justo risus. Praesent suscipit semper pharetra. Nullam - nulla magna, vulputate id arcu aliquam, vehicula eleifend nisi. Maecenas ut orci mollis sapien finibus - facilisis. Morbi scelerisque ut lorem eget semper. Sed nec dolor facilisis, ornare nisi quis, porta orci. - Proin tincidunt, ante eu egestas vehicula, est lectus molestie eros, ut gravida orci tellus non libero. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. - Nullam eget tortor ut urna aliquam sodales sit amet sed eros. Aenean eleifend imperdiet nibh. Nullam accumsan - rutrum felis, eu fermentum libero porttitor at. Vivamus feugiat porta libero, nec elementum ligula efficitur - eget. Nullam ac faucibus leo, sed posuere lacus. Nullam nec porttitor arcu. Phasellus nisi nulla, tincidunt - vitae condimentum in, luctus sit amet purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices - posuere cubilia Curae; Cras sed rutrum massa, quis convallis velit. Suspendisse eleifend nec justo a - venenatis. Mauris ut purus leo. Praesent dui mauris, consequat a nulla at, iaculis fringilla sem. Mauris mi - arcu, ornare eu nunc sed, sollicitudin pharetra orci. Nullam quis est interdum massa viverra lobortis quis nec - ipsum. Sed et imperdiet leo. Nunc eleifend sollicitudin felis gravida sodales. Donec lobortis, nisi et - ultricies placerat, justo magna rhoncus mauris, sed iaculis nisl ex quis libero. Nam tincidunt facilisis - tempus. Curabitur non mollis augue. Nunc ac vehicula nisl. Curabitur venenatis imperdiet augue sit amet - tincidunt. Maecenas in gravida nisi, vel faucibus nibh. Aenean euismod nulla diam, vitae mattis lacus commodo - a. Nunc sed leo at lorem feugiat dapibus at eget metus. Donec vel tellus mauris. Class aptent taciti sociosqu - ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas facilisis tortor mauris, non cursus - enim congue sed. Vivamus luctus, libero sit amet ullamcorper vehicula, lectus augue luctus ligula, quis - ultrices leo magna et purus. Duis risus quam, mattis sed aliquet vel, pellentesque ut elit. Nullam tristique - varius erat, non molestie nisi. Nullam aliquet nisl nec nulla ultrices pharetra. Sed in urna convallis, - lobortis lorem gravida, gravida leo. Sed vitae odio sit amet lacus porttitor sollicitudin eget at nisl. Sed id - mollis quam. Sed id odio aliquam, dignissim mi quis, scelerisque sapien. Etiam blandit erat id est dapibus - congue. Aliquam erat volutpat. Fusce elementum imperdiet lacinia. Sed egestas sit amet arcu ac interdum. - Phasellus tincidunt dolor in mattis tincidunt. Sed bibendum mauris erat, at aliquam ante dignissim eu. - Vestibulum semper lorem mauris, vel aliquet sem mollis sit amet. Praesent ornare pharetra auctor. Suspendisse - potenti. Cras congue euismod ullamcorper. Mauris laoreet enim turpis, id auctor nibh tempor id. Suspendisse - potenti. Suspendisse efficitur libero non justo dignissim, non facilisis arcu lobortis. Suspendisse gravida - tellus in diam hendrerit, ac lacinia dolor auctor. Sed ornare, magna id molestie tempus, nibh velit luctus ex, - in ornare mi ligula et tortor. Integer sem mauris, hendrerit ut porttitor vel, sagittis ut nibh. Integer - tincidunt id arcu nec rhoncus. Duis vestibulum luctus ullamcorper. Nam eu mi risus. Aliquam erat volutpat. - Duis tristique ex a lacus blandit, nec eleifend massa iaculis. Duis eget urna sed orci lacinia facilisis. - Donec tristique dictum nisl id cursus. Aenean sit amet sagittis odio, at laoreet eros. Nam nec lectus sit amet - ante molestie facilisis non eu dui. Aliquam aliquam sapien ut aliquam porta. Praesent eu nunc orci. Sed - tincidunt molestie lacinia. Donec ac gravida dolor, id elementum massa. Morbi porttitor auctor purus, sed - cursus nisl tincidunt vel. Duis eu luctus diam. In auctor arcu lectus, ut scelerisque dui pulvinar vitae. - Mauris vitae nisl et urna feugiat consectetur eget at nunc. Curabitur ut sodales sapien. Etiam tincidunt - ornare vulputate. Aenean in pellentesque ex. Quisque eget augue libero. Maecenas facilisis bibendum dolor, a - tempus tellus finibus quis. Quisque non viverra neque. Phasellus aliquam scelerisque enim quis facilisis. - Suspendisse fermentum et arcu vel blandit. Mauris aliquam ex vel velit auctor, nec pretium nibh consequat. - Cras sit amet venenatis sapien. Suspendisse eget magna dui. Nulla finibus vehicula felis. Nullam auctor est - vel mi congue dignissim. Vestibulum molestie lobortis neque, facilisis rhoncus turpis sollicitudin ut. Donec - eget enim non justo dictum vulputate. Aliquam blandit nisi at lacus suscipit aliquet. Sed scelerisque, quam eu - molestie volutpat, urna justo tempor ex, non pellentesque nisi ligula nec dui. Nullam euismod aliquam quam, - gravida aliquet eros tempor eu. Mauris at ipsum vel odio mattis malesuada. Quisque pulvinar libero ac pretium - interdum. Vestibulum sit amet quam sem. Praesent malesuada luctus nisi, quis auctor tellus volutpat id. - Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum - dolor sit amet, consectetur adipiscing elit. Integer tristique faucibus quam, eget convallis justo mattis non. - Pellentesque id vestibulum quam. Morbi dapibus turpis nec orci cursus, eu hendrerit lectus consectetur. - Suspendisse et pretium erat, et volutpat justo. Mauris et nunc dolor. Integer iaculis dignissim est, quis - lacinia mauris laoreet a. Etiam rutrum, orci et ornare molestie, sem lectus vulputate ante, in imperdiet - ligula sapien in lectus. Sed a scelerisque mauris, a tincidunt dui. Maecenas massa diam, varius sit amet eros - ac, elementum pellentesque magna. Morbi quis ante vitae ipsum pretium ultricies. Sed et nulla cursus, lacinia - nibh eget, tincidunt quam. Vestibulum tincidunt dapibus turpis, a dictum quam egestas in. Vestibulum at dolor - condimentum, dictum nisi sit amet, sodales diam. Maecenas ac tristique ligula, sed lobortis ex. Nunc egestas - ipsum luctus, vulputate tellus non, dictum libero. Cras interdum elementum nulla, et consequat est accumsan - ac. Aenean laoreet purus auctor justo molestie, eget vulputate diam placerat. Suspendisse vestibulum neque - quis vestibulum blandit. Nulla interdum faucibus ipsum. Pellentesque habitant morbi tristique senectus et - netus et malesuada fames ac turpis egestas. Etiam sed sodales libero, nec tincidunt ligula. Nam ligula tortor, - scelerisque bibendum nibh sed, consequat mattis lectus. Suspendisse commodo sed urna a ornare. Nam faucibus - ultricies velit, nec mattis nunc pellentesque nec. Aenean ut lorem at tellus porta viverra in at ex. Curabitur - nec ex tellus. Duis in nibh sed nisl eleifend dictum sit amet eget diam. Duis sem lacus, convallis eu massa - sodales, congue porta leo. Curabitur dictum pharetra erat ut mollis. Aenean at mattis turpis. Duis eget justo - et felis auctor convallis quis ac nisl. Ut nec libero condimentum, vestibulum quam ac, vehicula lectus. Sed - eget imperdiet augue. Proin et ultrices nibh. Morbi rhoncus quam a tellus fermentum feugiat. Proin in tempus - massa. Ut rutrum sapien ipsum, non egestas tellus efficitur quis. Vestibulum ante ipsum primis in faucibus - orci luctus et ultrices posuere cubilia Curae; Curabitur tempus eros nunc, ut interdum ipsum volutpat id. - Curabitur porttitor neque ut felis commodo dignissim. Proin quis lorem tincidunt, consectetur massa at, - tincidunt justo. Sed dapibus ipsum arcu, vel laoreet velit elementum vel. In convallis tortor posuere, feugiat - sem vel, vestibulum libero. Aliquam eu cursus risus, in semper nunc. Pellentesque arcu leo, accumsan sodales - tristique quis, egestas eu enim. Vestibulum finibus volutpat volutpat. Fusce consectetur consequat vulputate. - Praesent dapibus augue vel eros suscipit, nec condimentum velit fermentum. Pellentesque vestibulum magna eget - tortor rutrum maximus. Nunc tristique ante in elit ultricies malesuada. Mauris lacinia diam id orci semper, et - porttitor libero ultricies. Vestibulum sollicitudin urna et ligula rhoncus, et vestibulum nisi vestibulum. - Vestibulum lectus nibh, malesuada a consectetur sit amet, faucibus et nibh. Donec massa ante, tempor tincidunt - accumsan hendrerit, porta ac nulla. Praesent consequat efficitur dolor ut mattis. Curabitur purus odio, congue - vel mi in, iaculis ullamcorper eros. Nunc mollis est tortor. Etiam sit amet pellentesque lacus. Nullam - tristique eros vitae pellentesque tincidunt. Cras consequat ut nibh vel vehicula. Cras sodales massa consequat - velit vulputate ornare. Curabitur aliquet orci vitae mollis efficitur. Suspendisse semper lobortis sapien in - placerat. Mauris rhoncus vel purus at iaculis. Quisque vel arcu libero. Nam ultricies est placerat est - lacinia, eget imperdiet arcu condimentum. Donec scelerisque vel nisi nec ullamcorper. Proin gravida accumsan - facilisis. Ut vel aliquet ipsum, eleifend sollicitudin quam. Duis vel mi sodales, ornare turpis nec, malesuada - nisl. Nullam feugiat luctus malesuada. Nam interdum, arcu sed bibendum elementum, purus dolor consequat est, - quis iaculis leo leo nec purus. Donec libero sapien, faucibus a lectus sed, mattis vestibulum est. Maecenas ut - est a odio euismod fringilla. Donec viverra nibh molestie, interdum lacus a, facilisis nisl. Sed tristique - turpis vel mauris sagittis, ut tristique tellus tempor. Donec vehicula libero vel consequat lacinia. Duis - pretium nisi vel mauris gravida, sit amet facilisis mi feugiat. Fusce a accumsan diam, et euismod justo. Sed - ornare arcu sed leo posuere laoreet in quis arcu. Mauris at tortor non justo consectetur efficitur vitae sed - enim. Donec sit amet rutrum lorem. Phasellus porta, ante id faucibus gravida, neque augue porttitor massa, a - semper ipsum leo ac augue. In id vestibulum turpis. Curabitur suscipit nisl quis tortor hendrerit faucibus. - Nam sagittis fermentum blandit. Sed et suscipit mauris, ut porttitor justo. Nulla varius nibh efficitur eros - pretium, nec porttitor turpis faucibus. Donec fermentum est erat, et pretium neque cursus eu. Nulla sit amet - ipsum nulla. Mauris convallis nunc est, ut ullamcorper arcu pretium at. Ut ornare congue rutrum. Morbi aliquam - rutrum orci, laoreet dapibus justo hendrerit ut. Curabitur et venenatis ante, at eleifend orci. Quisque cursus - consequat velit, vel facilisis arcu ultrices eu. In cursus mi eu magna tristique, ac congue leo iaculis. - Vestibulum aliquam ex vitae nunc tempus rutrum. Nullam mattis dolor et sapien vehicula, at feugiat felis - sollicitudin. Aenean in sem eu mi varius condimentum quis feugiat orci. Sed vitae nisi eget mi ultrices - facilisis. Sed rhoncus vestibulum velit vel ornare. Donec eget aliquet est, in finibus risus. Duis pulvinar - odio tempor semper consectetur. Donec imperdiet urna urna, eu blandit est posuere id. Suspendisse potenti. - Pellentesque pretium ullamcorper velit sit amet dictum. Etiam eleifend justo sit amet vulputate fermentum. - Cras vel metus condimentum, finibus mauris lacinia, ullamcorper nulla. Duis quis libero nibh. Sed bibendum - ultricies ultricies. Cras faucibus congue lorem quis varius. Suspendisse a tellus orci. Duis porta ultricies - ullamcorper. -

                                -
                                +

                                Scroll position: 0px

                                + +
                                + +

                                With scroll prevention

                                +

                                Focus the element and press Space, Arrow, Page Up/Down, Home, or End — scroll position should not change.

                                + Widget (tabindex="0") +

                                + +
                                + +

                                Without scroll prevention (comparison)

                                +

                                + These elements do not use this module. A link or button will scroll on Space or arrows; a textbox uses arrow + keys for cursor movement instead. +

                                + Link + +
                                diff --git a/docs/core/makeup-prevent-scroll-keys/index.js b/docs/core/makeup-prevent-scroll-keys/index.js index 8af84221..3f58b546 100644 --- a/docs/core/makeup-prevent-scroll-keys/index.js +++ b/docs/core/makeup-prevent-scroll-keys/index.js @@ -1,13 +1,23 @@ -// REQUIRE -//const scrollKeyPreventer = require('makeup-prevent-scroll-keys'); - -// IMPORT -import * as scrollKeyPreventer from "makeup-prevent-scroll-keys"; +import { add, remove } from "makeup-prevent-scroll-keys"; const widgetEl = document.querySelector(".widget"); +const scrollOutput = document.getElementById("scroll-y"); +const toggleBtn = document.getElementById("toggle"); +let enabled = true; -scrollKeyPreventer.add(widgetEl); +add(widgetEl); -window.addEventListener("scroll", (e) => console.log(e)); +window.addEventListener("scroll", () => { + scrollOutput.textContent = Math.round(window.scrollY); +}); -// scrollKeyPreventer.remove(widgetEl); +toggleBtn.addEventListener("click", () => { + if (enabled) { + remove(widgetEl); + toggleBtn.textContent = "Enable prevention"; + } else { + add(widgetEl); + toggleBtn.textContent = "Disable prevention"; + } + enabled = !enabled; +}); diff --git a/docs/core/makeup-prevent-scroll-keys/index.min.js b/docs/core/makeup-prevent-scroll-keys/index.min.js index b906c77b..b37870bc 100644 --- a/docs/core/makeup-prevent-scroll-keys/index.min.js +++ b/docs/core/makeup-prevent-scroll-keys/index.min.js @@ -10,19 +10,21 @@ Object.defineProperty(exports, "__esModule", ({ value: true })); -exports.add = add; -exports.remove = remove; -function onKeyDown(e) { - if (e.keyCode >= 32 && e.keyCode <= 40) { +exports.remove = exports.add = void 0; +const SCROLL_KEYS = new Set([" ", "PageUp", "PageDown", "End", "Home", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"]); +const onKeyDown = e => { + if (SCROLL_KEYS.has(e.key)) { e.preventDefault(); } -} -function add(el) { +}; +const add = el => { el.addEventListener("keydown", onKeyDown); -} -function remove(el) { +}; +exports.add = add; +const remove = el => { el.removeEventListener("keydown", onKeyDown); -} +}; +exports.remove = remove; /***/ } @@ -57,18 +59,25 @@ function remove(el) { var __webpack_exports__ = {}; -var scrollKeyPreventer = _interopRequireWildcard(__webpack_require__(795)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } -// REQUIRE -//const scrollKeyPreventer = require('makeup-prevent-scroll-keys'); - -// IMPORT - +var _makeupPreventScrollKeys = __webpack_require__(795); const widgetEl = document.querySelector(".widget"); -scrollKeyPreventer.add(widgetEl); -window.addEventListener("scroll", e => console.log(e)); - -// scrollKeyPreventer.remove(widgetEl); +const scrollOutput = document.getElementById("scroll-y"); +const toggleBtn = document.getElementById("toggle"); +let enabled = true; +(0, _makeupPreventScrollKeys.add)(widgetEl); +window.addEventListener("scroll", () => { + scrollOutput.textContent = Math.round(window.scrollY); +}); +toggleBtn.addEventListener("click", () => { + if (enabled) { + (0, _makeupPreventScrollKeys.remove)(widgetEl); + toggleBtn.textContent = "Enable prevention"; + } else { + (0, _makeupPreventScrollKeys.add)(widgetEl); + toggleBtn.textContent = "Disable prevention"; + } + enabled = !enabled; +}); /******/ })() ; //# sourceMappingURL=index.min.js.map \ No newline at end of file diff --git a/docs/core/makeup-prevent-scroll-keys/index.min.js.map b/docs/core/makeup-prevent-scroll-keys/index.min.js.map index b7d8f514..b6a6d9c0 100644 --- a/docs/core/makeup-prevent-scroll-keys/index.min.js.map +++ b/docs/core/makeup-prevent-scroll-keys/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-prevent-scroll-keys/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,cAAc;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;UCjBA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,iDAAiD,mBAAO,CAAC,GAA4B;AACrF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA,uC","sources":["webpack://root/./packages/core/makeup-prevent-scroll-keys/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-prevent-scroll-keys/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.remove = remove;\nfunction onKeyDown(e) {\n if (e.keyCode >= 32 && e.keyCode <= 40) {\n e.preventDefault();\n }\n}\nfunction add(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction remove(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar scrollKeyPreventer = _interopRequireWildcard(require(\"makeup-prevent-scroll-keys\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// REQUIRE\n//const scrollKeyPreventer = require('makeup-prevent-scroll-keys');\n\n// IMPORT\n\nconst widgetEl = document.querySelector(\".widget\");\nscrollKeyPreventer.add(widgetEl);\nwindow.addEventListener(\"scroll\", e => console.log(e));\n\n// scrollKeyPreventer.remove(widgetEl);"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-prevent-scroll-keys/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,cAAc,GAAG,WAAW;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA,cAAc;;;;;;;UCnBd;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,+BAA+B,mBAAO,CAAC,GAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-prevent-scroll-keys/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-prevent-scroll-keys/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.remove = exports.add = void 0;\nconst SCROLL_KEYS = new Set([\" \", \"PageUp\", \"PageDown\", \"End\", \"Home\", \"ArrowLeft\", \"ArrowUp\", \"ArrowRight\", \"ArrowDown\"]);\nconst onKeyDown = e => {\n if (SCROLL_KEYS.has(e.key)) {\n e.preventDefault();\n }\n};\nconst add = el => {\n el.addEventListener(\"keydown\", onKeyDown);\n};\nexports.add = add;\nconst remove = el => {\n el.removeEventListener(\"keydown\", onKeyDown);\n};\nexports.remove = remove;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupPreventScrollKeys = require(\"makeup-prevent-scroll-keys\");\nconst widgetEl = document.querySelector(\".widget\");\nconst scrollOutput = document.getElementById(\"scroll-y\");\nconst toggleBtn = document.getElementById(\"toggle\");\nlet enabled = true;\n(0, _makeupPreventScrollKeys.add)(widgetEl);\nwindow.addEventListener(\"scroll\", () => {\n scrollOutput.textContent = Math.round(window.scrollY);\n});\ntoggleBtn.addEventListener(\"click\", () => {\n if (enabled) {\n (0, _makeupPreventScrollKeys.remove)(widgetEl);\n toggleBtn.textContent = \"Enable prevention\";\n } else {\n (0, _makeupPreventScrollKeys.add)(widgetEl);\n toggleBtn.textContent = \"Disable prevention\";\n }\n enabled = !enabled;\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-roving-tabindex/index.html b/docs/core/makeup-roving-tabindex/index.html index 555cc872..a8af4066 100644 --- a/docs/core/makeup-roving-tabindex/index.html +++ b/docs/core/makeup-roving-tabindex/index.html @@ -3,6 +3,8 @@ makeup-roving-tabindex demo + + -
                                -

                                makeup-roving-tabindex demo

                                -

                                Use ARROW keys to move the roving tabindex.

                                +
                                +

                                core / makeup-roving-tabindex

                                +

                                Implements a roving tab index on a collection of elements. Use arrow keys to navigate.

                                - For the purpose of demonstration, aria-disabled items are greyed out; hidden items have strike-through (in the - real world they would obviously be actually hidden). Disabled and hidden items are included in indexing, but - skipped in navigation. + For demonstration purposes, aria-disabled items are greyed out and hidden items have + strike-through (in practice they would be visually hidden). Both are included in the index but skipped during + navigation.

                                +
                                + +

                                Linear

                                + +
                                + Controls + + + + + + + + +
                                +
                                • Item 1
                                  • @@ -34,17 +52,8 @@

                                  makeup-roving-tabindex demo

                                -
                                - Tools - - - - - - - - -
                                +
                                  +
                                  diff --git a/docs/core/makeup-roving-tabindex/index.js b/docs/core/makeup-roving-tabindex/index.js index 8cb7ee7a..7c340442 100644 --- a/docs/core/makeup-roving-tabindex/index.js +++ b/docs/core/makeup-roving-tabindex/index.js @@ -1,64 +1,62 @@ -// REQUIRE -//const RovingTabindex = require('makeup-roving-tabindex'); +import { createLinear } from "makeup-roving-tabindex"; +import { add as addPreventScrollKeys } from "makeup-prevent-scroll-keys"; -// IMPORT -import * as RovingTabindex from "makeup-roving-tabindex"; +const widgetEl = document.querySelector(".widget"); +const logEl = document.getElementById("log"); -const rovers = []; -const appender = document.getElementById("appender"); -const prepender = document.getElementById("prepender"); -const removeFirst = document.getElementById("removeFirst"); -const removeLast = document.getElementById("removeLast"); -const widgetEls = document.querySelectorAll(".widget"); -const wrap = document.getElementById("wrap"); -const log = (e) => console.log(e.type, e.detail); +const logEvent = (e) => { + const item = document.createElement("li"); + item.textContent = `${e.type} — from: ${e.detail.fromIndex}, to: ${e.detail.toIndex}`; + logEl.prepend(item); +}; -appender.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const listItem = document.createElement("li"); - listItem.innerText = `Item ${parseInt(el.querySelectorAll("li").length + 1, 10)}`; - el.children[0].appendChild(listItem); - }); +const rover = createLinear(widgetEl, "li"); + +addPreventScrollKeys(widgetEl); + +widgetEl.addEventListener("rovingTabindexInit", logEvent); +widgetEl.addEventListener("rovingTabindexChange", logEvent); +widgetEl.addEventListener("rovingTabindexMutation", logEvent); +widgetEl.addEventListener("rovingTabindexReset", logEvent); + +document.getElementById("appender").addEventListener("click", () => { + const ul = widgetEl.querySelector("ul"); + const item = document.createElement("li"); + item.textContent = `Item ${ul.children.length + 1}`; + ul.appendChild(item); }); -prepender.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const ul = el.children[0]; - const listItem = document.createElement("li"); - listItem.innerText = `Item ${parseInt(el.querySelectorAll("li").length + 1, 10)}`; - ul.insertBefore(listItem, ul.children[0]); - }); +document.getElementById("prepender").addEventListener("click", () => { + const ul = widgetEl.querySelector("ul"); + const item = document.createElement("li"); + item.textContent = `Item ${ul.children.length + 1}`; + ul.insertBefore(item, ul.firstElementChild); }); -removeFirst.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const ul = el.children[0]; - const node = ul.firstElementChild; - if (node) ul.removeChild(node); - }); +document.getElementById("removeFirst").addEventListener("click", () => { + const first = widgetEl.querySelector("ul").firstElementChild; + if (first) first.remove(); }); -removeLast.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const ul = el.children[0]; - const node = ul.lastElementChild; - if (node) ul.removeChild(node); - }); +document.getElementById("removeLast").addEventListener("click", () => { + const last = widgetEl.querySelector("ul").lastElementChild; + if (last) last.remove(); }); -removeCurrent.addEventListener("click", () => rovers.forEach((widget) => widget.currentItem.remove())); -disableCurrent.addEventListener("click", () => - rovers.forEach((widget) => widget.currentItem.setAttribute("aria-disabled", "true")), -); -hideCurrent.addEventListener("click", () => rovers.forEach((widget) => (widget.currentItem.hidden = true))); +document.getElementById("removeCurrent").addEventListener("click", () => rover.currentItem?.remove()); -wrap.addEventListener("change", (e) => rovers.forEach((rover) => (rover.wrap = e.target.checked))); +document + .getElementById("disableCurrent") + .addEventListener("click", () => rover.currentItem?.setAttribute("aria-disabled", "true")); -widgetEls.forEach(function (el) { - el.addEventListener("rovingTabindexInit", log); - el.addEventListener("rovingTabindexChange", log); - el.addEventListener("rovingTabindexMutation", log); - el.addEventListener("rovingTabindexReset", log); +document.getElementById("hideCurrent").addEventListener("click", () => { + if (rover.currentItem) rover.currentItem.hidden = true; +}); + +document.getElementById("wrap").addEventListener("change", (e) => { + rover.wrap = e.target.checked; +}); - rovers.push(RovingTabindex.createLinear(el, "li")); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; }); diff --git a/docs/core/makeup-roving-tabindex/index.min.js b/docs/core/makeup-roving-tabindex/index.min.js index 1ac9ea9c..094d9482 100644 --- a/docs/core/makeup-roving-tabindex/index.min.js +++ b/docs/core/makeup-roving-tabindex/index.min.js @@ -2,6 +2,33 @@ /******/ "use strict"; /******/ var __webpack_modules__ = ({ +/***/ 795 +(__unused_webpack_module, exports) { + + + +Object.defineProperty(exports, "__esModule", ({ + value: true +})); +exports.remove = exports.add = void 0; +const SCROLL_KEYS = new Set([" ", "PageUp", "PageDown", "End", "Home", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"]); +const onKeyDown = e => { + if (SCROLL_KEYS.has(e.key)) { + e.preventDefault(); + } +}; +const add = el => { + el.addEventListener("keydown", onKeyDown); +}; +exports.add = add; +const remove = el => { + el.removeEventListener("keydown", onKeyDown); +}; +exports.remove = remove; + + +/***/ }, + /***/ 513 (__unused_webpack_module, exports, __webpack_require__) { @@ -11,8 +38,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true })); exports.createLinear = createLinear; -var NavigationEmitter = _interopRequireWildcard(__webpack_require__(942)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupNavigationEmitter = __webpack_require__(942); const defaultOptions = { autoInit: "interactive", autoReset: "current", @@ -20,7 +46,7 @@ const defaultOptions = { axis: "both" }; function refreshTabindex(items, focusIndex) { - items.forEach(function (el, i) { + items.forEach((el, i) => { el.setAttribute("tabindex", i === focusIndex ? "0" : "-1"); }); } @@ -79,11 +105,14 @@ class RovingTabindex { class LinearRovingTabindex extends RovingTabindex { constructor(el, itemSelector, selectedOptions) { super(el); - this._options = Object.assign({}, defaultOptions, selectedOptions); + this._options = { + ...defaultOptions, + ...selectedOptions + }; this._itemSelector = itemSelector; // todo: options.index is deprecated. Remove support in future release. - this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, { + this._navigationEmitter = (0, _makeupNavigationEmitter.createLinear)(el, itemSelector, { autoInit: this._options.index !== undefined ? this._options.index : this._options.autoInit, autoReset: this._options.autoReset, wrap: this._options.wrap, @@ -743,60 +772,51 @@ function _default(el) { var __webpack_exports__ = {}; -var RovingTabindex = _interopRequireWildcard(__webpack_require__(513)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } -// REQUIRE -//const RovingTabindex = require('makeup-roving-tabindex'); - -// IMPORT - -const rovers = []; -const appender = document.getElementById("appender"); -const prepender = document.getElementById("prepender"); -const removeFirst = document.getElementById("removeFirst"); -const removeLast = document.getElementById("removeLast"); -const widgetEls = document.querySelectorAll(".widget"); -const wrap = document.getElementById("wrap"); -const log = e => console.log(e.type, e.detail); -appender.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const listItem = document.createElement("li"); - listItem.innerText = `Item ${parseInt(el.querySelectorAll("li").length + 1, 10)}`; - el.children[0].appendChild(listItem); - }); +var _makeupRovingTabindex = __webpack_require__(513); +var _makeupPreventScrollKeys = __webpack_require__(795); +const widgetEl = document.querySelector(".widget"); +const logEl = document.getElementById("log"); +const logEvent = e => { + const item = document.createElement("li"); + item.textContent = `${e.type} — from: ${e.detail.fromIndex}, to: ${e.detail.toIndex}`; + logEl.prepend(item); +}; +const rover = (0, _makeupRovingTabindex.createLinear)(widgetEl, "li"); +(0, _makeupPreventScrollKeys.add)(widgetEl); +widgetEl.addEventListener("rovingTabindexInit", logEvent); +widgetEl.addEventListener("rovingTabindexChange", logEvent); +widgetEl.addEventListener("rovingTabindexMutation", logEvent); +widgetEl.addEventListener("rovingTabindexReset", logEvent); +document.getElementById("appender").addEventListener("click", () => { + const ul = widgetEl.querySelector("ul"); + const item = document.createElement("li"); + item.textContent = `Item ${ul.children.length + 1}`; + ul.appendChild(item); }); -prepender.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const ul = el.children[0]; - const listItem = document.createElement("li"); - listItem.innerText = `Item ${parseInt(el.querySelectorAll("li").length + 1, 10)}`; - ul.insertBefore(listItem, ul.children[0]); - }); +document.getElementById("prepender").addEventListener("click", () => { + const ul = widgetEl.querySelector("ul"); + const item = document.createElement("li"); + item.textContent = `Item ${ul.children.length + 1}`; + ul.insertBefore(item, ul.firstElementChild); }); -removeFirst.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const ul = el.children[0]; - const node = ul.firstElementChild; - if (node) ul.removeChild(node); - }); +document.getElementById("removeFirst").addEventListener("click", () => { + const first = widgetEl.querySelector("ul").firstElementChild; + if (first) first.remove(); }); -removeLast.addEventListener("click", function () { - widgetEls.forEach(function (el) { - const ul = el.children[0]; - const node = ul.lastElementChild; - if (node) ul.removeChild(node); - }); +document.getElementById("removeLast").addEventListener("click", () => { + const last = widgetEl.querySelector("ul").lastElementChild; + if (last) last.remove(); +}); +document.getElementById("removeCurrent").addEventListener("click", () => rover.currentItem?.remove()); +document.getElementById("disableCurrent").addEventListener("click", () => rover.currentItem?.setAttribute("aria-disabled", "true")); +document.getElementById("hideCurrent").addEventListener("click", () => { + if (rover.currentItem) rover.currentItem.hidden = true; +}); +document.getElementById("wrap").addEventListener("change", e => { + rover.wrap = e.target.checked; }); -removeCurrent.addEventListener("click", () => rovers.forEach(widget => widget.currentItem.remove())); -disableCurrent.addEventListener("click", () => rovers.forEach(widget => widget.currentItem.setAttribute("aria-disabled", "true"))); -hideCurrent.addEventListener("click", () => rovers.forEach(widget => widget.currentItem.hidden = true)); -wrap.addEventListener("change", e => rovers.forEach(rover => rover.wrap = e.target.checked)); -widgetEls.forEach(function (el) { - el.addEventListener("rovingTabindexInit", log); - el.addEventListener("rovingTabindexChange", log); - el.addEventListener("rovingTabindexMutation", log); - el.addEventListener("rovingTabindexReset", log); - rovers.push(RovingTabindex.createLinear(el, "li")); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; }); /******/ })() ; diff --git a/docs/core/makeup-roving-tabindex/index.min.js.map b/docs/core/makeup-roving-tabindex/index.min.js.map index af20ec07..86c22b1a 100644 --- a/docs/core/makeup-roving-tabindex/index.min.js.map +++ b/docs/core/makeup-roving-tabindex/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-roving-tabindex/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,gDAAgD,mBAAO,CAAC,GAA2B;AACnF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;ACvHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;ACrEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,yCAAyC,mBAAO,CAAC,GAAoB;AACrE,0CAA0C,mBAAO,CAAC,GAAqB;AACvE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA,iBAAiB,uBAAuB;AACxC,mCAAmC;;AAEnC,iBAAiB,aAAa;AAC9B;;AAEA,iBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;;ACjXa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;UCvCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,6CAA6C,mBAAO,CAAC,GAAwB;AAC7E,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,mDAAmD;AACpF;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA,iCAAiC,mDAAmD;AACpF;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-roving-tabindex/dist/cjs/index.js","webpack://root/./packages/core/makeup-roving-tabindex/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-roving-tabindex/node_modules/makeup-key-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-roving-tabindex/node_modules/makeup-navigation-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-roving-tabindex/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-roving-tabindex/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar NavigationEmitter = _interopRequireWildcard(require(\"makeup-navigation-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n autoInit: \"interactive\",\n autoReset: \"current\",\n wrap: false,\n axis: \"both\"\n};\nfunction refreshTabindex(items, focusIndex) {\n items.forEach(function (el, i) {\n el.setAttribute(\"tabindex\", i === focusIndex ? \"0\" : \"-1\");\n });\n}\nfunction onModelInit(e) {\n refreshTabindex(e.detail.items, e.detail.toIndex);\n this._el.dispatchEvent(new CustomEvent(\"rovingTabindexInit\", {\n detail: e.detail\n }));\n}\nfunction onModelChange(e) {\n const items = this.items;\n const fromItem = items[e.detail.fromIndex];\n const toItem = items[e.detail.toIndex];\n if (fromItem) {\n fromItem.setAttribute(\"tabindex\", \"-1\");\n }\n if (toItem) {\n toItem.setAttribute(\"tabindex\", \"0\");\n toItem.focus();\n }\n this._el.dispatchEvent(new CustomEvent(\"rovingTabindexChange\", {\n detail: e.detail\n }));\n}\nfunction onModelReset(e) {\n refreshTabindex(this.items, e.detail.toIndex);\n this._el.dispatchEvent(new CustomEvent(\"rovingTabindexReset\", {\n detail: e.detail\n }));\n}\nfunction onModelMutation(e) {\n refreshTabindex(this.items, e.detail.toIndex);\n this._el.dispatchEvent(new CustomEvent(\"rovingTabindexMutation\", {\n detail: e.detail\n }));\n}\nclass RovingTabindex {\n constructor(el) {\n this._el = el;\n this._onMutationListener = onModelMutation.bind(this);\n this._onChangeListener = onModelChange.bind(this);\n this._onInitListener = onModelInit.bind(this);\n this._onResetListener = onModelReset.bind(this);\n this._el.addEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.addEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.addEventListener(\"navigationModelInit\", this._onInitListener);\n this._el.addEventListener(\"navigationModelReset\", this._onResetListener);\n }\n destroy() {\n this._el.removeEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.removeEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.removeEventListener(\"navigationModelInit\", this._onInitListener);\n this._el.removeEventListener(\"navigationModelReset\", this._onResetListener);\n }\n}\nclass LinearRovingTabindex extends RovingTabindex {\n constructor(el, itemSelector, selectedOptions) {\n super(el);\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this._itemSelector = itemSelector;\n\n // todo: options.index is deprecated. Remove support in future release.\n this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {\n autoInit: this._options.index !== undefined ? this._options.index : this._options.autoInit,\n autoReset: this._options.autoReset,\n wrap: this._options.wrap,\n axis: this._options.axis\n });\n }\n get index() {\n return this._navigationEmitter.model.index;\n }\n set index(newIndex) {\n this._navigationEmitter.model.index = newIndex;\n }\n set wrap(newWrap) {\n this._navigationEmitter.model.options.wrap = newWrap;\n }\n get currentItem() {\n return this._navigationEmitter.model.currentItem;\n }\n get items() {\n return this._navigationEmitter.model.items;\n }\n reset() {\n this._navigationEmitter.model.reset();\n }\n destroy() {\n super.destroy();\n this._navigationEmitter.destroy();\n }\n}\n\n/*\nclass GridRovingTabindex extends RovingTabindex {\n constructor(el, rowSelector, cellSelector, selectedOptions) {\n super(el);\n }\n}\n*/\n\nfunction createLinear(el, itemSelector, selectedOptions) {\n return new LinearRovingTabindex(el, itemSelector, selectedOptions);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n if (!evt.shiftKey) {\n const key = evt.key;\n switch (key) {\n case \"Enter\":\n case \"Escape\":\n case \"PageUp\":\n case \"PageDown\":\n case \"End\":\n case \"Home\":\n case \"ArrowLeft\":\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"ArrowDown\":\n el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n detail: evt,\n bubbles: true\n }));\n break;\n case \" \":\n el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n detail: evt,\n bubbles: true\n }));\n break;\n default:\n return;\n }\n }\n}\nfunction onKeyDown(e) {\n onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n addKeyDown(el);\n addKeyUp(el);\n}\nfunction remove(el) {\n removeKeyDown(el);\n removeKeyUp(el);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar KeyEmitter = _interopRequireWildcard(require(\"makeup-key-emitter\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n axis: \"both\",\n autoInit: \"interactive\",\n autoReset: \"current\",\n ignoreByDelegateSelector: null,\n wrap: false\n};\nfunction isItemNavigable(el) {\n return !el.hidden && el.getAttribute(\"aria-disabled\") !== \"true\";\n}\nfunction isIndexNavigable(items, index) {\n return index >= 0 && index < items.length ? isItemNavigable(items[index]) : false;\n}\nfunction findNavigableItems(items) {\n return items.filter(isItemNavigable);\n}\nfunction findFirstNavigableIndex(items) {\n return items.findIndex(item => isItemNavigable(item));\n}\nfunction findLastNavigableIndex(items) {\n // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it\n return items.indexOf(findNavigableItems(items).reverse()[0]);\n}\nfunction findIndexByAttribute(items, attribute, value) {\n return items.findIndex(item => isItemNavigable(item) && item.getAttribute(attribute) === value);\n}\nfunction findFirstNavigableAriaCheckedIndex(items) {\n return findIndexByAttribute(items, \"aria-checked\", \"true\");\n}\nfunction findFirstNavigableAriaSelectedIndex(items) {\n return findIndexByAttribute(items, \"aria-selected\", \"true\");\n}\nfunction findIgnoredByDelegateItems(el, options) {\n return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];\n}\nfunction findPreviousNavigableIndex(items, index, wrap) {\n let previousNavigableIndex = -1;\n if (index === null || atStart(items, index)) {\n if (wrap === true) {\n previousNavigableIndex = findLastNavigableIndex(items);\n }\n } else {\n let i = index;\n while (--i >= 0) {\n if (isItemNavigable(items[i])) {\n previousNavigableIndex = i;\n break;\n }\n }\n }\n return previousNavigableIndex;\n}\nfunction findNextNavigableIndex(items, index, wrap) {\n let nextNavigableIndex = -1;\n if (index === null) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n } else if (atEnd(items, index)) {\n if (wrap === true) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n }\n } else {\n let i = index;\n while (++i < items.length) {\n if (isItemNavigable(items[i])) {\n nextNavigableIndex = i;\n break;\n }\n }\n }\n return nextNavigableIndex;\n}\n\n// returning -1 means not found\nfunction findIndexPositionByType(typeOrNum, items, currentIndex) {\n let index = -1;\n switch (typeOrNum) {\n case \"none\":\n index = null;\n break;\n case \"current\":\n index = currentIndex;\n break;\n case \"interactive\":\n index = findFirstNavigableIndex(items);\n break;\n case \"ariaChecked\":\n index = findFirstNavigableAriaCheckedIndex(items);\n break;\n case \"ariaSelected\":\n index = findFirstNavigableAriaSelectedIndex(items);\n break;\n case \"ariaSelectedOrInteractive\":\n index = findFirstNavigableAriaSelectedIndex(items);\n index = index === -1 ? findFirstNavigableIndex(items) : index;\n break;\n default:\n index = typeof typeOrNum === \"number\" || typeOrNum === null ? typeOrNum : -1;\n }\n return index;\n}\nfunction atStart(items, index) {\n return index === findFirstNavigableIndex(items);\n}\nfunction atEnd(items, index) {\n return index === findLastNavigableIndex(items);\n}\nfunction onKeyPrev(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onKeyNext(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onClick(e) {\n const itemIndex = this.indexOf(e.target.closest(this._itemSelector));\n if (isIndexNavigable(this.items, itemIndex)) {\n this.index = itemIndex;\n }\n}\nfunction onKeyHome(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findFirstNavigableIndex(this.items);\n }\n}\nfunction onKeyEnd(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findLastNavigableIndex(this.items);\n }\n}\nfunction onFocusExit() {\n if (this.options.autoReset !== null) {\n this.reset();\n }\n}\nfunction onMutation(e) {\n const fromIndex = this.index;\n let toIndex = this.index;\n // https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n const {\n addedNodes,\n attributeName,\n removedNodes,\n target,\n type\n } = e[0];\n if (type === \"attributes\") {\n if (target === this.currentItem) {\n if (attributeName === \"aria-disabled\") {\n // current item was disabled - keep it as current index (until a keyboard navigation happens)\n toIndex = this.index;\n } else if (attributeName === \"hidden\") {\n // current item was hidden and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n }\n } else {\n toIndex = this.index;\n }\n } else if (type === \"childList\") {\n if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {\n // current item was removed and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n // nodes were added and/or removed - keep current item and resync its index\n toIndex = this.indexOf(this._cachedElement);\n }\n }\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n}\nclass NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n /** @member {typeof defaultOptions} */\n this.options = Object.assign({}, defaultOptions, selectedOptions);\n\n /** @member {HTMLElement} */\n this._el = el;\n\n /** @member {string} */\n this._itemSelector = itemSelector;\n }\n}\nclass LinearNavigationModel extends NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n super(el, itemSelector, selectedOptions);\n const fromIndex = this._index;\n const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);\n\n // do not use setter as it will trigger a change event\n this._index = toIndex;\n\n // always keep an element reference to the last item (for use in mutation observer)\n // todo: convert index to Tuple to store last/current values instead?\n this._cachedElement = this.items[toIndex];\n this._el.dispatchEvent(new CustomEvent(\"navigationModelInit\", {\n bubbles: false,\n detail: {\n firstInteractiveIndex: this.firstNavigableIndex,\n fromIndex,\n items: this.items,\n toIndex\n }\n }));\n }\n get currentItem() {\n return this.items[this.index];\n }\n\n // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed\n get items() {\n return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n }\n get index() {\n return this._index;\n }\n\n /**\n * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)\n */\n set index(toIndex) {\n if (toIndex === this.index) {\n return;\n } else if (!isIndexNavigable(this.items, toIndex)) {\n // no-op. throw exception?\n } else {\n const fromIndex = this.index;\n // update cached element reference (for use in mutation observer if DOM node gets removed)\n this._cachedElement = this.items[toIndex];\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n indexOf(element) {\n return this.items.indexOf(element);\n }\n reset() {\n const fromIndex = this.index;\n const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);\n if (toIndex !== fromIndex) {\n // do not use setter as it will trigger a navigationModelChange event\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n}\n\n// 2D Grid Model will go here\n\n/*\nclass GridModel extends NavigationModel {\n constructor(el, rowSelector, colSelector) {\n super();\n this._coords = null;\n }\n}\n*/\n\nclass NavigationEmitter {\n /**\n * @param {HTMLElement} el\n * @param {LinearNavigationModel} model\n */\n constructor(el, model) {\n this.model = model;\n this.el = el;\n this._keyPrevListener = onKeyPrev.bind(model);\n this._keyNextListener = onKeyNext.bind(model);\n this._keyHomeListener = onKeyHome.bind(model);\n this._keyEndListener = onKeyEnd.bind(model);\n this._clickListener = onClick.bind(model);\n this._focusExitListener = onFocusExit.bind(model);\n this._observer = new MutationObserver(onMutation.bind(model));\n KeyEmitter.addKeyDown(this.el);\n ExitEmitter.addFocusExit(this.el);\n const axis = model.options.axis;\n if (axis === \"both\" || axis === \"x\") {\n this.el.addEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n }\n if (axis === \"both\" || axis === \"y\") {\n this.el.addEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n }\n this.el.addEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.addEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.addEventListener(\"click\", this._clickListener);\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n this._observer.observe(this.el, {\n childList: true,\n subtree: true,\n attributeFilter: [\"aria-disabled\", \"hidden\"],\n attributes: true,\n attributeOldValue: true\n });\n }\n destroy() {\n KeyEmitter.removeKeyDown(this.el);\n ExitEmitter.removeFocusExit(this.el);\n this.el.removeEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.removeEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.removeEventListener(\"click\", this._clickListener);\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n this._observer.disconnect();\n }\n}\nfunction createLinear(el, itemSelector, selectedOptions) {\n const model = new LinearNavigationModel(el, itemSelector, selectedOptions);\n return new NavigationEmitter(el, model);\n}\n\n/*\nstatic createGrid(el, rowSelector, colSelector, selectedOptions) {\n return null;\n}\n*/\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar RovingTabindex = _interopRequireWildcard(require(\"makeup-roving-tabindex\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// REQUIRE\n//const RovingTabindex = require('makeup-roving-tabindex');\n\n// IMPORT\n\nconst rovers = [];\nconst appender = document.getElementById(\"appender\");\nconst prepender = document.getElementById(\"prepender\");\nconst removeFirst = document.getElementById(\"removeFirst\");\nconst removeLast = document.getElementById(\"removeLast\");\nconst widgetEls = document.querySelectorAll(\".widget\");\nconst wrap = document.getElementById(\"wrap\");\nconst log = e => console.log(e.type, e.detail);\nappender.addEventListener(\"click\", function () {\n widgetEls.forEach(function (el) {\n const listItem = document.createElement(\"li\");\n listItem.innerText = `Item ${parseInt(el.querySelectorAll(\"li\").length + 1, 10)}`;\n el.children[0].appendChild(listItem);\n });\n});\nprepender.addEventListener(\"click\", function () {\n widgetEls.forEach(function (el) {\n const ul = el.children[0];\n const listItem = document.createElement(\"li\");\n listItem.innerText = `Item ${parseInt(el.querySelectorAll(\"li\").length + 1, 10)}`;\n ul.insertBefore(listItem, ul.children[0]);\n });\n});\nremoveFirst.addEventListener(\"click\", function () {\n widgetEls.forEach(function (el) {\n const ul = el.children[0];\n const node = ul.firstElementChild;\n if (node) ul.removeChild(node);\n });\n});\nremoveLast.addEventListener(\"click\", function () {\n widgetEls.forEach(function (el) {\n const ul = el.children[0];\n const node = ul.lastElementChild;\n if (node) ul.removeChild(node);\n });\n});\nremoveCurrent.addEventListener(\"click\", () => rovers.forEach(widget => widget.currentItem.remove()));\ndisableCurrent.addEventListener(\"click\", () => rovers.forEach(widget => widget.currentItem.setAttribute(\"aria-disabled\", \"true\")));\nhideCurrent.addEventListener(\"click\", () => rovers.forEach(widget => widget.currentItem.hidden = true));\nwrap.addEventListener(\"change\", e => rovers.forEach(rover => rover.wrap = e.target.checked));\nwidgetEls.forEach(function (el) {\n el.addEventListener(\"rovingTabindexInit\", log);\n el.addEventListener(\"rovingTabindexChange\", log);\n el.addEventListener(\"rovingTabindexMutation\", log);\n el.addEventListener(\"rovingTabindexReset\", log);\n rovers.push(RovingTabindex.createLinear(el, \"li\"));\n});"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-roving-tabindex/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,cAAc,GAAG,WAAW;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA,cAAc;;;;;;;;ACnBD;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,+BAA+B,mBAAO,CAAC,GAA2B;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;ACzHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;ACrEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,yCAAyC,mBAAO,CAAC,GAAoB;AACrE,0CAA0C,mBAAO,CAAC,GAAqB;AACvE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA,iBAAiB,uBAAuB;AACxC,mCAAmC;;AAEnC,iBAAiB,aAAa;AAC9B;;AAEA,iBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;;ACjXa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;UCvCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,4BAA4B,mBAAO,CAAC,GAAwB;AAC5D,+BAA+B,mBAAO,CAAC,GAA4B;AACnE;AACA;AACA;AACA;AACA,wBAAwB,QAAQ,UAAU,mBAAmB,QAAQ,iBAAiB;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,uBAAuB;AACpD;AACA,CAAC;AACD;AACA;AACA;AACA,6BAA6B,uBAAuB;AACpD;AACA,CAAC;AACD;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-prevent-scroll-keys/dist/cjs/index.js","webpack://root/./packages/core/makeup-roving-tabindex/dist/cjs/index.js","webpack://root/./packages/core/makeup-roving-tabindex/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-roving-tabindex/node_modules/makeup-key-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-roving-tabindex/node_modules/makeup-navigation-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-roving-tabindex/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-roving-tabindex/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.remove = exports.add = void 0;\nconst SCROLL_KEYS = new Set([\" \", \"PageUp\", \"PageDown\", \"End\", \"Home\", \"ArrowLeft\", \"ArrowUp\", \"ArrowRight\", \"ArrowDown\"]);\nconst onKeyDown = e => {\n if (SCROLL_KEYS.has(e.key)) {\n e.preventDefault();\n }\n};\nconst add = el => {\n el.addEventListener(\"keydown\", onKeyDown);\n};\nexports.add = add;\nconst remove = el => {\n el.removeEventListener(\"keydown\", onKeyDown);\n};\nexports.remove = remove;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar _makeupNavigationEmitter = require(\"makeup-navigation-emitter\");\nconst defaultOptions = {\n autoInit: \"interactive\",\n autoReset: \"current\",\n wrap: false,\n axis: \"both\"\n};\nfunction refreshTabindex(items, focusIndex) {\n items.forEach((el, i) => {\n el.setAttribute(\"tabindex\", i === focusIndex ? \"0\" : \"-1\");\n });\n}\nfunction onModelInit(e) {\n refreshTabindex(e.detail.items, e.detail.toIndex);\n this._el.dispatchEvent(new CustomEvent(\"rovingTabindexInit\", {\n detail: e.detail\n }));\n}\nfunction onModelChange(e) {\n const items = this.items;\n const fromItem = items[e.detail.fromIndex];\n const toItem = items[e.detail.toIndex];\n if (fromItem) {\n fromItem.setAttribute(\"tabindex\", \"-1\");\n }\n if (toItem) {\n toItem.setAttribute(\"tabindex\", \"0\");\n toItem.focus();\n }\n this._el.dispatchEvent(new CustomEvent(\"rovingTabindexChange\", {\n detail: e.detail\n }));\n}\nfunction onModelReset(e) {\n refreshTabindex(this.items, e.detail.toIndex);\n this._el.dispatchEvent(new CustomEvent(\"rovingTabindexReset\", {\n detail: e.detail\n }));\n}\nfunction onModelMutation(e) {\n refreshTabindex(this.items, e.detail.toIndex);\n this._el.dispatchEvent(new CustomEvent(\"rovingTabindexMutation\", {\n detail: e.detail\n }));\n}\nclass RovingTabindex {\n constructor(el) {\n this._el = el;\n this._onMutationListener = onModelMutation.bind(this);\n this._onChangeListener = onModelChange.bind(this);\n this._onInitListener = onModelInit.bind(this);\n this._onResetListener = onModelReset.bind(this);\n this._el.addEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.addEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.addEventListener(\"navigationModelInit\", this._onInitListener);\n this._el.addEventListener(\"navigationModelReset\", this._onResetListener);\n }\n destroy() {\n this._el.removeEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.removeEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.removeEventListener(\"navigationModelInit\", this._onInitListener);\n this._el.removeEventListener(\"navigationModelReset\", this._onResetListener);\n }\n}\nclass LinearRovingTabindex extends RovingTabindex {\n constructor(el, itemSelector, selectedOptions) {\n super(el);\n this._options = {\n ...defaultOptions,\n ...selectedOptions\n };\n this._itemSelector = itemSelector;\n\n // todo: options.index is deprecated. Remove support in future release.\n this._navigationEmitter = (0, _makeupNavigationEmitter.createLinear)(el, itemSelector, {\n autoInit: this._options.index !== undefined ? this._options.index : this._options.autoInit,\n autoReset: this._options.autoReset,\n wrap: this._options.wrap,\n axis: this._options.axis\n });\n }\n get index() {\n return this._navigationEmitter.model.index;\n }\n set index(newIndex) {\n this._navigationEmitter.model.index = newIndex;\n }\n set wrap(newWrap) {\n this._navigationEmitter.model.options.wrap = newWrap;\n }\n get currentItem() {\n return this._navigationEmitter.model.currentItem;\n }\n get items() {\n return this._navigationEmitter.model.items;\n }\n reset() {\n this._navigationEmitter.model.reset();\n }\n destroy() {\n super.destroy();\n this._navigationEmitter.destroy();\n }\n}\n\n/*\nclass GridRovingTabindex extends RovingTabindex {\n constructor(el, rowSelector, cellSelector, selectedOptions) {\n super(el);\n }\n}\n*/\n\nfunction createLinear(el, itemSelector, selectedOptions) {\n return new LinearRovingTabindex(el, itemSelector, selectedOptions);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n if (!evt.shiftKey) {\n const key = evt.key;\n switch (key) {\n case \"Enter\":\n case \"Escape\":\n case \"PageUp\":\n case \"PageDown\":\n case \"End\":\n case \"Home\":\n case \"ArrowLeft\":\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"ArrowDown\":\n el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n detail: evt,\n bubbles: true\n }));\n break;\n case \" \":\n el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n detail: evt,\n bubbles: true\n }));\n break;\n default:\n return;\n }\n }\n}\nfunction onKeyDown(e) {\n onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n addKeyDown(el);\n addKeyUp(el);\n}\nfunction remove(el) {\n removeKeyDown(el);\n removeKeyUp(el);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar KeyEmitter = _interopRequireWildcard(require(\"makeup-key-emitter\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n axis: \"both\",\n autoInit: \"interactive\",\n autoReset: \"current\",\n ignoreByDelegateSelector: null,\n wrap: false\n};\nfunction isItemNavigable(el) {\n return !el.hidden && el.getAttribute(\"aria-disabled\") !== \"true\";\n}\nfunction isIndexNavigable(items, index) {\n return index >= 0 && index < items.length ? isItemNavigable(items[index]) : false;\n}\nfunction findNavigableItems(items) {\n return items.filter(isItemNavigable);\n}\nfunction findFirstNavigableIndex(items) {\n return items.findIndex(item => isItemNavigable(item));\n}\nfunction findLastNavigableIndex(items) {\n // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it\n return items.indexOf(findNavigableItems(items).reverse()[0]);\n}\nfunction findIndexByAttribute(items, attribute, value) {\n return items.findIndex(item => isItemNavigable(item) && item.getAttribute(attribute) === value);\n}\nfunction findFirstNavigableAriaCheckedIndex(items) {\n return findIndexByAttribute(items, \"aria-checked\", \"true\");\n}\nfunction findFirstNavigableAriaSelectedIndex(items) {\n return findIndexByAttribute(items, \"aria-selected\", \"true\");\n}\nfunction findIgnoredByDelegateItems(el, options) {\n return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];\n}\nfunction findPreviousNavigableIndex(items, index, wrap) {\n let previousNavigableIndex = -1;\n if (index === null || atStart(items, index)) {\n if (wrap === true) {\n previousNavigableIndex = findLastNavigableIndex(items);\n }\n } else {\n let i = index;\n while (--i >= 0) {\n if (isItemNavigable(items[i])) {\n previousNavigableIndex = i;\n break;\n }\n }\n }\n return previousNavigableIndex;\n}\nfunction findNextNavigableIndex(items, index, wrap) {\n let nextNavigableIndex = -1;\n if (index === null) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n } else if (atEnd(items, index)) {\n if (wrap === true) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n }\n } else {\n let i = index;\n while (++i < items.length) {\n if (isItemNavigable(items[i])) {\n nextNavigableIndex = i;\n break;\n }\n }\n }\n return nextNavigableIndex;\n}\n\n// returning -1 means not found\nfunction findIndexPositionByType(typeOrNum, items, currentIndex) {\n let index = -1;\n switch (typeOrNum) {\n case \"none\":\n index = null;\n break;\n case \"current\":\n index = currentIndex;\n break;\n case \"interactive\":\n index = findFirstNavigableIndex(items);\n break;\n case \"ariaChecked\":\n index = findFirstNavigableAriaCheckedIndex(items);\n break;\n case \"ariaSelected\":\n index = findFirstNavigableAriaSelectedIndex(items);\n break;\n case \"ariaSelectedOrInteractive\":\n index = findFirstNavigableAriaSelectedIndex(items);\n index = index === -1 ? findFirstNavigableIndex(items) : index;\n break;\n default:\n index = typeof typeOrNum === \"number\" || typeOrNum === null ? typeOrNum : -1;\n }\n return index;\n}\nfunction atStart(items, index) {\n return index === findFirstNavigableIndex(items);\n}\nfunction atEnd(items, index) {\n return index === findLastNavigableIndex(items);\n}\nfunction onKeyPrev(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onKeyNext(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onClick(e) {\n const itemIndex = this.indexOf(e.target.closest(this._itemSelector));\n if (isIndexNavigable(this.items, itemIndex)) {\n this.index = itemIndex;\n }\n}\nfunction onKeyHome(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findFirstNavigableIndex(this.items);\n }\n}\nfunction onKeyEnd(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findLastNavigableIndex(this.items);\n }\n}\nfunction onFocusExit() {\n if (this.options.autoReset !== null) {\n this.reset();\n }\n}\nfunction onMutation(e) {\n const fromIndex = this.index;\n let toIndex = this.index;\n // https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n const {\n addedNodes,\n attributeName,\n removedNodes,\n target,\n type\n } = e[0];\n if (type === \"attributes\") {\n if (target === this.currentItem) {\n if (attributeName === \"aria-disabled\") {\n // current item was disabled - keep it as current index (until a keyboard navigation happens)\n toIndex = this.index;\n } else if (attributeName === \"hidden\") {\n // current item was hidden and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n }\n } else {\n toIndex = this.index;\n }\n } else if (type === \"childList\") {\n if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {\n // current item was removed and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n // nodes were added and/or removed - keep current item and resync its index\n toIndex = this.indexOf(this._cachedElement);\n }\n }\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n}\nclass NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n /** @member {typeof defaultOptions} */\n this.options = Object.assign({}, defaultOptions, selectedOptions);\n\n /** @member {HTMLElement} */\n this._el = el;\n\n /** @member {string} */\n this._itemSelector = itemSelector;\n }\n}\nclass LinearNavigationModel extends NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n super(el, itemSelector, selectedOptions);\n const fromIndex = this._index;\n const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);\n\n // do not use setter as it will trigger a change event\n this._index = toIndex;\n\n // always keep an element reference to the last item (for use in mutation observer)\n // todo: convert index to Tuple to store last/current values instead?\n this._cachedElement = this.items[toIndex];\n this._el.dispatchEvent(new CustomEvent(\"navigationModelInit\", {\n bubbles: false,\n detail: {\n firstInteractiveIndex: this.firstNavigableIndex,\n fromIndex,\n items: this.items,\n toIndex\n }\n }));\n }\n get currentItem() {\n return this.items[this.index];\n }\n\n // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed\n get items() {\n return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n }\n get index() {\n return this._index;\n }\n\n /**\n * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)\n */\n set index(toIndex) {\n if (toIndex === this.index) {\n return;\n } else if (!isIndexNavigable(this.items, toIndex)) {\n // no-op. throw exception?\n } else {\n const fromIndex = this.index;\n // update cached element reference (for use in mutation observer if DOM node gets removed)\n this._cachedElement = this.items[toIndex];\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n indexOf(element) {\n return this.items.indexOf(element);\n }\n reset() {\n const fromIndex = this.index;\n const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);\n if (toIndex !== fromIndex) {\n // do not use setter as it will trigger a navigationModelChange event\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n}\n\n// 2D Grid Model will go here\n\n/*\nclass GridModel extends NavigationModel {\n constructor(el, rowSelector, colSelector) {\n super();\n this._coords = null;\n }\n}\n*/\n\nclass NavigationEmitter {\n /**\n * @param {HTMLElement} el\n * @param {LinearNavigationModel} model\n */\n constructor(el, model) {\n this.model = model;\n this.el = el;\n this._keyPrevListener = onKeyPrev.bind(model);\n this._keyNextListener = onKeyNext.bind(model);\n this._keyHomeListener = onKeyHome.bind(model);\n this._keyEndListener = onKeyEnd.bind(model);\n this._clickListener = onClick.bind(model);\n this._focusExitListener = onFocusExit.bind(model);\n this._observer = new MutationObserver(onMutation.bind(model));\n KeyEmitter.addKeyDown(this.el);\n ExitEmitter.addFocusExit(this.el);\n const axis = model.options.axis;\n if (axis === \"both\" || axis === \"x\") {\n this.el.addEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n }\n if (axis === \"both\" || axis === \"y\") {\n this.el.addEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n }\n this.el.addEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.addEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.addEventListener(\"click\", this._clickListener);\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n this._observer.observe(this.el, {\n childList: true,\n subtree: true,\n attributeFilter: [\"aria-disabled\", \"hidden\"],\n attributes: true,\n attributeOldValue: true\n });\n }\n destroy() {\n KeyEmitter.removeKeyDown(this.el);\n ExitEmitter.removeFocusExit(this.el);\n this.el.removeEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.removeEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.removeEventListener(\"click\", this._clickListener);\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n this._observer.disconnect();\n }\n}\nfunction createLinear(el, itemSelector, selectedOptions) {\n const model = new LinearNavigationModel(el, itemSelector, selectedOptions);\n return new NavigationEmitter(el, model);\n}\n\n/*\nstatic createGrid(el, rowSelector, colSelector, selectedOptions) {\n return null;\n}\n*/\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupRovingTabindex = require(\"makeup-roving-tabindex\");\nvar _makeupPreventScrollKeys = require(\"makeup-prevent-scroll-keys\");\nconst widgetEl = document.querySelector(\".widget\");\nconst logEl = document.getElementById(\"log\");\nconst logEvent = e => {\n const item = document.createElement(\"li\");\n item.textContent = `${e.type} — from: ${e.detail.fromIndex}, to: ${e.detail.toIndex}`;\n logEl.prepend(item);\n};\nconst rover = (0, _makeupRovingTabindex.createLinear)(widgetEl, \"li\");\n(0, _makeupPreventScrollKeys.add)(widgetEl);\nwidgetEl.addEventListener(\"rovingTabindexInit\", logEvent);\nwidgetEl.addEventListener(\"rovingTabindexChange\", logEvent);\nwidgetEl.addEventListener(\"rovingTabindexMutation\", logEvent);\nwidgetEl.addEventListener(\"rovingTabindexReset\", logEvent);\ndocument.getElementById(\"appender\").addEventListener(\"click\", () => {\n const ul = widgetEl.querySelector(\"ul\");\n const item = document.createElement(\"li\");\n item.textContent = `Item ${ul.children.length + 1}`;\n ul.appendChild(item);\n});\ndocument.getElementById(\"prepender\").addEventListener(\"click\", () => {\n const ul = widgetEl.querySelector(\"ul\");\n const item = document.createElement(\"li\");\n item.textContent = `Item ${ul.children.length + 1}`;\n ul.insertBefore(item, ul.firstElementChild);\n});\ndocument.getElementById(\"removeFirst\").addEventListener(\"click\", () => {\n const first = widgetEl.querySelector(\"ul\").firstElementChild;\n if (first) first.remove();\n});\ndocument.getElementById(\"removeLast\").addEventListener(\"click\", () => {\n const last = widgetEl.querySelector(\"ul\").lastElementChild;\n if (last) last.remove();\n});\ndocument.getElementById(\"removeCurrent\").addEventListener(\"click\", () => rover.currentItem?.remove());\ndocument.getElementById(\"disableCurrent\").addEventListener(\"click\", () => rover.currentItem?.setAttribute(\"aria-disabled\", \"true\"));\ndocument.getElementById(\"hideCurrent\").addEventListener(\"click\", () => {\n if (rover.currentItem) rover.currentItem.hidden = true;\n});\ndocument.getElementById(\"wrap\").addEventListener(\"change\", e => {\n rover.wrap = e.target.checked;\n});\ndocument.getElementById(\"clear\").addEventListener(\"click\", () => {\n logEl.innerHTML = \"\";\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-screenreader-trap/index.html b/docs/core/makeup-screenreader-trap/index.html index 14a5cdc9..5a1108c0 100644 --- a/docs/core/makeup-screenreader-trap/index.html +++ b/docs/core/makeup-screenreader-trap/index.html @@ -3,6 +3,8 @@ makeup-screenreader-trap demo + + -
                                  -

                                  makeup-screenreader-trap demo

                                  -

                                  Activate any button to hide all other elements on screen from screen reader.

                                  -

                                  For demo purposes, elements with aria-hidden="true" are visually marked with strikethrough.

                                  +
                                  +

                                  core / makeup-screenreader-trap

                                  +

                                  + Restricts the screen reader virtual cursor to a single DOM subtree. Elements hidden from screen readers are + shown with strikethrough. +

                                  -
                                  - -
                                  +
                                  -
                                  -
                                  sibling before trap
                                  - -
                                  sibling after trap
                                  -
                                  +

                                  Default (aria-hidden)

                                  +

                                  + Siblings and ancestor siblings receive aria-hidden="true"; the trapped element and its ancestors + receive aria-hidden="false". +

                                  - -
                                  -
                                  sibling before trap
                                  sibling before trap
                                  sibling after trap
                                  -
                                  sibling after trap
                                  @@ -62,85 +60,91 @@

                                  makeup-screenreader-trap demo

                                  uncle after trap
                                  +
                                  + +

                                  Pre-existing aria-hidden

                                  +

                                  + Elements already marked aria-hidden before trap is activated; the original value is restored on + untrap. +

                                  +
                                  -
                                  uncle before trap
                                  -
                                  uncle before trap
                                  -
                                  -
                                  sibling before trap
                                  -
                                  sibling before trap
                                  - -
                                  sibling after trap
                                  -
                                  sibling after trap
                                  -
                                  -
                                  uncle after trap
                                  -
                                  uncle after trap
                                  + + +
                                  - +
                                  sibling before trap
                                  sibling after trap
                                  - +
                                  +
                                  + +

                                  Pre-existing hidden property

                                  +

                                  Elements already using the hidden property before trap is activated; restored on untrap.

                                  +
                                  -
                                  great uncle before trap
                                  -
                                  -
                                  uncle before trap
                                  -
                                  -
                                  sibling before trap
                                  - -
                                  sibling after trap
                                  -
                                  -
                                  uncle after trap
                                  -
                                  -
                                  great uncle after trap
                                  + + +
                                  +
                                  + +

                                  SVG siblings

                                  + +

                                  Has two adjacent visible SVG text elements:

                                  +
                                  -
                                  great-great uncle before trap
                                  -
                                  -
                                  great uncle before trap
                                  -
                                  -
                                  uncle before trap
                                  -
                                  -
                                  sibling before trap
                                  - -
                                  sibling after trap
                                  -
                                  -
                                  uncle after trap
                                  -
                                  -
                                  great uncle after trap
                                  -
                                  -
                                  great uncle after trap
                                  + SVG sibling before trap + + SVG sibling after trap
                                  -

                                  Has two visibly hidden elements (using hidden property) before and after button:

                                  +

                                  Has two adjacent aria-hidden SVG text elements:

                                  - + - +
                                  -

                                  Has two visible SVG elements before and after button:

                                  +

                                  + Has two adjacent hidden SVG text elements (SVG does not support the hidden property): +

                                  - hidden svg sibling before trap + - hidden svg sibling after trap +
                                  -

                                  Has two visibly hidden SVG elements (using hidden property) before and after button:

                                  +
                                  + +

                                  useHiddenProperty

                                  +

                                  + Uses the hidden DOM property instead of aria-hidden to hide elements for + all users. +

                                  - - - +
                                  sibling before trap
                                  + +
                                  sibling after trap
                                  + +
                                  + +

                                  Events

                                  +

                                  Events bubble from the trapped element.

                                  +
                                    +
                                    diff --git a/docs/core/makeup-screenreader-trap/index.js b/docs/core/makeup-screenreader-trap/index.js index 38c90ad4..e3c7ef2d 100644 --- a/docs/core/makeup-screenreader-trap/index.js +++ b/docs/core/makeup-screenreader-trap/index.js @@ -1,35 +1,36 @@ -// REQUIRE -// const screenreaderTrap = require('makeup-screenreader-trap'); +import { trap, untrap } from "makeup-screenreader-trap"; -// IMPORT -import * as screenreaderTrap from "makeup-screenreader-trap"; +const logEl = document.getElementById("log"); -document.querySelectorAll(".trap").forEach(function (item) { - item.addEventListener("click", function () { - if (this.getAttribute("aria-pressed") === "true") { - screenreaderTrap.untrap(this); +function logEvent(eventName) { + const item = document.createElement("li"); + item.textContent = eventName; + logEl.prepend(item); +} + +document.querySelectorAll(".trap").forEach((btn) => { + btn.addEventListener("click", () => { + if (btn.getAttribute("aria-pressed") === "true") { + untrap(); } else { - screenreaderTrap.trap(this, { useHiddenProperty: false }); + trap(btn, { useHiddenProperty: btn.hasAttribute("data-use-hidden-property") }); } }); - item.addEventListener("screenreaderTrap", function (e) { - console.log(this, e); - this.innerText = "Untrap"; - this.setAttribute("aria-pressed", "true"); + btn.addEventListener("screenreaderTrap", () => { + btn.textContent = "Untrap"; + btn.setAttribute("aria-pressed", "true"); }); - item.addEventListener("screenreaderUntrap", function (e) { - console.log(this, e); - this.innerText = "Trap"; - this.setAttribute("aria-pressed", "false"); + btn.addEventListener("screenreaderUntrap", () => { + btn.textContent = "Trap"; + btn.setAttribute("aria-pressed", "false"); }); }); -document.addEventListener("screenreaderTrap", function (e) { - console.log(this, e); -}); +document.addEventListener("screenreaderTrap", () => logEvent("screenreaderTrap")); +document.addEventListener("screenreaderUntrap", () => logEvent("screenreaderUntrap")); -document.addEventListener("screenreaderUntrap", function (e) { - console.log(this, e); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; }); diff --git a/docs/core/makeup-screenreader-trap/index.min.js b/docs/core/makeup-screenreader-trap/index.min.js index cdd06d64..53d5a53f 100644 --- a/docs/core/makeup-screenreader-trap/index.min.js +++ b/docs/core/makeup-screenreader-trap/index.min.js @@ -26,22 +26,18 @@ let dirtyObjects; // filter function for svg elements const filterSvg = item => item.tagName.toLowerCase() !== "svg"; function showElementPrep(el, useHiddenProperty) { - let preparedElement; if (useHiddenProperty === false) { - preparedElement = prepareElement(el, "aria-hidden", "false"); + return prepareElement(el, "aria-hidden", "false"); } else { - preparedElement = prepareElement(el, "hidden", false); + return prepareElement(el, "hidden", false); } - return preparedElement; } function hideElementPrep(el, useHiddenProperty) { - let preparedElement; if (useHiddenProperty === false) { - preparedElement = prepareElement(el, "aria-hidden", "true"); + return prepareElement(el, "aria-hidden", "true"); } else { - preparedElement = prepareElement(el, "hidden", true); + return prepareElement(el, "hidden", true); } - return preparedElement; } function prepareElement(el, attributeName, dirtyValue) { const isProperty = typeof dirtyValue === "boolean"; @@ -95,7 +91,10 @@ const defaultOptions = { function trap(el, selectedOptions) { // ensure current trap is deactivated untrap(); - const options = Object.assign({}, defaultOptions, selectedOptions); + const options = { + ...defaultOptions, + ...selectedOptions + }; // update the trapped el reference trappedEl = el; @@ -120,7 +119,7 @@ function trap(el, selectedOptions) { } // prepare elements - dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty))); + dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty), ...ancestors.map(item => showElementPrep(item, options.useHiddenProperty)), ...siblings.map(item => hideElementPrep(item, options.useHiddenProperty)), ...siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty))]; // update DOM dirtyObjects.forEach(item => dirtyElement(item)); @@ -151,10 +150,8 @@ const filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() // filter function for sibling elements const filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== "script"; -// reducer to flatten arrays -const flattenArrays = (a, b) => a.concat(b); - // recursive function to get previous sibling nodes of given element +// TODO: rewrite as iterative loop to avoid stack overflow risk in large DOM trees function getPreviousSiblings(el) { let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; const previousSibling = el.previousSibling; @@ -166,6 +163,7 @@ function getPreviousSiblings(el) { } // recursive function to get next sibling nodes of given element +// TODO: rewrite as iterative loop to avoid stack overflow risk in large DOM trees function getNextSiblings(el) { let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; const nextSibling = el.nextSibling; @@ -200,7 +198,7 @@ function getAncestors(el) { // get siblings of ancestors (i.e. aunts and uncles) of given el function getSiblingsOfAncestors(el) { - return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []); + return getAncestors(el).map(item => getSiblings(item)).flat(); } @@ -236,39 +234,36 @@ function getSiblingsOfAncestors(el) { var __webpack_exports__ = {}; -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(893)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } -// REQUIRE -// const screenreaderTrap = require('makeup-screenreader-trap'); - -// IMPORT - -document.querySelectorAll(".trap").forEach(function (item) { - item.addEventListener("click", function () { - if (this.getAttribute("aria-pressed") === "true") { - screenreaderTrap.untrap(this); +var _makeupScreenreaderTrap = __webpack_require__(893); +const logEl = document.getElementById("log"); +function logEvent(eventName) { + const item = document.createElement("li"); + item.textContent = eventName; + logEl.prepend(item); +} +document.querySelectorAll(".trap").forEach(btn => { + btn.addEventListener("click", () => { + if (btn.getAttribute("aria-pressed") === "true") { + (0, _makeupScreenreaderTrap.untrap)(); } else { - screenreaderTrap.trap(this, { - useHiddenProperty: false + (0, _makeupScreenreaderTrap.trap)(btn, { + useHiddenProperty: btn.hasAttribute("data-use-hidden-property") }); } }); - item.addEventListener("screenreaderTrap", function (e) { - console.log(this, e); - this.innerText = "Untrap"; - this.setAttribute("aria-pressed", "true"); + btn.addEventListener("screenreaderTrap", () => { + btn.textContent = "Untrap"; + btn.setAttribute("aria-pressed", "true"); }); - item.addEventListener("screenreaderUntrap", function (e) { - console.log(this, e); - this.innerText = "Trap"; - this.setAttribute("aria-pressed", "false"); + btn.addEventListener("screenreaderUntrap", () => { + btn.textContent = "Trap"; + btn.setAttribute("aria-pressed", "false"); }); }); -document.addEventListener("screenreaderTrap", function (e) { - console.log(this, e); -}); -document.addEventListener("screenreaderUntrap", function (e) { - console.log(this, e); +document.addEventListener("screenreaderTrap", () => logEvent("screenreaderTrap")); +document.addEventListener("screenreaderUntrap", () => logEvent("screenreaderUntrap")); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; }); /******/ })() ; diff --git a/docs/core/makeup-screenreader-trap/index.min.js.map b/docs/core/makeup-screenreader-trap/index.min.js.map index ac075353..ef8d76fd 100644 --- a/docs/core/makeup-screenreader-trap/index.min.js.map +++ b/docs/core/makeup-screenreader-trap/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-screenreader-trap/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,GAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;UChEA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,+CAA+C,mBAAO,CAAC,GAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,OAAO;AACP;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-screenreader-trap/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// REQUIRE\n// const screenreaderTrap = require('makeup-screenreader-trap');\n\n// IMPORT\n\ndocument.querySelectorAll(\".trap\").forEach(function (item) {\n item.addEventListener(\"click\", function () {\n if (this.getAttribute(\"aria-pressed\") === \"true\") {\n screenreaderTrap.untrap(this);\n } else {\n screenreaderTrap.trap(this, {\n useHiddenProperty: false\n });\n }\n });\n item.addEventListener(\"screenreaderTrap\", function (e) {\n console.log(this, e);\n this.innerText = \"Untrap\";\n this.setAttribute(\"aria-pressed\", \"true\");\n });\n item.addEventListener(\"screenreaderUntrap\", function (e) {\n console.log(this, e);\n this.innerText = \"Trap\";\n this.setAttribute(\"aria-pressed\", \"false\");\n });\n});\ndocument.addEventListener(\"screenreaderTrap\", function (e) {\n console.log(this, e);\n});\ndocument.addEventListener(\"screenreaderUntrap\", function (e) {\n console.log(this, e);\n});"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-screenreader-trap/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,GAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;AC3Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;UC/DA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,8BAA8B,mBAAO,CAAC,GAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,OAAO;AACP;AACA,GAAG;AACH;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,GAAG;AACH,CAAC;AACD;AACA;AACA;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-screenreader-trap/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n if (useHiddenProperty === false) {\n return prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n return prepareElement(el, \"hidden\", false);\n }\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n if (useHiddenProperty === false) {\n return prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n return prepareElement(el, \"hidden\", true);\n }\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = {\n ...defaultOptions,\n ...selectedOptions\n };\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty), ...ancestors.map(item => showElementPrep(item, options.useHiddenProperty)), ...siblings.map(item => hideElementPrep(item, options.useHiddenProperty)), ...siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty))];\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// recursive function to get previous sibling nodes of given element\n// TODO: rewrite as iterative loop to avoid stack overflow risk in large DOM trees\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\n// TODO: rewrite as iterative loop to avoid stack overflow risk in large DOM trees\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).flat();\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst logEl = document.getElementById(\"log\");\nfunction logEvent(eventName) {\n const item = document.createElement(\"li\");\n item.textContent = eventName;\n logEl.prepend(item);\n}\ndocument.querySelectorAll(\".trap\").forEach(btn => {\n btn.addEventListener(\"click\", () => {\n if (btn.getAttribute(\"aria-pressed\") === \"true\") {\n (0, _makeupScreenreaderTrap.untrap)();\n } else {\n (0, _makeupScreenreaderTrap.trap)(btn, {\n useHiddenProperty: btn.hasAttribute(\"data-use-hidden-property\")\n });\n }\n });\n btn.addEventListener(\"screenreaderTrap\", () => {\n btn.textContent = \"Untrap\";\n btn.setAttribute(\"aria-pressed\", \"true\");\n });\n btn.addEventListener(\"screenreaderUntrap\", () => {\n btn.textContent = \"Trap\";\n btn.setAttribute(\"aria-pressed\", \"false\");\n });\n});\ndocument.addEventListener(\"screenreaderTrap\", () => logEvent(\"screenreaderTrap\"));\ndocument.addEventListener(\"screenreaderUntrap\", () => logEvent(\"screenreaderUntrap\"));\ndocument.getElementById(\"clear\").addEventListener(\"click\", () => {\n logEl.innerHTML = \"\";\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/core/makeup-typeahead/index.html b/docs/core/makeup-typeahead/index.html index a86c419a..9408fa3a 100644 --- a/docs/core/makeup-typeahead/index.html +++ b/docs/core/makeup-typeahead/index.html @@ -3,13 +3,34 @@ makeup-typeahead demo + + +
                                    -

                                    makeup-typeahead demo

                                    - just start typing to see the typeahead's results! -

                                    Country List

                                    -
                                      +

                                      core / makeup-typeahead

                                      +

                                      + Returns the index of the best matching item for a typed character string. Characters accumulate across + keypresses; each keypress starts its own 1.5s timer — when it fires the string resets. +

                                      + +
                                      + +

                                      Country list

                                      +

                                      Tab to focus the list, then type to jump to a matching item.

                                      +
                                      • Albania
                                      • Angola
                                      • Aruba
                                        • @@ -25,10 +46,7 @@

                                        Country List

                                      • UK
                                      • USA
                                      - -

                                      Typeahead Country

                                      - -

                                      +

                                      Match: —

                                    diff --git a/docs/core/makeup-typeahead/index.js b/docs/core/makeup-typeahead/index.js index 96f2a497..dcb1293c 100644 --- a/docs/core/makeup-typeahead/index.js +++ b/docs/core/makeup-typeahead/index.js @@ -1,22 +1,21 @@ -// REQUIRE -//const typeahead = require('makeup-typeahead').default; - -// IMPORT import typeahead from "makeup-typeahead"; -const list = document.querySelector("ul"); -const selected = document.querySelector(".selected"); -const TIMEOUT_LENGTH = 2000; - +const listEl = document.getElementById("list"); +const matchEl = document.getElementById("match"); const { getIndex } = typeahead(); +const TIMEOUT = 1500; -function handleKeyDown(e) { - if (e.key.length === 1) { - const listIndex = getIndex(list.children, e.key, TIMEOUT_LENGTH); - if (listIndex !== -1) { - selected.innerHTML = list.children[listIndex].innerHTML; - } - } -} +listEl.addEventListener("keydown", (e) => { + if (e.key.length !== 1) return; -document.addEventListener("keydown", (e) => handleKeyDown(e)); + const index = getIndex(listEl.children, e.key, TIMEOUT); + + [...listEl.children].forEach((li) => li.classList.remove("match")); + + if (index !== -1) { + listEl.children[index].classList.add("match"); + matchEl.textContent = listEl.children[index].textContent; + } else { + matchEl.textContent = "—"; + } +}); diff --git a/docs/core/makeup-typeahead/index.min.js b/docs/core/makeup-typeahead/index.min.js index 6880f51d..4e72967d 100644 --- a/docs/core/makeup-typeahead/index.min.js +++ b/docs/core/makeup-typeahead/index.min.js @@ -12,31 +12,25 @@ Object.defineProperty(exports, "__esModule", ({ })); exports["default"] = _default; function _default() { - let timeout; // eslint-disable-line no-unassigned-vars + let timeout; let typeStr = ""; return { getIndex: function (nodeList, char, timeoutLength) { typeStr = typeStr.concat(char); - let index; if (nodeList == null) return -1; const lowerTypeStr = typeStr.toLocaleLowerCase(); - index = [...nodeList].findIndex(el => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr)); + let index = [...nodeList].findIndex(el => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr)); if (index === -1) { index = [...nodeList].findIndex(el => el.textContent.toLocaleLowerCase().includes(lowerTypeStr)); } - if (timeout) { - clearTimeout(timeout); - } - setTimeout(() => { - clearTimeout(timeout); + // intentionally stacked (not debounced) - see README for usage example + timeout = setTimeout(() => { typeStr = ""; }, timeoutLength); return index; }, destroy: function () { - if (timeout) { - clearTimeout(timeout); - } + clearTimeout(timeout); } }; } @@ -76,26 +70,23 @@ var __webpack_exports__ = {}; var _makeupTypeahead = _interopRequireDefault(__webpack_require__(309)); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } -// REQUIRE -//const typeahead = require('makeup-typeahead').default; - -// IMPORT - -const list = document.querySelector("ul"); -const selected = document.querySelector(".selected"); -const TIMEOUT_LENGTH = 2000; +const listEl = document.getElementById("list"); +const matchEl = document.getElementById("match"); const { getIndex } = (0, _makeupTypeahead.default)(); -function handleKeyDown(e) { - if (e.key.length === 1) { - const listIndex = getIndex(list.children, e.key, TIMEOUT_LENGTH); - if (listIndex !== -1) { - selected.innerHTML = list.children[listIndex].innerHTML; - } +const TIMEOUT = 1500; +listEl.addEventListener("keydown", e => { + if (e.key.length !== 1) return; + const index = getIndex(listEl.children, e.key, TIMEOUT); + [...listEl.children].forEach(li => li.classList.remove("match")); + if (index !== -1) { + listEl.children[index].classList.add("match"); + matchEl.textContent = listEl.children[index].textContent; + } else { + matchEl.textContent = "—"; } -} -document.addEventListener("keydown", e => handleKeyDown(e)); +}); /******/ })() ; //# sourceMappingURL=index.min.js.map \ No newline at end of file diff --git a/docs/core/makeup-typeahead/index.min.js.map b/docs/core/makeup-typeahead/index.min.js.map index 35f2fa81..0437ca70 100644 --- a/docs/core/makeup-typeahead/index.min.js.map +++ b/docs/core/makeup-typeahead/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-typeahead/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;UClCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,8CAA8C,mBAAO,CAAC,GAAkB;AACxE,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,EAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4D","sources":["webpack://root/./packages/core/makeup-typeahead/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-typeahead/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nfunction _default() {\n let timeout; // eslint-disable-line no-unassigned-vars\n let typeStr = \"\";\n return {\n getIndex: function (nodeList, char, timeoutLength) {\n typeStr = typeStr.concat(char);\n let index;\n if (nodeList == null) return -1;\n const lowerTypeStr = typeStr.toLocaleLowerCase();\n index = [...nodeList].findIndex(el => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr));\n if (index === -1) {\n index = [...nodeList].findIndex(el => el.textContent.toLocaleLowerCase().includes(lowerTypeStr));\n }\n if (timeout) {\n clearTimeout(timeout);\n }\n setTimeout(() => {\n clearTimeout(timeout);\n typeStr = \"\";\n }, timeoutLength);\n return index;\n },\n destroy: function () {\n if (timeout) {\n clearTimeout(timeout);\n }\n }\n };\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupTypeahead = _interopRequireDefault(require(\"makeup-typeahead\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n//const typeahead = require('makeup-typeahead').default;\n\n// IMPORT\n\nconst list = document.querySelector(\"ul\");\nconst selected = document.querySelector(\".selected\");\nconst TIMEOUT_LENGTH = 2000;\nconst {\n getIndex\n} = (0, _makeupTypeahead.default)();\nfunction handleKeyDown(e) {\n if (e.key.length === 1) {\n const listIndex = getIndex(list.children, e.key, TIMEOUT_LENGTH);\n if (listIndex !== -1) {\n selected.innerHTML = list.children[listIndex].innerHTML;\n }\n }\n}\ndocument.addEventListener(\"keydown\", e => handleKeyDown(e));"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-typeahead/index.min.js","mappings":";;;;;;;AAAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;;;;;;UC5BA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;ACtBa;;AAEb,8CAA8C,mBAAO,CAAC,GAAkB;AACxE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA,EAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA,CAAC,E","sources":["webpack://root/./packages/core/makeup-typeahead/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/./docs/core/makeup-typeahead/index.compiled.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nfunction _default() {\n let timeout;\n let typeStr = \"\";\n return {\n getIndex: function (nodeList, char, timeoutLength) {\n typeStr = typeStr.concat(char);\n if (nodeList == null) return -1;\n const lowerTypeStr = typeStr.toLocaleLowerCase();\n let index = [...nodeList].findIndex(el => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr));\n if (index === -1) {\n index = [...nodeList].findIndex(el => el.textContent.toLocaleLowerCase().includes(lowerTypeStr));\n }\n // intentionally stacked (not debounced) - see README for usage example\n timeout = setTimeout(() => {\n typeStr = \"\";\n }, timeoutLength);\n return index;\n },\n destroy: function () {\n clearTimeout(timeout);\n }\n };\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\n\nvar _makeupTypeahead = _interopRequireDefault(require(\"makeup-typeahead\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst listEl = document.getElementById(\"list\");\nconst matchEl = document.getElementById(\"match\");\nconst {\n getIndex\n} = (0, _makeupTypeahead.default)();\nconst TIMEOUT = 1500;\nlistEl.addEventListener(\"keydown\", e => {\n if (e.key.length !== 1) return;\n const index = getIndex(listEl.children, e.key, TIMEOUT);\n [...listEl.children].forEach(li => li.classList.remove(\"match\"));\n if (index !== -1) {\n listEl.children[index].classList.add(\"match\");\n matchEl.textContent = listEl.children[index].textContent;\n } else {\n matchEl.textContent = \"—\";\n }\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/docs.css b/docs/docs.css index 9e894619..85db5d0b 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -1,5 +1,79 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: + system-ui, + -apple-system, + sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } diff --git a/docs/index.html b/docs/index.html index ace86c57..6c79e931 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,16 +3,10 @@ makeup-js - + -
                                    +

                                    makeup-js

                                    A suite of vanilla JavaScript modules for building accessible diff --git a/docs/ui/index.html b/docs/ui/index.html index 06d8da1e..92718d04 100644 --- a/docs/ui/index.html +++ b/docs/ui/index.html @@ -3,17 +3,12 @@ ui | makeup-js - + + -

                                    -

                                    UI Modules

                                    +
                                    +

                                    makeup-js / ui

                                    The following modules create the model and behaviour for "headless" user interface components (i.e. they come with no styles or branding out of the box). They are fully compatible with diff --git a/docs/ui/makeup-alert-dialog/index.css b/docs/ui/makeup-alert-dialog/index.css index c41f59c9..78734398 100644 --- a/docs/ui/makeup-alert-dialog/index.css +++ b/docs/ui/makeup-alert-dialog/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-alert-dialog/index.css.map b/docs/ui/makeup-alert-dialog/index.css.map index 0b42fcc2..4888fe24 100644 --- a/docs/ui/makeup-alert-dialog/index.css.map +++ b/docs/ui/makeup-alert-dialog/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-alert-dialog/index.css","mappings":"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U;AACd;AACA;IACI;;wBAEoB;AACxB;AACA;IACI,mBAAmB;IACnB,eAAe;IACf,2BAA2B;AAC/B;AACA;;IAEI,4BAA4B;AAChC;AACA;;IAEI,4BAA4B;IAC5B,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;IAEI,kBAAkB;AACtB;AACA;;;;;;IAMI;;;KAGC;IACD;;;KAGC;AACL;;ACxrBA;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;AACtC;AACA;IACI,uBAAuB;IACvB,gDAAgD;IAChD,QAAQ;IACR,uBAAuB;IACvB,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI;;;KAGC;IACD,sEAAsE;IACtE,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,YAAY;IACZ,+BAA+B;IAC/B,gCAAgC;IAChC,eAAe;IACf,4BAA4B;IAC5B,gBAAgB;IAChB,gBAAgB;IAChB,2BAA2B;IAC3B,+BAA+B;AACnC;AACA;IACI,mCAAmC;IACnC,mCAAmC;IACnC,iBAAiB;IACjB,SAAS;AACb;AACA;IACI,iBAAiB;AACrB;AACA;IACI,4BAA4B;IAC5B,8BAA8B;AAClC;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,kCAAkC;AACtC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,mBAAmB;AACvB;AACA;;IAEI,sBAAsB;AAC1B;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,yCAAyC;IAC7C;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;AACJ","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/alert-dialog/alert-dialog.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.alert-dialog[role=\"alertdialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.alert-dialog[role=\"alertdialog\"]:not([hidden]) {\n display: flex;\n}\n.alert-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto;\n margin-left: var(--spacing-200);\n margin-right: var(--spacing-200);\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n padding: var(--spacing-200);\n will-change: opacity, transform;\n}\n.alert-dialog__title {\n font-size: var(--font-size-large-1);\n font-weight: var(--font-weight-600);\n line-height: 28px;\n margin: 0;\n}\n.alert-dialog__footer {\n text-align: right;\n}\n.alert-dialog__main {\n margin: var(--spacing-200) 0;\n min-height: var(--spacing-200);\n}\n.alert-dialog__main > :first-child {\n margin-top: 0;\n}\n.alert-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.alert-dialog--hide.alert-dialog--mask-fade-slow,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.alert-dialog--hide .alert-dialog__window--fade,\n.alert-dialog--show .alert-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--hide.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.alert-dialog--hide.alert-dialog--hide,\n.alert-dialog--hide.alert-dialog--show-init,\n.alert-dialog--show-init.alert-dialog--hide,\n.alert-dialog--show-init.alert-dialog--show-init {\n display: flex;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--hide.alert-dialog--mask-fade-slow,\n.alert-dialog--show-init.alert-dialog--mask-fade,\n.alert-dialog--show-init.alert-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.alert-dialog--hide .alert-dialog__window--animate,\n.alert-dialog--hide .alert-dialog__window--animate > *,\n.alert-dialog--hide .alert-dialog__window--fade,\n.alert-dialog--show-init .alert-dialog__window--animate,\n.alert-dialog--show-init .alert-dialog__window--animate > *,\n.alert-dialog--show-init .alert-dialog__window--fade {\n opacity: 0;\n}\n.alert-dialog--hide-init.alert-dialog--hide-init,\n.alert-dialog--hide-init.alert-dialog--show,\n.alert-dialog--show.alert-dialog--hide-init,\n.alert-dialog--show.alert-dialog--show {\n display: flex;\n}\n.alert-dialog--hide-init.alert-dialog--mask-fade,\n.alert-dialog--hide-init.alert-dialog--mask-fade-slow,\n.alert-dialog--show.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.alert-dialog--hide-init .alert-dialog__window--animate,\n.alert-dialog--hide-init .alert-dialog__window--animate > *,\n.alert-dialog--hide-init .alert-dialog__window--fade,\n.alert-dialog--show .alert-dialog__window--animate,\n.alert-dialog--show .alert-dialog__window--animate > *,\n.alert-dialog--show .alert-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .alert-dialog--hide.alert-dialog--mask-fade,\n .alert-dialog--hide.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .alert-dialog--hide .alert-dialog__window--animate,\n .alert-dialog--hide .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .alert-dialog--hide .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .alert-dialog--show.alert-dialog--mask-fade,\n .alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .alert-dialog--show .alert-dialog__window--animate,\n .alert-dialog--show .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .alert-dialog--show .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.alert-dialog--hide-init .alert-dialog__window--animate,\n.alert-dialog--show .alert-dialog__window--animate {\n transform: scale(1);\n}\n.alert-dialog--hide .alert-dialog__window--animate,\n.alert-dialog--show-init .alert-dialog__window--animate {\n transform: scale(0.75);\n}\n@media (prefers-reduced-motion) {\n .alert-dialog--hide .alert-dialog__window--animate,\n .alert-dialog--hide-init .alert-dialog__window--animate,\n .alert-dialog--show .alert-dialog__window--animate,\n .alert-dialog--show-init .alert-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .alert-dialog__window {\n max-width: calc(88% - var(--spacing-400));\n }\n}\n@media (min-width: 1024px) {\n .alert-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-alert-dialog/index.css","mappings":"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4B;IAC5B,8BAA8B;AAClC;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,kCAAkC;AACtC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,mBAAmB;AACvB;AACA;;IAEI,sBAAsB;AAC1B;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,yCAAyC;IAC7C;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;AACJ","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/alert-dialog/alert-dialog.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.alert-dialog[role=\"alertdialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.alert-dialog[role=\"alertdialog\"]:not([hidden]) {\n display: flex;\n}\n.alert-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto;\n margin-left: var(--spacing-200);\n margin-right: var(--spacing-200);\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n padding: var(--spacing-200);\n will-change: opacity, transform;\n}\n.alert-dialog__title {\n font-size: var(--font-size-large-1);\n font-weight: var(--font-weight-600);\n line-height: 28px;\n margin: 0;\n}\n.alert-dialog__footer {\n text-align: right;\n}\n.alert-dialog__main {\n margin: var(--spacing-200) 0;\n min-height: var(--spacing-200);\n}\n.alert-dialog__main > :first-child {\n margin-top: 0;\n}\n.alert-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.alert-dialog--hide.alert-dialog--mask-fade-slow,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.alert-dialog--hide .alert-dialog__window--fade,\n.alert-dialog--show .alert-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--hide.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.alert-dialog--hide.alert-dialog--hide,\n.alert-dialog--hide.alert-dialog--show-init,\n.alert-dialog--show-init.alert-dialog--hide,\n.alert-dialog--show-init.alert-dialog--show-init {\n display: flex;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--hide.alert-dialog--mask-fade-slow,\n.alert-dialog--show-init.alert-dialog--mask-fade,\n.alert-dialog--show-init.alert-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.alert-dialog--hide .alert-dialog__window--animate,\n.alert-dialog--hide .alert-dialog__window--animate > *,\n.alert-dialog--hide .alert-dialog__window--fade,\n.alert-dialog--show-init .alert-dialog__window--animate,\n.alert-dialog--show-init .alert-dialog__window--animate > *,\n.alert-dialog--show-init .alert-dialog__window--fade {\n opacity: 0;\n}\n.alert-dialog--hide-init.alert-dialog--hide-init,\n.alert-dialog--hide-init.alert-dialog--show,\n.alert-dialog--show.alert-dialog--hide-init,\n.alert-dialog--show.alert-dialog--show {\n display: flex;\n}\n.alert-dialog--hide-init.alert-dialog--mask-fade,\n.alert-dialog--hide-init.alert-dialog--mask-fade-slow,\n.alert-dialog--show.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.alert-dialog--hide-init .alert-dialog__window--animate,\n.alert-dialog--hide-init .alert-dialog__window--animate > *,\n.alert-dialog--hide-init .alert-dialog__window--fade,\n.alert-dialog--show .alert-dialog__window--animate,\n.alert-dialog--show .alert-dialog__window--animate > *,\n.alert-dialog--show .alert-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .alert-dialog--hide.alert-dialog--mask-fade,\n .alert-dialog--hide.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .alert-dialog--hide .alert-dialog__window--animate,\n .alert-dialog--hide .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .alert-dialog--hide .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .alert-dialog--show.alert-dialog--mask-fade,\n .alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .alert-dialog--show .alert-dialog__window--animate,\n .alert-dialog--show .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .alert-dialog--show .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.alert-dialog--hide-init .alert-dialog__window--animate,\n.alert-dialog--show .alert-dialog__window--animate {\n transform: scale(1);\n}\n.alert-dialog--hide .alert-dialog__window--animate,\n.alert-dialog--show-init .alert-dialog__window--animate {\n transform: scale(0.75);\n}\n@media (prefers-reduced-motion) {\n .alert-dialog--hide .alert-dialog__window--animate,\n .alert-dialog--hide-init .alert-dialog__window--animate,\n .alert-dialog--show .alert-dialog__window--animate,\n .alert-dialog--show-init .alert-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .alert-dialog__window {\n max-width: calc(88% - var(--spacing-400));\n }\n}\n@media (min-width: 1024px) {\n .alert-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-alert-dialog/index.html b/docs/ui/makeup-alert-dialog/index.html index 5d65f961..0af6c16b 100644 --- a/docs/ui/makeup-alert-dialog/index.html +++ b/docs/ui/makeup-alert-dialog/index.html @@ -2,47 +2,40 @@ makeup-alert-dialog + + + - -

                                    -
                                    -

                                    makeup-alert-dialog

                                    -

                                    Alert-Dialog is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base markup and styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    - This page was loaded with the dialog in an "open" state. To see examples of dialogs opened by button click, - visit the makeup-dialog-button page. -

                                    -
                                    -
                                    -
                                    -
                                    -
                                    -

                                    These aren't the droids you're looking for

                                    -
                                    -
                                    -

                                    Move along now.

                                    -
                                    -
                                    - -
                                    +
                                    +

                                    ui / makeup-alert-dialog

                                    +

                                    Alert-Dialog is headless UI widget and does not come bundled with any CSS.

                                    +

                                    + This page was loaded with the dialog in an "open" state. To see examples of dialogs opened by button click, + visit the makeup-dialog-button page. +

                                    +
                                    +
                                    +
                                    +

                                    These aren't the droids you're looking for

                                    +
                                    +
                                    +

                                    Move along now.

                                    +
                                    +
                                    +
                                    -
                                    -
                                    +
                                    +
                                    diff --git a/docs/ui/makeup-alert-dialog/index.min.js b/docs/ui/makeup-alert-dialog/index.min.js index 3d776802..cf24a11a 100644 --- a/docs/ui/makeup-alert-dialog/index.min.js +++ b/docs/ui/makeup-alert-dialog/index.min.js @@ -121,9 +121,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(4490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(8448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(4490); +var _makeupScreenreaderTrap = __webpack_require__(8448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -146,6 +145,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -154,6 +158,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -161,7 +171,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -172,7 +182,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -188,8 +198,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -202,7 +212,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -211,11 +224,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/docs/ui/makeup-alert-dialog/index.min.js.map b/docs/ui/makeup-alert-dialog/index.min.js.map index 4840265c..bfc014e4 100644 --- a/docs/ui/makeup-alert-dialog/index.min.js.map +++ b/docs/ui/makeup-alert-dialog/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-alert-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,IAAsB;AACzE,+CAA+C,mBAAO,CAAC,IAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;;;AC1Ca;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;UCzCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAAyB;AACjC,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/alert-dialog.js","webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/alert-dialog/alert-dialog.css?1d20","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-alert-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-alert-dialog/index.compiled.js"],"sourcesContent":["require('./dist/alert-dialog/alert-dialog.css');\n","require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultAlertOptions = {\n baseClass: \"alert-dialog\",\n baseClassModifier: \"alert\",\n quickDismiss: false,\n acknowledgeButtonSelector: \".alert-dialog__acknowledge\",\n windowSelector: \".alert-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultAlertOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._acknowledgeButtonEl = this._el.querySelector(this._options.acknowledgeButtonSelector);\n this._onAcknowledgeButtonClickListener = _onAcknowledgeButtonClick.bind(this);\n this._acknowledgeButtonEl.addEventListener(\"click\", this._onAcknowledgeButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._acknowledgeButtonEl.removeEventListener(\"click\", this._onAcknowledgeButtonClickListener);\n }\n acknowledge() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-acknowledge\"));\n }\n destroy() {\n super.destroy();\n this._onAcknowledgeButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onAcknowledgeButtonClick() {\n this.acknowledge();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/alert-dialog\");\nvar _makeupAlertDialog = _interopRequireDefault(require(\"makeup-alert-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// STYLES\n\n// REQUIRE\n//const AlertDialog = require('makeup-alert-dialog');\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".alert-dialog\").forEach(function (el, i) {\n const widget = new _makeupAlertDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-alert-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,IAAsB;AACxD,8BAA8B,mBAAO,CAAC,IAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;;;AC1Ca;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;UCzCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAAyB;AACjC,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/alert-dialog.js","webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/alert-dialog/alert-dialog.css?1d20","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-alert-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-alert-dialog/index.compiled.js"],"sourcesContent":["require('./dist/alert-dialog/alert-dialog.css');\n","require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultAlertOptions = {\n baseClass: \"alert-dialog\",\n baseClassModifier: \"alert\",\n quickDismiss: false,\n acknowledgeButtonSelector: \".alert-dialog__acknowledge\",\n windowSelector: \".alert-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultAlertOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._acknowledgeButtonEl = this._el.querySelector(this._options.acknowledgeButtonSelector);\n this._onAcknowledgeButtonClickListener = _onAcknowledgeButtonClick.bind(this);\n this._acknowledgeButtonEl.addEventListener(\"click\", this._onAcknowledgeButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._acknowledgeButtonEl.removeEventListener(\"click\", this._onAcknowledgeButtonClickListener);\n }\n acknowledge() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-acknowledge\"));\n }\n destroy() {\n super.destroy();\n this._onAcknowledgeButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onAcknowledgeButtonClick() {\n this.acknowledge();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/alert-dialog\");\nvar _makeupAlertDialog = _interopRequireDefault(require(\"makeup-alert-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// STYLES\n\n// REQUIRE\n//const AlertDialog = require('makeup-alert-dialog');\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".alert-dialog\").forEach(function (el, i) {\n const widget = new _makeupAlertDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-combobox/index.css b/docs/ui/makeup-combobox/index.css index aa3aa792..38cf0410 100644 --- a/docs/ui/makeup-combobox/index.css +++ b/docs/ui/makeup-combobox/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-combobox/index.css.map b/docs/ui/makeup-combobox/index.css.map index f7cbe209..162cbf06 100644 --- a/docs/ui/makeup-combobox/index.css.map +++ b/docs/ui/makeup-combobox/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-combobox/index.css","mappings":"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B;IACtB,aAAa;IACb,OAAO;IACP,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,MAAM;IACN,kBAAkB;IAClB,UAAU;AACd;AACA;IACI,eAAe;IACf,qBAAqB;IACrB,WAAW;AACf;AACA;IACI,eAAe;AACnB;AACA;;IAEI,WAAW;IACX,QAAQ;AACZ;AACA;IACI,OAAO;IACP,YAAY;AAChB;AACA;;IAEI,wBAAwB;AAC5B;AACA;IACI,yBAAyB;IACzB,6CAA6C;IAC7C,mBAAmB;IACnB,iBAAiB;IACjB,sBAAsB;IACtB,sCAAsC;IACtC,eAAe;IACf,oBAAoB;IACpB,oBAAoB;IACpB,gCAAgC;IAChC,8BAA8B;IAC9B,iBAAiB;IACjB,WAAW;AACf;AACA;IACI,oBAAoB;AACxB;AACA;IACI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;IACI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;;IAKI,gDAAgD;AACpD;AACA;;;;;IAKI,gDAAgD;AACpD;AACA;;;;;IAKI,kDAAkD;AACtD;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;;IAEI,uBAAuB;IACvB;;;KAGC;IACD,kBAAkB;AACtB;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI,kBAAkB;AACtB;AACA;IACI,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,UAAU;IACV,oBAAoB;IACpB,eAAe;AACnB;AACA;IACI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;IACI,kDAAkD;IAClD,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;IACI,UAAU;AACd;AACA;IACI,YAAY;IACZ,UAAU;IACV,kBAAkB;IAClB,UAAU;IACV,QAAQ;IACR,WAAW;AACf;AACA;IACI,aAAa;IACb,SAAS;AACb;AACA;IACI,cAAc;AAClB;AACA;IACI,yBAAyB;AAC7B;AACA;IACI,0EAA0E;IAC1E,oBAAoB;IACpB,kBAAkB;IAClB,WAAW;IACX,oBAAoB;AACxB;AACA;IACI,gBAAgB;IAChB;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;IACD,mBAAmB;IACnB,iBAAiB;IACjB,sBAAsB;IACtB,oBAAoB;IACpB,kBAAkB;IAClB,YAAY;IACZ,cAAc;IACd,eAAe;IACf,sBAAsB;AAC1B;AACA;;IAEI;;;KAGC;AACL;AACA;IACI,eAAe;IACf,0BAA0B;IAC1B,0BAA0B;AAC9B;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI,mDAAmD;AACvD;AACA;;IAEI,YAAY;AAChB;AACA;IACI;;;KAGC;AACL;AACA;IACI,aAAa;AACjB;AACA;IACI,yBAAyB;IACzB,yBAAyB;IACzB,eAAe;AACnB;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI,yBAAyB;IACzB,aAAa;AACjB;AACA;;IAEI,WAAW;AACf;AACA;IACI,kCAAkC;IAClC,YAAY;AAChB;AACA;IACI;;;KAGC;AACL;AACA;IACI;;;KAGC;IACD,gBAAgB;AACpB;AACA;IACI;;QAEI,eAAe;IACnB;AACJ;AACA;IACI,sBAAsB;AAC1B;AACA;;IAEI,YAAY;AAChB;AACA;IACI,UAAU;IACV,iBAAiB;AACrB;AACA;IACI,OAAO;AACX;AACA;IACI,SAAS;IACT,cAAc;AAClB","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/combobox/combobox.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\n.combobox {\n box-sizing: border-box;\n line-height: normal;\n position: relative;\n}\nspan.combobox {\n display: inline-block;\n vertical-align: bottom;\n}\n.combobox__value {\n flex: 1 0 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.combobox__options--fix-width[role=\"listbox\"] {\n width: 100%;\n}\n.combobox__listbox {\n background-color: var(--color-background-elevated);\n border-radius: var(--border-radius-50);\n box-shadow: var(--bubble-shadow);\n box-sizing: border-box;\n display: none;\n left: 0;\n max-height: 400px;\n overflow-y: auto;\n position: absolute;\n top: 0;\n width: fit-content;\n z-index: 2;\n}\n.combobox__listbox--set-position {\n min-width: 100%;\n top: calc(100% + 4px);\n width: auto;\n}\n.combobox__listbox--fixed {\n position: fixed;\n}\n.combobox__listbox--reverse,\n[dir=\"rtl\"] .combobox__listbox {\n left: unset;\n right: 0;\n}\n[dir=\"rtl\"] .combobox__listbox--reverse {\n left: 0;\n right: unset;\n}\n.combobox__control > button,\n.combobox__control > svg.icon {\n margin-inline-start: 8px;\n}\n.combobox__option[role^=\"option\"] {\n background-color: initial;\n border-color: var(--color-background-primary);\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--color-foreground-primary);\n cursor: default;\n display: inline-grid;\n font-family: inherit;\n grid-template-columns: auto auto;\n justify-content: space-between;\n padding: 8px 15px;\n width: 100%;\n}\n.combobox__option[role^=\"option\"]:focus {\n outline-offset: -4px;\n}\n.combobox__option[role^=\"option\"] {\n overflow: hidden;\n position: relative;\n}\n.combobox__option[role^=\"option\"]:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.combobox__option[role^=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\n.combobox__option[role^=\"option\"][href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\n.combobox__option[role^=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\n.combobox__option[role^=\"option\"][href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\n.combobox__option[role^=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\n.combobox__option[role^=\"option\"][href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\n.combobox__option[role^=\"option\"][hidden] {\n display: none;\n}\n.combobox__option[role^=\"option\"]:active {\n font-weight: 700;\n}\n.combobox__option[role^=\"option\"]:disabled,\n.combobox__option[role^=\"option\"][aria-disabled=\"true\"] {\n background-color: unset;\n color: var(\n --listbox-option-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n font-weight: unset;\n}\n.combobox__option[role^=\"option\"]:first-child {\n border-top-left-radius: var(\n --combobox-listbox-border-radius,\n var(--border-radius-50)\n );\n border-top-right-radius: var(\n --combobox-listbox-border-radius,\n var(--border-radius-50)\n );\n}\n.combobox__option[role^=\"option\"]:last-child {\n border-bottom-left-radius: var(\n --combobox-listbox-border-radius,\n var(--border-radius-50)\n );\n border-bottom-right-radius: var(\n --combobox-listbox-border-radius,\n var(--border-radius-50)\n );\n}\n.combobox__option[role^=\"option\"]:not(:last-child) {\n margin-bottom: 1px;\n}\n.combobox__option[role^=\"option\"] svg.icon {\n align-self: center;\n fill: currentColor;\n margin: 0 auto;\n opacity: 0;\n stroke: currentColor;\n stroke-width: 0;\n}\n.combobox__option--active[role^=\"option\"] {\n overflow: hidden;\n position: relative;\n}\n.combobox__option--active[role^=\"option\"]:after {\n background-color: var(--color-state-layer-neutral);\n background-color: var(--color-state-layer-pressed);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.combobox__option--active[role^=\"option\"] svg.icon {\n opacity: 1;\n}\n.combobox__control button.icon-btn {\n height: 38px;\n padding: 0;\n position: absolute;\n right: 1px;\n top: 1px;\n width: 38px;\n}\n.combobox__control button.icon-btn svg {\n inset: auto 0;\n margin: 0;\n}\n.combobox--expanded .combobox__listbox {\n display: block;\n}\n.combobox--expanded svg.icon--12 {\n transform: rotate(180deg);\n}\n.combobox__control > svg.icon--12 {\n color: var(--combobox-textbox-icon-color, var(--color-foreground-primary));\n pointer-events: none;\n position: absolute;\n right: 17px;\n top: calc(50% - 8px);\n}\n.combobox__control > input {\n appearance: none;\n background-color: var(\n --combobox-textbox-background-color,\n var(--color-background-secondary)\n );\n border-color: var(\n --combobox-textbox-border-color,\n var(--color-border-medium)\n );\n border-radius: var(\n --combobox-textbox-border-radius,\n var(--border-radius-50)\n );\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n font-family: inherit;\n font-size: inherit;\n height: 40px;\n margin-left: 0;\n margin-right: 0;\n padding: 0 32px 0 16px;\n}\n.combobox__control > input,\n.combobox__control > input[readonly] {\n color: var(\n --combobox-textbox-foreground-color,\n var(--color-foreground-primary)\n );\n}\n.combobox__control > input[readonly] {\n cursor: default;\n text-shadow: 0 0 0 inherit;\n --webkit-user-select: none;\n}\n.combobox__control > input[readonly]::-moz-selection,\n.combobox__control > input[readonly]::selection {\n background-color: var(\n --combobox-textbox-readonly-selection-background,\n var(--color-background-primary)\n );\n}\n.combobox__control > input[aria-disabled=\"true\"],\n.combobox__control > input[disabled] {\n border-color: var(\n --combobox-textbox-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --combobox-textbox-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n.combobox__control > input[aria-disabled=\"true\"][readonly],\n.combobox__control > input[disabled][readonly] {\n text-shadow: 0 0 0 var(--color-foreground-disabled);\n}\n.combobox__control > input[aria-disabled=\"true\"] + svg,\n.combobox__control > input[disabled] + svg {\n opacity: 0.5;\n}\n.combobox__control > input[aria-invalid=\"true\"] {\n border-color: var(\n --combobox-textbox-invalid-foreground-color,\n var(--color-border-attention)\n );\n}\n.combobox__control > input::-ms-clear {\n display: none;\n}\n.combobox__control--borderless > input {\n background-color: initial;\n border-color: transparent;\n padding-left: 0;\n}\n.combobox__control > input:focus {\n background-color: var(\n --combobox-textbox-focus-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --combobox-textbox-focus-border-color,\n var(--color-foreground-primary)\n );\n}\n.combobox__control--borderless > input:focus {\n border-color: transparent;\n outline: none;\n}\n.combobox--fluid,\n.combobox--fluid .combobox__control > input {\n width: 100%;\n}\n.combobox--large .combobox__control > input {\n font-size: var(--font-size-medium);\n height: 48px;\n}\n.combobox__control > input[disabled] {\n background-color: var(\n --combobox-textbox-disabled-background-color,\n var(--color-background-secondary)\n );\n}\n.combobox__option--active[role=\"option\"] {\n color: var(\n --combobox-listbox-option-hover-foreground-color,\n var(--color-foreground-primary)\n );\n font-weight: 700;\n}\n@media (-ms-high-contrast: active), all and (-ms-high-contrast: none) {\n .combobox__value,\n ::-ms-backdrop {\n min-width: 100%;\n }\n}\n[dir=\"rtl\"] .combobox__control > input {\n padding: 0 16px 0 32px;\n}\n[dir=\"rtl\"] .combobox__control > button,\n[dir=\"rtl\"] .combobox__control > svg.icon {\n right: unset;\n}\n[dir=\"rtl\"] .combobox__control > svg.icon {\n left: 16px;\n margin-top: 1.3px;\n}\n[dir=\"rtl\"] .combobox__control > button {\n left: 0;\n}\n[dir=\"rtl\"] .combobox__control button.icon-btn {\n left: 1px;\n right: inherit;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-combobox/index.css","mappings":"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CA;IACI,gBAAgB;AACpB;AACA;;IAEI,uBAAuB;IACvB;;;KAGC;IACD,kBAAkB;AACtB;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI,kBAAkB;AACtB;AACA;IACI,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,UAAU;IACV,oBAAoB;IACpB,eAAe;AACnB;AACA;IACI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;IACI,kDAAkD;IAClD,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;IACI,UAAU;AACd;AACA;IACI,YAAY;IACZ,UAAU;IACV,kBAAkB;IAClB,UAAU;IACV,QAAQ;IACR,WAAW;AACf;AACA;IACI,aAAa;IACb,SAAS;AACb;AACA;IACI,cAAc;AAClB;AACA;IACI,yBAAyB;AAC7B;AACA;IACI,0EAA0E;IAC1E,oBAAoB;IACpB,kBAAkB;IAClB,WAAW;IACX,oBAAoB;AACxB;AACA;IACI,gBAAgB;IAChB;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;IACD,mBAAmB;IACnB,iBAAiB;IACjB,sBAAsB;IACtB,oBAAoB;IACpB,kBAAkB;IAClB,YAAY;IACZ,cAAc;IACd,eAAe;IACf,sBAAsB;AAC1B;AACA;;IAEI;;;KAGC;AACL;AACA;IACI,eAAe;IACf,0BAA0B;IAC1B,0BAA0B;AAC9B;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI,mDAAmD;AACvD;AACA;;IAEI,YAAY;AAChB;AACA;IACI;;;KAGC;AACL;AACA;IACI,aAAa;AACjB;AACA;IACI,yBAAyB;IACzB,yBAAyB;IACzB,eAAe;AACnB;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI,yBAAyB;IACzB,aAAa;AACjB;AACA;;IAEI,WAAW;AACf;AACA;IACI,kCAAkC;IAClC,YAAY;AAChB;AACA;IACI;;;KAGC;AACL;AACA;IACI;;;KAGC;IACD,gBAAgB;AACpB;AACA;IACI;;QAEI,eAAe;IACnB;AACJ;AACA;IACI,sBAAsB;AAC1B;AACA;;IAEI,YAAY;AAChB;AACA;IACI,UAAU;IACV,iBAAiB;AACrB;AACA;IACI,OAAO;AACX;AACA;IACI,SAAS;IACT,cAAc;AAClB","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/combobox/combobox.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\n.combobox {\n box-sizing: border-box;\n line-height: normal;\n position: relative;\n}\nspan.combobox {\n display: inline-block;\n vertical-align: bottom;\n}\n.combobox__value {\n flex: 1 0 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.combobox__options--fix-width[role=\"listbox\"] {\n width: 100%;\n}\n.combobox__listbox {\n background-color: var(--color-background-elevated);\n border-radius: var(--border-radius-50);\n box-shadow: var(--bubble-shadow);\n box-sizing: border-box;\n display: none;\n left: 0;\n max-height: 400px;\n overflow-y: auto;\n position: absolute;\n top: 0;\n width: fit-content;\n z-index: 2;\n}\n.combobox__listbox--set-position {\n min-width: 100%;\n top: calc(100% + 4px);\n width: auto;\n}\n.combobox__listbox--fixed {\n position: fixed;\n}\n.combobox__listbox--reverse,\n[dir=\"rtl\"] .combobox__listbox {\n left: unset;\n right: 0;\n}\n[dir=\"rtl\"] .combobox__listbox--reverse {\n left: 0;\n right: unset;\n}\n.combobox__control > button,\n.combobox__control > svg.icon {\n margin-inline-start: 8px;\n}\n.combobox__option[role^=\"option\"] {\n background-color: initial;\n border-color: var(--color-background-primary);\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--color-foreground-primary);\n cursor: default;\n display: inline-grid;\n font-family: inherit;\n grid-template-columns: auto auto;\n justify-content: space-between;\n padding: 8px 15px;\n width: 100%;\n}\n.combobox__option[role^=\"option\"]:focus {\n outline-offset: -4px;\n}\n.combobox__option[role^=\"option\"] {\n overflow: hidden;\n position: relative;\n}\n.combobox__option[role^=\"option\"]:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.combobox__option[role^=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\n.combobox__option[role^=\"option\"][href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\n.combobox__option[role^=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\n.combobox__option[role^=\"option\"][href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\n.combobox__option[role^=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\n.combobox__option[role^=\"option\"][href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\n.combobox__option[role^=\"option\"][hidden] {\n display: none;\n}\n.combobox__option[role^=\"option\"]:active {\n font-weight: 700;\n}\n.combobox__option[role^=\"option\"]:disabled,\n.combobox__option[role^=\"option\"][aria-disabled=\"true\"] {\n background-color: unset;\n color: var(\n --listbox-option-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n font-weight: unset;\n}\n.combobox__option[role^=\"option\"]:first-child {\n border-top-left-radius: var(\n --combobox-listbox-border-radius,\n var(--border-radius-50)\n );\n border-top-right-radius: var(\n --combobox-listbox-border-radius,\n var(--border-radius-50)\n );\n}\n.combobox__option[role^=\"option\"]:last-child {\n border-bottom-left-radius: var(\n --combobox-listbox-border-radius,\n var(--border-radius-50)\n );\n border-bottom-right-radius: var(\n --combobox-listbox-border-radius,\n var(--border-radius-50)\n );\n}\n.combobox__option[role^=\"option\"]:not(:last-child) {\n margin-bottom: 1px;\n}\n.combobox__option[role^=\"option\"] svg.icon {\n align-self: center;\n fill: currentColor;\n margin: 0 auto;\n opacity: 0;\n stroke: currentColor;\n stroke-width: 0;\n}\n.combobox__option--active[role^=\"option\"] {\n overflow: hidden;\n position: relative;\n}\n.combobox__option--active[role^=\"option\"]:after {\n background-color: var(--color-state-layer-neutral);\n background-color: var(--color-state-layer-pressed);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.combobox__option--active[role^=\"option\"] svg.icon {\n opacity: 1;\n}\n.combobox__control button.icon-btn {\n height: 38px;\n padding: 0;\n position: absolute;\n right: 1px;\n top: 1px;\n width: 38px;\n}\n.combobox__control button.icon-btn svg {\n inset: auto 0;\n margin: 0;\n}\n.combobox--expanded .combobox__listbox {\n display: block;\n}\n.combobox--expanded svg.icon--12 {\n transform: rotate(180deg);\n}\n.combobox__control > svg.icon--12 {\n color: var(--combobox-textbox-icon-color, var(--color-foreground-primary));\n pointer-events: none;\n position: absolute;\n right: 17px;\n top: calc(50% - 8px);\n}\n.combobox__control > input {\n appearance: none;\n background-color: var(\n --combobox-textbox-background-color,\n var(--color-background-secondary)\n );\n border-color: var(\n --combobox-textbox-border-color,\n var(--color-border-medium)\n );\n border-radius: var(\n --combobox-textbox-border-radius,\n var(--border-radius-50)\n );\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n font-family: inherit;\n font-size: inherit;\n height: 40px;\n margin-left: 0;\n margin-right: 0;\n padding: 0 32px 0 16px;\n}\n.combobox__control > input,\n.combobox__control > input[readonly] {\n color: var(\n --combobox-textbox-foreground-color,\n var(--color-foreground-primary)\n );\n}\n.combobox__control > input[readonly] {\n cursor: default;\n text-shadow: 0 0 0 inherit;\n --webkit-user-select: none;\n}\n.combobox__control > input[readonly]::-moz-selection,\n.combobox__control > input[readonly]::selection {\n background-color: var(\n --combobox-textbox-readonly-selection-background,\n var(--color-background-primary)\n );\n}\n.combobox__control > input[aria-disabled=\"true\"],\n.combobox__control > input[disabled] {\n border-color: var(\n --combobox-textbox-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --combobox-textbox-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n.combobox__control > input[aria-disabled=\"true\"][readonly],\n.combobox__control > input[disabled][readonly] {\n text-shadow: 0 0 0 var(--color-foreground-disabled);\n}\n.combobox__control > input[aria-disabled=\"true\"] + svg,\n.combobox__control > input[disabled] + svg {\n opacity: 0.5;\n}\n.combobox__control > input[aria-invalid=\"true\"] {\n border-color: var(\n --combobox-textbox-invalid-foreground-color,\n var(--color-border-attention)\n );\n}\n.combobox__control > input::-ms-clear {\n display: none;\n}\n.combobox__control--borderless > input {\n background-color: initial;\n border-color: transparent;\n padding-left: 0;\n}\n.combobox__control > input:focus {\n background-color: var(\n --combobox-textbox-focus-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --combobox-textbox-focus-border-color,\n var(--color-foreground-primary)\n );\n}\n.combobox__control--borderless > input:focus {\n border-color: transparent;\n outline: none;\n}\n.combobox--fluid,\n.combobox--fluid .combobox__control > input {\n width: 100%;\n}\n.combobox--large .combobox__control > input {\n font-size: var(--font-size-medium);\n height: 48px;\n}\n.combobox__control > input[disabled] {\n background-color: var(\n --combobox-textbox-disabled-background-color,\n var(--color-background-secondary)\n );\n}\n.combobox__option--active[role=\"option\"] {\n color: var(\n --combobox-listbox-option-hover-foreground-color,\n var(--color-foreground-primary)\n );\n font-weight: 700;\n}\n@media (-ms-high-contrast: active), all and (-ms-high-contrast: none) {\n .combobox__value,\n ::-ms-backdrop {\n min-width: 100%;\n }\n}\n[dir=\"rtl\"] .combobox__control > input {\n padding: 0 16px 0 32px;\n}\n[dir=\"rtl\"] .combobox__control > button,\n[dir=\"rtl\"] .combobox__control > svg.icon {\n right: unset;\n}\n[dir=\"rtl\"] .combobox__control > svg.icon {\n left: 16px;\n margin-top: 1.3px;\n}\n[dir=\"rtl\"] .combobox__control > button {\n left: 0;\n}\n[dir=\"rtl\"] .combobox__control button.icon-btn {\n left: 1px;\n right: inherit;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-combobox/index.html b/docs/ui/makeup-combobox/index.html index 1beacd2e..f6b6fe03 100644 --- a/docs/ui/makeup-combobox/index.html +++ b/docs/ui/makeup-combobox/index.html @@ -2,8 +2,10 @@ makeup-combobox + + + - -
                                    -
                                    -

                                    makeup-combobox

                                    -

                                    Combobox is a headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base markup and styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    Combobox uses makeup-listbox.

                                    -
                                    -
                                    -
                                    -

                                    Automatic Selection (default)

                                    -

                                    - With automatic selection, ENTER key is not required, the textbox value is automatically updated to match the - current active descendant option. ENTER key will submit any associated form. -

                                    +
                                    +

                                    ui / makeup-combobox

                                    +

                                    Combobox is a headless UI widget and does not come bundled with any CSS.

                                    +

                                    Combobox uses makeup-listbox.

                                    + +

                                    Automatic Selection (default)

                                    +

                                    + With automatic selection, ENTER key is not required, the textbox value is automatically updated to match the + current active descendant option. ENTER key will submit any associated form. +

                                    -

                                    Autocomplete Off

                                    +

                                    Autocomplete Off

                                    -
                                    - - - - -
                                    -
                                    +
                                    + + +
                                    diff --git a/docs/ui/makeup-combobox/index.min.js b/docs/ui/makeup-combobox/index.min.js index 9af63269..57066d6e 100644 --- a/docs/ui/makeup-combobox/index.min.js +++ b/docs/ui/makeup-combobox/index.min.js @@ -103,9 +103,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports["default"] = void 0; var _makeupNextId = _interopRequireDefault(__webpack_require__(346)); -var ExitEmitter = _interopRequireWildcard(__webpack_require__(2654)); +var _makeupExitEmitter = __webpack_require__(2654); var _makeupFocusables = _interopRequireDefault(__webpack_require__(4436)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } const defaultOptions = { alwaysDoFocusManagement: false, @@ -126,12 +125,12 @@ const defaultOptions = { useAriaExpanded: true }; function onHostKeyDown(e) { - if (e.keyCode === 13 || e.keyCode === 32) { + if (e.key === "Enter" || e.key === " ") { this._keyboardClickFlag = true; } // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here. // careful! if host already triggers click events naturally, we end up with a "double-click". - if (e.keyCode === 32 && this.options.simulateSpacebarClick === true) { + if (e.key === " " && this.options.simulateSpacebarClick === true) { this.hostEl.click(); } } @@ -206,11 +205,14 @@ function manageFocus(focusManagement, contentEl) { } class _default { constructor(el, selectedOptions) { - this.options = Object.assign({}, defaultOptions, selectedOptions); + this.options = { + ...defaultOptions, + ...selectedOptions + }; this.el = el; this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el this.contentEl = el.querySelector(this.options.contentSelector); - ExitEmitter.addFocusExit(this.el); + (0, _makeupExitEmitter.addFocusExit)(this.el); this._hostKeyDownListener = onHostKeyDown.bind(this); this._hostMouseDownListener = onHostMouseDown.bind(this); this._documentClickListener = _onDocumentClick.bind(this); diff --git a/docs/ui/makeup-combobox/index.min.js.map b/docs/ui/makeup-combobox/index.min.js.map index 5fda2317..f63a43e0 100644 --- a/docs/ui/makeup-combobox/index.min.js.map +++ b/docs/ui/makeup-combobox/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-combobox/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA8B;;;;;;;;ACAtC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,0CAA0C,mBAAO,CAAC,IAAqB;AACvE,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA,IAAI;AACJ;AACA,IAAI;AACJ,2CAA2C,gBAAgB;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA,+DAA+D;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,kDAAkD,WAAW;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;;;;;;;;;ACtSF;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;;;ACvCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,6CAA6C,mBAAO,CAAC,IAAiB;AACtE,4CAA4C,mBAAO,CAAC,IAAgB;AACpE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;ACvOa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,gDAAgD,mBAAO,CAAC,IAA2B;AACnF,2CAA2C,mBAAO,CAAC,IAAgB;AACnE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;ACxKa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,IAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACrEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,+CAA+C,mBAAO,CAAC,GAA0B;AACjF,gDAAgD,mBAAO,CAAC,IAA4B;AACpF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;;AAEA;AACA;;AAEA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;;;;;;;;ACvNa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,yCAAyC,mBAAO,CAAC,IAAoB;AACrE,0CAA0C,mBAAO,CAAC,IAAqB;AACvE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA,iBAAiB,uBAAuB;AACxC,mCAAmC;;AAEnC,iBAAiB,aAAa;AAC9B;;AAEA,iBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;;;ACjXa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;;;ACvCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,cAAc;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;UCjBA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAqB;AAC7B,6CAA6C,mBAAO,CAAC,GAAiB;AACtE,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/combobox.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/combobox/combobox.css?755d","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-expander/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-active-descendant/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-key-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-listbox/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-navigation-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-prevent-scroll-keys/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-combobox/index.compiled.js"],"sourcesContent":["require('./dist/combobox/combobox.css');\n","require('./dist/global/global.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n alwaysDoFocusManagement: false,\n ariaControls: true,\n autoCollapse: false,\n collapseOnFocusOut: false,\n collapseOnMouseOut: false,\n collapseOnClickOut: false,\n collapseOnHostReFocus: false,\n contentSelector: \".expander__content\",\n expandedClass: null,\n expandOnClick: false,\n expandOnFocus: false,\n expandOnHover: false,\n focusManagement: null,\n hostSelector: \".expander__host\",\n simulateSpacebarClick: false,\n useAriaExpanded: true\n};\nfunction onHostKeyDown(e) {\n if (e.keyCode === 13 || e.keyCode === 32) {\n this._keyboardClickFlag = true;\n }\n // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here.\n // careful! if host already triggers click events naturally, we end up with a \"double-click\".\n if (e.keyCode === 32 && this.options.simulateSpacebarClick === true) {\n this.hostEl.click();\n }\n}\nfunction onHostMouseDown() {\n this._mouseClickFlag = true;\n}\nfunction onHostClick() {\n this._expandWasKeyboardClickActivated = this._keyboardClickFlag;\n this._expandWasMouseClickActivated = this._mouseClickFlag;\n this._widgetHasKeyboardFocus = this._keyboardClickFlag;\n this.expanded = !this.expanded;\n}\nfunction onHostFocus() {\n this._expandWasFocusActivated = true;\n this.expanded = true;\n}\n\n// NOTE: collapseOnHostReFocus cannot be used when expandOnFocus is true\nfunction onHostReFocus() {\n if (this.expanded && this._widgetHasKeyboardFocus) {\n this.expanded = false;\n }\n}\nfunction onHostHover() {\n clearTimeout(this._mouseLeft);\n this._expandWasHoverActivated = true;\n this.expanded = true;\n}\nfunction onFocusExit() {\n this._widgetHasKeyboardFocus = false;\n this.expanded = false;\n}\nfunction onMouseLeave() {\n clearTimeout(this._mouseLeft);\n this._mouseLeft = setTimeout(() => {\n this.expanded = false;\n }, 300);\n}\nfunction _onDocumentClick(e) {\n if (this.el.contains(e.target) === false) {\n this.expanded = false;\n }\n}\nfunction _onDocumentTouchStart() {\n this.documentClick = true;\n}\nfunction _onDocumentTouchMove() {\n this.documentClick = false;\n}\nfunction _onDocumentTouchEnd(e) {\n if (this.documentClick === true) {\n this.documentClick = false;\n if (this.el.contains(e.target) === false) {\n this.expanded = false;\n }\n }\n}\nfunction manageFocus(focusManagement, contentEl) {\n if (focusManagement === \"content\") {\n contentEl.setAttribute(\"tabindex\", \"-1\");\n contentEl.focus();\n } else if (focusManagement === \"focusable\") {\n (0, _makeupFocusables.default)(contentEl)[0]?.focus();\n } else if (focusManagement === \"interactive\") {\n (0, _makeupFocusables.default)(contentEl, true)[0]?.focus();\n } else if (focusManagement !== null) {\n const el = contentEl.querySelector(`#${focusManagement}`);\n if (el) {\n el.focus();\n }\n }\n}\nclass _default {\n constructor(el, selectedOptions) {\n this.options = Object.assign({}, defaultOptions, selectedOptions);\n this.el = el;\n this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el\n this.contentEl = el.querySelector(this.options.contentSelector);\n ExitEmitter.addFocusExit(this.el);\n this._hostKeyDownListener = onHostKeyDown.bind(this);\n this._hostMouseDownListener = onHostMouseDown.bind(this);\n this._documentClickListener = _onDocumentClick.bind(this);\n this._documentTouchStartListener = _onDocumentTouchStart.bind(this);\n this._documentTouchMoveListener = _onDocumentTouchMove.bind(this);\n this._documentTouchEndListener = _onDocumentTouchEnd.bind(this);\n this._hostClickListener = onHostClick.bind(this);\n this._hostFocusListener = onHostFocus.bind(this);\n this._hostReFocusListener = onHostReFocus.bind(this);\n this._hostHoverListener = onHostHover.bind(this);\n this._focusExitListener = onFocusExit.bind(this);\n this._mouseLeaveListener = onMouseLeave.bind(this);\n if (this.options.useAriaExpanded === true) {\n const initialAriaExpanded = this.hostEl.getAttribute(\"aria-expanded\");\n this._expanded = initialAriaExpanded === \"true\";\n if (initialAriaExpanded === null) {\n this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n }\n } else {\n this._expanded = false;\n }\n if (this.options.ariaControls === true) {\n // ensure the widget has an id\n (0, _makeupNextId.default)(this.el, \"expander\");\n this.contentEl.id = this.contentEl.id || `${this.el.id}-content`;\n this.hostEl.setAttribute(\"aria-controls\", this.contentEl.id);\n }\n this.expandOnClick = this.options.expandOnClick;\n this.expandOnFocus = this.options.expandOnFocus;\n this.expandOnHover = this.options.expandOnHover;\n this.collapseOnHostReFocus = this.options.collapseOnHostReFocus;\n if (this.options.autoCollapse === false) {\n this.collapseOnClickOut = this.options.collapseOnClickOut;\n this.collapseOnFocusOut = this.options.collapseOnFocusOut;\n this.collapseOnMouseOut = this.options.collapseOnMouseOut;\n }\n }\n set expandOnClick(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"keydown\", this._hostKeyDownListener);\n this.hostEl.addEventListener(\"mousedown\", this._hostMouseDownListener);\n this.hostEl.addEventListener(\"click\", this._hostClickListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnClickOut = true;\n this.collapseOnFocusOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"click\", this._hostClickListener);\n this.hostEl.removeEventListener(\"mousedown\", this._hostMouseDownListener);\n this.hostEl.removeEventListener(\"keydown\", this._hostKeyDownListener);\n }\n }\n set expandOnFocus(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"focus\", this._hostFocusListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnClickOut = true;\n this.collapseOnFocusOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"focus\", this._hostFocusListener);\n }\n }\n set collapseOnHostReFocus(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"focus\", this._hostReFocusListener);\n } else {\n this.hostEl.removeEventListener(\"focus\", this._hostReFocusListener);\n }\n }\n set expandOnHover(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n this.contentEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnMouseOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n this.contentEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n }\n }\n set collapseOnClickOut(bool) {\n if (bool === true) {\n document.addEventListener(\"click\", this._documentClickListener);\n document.addEventListener(\"touchstart\", this._documentTouchStartListener);\n document.addEventListener(\"touchmove\", this._documentTouchMoveListener);\n document.addEventListener(\"touchend\", this._documentTouchEndListener);\n } else {\n document.removeEventListener(\"click\", this._documentClickListener);\n document.removeEventListener(\"touchstart\", this._documentTouchStartListener);\n document.removeEventListener(\"touchmove\", this._documentTouchMoveListener);\n document.removeEventListener(\"touchend\", this._documentTouchEndListener);\n }\n }\n set collapseOnFocusOut(bool) {\n if (bool === true) {\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n } else {\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n }\n }\n set collapseOnMouseOut(bool) {\n if (bool === true) {\n this.el.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n this.contentEl.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n } else {\n this.el.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n this.contentEl.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n }\n }\n get expanded() {\n return this._expanded;\n }\n set expanded(bool) {\n if (bool === true && this.expanded === false) {\n if (this.options.useAriaExpanded === true) {\n this.hostEl.setAttribute(\"aria-expanded\", \"true\");\n }\n if (this.options.expandedClass) {\n this.el.classList.add(this.options.expandedClass);\n }\n if (this._expandWasKeyboardClickActivated || this._expandWasMouseClickActivated && this.options.alwaysDoFocusManagement) {\n manageFocus(this.options.focusManagement, this.contentEl);\n }\n this.el.dispatchEvent(new CustomEvent(\"expander-expand\", {\n bubbles: true,\n detail: this.contentEl\n }));\n }\n if (bool === false && this.expanded === true) {\n if (this.options.useAriaExpanded === true) {\n this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n }\n if (this.options.expandedClass) {\n this.el.classList.remove(this.options.expandedClass);\n }\n this.el.dispatchEvent(new CustomEvent(\"expander-collapse\", {\n bubbles: true,\n detail: this.contentEl\n }));\n }\n this._expanded = bool;\n this._expandWasKeyboardClickActivated = false;\n this._expandWasMouseClickActivated = false;\n this._expandWasFocusActivated = false;\n this._expandWasHoverActivated = false;\n this._keyboardClickFlag = false;\n this._mouseClickFlag = false;\n }\n sleep() {\n if (this._destroyed !== true) {\n this.expandOnClick = false;\n this.expandOnFocus = false;\n this.expandOnHover = false;\n this.collapseOnClickOut = false;\n this.collapseOnFocusOut = false;\n this.collapseOnMouseOut = false;\n this.collapseOnHostReFocus = false;\n }\n }\n destroy() {\n this.sleep();\n this._destroyed = true;\n this._hostKeyDownListener = null;\n this._hostMouseDownListener = null;\n this._documentClickListener = null;\n this._documentTouchStartListener = null;\n this._documentTouchMoveListener = null;\n this._documentTouchEndListener = null;\n this._hostClickListener = null;\n this._hostFocusListener = null;\n this._hostReFocusListener = null;\n this._hostHoverListener = null;\n this._focusExitListener = null;\n this._mouseLeaveListener = null;\n this._widgetHasKeyboardFocus = null;\n }\n}\nexports.default = _default;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupExpander = _interopRequireDefault(require(\"makeup-expander\"));\nvar _makeupListbox = _interopRequireDefault(require(\"makeup-listbox\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n autoSelect: true,\n collapseTimeout: 150,\n customElementMode: false,\n autoScroll: true\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this._el = widgetEl;\n this._inputEl = this._el.querySelector(\"input\");\n this._listboxEl = this._el.querySelector(\".combobox__listbox\");\n this._autocompleteType = this._inputEl.getAttribute(\"aria-autocomplete\");\n this._inputEl.setAttribute(\"autocomplete\", \"off\");\n this._inputEl.setAttribute(\"role\", \"combobox\");\n this._listboxEl.hidden = false;\n this._listboxWidget = new _makeupListbox.default(this._listboxEl, {\n activeDescendantClassName: \"combobox__option--active\",\n autoReset: -1,\n autoSelect: this._options.autoSelect,\n focusableElement: this._inputEl,\n listboxOwnerElement: this._el,\n autoScroll: this._options.autoScroll\n });\n this._expander = new _makeupExpander.default(this._el, {\n collapseOnClickOut: true,\n collapseOnFocusOut: true,\n contentSelector: \".combobox__listbox\",\n expandedClass: \"combobox--expanded\",\n expandOnFocus: true,\n hostSelector: \"input\"\n });\n this._destroyed = false;\n this._onInputFocusListener = _onInputFocus.bind(this);\n this._onListboxClickListener = _onListboxClick.bind(this);\n this._onListboxActiveDescendantChangeListener = _onListboxActiveDescendantChange.bind(this);\n this._onTextboxKeyDownListener = _onTextboxKeyDown.bind(this);\n this._onTextboxInputListener = _onTextboxInput.bind(this);\n this._onTextboxClickListener = _onTextboxClick.bind(this);\n this._onMutationListener = _onMutation.bind(this);\n this._el.classList.add(\"combobox--js\");\n if (!this._options.customElementMode) {\n this._mutationObserver = new MutationObserver(this._onMutationListener);\n this._observeMutations();\n this._observeEvents();\n }\n }\n resetFilter() {\n this._listboxWidget._activeDescendant.reset();\n this._listboxWidget.items.forEach(el => el.hidden = false);\n }\n _observeMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.observe(this._inputEl, {\n attributes: true,\n childList: true,\n subtree: true\n });\n }\n }\n _unobserveMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.disconnect();\n }\n }\n _observeEvents() {\n if (this._destroyed !== true) {\n this._listboxEl.addEventListener(\"click\", this._onListboxClickListener);\n this._listboxWidget._activeDescendantRootEl.addEventListener(\"activeDescendantChange\", this._onListboxActiveDescendantChangeListener);\n this._inputEl.addEventListener(\"focus\", this._onInputFocusListener);\n this._inputEl.addEventListener(\"keydown\", this._onTextboxKeyDownListener);\n this._inputEl.addEventListener(\"input\", this._onTextboxInputListener);\n this._inputEl.addEventListener(\"click\", this._onTextboxClickListener);\n }\n }\n _unobserveEvents() {\n this._listboxEl.removeEventListener(\"click\", this._onListboxClickListener);\n this._listboxWidget._activeDescendantRootEl.removeEventListener(\"activeDescendantChange\", this._onListboxActiveDescendantChangeListener);\n this._inputEl.removeEventListener(\"focus\", this._onInputFocusListener);\n this._inputEl.removeEventListener(\"keydown\", this._onTextboxKeyDownListener);\n this._inputEl.removeEventListener(\"input\", this._onTextboxInputListener);\n this._inputEl.removeEventListener(\"click\", this._onTextboxClickListener);\n }\n destroy() {\n this._destroyed = true;\n this._unobserveMutations();\n this._unobserveEvents();\n this._onInputFocusListener = null;\n this._onListboxClickListener = null;\n this._onListboxActiveDesendanctChangeListener = null;\n this._onTextboxKeyDownListener = null;\n this._onTextboxInputListener = null;\n this._onTextboxClickListener = null;\n this._onMutationListener = null;\n }\n}\nexports.default = _default;\nfunction _onInputFocus() {\n if (this._autocompleteType === \"list\") {\n _filterSuggestions(this._inputEl.value, this._listboxWidget.items);\n } else {\n this.resetFilter();\n }\n}\nfunction _onTextboxKeyDown(e) {\n // up and down keys should not move caret\n if (e.keyCode === 38 || e.keyCode === 40) {\n e.preventDefault();\n }\n\n // down arrow key should always expand listbox\n if (e.keyCode === 40) {\n if (this._expander.expanded === false) {\n this._expander.expanded = true;\n }\n }\n\n // escape key should always collapse listbox\n if (e.keyCode === 27) {\n if (this._expander.expanded === true) {\n this._expander.expanded = false;\n this._listboxWidget._activeDescendant.reset();\n }\n }\n\n // for manual selection, ENTER should not submit form when there is an active descendant\n if (this._options.autoSelect === false && e.keyCode === 13 && this._inputEl.getAttribute(\"aria-activedescendant\")) {\n e.preventDefault();\n const widget = this;\n this._inputEl.value = this._listboxWidget.items[this._listboxWidget._activeDescendant.index].innerText;\n _dispatchChangeEvent(this._el, this._inputEl.value);\n this._listboxWidget._activeDescendant.reset();\n setTimeout(function () {\n widget._expander.expanded = false;\n if (widget._autocompleteType === \"list\") {\n if (widget._inputEl.value.length === 0) {\n widget.resetFilter();\n } else {\n _filterSuggestions(widget._inputEl.value, widget._listboxWidget.items);\n }\n }\n }, this._options.collapseTimeout);\n }\n}\nfunction _onTextboxClick() {\n if (this._expander.expanded === false) {\n this._expander.expanded = true;\n }\n}\nfunction _onTextboxInput() {\n if (this._expander.expanded === false) {\n this._expander.expanded = true;\n }\n // TODO: refactor this redundant logic with L165: L171\n if (this._autocompleteType === \"list\") {\n this._listboxWidget._activeDescendant.reset();\n if (this._inputEl.value.length === 0) {\n this.resetFilter();\n } else {\n _filterSuggestions(this._inputEl.value, this._listboxWidget.items);\n }\n }\n}\nfunction _onListboxClick(e) {\n const widget = this;\n const element = e.target.closest(\"[role=option]\");\n const indexData = this._listboxWidget.items.indexOf(element);\n if (indexData !== undefined) {\n this._inputEl.value = this._listboxWidget.items[indexData].innerText;\n\n // TODO: refactor this redundant logic with L165: L171\n if (this._autocompleteType === \"list\") {\n this._listboxWidget._activeDescendant.reset();\n if (this._inputEl.value.length === 0) {\n this.resetFilter();\n } else {\n _filterSuggestions(this._inputEl.value, this._listboxWidget.items);\n }\n }\n if (this._options.autoSelect === false) {\n _dispatchChangeEvent(this._el, this._inputEl.value);\n }\n setTimeout(function () {\n widget._expander.expanded = false;\n }, this._options.collapseTimeout);\n }\n}\nfunction _onListboxActiveDescendantChange(e) {\n if (this._options.autoSelect === true) {\n this._inputEl.value = this._listboxWidget.items[e.detail.toIndex].innerText;\n _dispatchChangeEvent(this._el, this._inputEl.value);\n }\n}\nfunction _onMutation(mutationsList) {\n for (const mutation of mutationsList) {\n if (mutation.type === \"attributes\") {\n this._el.dispatchEvent(new CustomEvent(\"makeup-combobox-mutation\", {\n detail: {\n attributeName: mutation.attributeName\n }\n }));\n }\n }\n}\nfunction _filterSuggestions(value, items) {\n const numChars = value.length;\n const currentValue = value.toLowerCase();\n const matchedItems = items.filter(el => {\n return el.innerText.trim().substring(0, numChars).toLowerCase() === currentValue;\n });\n const unmatchedItems = items.filter(el => {\n return el.innerText.trim().substring(0, numChars).toLowerCase() !== currentValue;\n });\n matchedItems.forEach(el => el.hidden = false);\n unmatchedItems.forEach(el => el.hidden = true);\n}\nfunction _dispatchChangeEvent(el, value) {\n el.dispatchEvent(new CustomEvent(\"makeup-combobox-change\", {\n detail: {\n value\n }\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar NavigationEmitter = _interopRequireWildcard(require(\"makeup-navigation-emitter\"));\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n activeDescendantClassName: \"active-descendant\",\n autoInit: \"none\",\n autoReset: \"none\",\n autoScroll: false,\n axis: \"both\",\n wrap: false\n};\nfunction onModelInit(e) {\n const {\n items,\n toIndex\n } = e.detail;\n const itemEl = items[toIndex];\n if (itemEl) {\n itemEl.classList.add(this._options.activeDescendantClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantInit\", {\n detail: e.detail\n }));\n}\nfunction onModelChange(e) {\n const {\n fromIndex,\n toIndex\n } = e.detail;\n const fromItem = this.items[fromIndex];\n const toItem = this.items[toIndex];\n if (fromItem) {\n fromItem.classList.remove(this._options.activeDescendantClassName);\n }\n if (toItem) {\n toItem.classList.add(this._options.activeDescendantClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", toItem.id);\n if (this._options.autoScroll && this._itemContainerEl) {\n this._itemContainerEl.scrollTop = toItem.offsetTop - this._itemContainerEl.offsetHeight / 2;\n }\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantChange\", {\n detail: e.detail\n }));\n}\nfunction onModelReset(e) {\n const toIndex = e.detail.toIndex;\n const activeClassName = this._options.activeDescendantClassName;\n this.items.forEach(function (el) {\n el.classList.remove(activeClassName);\n });\n if (toIndex !== null && toIndex !== -1) {\n const itemEl = this.items[toIndex];\n itemEl.classList.add(activeClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n } else {\n this._focusEl.removeAttribute(\"aria-activedescendant\");\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantReset\", {\n detail: e.detail\n }));\n}\nfunction onModelMutation(e) {\n const {\n toIndex\n } = e.detail;\n const activeDescendantClassName = this._options.activeDescendantClassName;\n this.items.forEach(function (item, index) {\n (0, _makeupNextId.default)(item);\n if (index !== toIndex) {\n item.classList.remove(activeDescendantClassName);\n } else {\n item.classList.add(activeDescendantClassName);\n }\n });\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantMutation\", {\n detail: e.detail\n }));\n}\nclass ActiveDescendant {\n constructor(el) {\n this._el = el;\n this._onMutationListener = onModelMutation.bind(this);\n this._onChangeListener = onModelChange.bind(this);\n this._onResetListener = onModelReset.bind(this);\n this._onInitListener = onModelInit.bind(this);\n this._el.addEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.addEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.addEventListener(\"navigationModelReset\", this._onResetListener);\n this._el.addEventListener(\"navigationModelInit\", this._onInitListener);\n }\n destroy() {\n this._el.removeEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.removeEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.removeEventListener(\"navigationModelReset\", this._onResetListener);\n this._el.removeEventListener(\"navigationModelInit\", this._onInitListener);\n }\n}\nclass LinearActiveDescendant extends ActiveDescendant {\n constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n super(el);\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this._focusEl = focusEl;\n this._itemContainerEl = itemContainerEl;\n this._itemSelector = itemSelector;\n\n // ensure container has an id\n (0, _makeupNextId.default)(this._itemContainerEl);\n\n // if programmatic relationship set aria-owns\n if (this._itemContainerEl !== this._focusEl) {\n focusEl.setAttribute(\"aria-owns\", this._itemContainerEl.id);\n }\n this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {\n autoInit: this._options.autoInit,\n autoReset: this._options.autoReset,\n axis: this._options.axis,\n ignoreByDelegateSelector: this._options.ignoreByDelegateSelector,\n wrap: this._options.wrap\n });\n\n // ensure each item has an id\n this.items.forEach(function (itemEl) {\n (0, _makeupNextId.default)(itemEl);\n });\n }\n get index() {\n return this._navigationEmitter.model.index;\n }\n set index(newIndex) {\n this._navigationEmitter.model.index = newIndex;\n }\n reset() {\n this._navigationEmitter.model.reset();\n }\n get currentItem() {\n return this._navigationEmitter.model.currentItem;\n }\n get items() {\n return this._navigationEmitter.model.items;\n }\n set wrap(newWrap) {\n this._navigationEmitter.model.options.wrap = newWrap;\n }\n destroy() {\n super.destroy();\n this._navigationEmitter.destroy();\n }\n}\n\n/*\nclass GridActiveDescendant extends ActiveDescendant {\n constructor(el, focusEl, containerEl, rowSelector, cellSelector) {\n super(el);\n }\n}\n*/\n\nfunction createLinear(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n return new LinearActiveDescendant(el, focusEl, itemContainerEl, itemSelector, selectedOptions);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n if (!evt.shiftKey) {\n const key = evt.key;\n switch (key) {\n case \"Enter\":\n case \"Escape\":\n case \"PageUp\":\n case \"PageDown\":\n case \"End\":\n case \"Home\":\n case \"ArrowLeft\":\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"ArrowDown\":\n el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n detail: evt,\n bubbles: true\n }));\n break;\n case \" \":\n el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n detail: evt,\n bubbles: true\n }));\n break;\n default:\n return;\n }\n }\n}\nfunction onKeyDown(e) {\n onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n addKeyDown(el);\n addKeyUp(el);\n}\nfunction remove(el) {\n removeKeyDown(el);\n removeKeyUp(el);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar ActiveDescendant = _interopRequireWildcard(require(\"makeup-active-descendant\"));\nvar PreventScrollKeys = _interopRequireWildcard(require(\"makeup-prevent-scroll-keys\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n/**\n * A listbox can be a standalone focusable widget, or controlled by a separate, focusable widget\n * (a textbox for example, in the case of a combobox or datepicker)\n *\n * This listbox code currently supports single-selct only!\n * This code has been copied from Skin & MIND Patterns and has not yet been cleaned up.\n */\n\nconst defaultOptions = {\n activeDescendantClassName: \"listbox__option--active\",\n // the classname applied to the current active desdcendant\n autoInit: \"none\",\n autoReset: null,\n autoSelect: true,\n // when true, aria-checked state matches active-descendant\n autoScroll: true,\n // when true, the listbox will scroll to keep the activeDescendant in view\n customElementMode: false,\n focusableElement: null,\n // used in a combobox/datepicker scenario\n listboxOwnerElement: null,\n // used in a combobox/datepicker scenario\n multiSelect: false,\n // todo\n useAriaChecked: true,\n // doubles up on support for aria-selected to announce visible selected/checked state\n valueSelector: \".listbox__value\" // Selector to get value from\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this.el = widgetEl;\n\n // in cases such as combobox, the active-descendant logic is controlled by a parent widget\n this._activeDescendantRootEl = this._options.listboxOwnerElement || this.el;\n\n // todo: not sure this check is needed any more\n if (widgetEl.getAttribute(\"role\") === \"listbox\") {\n this._listboxEl = widgetEl;\n } else {\n this._listboxEl = this.el.querySelector(\"[role=listbox]\");\n }\n if (!this._options.focusableElement && this._listboxEl.getAttribute(\"tabindex\") === null) {\n this._listboxEl.setAttribute(\"tabindex\", \"0\");\n }\n PreventScrollKeys.add(this.el);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onClickListener = _onClick.bind(this);\n this._onFirstMouseDownListener = _onFirstMouseDown.bind(this);\n this._onFirstFocusListener = _onFirstFocus.bind(this);\n this._onActiveDescendantChangeListener = _onActiveDescendantChange.bind(this);\n this._onMutationListener = _onMutation.bind(this);\n this.el.classList.add(\"listbox--js\");\n if (!this._options.customElementMode) {\n this._mutationObserver = new MutationObserver(this._onMutationListener);\n this._observeMutations();\n this._observeEvents();\n }\n this._activeDescendant = ActiveDescendant.createLinear(this._activeDescendantRootEl, this._options.focusableElement || this._listboxEl, this._listboxEl.parentElement, \"[role=option]\", {\n activeDescendantClassName: this._options.activeDescendantClassName,\n autoInit: this._options.autoInit,\n autoReset: this._options.autoReset,\n autoScroll: this._options.autoScroll,\n axis: \"y\"\n });\n }\n _observeMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.observe(this._listboxEl, {\n attributeFilter: [\"aria-selected\"],\n attributes: true,\n childList: true,\n subtree: true\n });\n }\n }\n _unobserveMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.disconnect();\n }\n }\n _observeEvents() {\n if (this._destroyed !== true) {\n this._activeDescendantRootEl.addEventListener(\"activeDescendantChange\", this._onActiveDescendantChangeListener);\n this._listboxEl.addEventListener(\"mousedown\", this._onFirstMouseDownListener, {\n once: true\n });\n this._listboxEl.addEventListener(\"focus\", this._onFirstFocusListener, {\n once: true\n });\n this._listboxEl.addEventListener(\"keydown\", this._onKeyDownListener);\n this._listboxEl.addEventListener(\"click\", this._onClickListener);\n }\n }\n _unobserveEvents() {\n this._listboxEl.removeEventListener(\"keydown\", this._onKeyDownListener);\n this._listboxEl.removeEventListener(\"click\", this._onClickListener);\n this._listboxEl.removeEventListener(\"focus\", this._onFirstFocusListener);\n this._listboxEl.removeEventListener(\"mousedown\", this._onFirstMouseDownListener);\n this._activeDescendantRootEl.removeEventListener(\"activeDescendantChange\", this._onActiveDescendantChangeListener);\n }\n get index() {\n return this.items.findIndex(el => el.getAttribute(\"aria-selected\") === \"true\");\n }\n get items() {\n return this._activeDescendant.items;\n }\n select(index) {\n this._unobserveMutations();\n if (this.index !== index) {\n this.unselect(this.index);\n const itemEl = this._activeDescendant.items[index];\n if (itemEl && itemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n const matchingItem = this.items[index];\n let optionValue;\n matchingItem.setAttribute(\"aria-selected\", \"true\");\n if (this._options.useAriaChecked === true) {\n matchingItem.setAttribute(\"aria-checked\", \"true\");\n }\n optionValue = matchingItem.innerText;\n\n // Check if value selector is present and use that to get innerText instead\n // If its not present, will default to innerText of the whole item\n if (this._options.valueSelector) {\n const valueSelector = matchingItem.querySelector(this._options.valueSelector);\n if (valueSelector) {\n optionValue = valueSelector.innerText;\n }\n }\n this.el.dispatchEvent(new CustomEvent(\"makeup-listbox-change\", {\n detail: {\n el: matchingItem,\n optionIndex: index,\n optionValue\n }\n }));\n }\n }\n this._observeMutations();\n }\n unselect(index) {\n this._unobserveMutations();\n const itemEl = this.items[index];\n if (itemEl && itemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n const matchingItem = this.items[index];\n matchingItem.setAttribute(\"aria-selected\", \"false\");\n if (this._options.useAriaChecked === true) {\n matchingItem.setAttribute(\"aria-checked\", \"false\");\n }\n }\n this._observeMutations();\n }\n destroy() {\n this._destroyed = true;\n this._unobserveMutations();\n this._unobserveEvents();\n this._onKeyDownListener = null;\n this._onClickListener = null;\n this._onFirstMouseDownListener = null;\n this._onFirstFocusListener = null;\n this._onActiveDescendantChangeListener = null;\n this._onMutationListener = null;\n }\n}\nexports.default = _default;\nfunction _onFirstMouseDown() {\n this._isMouseDown = true;\n}\n\n// set activeDescendant on first keyboard focus\nfunction _onFirstFocus() {\n if (!this._isMouseDown) {\n this._activeDescendant.index = this.index === -1 ? 0 : this.index;\n }\n this._isMouseDown = false;\n}\nfunction _onClick(e) {\n const toEl = e.target.closest(\"[role=option]\");\n if (toEl) {\n this.select(this.items.indexOf(toEl));\n }\n}\nfunction _onKeyDown(e) {\n if (e.keyCode === 13 || e.keyCode === 32) {\n this.select(this._activeDescendant.index);\n }\n}\nfunction _onActiveDescendantChange(e) {\n const {\n toIndex\n } = e.detail;\n const toEl = this.items[toIndex];\n if (this._options.autoSelect === true && toEl) {\n this.select(toIndex);\n }\n}\nfunction _onMutation(mutationsList) {\n for (const mutation of mutationsList) {\n if (mutation.type === \"attributes\") {\n this.el.dispatchEvent(new CustomEvent(\"makeup-listbox-mutation\", {\n detail: {\n attributeName: mutation.attributeName\n }\n }));\n }\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar KeyEmitter = _interopRequireWildcard(require(\"makeup-key-emitter\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n axis: \"both\",\n autoInit: \"interactive\",\n autoReset: \"current\",\n ignoreByDelegateSelector: null,\n wrap: false\n};\nfunction isItemNavigable(el) {\n return !el.hidden && el.getAttribute(\"aria-disabled\") !== \"true\";\n}\nfunction isIndexNavigable(items, index) {\n return index >= 0 && index < items.length ? isItemNavigable(items[index]) : false;\n}\nfunction findNavigableItems(items) {\n return items.filter(isItemNavigable);\n}\nfunction findFirstNavigableIndex(items) {\n return items.findIndex(item => isItemNavigable(item));\n}\nfunction findLastNavigableIndex(items) {\n // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it\n return items.indexOf(findNavigableItems(items).reverse()[0]);\n}\nfunction findIndexByAttribute(items, attribute, value) {\n return items.findIndex(item => isItemNavigable(item) && item.getAttribute(attribute) === value);\n}\nfunction findFirstNavigableAriaCheckedIndex(items) {\n return findIndexByAttribute(items, \"aria-checked\", \"true\");\n}\nfunction findFirstNavigableAriaSelectedIndex(items) {\n return findIndexByAttribute(items, \"aria-selected\", \"true\");\n}\nfunction findIgnoredByDelegateItems(el, options) {\n return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];\n}\nfunction findPreviousNavigableIndex(items, index, wrap) {\n let previousNavigableIndex = -1;\n if (index === null || atStart(items, index)) {\n if (wrap === true) {\n previousNavigableIndex = findLastNavigableIndex(items);\n }\n } else {\n let i = index;\n while (--i >= 0) {\n if (isItemNavigable(items[i])) {\n previousNavigableIndex = i;\n break;\n }\n }\n }\n return previousNavigableIndex;\n}\nfunction findNextNavigableIndex(items, index, wrap) {\n let nextNavigableIndex = -1;\n if (index === null) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n } else if (atEnd(items, index)) {\n if (wrap === true) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n }\n } else {\n let i = index;\n while (++i < items.length) {\n if (isItemNavigable(items[i])) {\n nextNavigableIndex = i;\n break;\n }\n }\n }\n return nextNavigableIndex;\n}\n\n// returning -1 means not found\nfunction findIndexPositionByType(typeOrNum, items, currentIndex) {\n let index = -1;\n switch (typeOrNum) {\n case \"none\":\n index = null;\n break;\n case \"current\":\n index = currentIndex;\n break;\n case \"interactive\":\n index = findFirstNavigableIndex(items);\n break;\n case \"ariaChecked\":\n index = findFirstNavigableAriaCheckedIndex(items);\n break;\n case \"ariaSelected\":\n index = findFirstNavigableAriaSelectedIndex(items);\n break;\n case \"ariaSelectedOrInteractive\":\n index = findFirstNavigableAriaSelectedIndex(items);\n index = index === -1 ? findFirstNavigableIndex(items) : index;\n break;\n default:\n index = typeof typeOrNum === \"number\" || typeOrNum === null ? typeOrNum : -1;\n }\n return index;\n}\nfunction atStart(items, index) {\n return index === findFirstNavigableIndex(items);\n}\nfunction atEnd(items, index) {\n return index === findLastNavigableIndex(items);\n}\nfunction onKeyPrev(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onKeyNext(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onClick(e) {\n const itemIndex = this.indexOf(e.target.closest(this._itemSelector));\n if (isIndexNavigable(this.items, itemIndex)) {\n this.index = itemIndex;\n }\n}\nfunction onKeyHome(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findFirstNavigableIndex(this.items);\n }\n}\nfunction onKeyEnd(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findLastNavigableIndex(this.items);\n }\n}\nfunction onFocusExit() {\n if (this.options.autoReset !== null) {\n this.reset();\n }\n}\nfunction onMutation(e) {\n const fromIndex = this.index;\n let toIndex = this.index;\n // https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n const {\n addedNodes,\n attributeName,\n removedNodes,\n target,\n type\n } = e[0];\n if (type === \"attributes\") {\n if (target === this.currentItem) {\n if (attributeName === \"aria-disabled\") {\n // current item was disabled - keep it as current index (until a keyboard navigation happens)\n toIndex = this.index;\n } else if (attributeName === \"hidden\") {\n // current item was hidden and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n }\n } else {\n toIndex = this.index;\n }\n } else if (type === \"childList\") {\n if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {\n // current item was removed and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n // nodes were added and/or removed - keep current item and resync its index\n toIndex = this.indexOf(this._cachedElement);\n }\n }\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n}\nclass NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n /** @member {typeof defaultOptions} */\n this.options = Object.assign({}, defaultOptions, selectedOptions);\n\n /** @member {HTMLElement} */\n this._el = el;\n\n /** @member {string} */\n this._itemSelector = itemSelector;\n }\n}\nclass LinearNavigationModel extends NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n super(el, itemSelector, selectedOptions);\n const fromIndex = this._index;\n const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);\n\n // do not use setter as it will trigger a change event\n this._index = toIndex;\n\n // always keep an element reference to the last item (for use in mutation observer)\n // todo: convert index to Tuple to store last/current values instead?\n this._cachedElement = this.items[toIndex];\n this._el.dispatchEvent(new CustomEvent(\"navigationModelInit\", {\n bubbles: false,\n detail: {\n firstInteractiveIndex: this.firstNavigableIndex,\n fromIndex,\n items: this.items,\n toIndex\n }\n }));\n }\n get currentItem() {\n return this.items[this.index];\n }\n\n // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed\n get items() {\n return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n }\n get index() {\n return this._index;\n }\n\n /**\n * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)\n */\n set index(toIndex) {\n if (toIndex === this.index) {\n return;\n } else if (!isIndexNavigable(this.items, toIndex)) {\n // no-op. throw exception?\n } else {\n const fromIndex = this.index;\n // update cached element reference (for use in mutation observer if DOM node gets removed)\n this._cachedElement = this.items[toIndex];\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n indexOf(element) {\n return this.items.indexOf(element);\n }\n reset() {\n const fromIndex = this.index;\n const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);\n if (toIndex !== fromIndex) {\n // do not use setter as it will trigger a navigationModelChange event\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n}\n\n// 2D Grid Model will go here\n\n/*\nclass GridModel extends NavigationModel {\n constructor(el, rowSelector, colSelector) {\n super();\n this._coords = null;\n }\n}\n*/\n\nclass NavigationEmitter {\n /**\n * @param {HTMLElement} el\n * @param {LinearNavigationModel} model\n */\n constructor(el, model) {\n this.model = model;\n this.el = el;\n this._keyPrevListener = onKeyPrev.bind(model);\n this._keyNextListener = onKeyNext.bind(model);\n this._keyHomeListener = onKeyHome.bind(model);\n this._keyEndListener = onKeyEnd.bind(model);\n this._clickListener = onClick.bind(model);\n this._focusExitListener = onFocusExit.bind(model);\n this._observer = new MutationObserver(onMutation.bind(model));\n KeyEmitter.addKeyDown(this.el);\n ExitEmitter.addFocusExit(this.el);\n const axis = model.options.axis;\n if (axis === \"both\" || axis === \"x\") {\n this.el.addEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n }\n if (axis === \"both\" || axis === \"y\") {\n this.el.addEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n }\n this.el.addEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.addEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.addEventListener(\"click\", this._clickListener);\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n this._observer.observe(this.el, {\n childList: true,\n subtree: true,\n attributeFilter: [\"aria-disabled\", \"hidden\"],\n attributes: true,\n attributeOldValue: true\n });\n }\n destroy() {\n KeyEmitter.removeKeyDown(this.el);\n ExitEmitter.removeFocusExit(this.el);\n this.el.removeEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.removeEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.removeEventListener(\"click\", this._clickListener);\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n this._observer.disconnect();\n }\n}\nfunction createLinear(el, itemSelector, selectedOptions) {\n const model = new LinearNavigationModel(el, itemSelector, selectedOptions);\n return new NavigationEmitter(el, model);\n}\n\n/*\nstatic createGrid(el, rowSelector, colSelector, selectedOptions) {\n return null;\n}\n*/\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.remove = remove;\nfunction onKeyDown(e) {\n if (e.keyCode >= 32 && e.keyCode <= 40) {\n e.preventDefault();\n }\n}\nfunction add(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction remove(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/combobox\");\nvar _makeupCombobox = _interopRequireDefault(require(\"makeup-combobox\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const Combobox = require('makeup-combobox').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".combobox\").forEach(function (el, i) {\n const widget = new _makeupCombobox.default(el, {\n autoSelect: el.dataset.makeupAutoSelect === \"false\" ? false : true\n });\n el.addEventListener(\"makeup-combobox-change\", function (e) {\n console.log(e.type, e.detail);\n });\n el.addEventListener(\"makeup-combobox-mutation\", function (e) {\n console.log(e.type, e.detail);\n });\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-combobox/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA8B;;;;;;;;ACAtC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,yBAAyB,mBAAO,CAAC,IAAqB;AACtD,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA,IAAI;AACJ;AACA,IAAI;AACJ,2CAA2C,gBAAgB;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+DAA+D;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,kDAAkD,WAAW;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;;;;;;;;;ACxSF;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,GAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;;;ACvCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,6CAA6C,mBAAO,CAAC,IAAiB;AACtE,4CAA4C,mBAAO,CAAC,IAAgB;AACpE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;ACvOa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,gDAAgD,mBAAO,CAAC,IAA2B;AACnF,2CAA2C,mBAAO,CAAC,IAAgB;AACnE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;ACxKa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,uBAAuB;AACvB,2CAA2C,mBAAO,CAAC,IAAgB;AACnE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC3Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,kBAAkB;AAClB,gBAAgB;AAChB,cAAc;AACd,qBAAqB;AACrB,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAoE,IAAI,KAAK,aAAa;AAC1F;AACA;AACA,SAAS;AACT;AACA;AACA,uDAAuD,aAAa;AACpE;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACrEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,+CAA+C,mBAAO,CAAC,GAA0B;AACjF,gDAAgD,mBAAO,CAAC,IAA4B;AACpF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;;AAEA;AACA;;AAEA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;;;;;;;;ACvNa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,yCAAyC,mBAAO,CAAC,IAAoB;AACrE,0CAA0C,mBAAO,CAAC,IAAqB;AACvE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA,QAAQ;AACR;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA,iBAAiB,uBAAuB;AACxC,mCAAmC;;AAEnC,iBAAiB,aAAa;AAC9B;;AAEA,iBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,QAAQ;AACrB,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA4C,mBAAmB;AAC/D;AACA;AACA;AACA;;AAEA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa,aAAa;AAC1B,aAAa,uBAAuB;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;;;ACjXa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,kBAAkB,UAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,OAAO,EAAE,UAAU,EAAE,cAAc;;AAEpD;AACA;AACA;AACA,6BAA6B,IAAI,GAAG,mBAAmB;AACvD;AACA;AACA;;;;;;;;;ACvCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,WAAW;AACX,cAAc;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;UCjBA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAqB;AAC7B,6CAA6C,mBAAO,CAAC,GAAiB;AACtE,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/combobox.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/combobox/combobox.css?755d","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-expander/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-expander/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-active-descendant/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-exit-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-key-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-listbox/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-navigation-emitter/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-next-id/dist/cjs/index.js","webpack://root/./packages/ui/makeup-combobox/node_modules/makeup-prevent-scroll-keys/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-combobox/index.compiled.js"],"sourcesContent":["require('./dist/combobox/combobox.css');\n","require('./dist/global/global.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nvar _makeupExitEmitter = require(\"makeup-exit-emitter\");\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n alwaysDoFocusManagement: false,\n ariaControls: true,\n autoCollapse: false,\n collapseOnFocusOut: false,\n collapseOnMouseOut: false,\n collapseOnClickOut: false,\n collapseOnHostReFocus: false,\n contentSelector: \".expander__content\",\n expandedClass: null,\n expandOnClick: false,\n expandOnFocus: false,\n expandOnHover: false,\n focusManagement: null,\n hostSelector: \".expander__host\",\n simulateSpacebarClick: false,\n useAriaExpanded: true\n};\nfunction onHostKeyDown(e) {\n if (e.key === \"Enter\" || e.key === \" \") {\n this._keyboardClickFlag = true;\n }\n // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here.\n // careful! if host already triggers click events naturally, we end up with a \"double-click\".\n if (e.key === \" \" && this.options.simulateSpacebarClick === true) {\n this.hostEl.click();\n }\n}\nfunction onHostMouseDown() {\n this._mouseClickFlag = true;\n}\nfunction onHostClick() {\n this._expandWasKeyboardClickActivated = this._keyboardClickFlag;\n this._expandWasMouseClickActivated = this._mouseClickFlag;\n this._widgetHasKeyboardFocus = this._keyboardClickFlag;\n this.expanded = !this.expanded;\n}\nfunction onHostFocus() {\n this._expandWasFocusActivated = true;\n this.expanded = true;\n}\n\n// NOTE: collapseOnHostReFocus cannot be used when expandOnFocus is true\nfunction onHostReFocus() {\n if (this.expanded && this._widgetHasKeyboardFocus) {\n this.expanded = false;\n }\n}\nfunction onHostHover() {\n clearTimeout(this._mouseLeft);\n this._expandWasHoverActivated = true;\n this.expanded = true;\n}\nfunction onFocusExit() {\n this._widgetHasKeyboardFocus = false;\n this.expanded = false;\n}\nfunction onMouseLeave() {\n clearTimeout(this._mouseLeft);\n this._mouseLeft = setTimeout(() => {\n this.expanded = false;\n }, 300);\n}\nfunction _onDocumentClick(e) {\n if (this.el.contains(e.target) === false) {\n this.expanded = false;\n }\n}\nfunction _onDocumentTouchStart() {\n this.documentClick = true;\n}\nfunction _onDocumentTouchMove() {\n this.documentClick = false;\n}\nfunction _onDocumentTouchEnd(e) {\n if (this.documentClick === true) {\n this.documentClick = false;\n if (this.el.contains(e.target) === false) {\n this.expanded = false;\n }\n }\n}\nfunction manageFocus(focusManagement, contentEl) {\n if (focusManagement === \"content\") {\n contentEl.setAttribute(\"tabindex\", \"-1\");\n contentEl.focus();\n } else if (focusManagement === \"focusable\") {\n (0, _makeupFocusables.default)(contentEl)[0]?.focus();\n } else if (focusManagement === \"interactive\") {\n (0, _makeupFocusables.default)(contentEl, true)[0]?.focus();\n } else if (focusManagement !== null) {\n const el = contentEl.querySelector(`#${focusManagement}`);\n if (el) {\n el.focus();\n }\n }\n}\nclass _default {\n constructor(el, selectedOptions) {\n this.options = {\n ...defaultOptions,\n ...selectedOptions\n };\n this.el = el;\n this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el\n this.contentEl = el.querySelector(this.options.contentSelector);\n (0, _makeupExitEmitter.addFocusExit)(this.el);\n this._hostKeyDownListener = onHostKeyDown.bind(this);\n this._hostMouseDownListener = onHostMouseDown.bind(this);\n this._documentClickListener = _onDocumentClick.bind(this);\n this._documentTouchStartListener = _onDocumentTouchStart.bind(this);\n this._documentTouchMoveListener = _onDocumentTouchMove.bind(this);\n this._documentTouchEndListener = _onDocumentTouchEnd.bind(this);\n this._hostClickListener = onHostClick.bind(this);\n this._hostFocusListener = onHostFocus.bind(this);\n this._hostReFocusListener = onHostReFocus.bind(this);\n this._hostHoverListener = onHostHover.bind(this);\n this._focusExitListener = onFocusExit.bind(this);\n this._mouseLeaveListener = onMouseLeave.bind(this);\n if (this.options.useAriaExpanded === true) {\n const initialAriaExpanded = this.hostEl.getAttribute(\"aria-expanded\");\n this._expanded = initialAriaExpanded === \"true\";\n if (initialAriaExpanded === null) {\n this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n }\n } else {\n this._expanded = false;\n }\n if (this.options.ariaControls === true) {\n // ensure the widget has an id\n (0, _makeupNextId.default)(this.el, \"expander\");\n this.contentEl.id = this.contentEl.id || `${this.el.id}-content`;\n this.hostEl.setAttribute(\"aria-controls\", this.contentEl.id);\n }\n this.expandOnClick = this.options.expandOnClick;\n this.expandOnFocus = this.options.expandOnFocus;\n this.expandOnHover = this.options.expandOnHover;\n this.collapseOnHostReFocus = this.options.collapseOnHostReFocus;\n if (this.options.autoCollapse === false) {\n this.collapseOnClickOut = this.options.collapseOnClickOut;\n this.collapseOnFocusOut = this.options.collapseOnFocusOut;\n this.collapseOnMouseOut = this.options.collapseOnMouseOut;\n }\n }\n set expandOnClick(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"keydown\", this._hostKeyDownListener);\n this.hostEl.addEventListener(\"mousedown\", this._hostMouseDownListener);\n this.hostEl.addEventListener(\"click\", this._hostClickListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnClickOut = true;\n this.collapseOnFocusOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"click\", this._hostClickListener);\n this.hostEl.removeEventListener(\"mousedown\", this._hostMouseDownListener);\n this.hostEl.removeEventListener(\"keydown\", this._hostKeyDownListener);\n }\n }\n set expandOnFocus(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"focus\", this._hostFocusListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnClickOut = true;\n this.collapseOnFocusOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"focus\", this._hostFocusListener);\n }\n }\n set collapseOnHostReFocus(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"focus\", this._hostReFocusListener);\n } else {\n this.hostEl.removeEventListener(\"focus\", this._hostReFocusListener);\n }\n }\n set expandOnHover(bool) {\n if (bool === true) {\n this.hostEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n this.contentEl.addEventListener(\"mouseenter\", this._hostHoverListener);\n if (this.options.autoCollapse === true) {\n this.collapseOnMouseOut = true;\n }\n } else {\n this.hostEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n this.contentEl.removeEventListener(\"mouseenter\", this._hostHoverListener);\n }\n }\n set collapseOnClickOut(bool) {\n if (bool === true) {\n document.addEventListener(\"click\", this._documentClickListener);\n document.addEventListener(\"touchstart\", this._documentTouchStartListener);\n document.addEventListener(\"touchmove\", this._documentTouchMoveListener);\n document.addEventListener(\"touchend\", this._documentTouchEndListener);\n } else {\n document.removeEventListener(\"click\", this._documentClickListener);\n document.removeEventListener(\"touchstart\", this._documentTouchStartListener);\n document.removeEventListener(\"touchmove\", this._documentTouchMoveListener);\n document.removeEventListener(\"touchend\", this._documentTouchEndListener);\n }\n }\n set collapseOnFocusOut(bool) {\n if (bool === true) {\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n } else {\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n }\n }\n set collapseOnMouseOut(bool) {\n if (bool === true) {\n this.el.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n this.contentEl.addEventListener(\"mouseleave\", this._mouseLeaveListener);\n } else {\n this.el.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n this.contentEl.removeEventListener(\"mouseleave\", this._mouseLeaveListener);\n }\n }\n get expanded() {\n return this._expanded;\n }\n set expanded(bool) {\n if (bool === true && this.expanded === false) {\n if (this.options.useAriaExpanded === true) {\n this.hostEl.setAttribute(\"aria-expanded\", \"true\");\n }\n if (this.options.expandedClass) {\n this.el.classList.add(this.options.expandedClass);\n }\n if (this._expandWasKeyboardClickActivated || this._expandWasMouseClickActivated && this.options.alwaysDoFocusManagement) {\n manageFocus(this.options.focusManagement, this.contentEl);\n }\n this.el.dispatchEvent(new CustomEvent(\"expander-expand\", {\n bubbles: true,\n detail: this.contentEl\n }));\n }\n if (bool === false && this.expanded === true) {\n if (this.options.useAriaExpanded === true) {\n this.hostEl.setAttribute(\"aria-expanded\", \"false\");\n }\n if (this.options.expandedClass) {\n this.el.classList.remove(this.options.expandedClass);\n }\n this.el.dispatchEvent(new CustomEvent(\"expander-collapse\", {\n bubbles: true,\n detail: this.contentEl\n }));\n }\n this._expanded = bool;\n this._expandWasKeyboardClickActivated = false;\n this._expandWasMouseClickActivated = false;\n this._expandWasFocusActivated = false;\n this._expandWasHoverActivated = false;\n this._keyboardClickFlag = false;\n this._mouseClickFlag = false;\n }\n sleep() {\n if (this._destroyed !== true) {\n this.expandOnClick = false;\n this.expandOnFocus = false;\n this.expandOnHover = false;\n this.collapseOnClickOut = false;\n this.collapseOnFocusOut = false;\n this.collapseOnMouseOut = false;\n this.collapseOnHostReFocus = false;\n }\n }\n destroy() {\n this.sleep();\n this._destroyed = true;\n this._hostKeyDownListener = null;\n this._hostMouseDownListener = null;\n this._documentClickListener = null;\n this._documentTouchStartListener = null;\n this._documentTouchMoveListener = null;\n this._documentTouchEndListener = null;\n this._hostClickListener = null;\n this._hostFocusListener = null;\n this._hostReFocusListener = null;\n this._hostHoverListener = null;\n this._focusExitListener = null;\n this._mouseLeaveListener = null;\n this._widgetHasKeyboardFocus = null;\n }\n}\nexports.default = _default;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupExpander = _interopRequireDefault(require(\"makeup-expander\"));\nvar _makeupListbox = _interopRequireDefault(require(\"makeup-listbox\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n autoSelect: true,\n collapseTimeout: 150,\n customElementMode: false,\n autoScroll: true\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this._el = widgetEl;\n this._inputEl = this._el.querySelector(\"input\");\n this._listboxEl = this._el.querySelector(\".combobox__listbox\");\n this._autocompleteType = this._inputEl.getAttribute(\"aria-autocomplete\");\n this._inputEl.setAttribute(\"autocomplete\", \"off\");\n this._inputEl.setAttribute(\"role\", \"combobox\");\n this._listboxEl.hidden = false;\n this._listboxWidget = new _makeupListbox.default(this._listboxEl, {\n activeDescendantClassName: \"combobox__option--active\",\n autoReset: -1,\n autoSelect: this._options.autoSelect,\n focusableElement: this._inputEl,\n listboxOwnerElement: this._el,\n autoScroll: this._options.autoScroll\n });\n this._expander = new _makeupExpander.default(this._el, {\n collapseOnClickOut: true,\n collapseOnFocusOut: true,\n contentSelector: \".combobox__listbox\",\n expandedClass: \"combobox--expanded\",\n expandOnFocus: true,\n hostSelector: \"input\"\n });\n this._destroyed = false;\n this._onInputFocusListener = _onInputFocus.bind(this);\n this._onListboxClickListener = _onListboxClick.bind(this);\n this._onListboxActiveDescendantChangeListener = _onListboxActiveDescendantChange.bind(this);\n this._onTextboxKeyDownListener = _onTextboxKeyDown.bind(this);\n this._onTextboxInputListener = _onTextboxInput.bind(this);\n this._onTextboxClickListener = _onTextboxClick.bind(this);\n this._onMutationListener = _onMutation.bind(this);\n this._el.classList.add(\"combobox--js\");\n if (!this._options.customElementMode) {\n this._mutationObserver = new MutationObserver(this._onMutationListener);\n this._observeMutations();\n this._observeEvents();\n }\n }\n resetFilter() {\n this._listboxWidget._activeDescendant.reset();\n this._listboxWidget.items.forEach(el => el.hidden = false);\n }\n _observeMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.observe(this._inputEl, {\n attributes: true,\n childList: true,\n subtree: true\n });\n }\n }\n _unobserveMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.disconnect();\n }\n }\n _observeEvents() {\n if (this._destroyed !== true) {\n this._listboxEl.addEventListener(\"click\", this._onListboxClickListener);\n this._listboxWidget._activeDescendantRootEl.addEventListener(\"activeDescendantChange\", this._onListboxActiveDescendantChangeListener);\n this._inputEl.addEventListener(\"focus\", this._onInputFocusListener);\n this._inputEl.addEventListener(\"keydown\", this._onTextboxKeyDownListener);\n this._inputEl.addEventListener(\"input\", this._onTextboxInputListener);\n this._inputEl.addEventListener(\"click\", this._onTextboxClickListener);\n }\n }\n _unobserveEvents() {\n this._listboxEl.removeEventListener(\"click\", this._onListboxClickListener);\n this._listboxWidget._activeDescendantRootEl.removeEventListener(\"activeDescendantChange\", this._onListboxActiveDescendantChangeListener);\n this._inputEl.removeEventListener(\"focus\", this._onInputFocusListener);\n this._inputEl.removeEventListener(\"keydown\", this._onTextboxKeyDownListener);\n this._inputEl.removeEventListener(\"input\", this._onTextboxInputListener);\n this._inputEl.removeEventListener(\"click\", this._onTextboxClickListener);\n }\n destroy() {\n this._destroyed = true;\n this._unobserveMutations();\n this._unobserveEvents();\n this._onInputFocusListener = null;\n this._onListboxClickListener = null;\n this._onListboxActiveDesendanctChangeListener = null;\n this._onTextboxKeyDownListener = null;\n this._onTextboxInputListener = null;\n this._onTextboxClickListener = null;\n this._onMutationListener = null;\n }\n}\nexports.default = _default;\nfunction _onInputFocus() {\n if (this._autocompleteType === \"list\") {\n _filterSuggestions(this._inputEl.value, this._listboxWidget.items);\n } else {\n this.resetFilter();\n }\n}\nfunction _onTextboxKeyDown(e) {\n // up and down keys should not move caret\n if (e.keyCode === 38 || e.keyCode === 40) {\n e.preventDefault();\n }\n\n // down arrow key should always expand listbox\n if (e.keyCode === 40) {\n if (this._expander.expanded === false) {\n this._expander.expanded = true;\n }\n }\n\n // escape key should always collapse listbox\n if (e.keyCode === 27) {\n if (this._expander.expanded === true) {\n this._expander.expanded = false;\n this._listboxWidget._activeDescendant.reset();\n }\n }\n\n // for manual selection, ENTER should not submit form when there is an active descendant\n if (this._options.autoSelect === false && e.keyCode === 13 && this._inputEl.getAttribute(\"aria-activedescendant\")) {\n e.preventDefault();\n const widget = this;\n this._inputEl.value = this._listboxWidget.items[this._listboxWidget._activeDescendant.index].innerText;\n _dispatchChangeEvent(this._el, this._inputEl.value);\n this._listboxWidget._activeDescendant.reset();\n setTimeout(function () {\n widget._expander.expanded = false;\n if (widget._autocompleteType === \"list\") {\n if (widget._inputEl.value.length === 0) {\n widget.resetFilter();\n } else {\n _filterSuggestions(widget._inputEl.value, widget._listboxWidget.items);\n }\n }\n }, this._options.collapseTimeout);\n }\n}\nfunction _onTextboxClick() {\n if (this._expander.expanded === false) {\n this._expander.expanded = true;\n }\n}\nfunction _onTextboxInput() {\n if (this._expander.expanded === false) {\n this._expander.expanded = true;\n }\n // TODO: refactor this redundant logic with L165: L171\n if (this._autocompleteType === \"list\") {\n this._listboxWidget._activeDescendant.reset();\n if (this._inputEl.value.length === 0) {\n this.resetFilter();\n } else {\n _filterSuggestions(this._inputEl.value, this._listboxWidget.items);\n }\n }\n}\nfunction _onListboxClick(e) {\n const widget = this;\n const element = e.target.closest(\"[role=option]\");\n const indexData = this._listboxWidget.items.indexOf(element);\n if (indexData !== undefined) {\n this._inputEl.value = this._listboxWidget.items[indexData].innerText;\n\n // TODO: refactor this redundant logic with L165: L171\n if (this._autocompleteType === \"list\") {\n this._listboxWidget._activeDescendant.reset();\n if (this._inputEl.value.length === 0) {\n this.resetFilter();\n } else {\n _filterSuggestions(this._inputEl.value, this._listboxWidget.items);\n }\n }\n if (this._options.autoSelect === false) {\n _dispatchChangeEvent(this._el, this._inputEl.value);\n }\n setTimeout(function () {\n widget._expander.expanded = false;\n }, this._options.collapseTimeout);\n }\n}\nfunction _onListboxActiveDescendantChange(e) {\n if (this._options.autoSelect === true) {\n this._inputEl.value = this._listboxWidget.items[e.detail.toIndex].innerText;\n _dispatchChangeEvent(this._el, this._inputEl.value);\n }\n}\nfunction _onMutation(mutationsList) {\n for (const mutation of mutationsList) {\n if (mutation.type === \"attributes\") {\n this._el.dispatchEvent(new CustomEvent(\"makeup-combobox-mutation\", {\n detail: {\n attributeName: mutation.attributeName\n }\n }));\n }\n }\n}\nfunction _filterSuggestions(value, items) {\n const numChars = value.length;\n const currentValue = value.toLowerCase();\n const matchedItems = items.filter(el => {\n return el.innerText.trim().substring(0, numChars).toLowerCase() === currentValue;\n });\n const unmatchedItems = items.filter(el => {\n return el.innerText.trim().substring(0, numChars).toLowerCase() !== currentValue;\n });\n matchedItems.forEach(el => el.hidden = false);\n unmatchedItems.forEach(el => el.hidden = true);\n}\nfunction _dispatchChangeEvent(el, value) {\n el.dispatchEvent(new CustomEvent(\"makeup-combobox-change\", {\n detail: {\n value\n }\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar NavigationEmitter = _interopRequireWildcard(require(\"makeup-navigation-emitter\"));\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n activeDescendantClassName: \"active-descendant\",\n autoInit: \"none\",\n autoReset: \"none\",\n autoScroll: false,\n axis: \"both\",\n wrap: false\n};\nfunction onModelInit(e) {\n const {\n items,\n toIndex\n } = e.detail;\n const itemEl = items[toIndex];\n if (itemEl) {\n itemEl.classList.add(this._options.activeDescendantClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantInit\", {\n detail: e.detail\n }));\n}\nfunction onModelChange(e) {\n const {\n fromIndex,\n toIndex\n } = e.detail;\n const fromItem = this.items[fromIndex];\n const toItem = this.items[toIndex];\n if (fromItem) {\n fromItem.classList.remove(this._options.activeDescendantClassName);\n }\n if (toItem) {\n toItem.classList.add(this._options.activeDescendantClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", toItem.id);\n if (this._options.autoScroll && this._itemContainerEl) {\n this._itemContainerEl.scrollTop = toItem.offsetTop - this._itemContainerEl.offsetHeight / 2;\n }\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantChange\", {\n detail: e.detail\n }));\n}\nfunction onModelReset(e) {\n const toIndex = e.detail.toIndex;\n const activeClassName = this._options.activeDescendantClassName;\n this.items.forEach(function (el) {\n el.classList.remove(activeClassName);\n });\n if (toIndex !== null && toIndex !== -1) {\n const itemEl = this.items[toIndex];\n itemEl.classList.add(activeClassName);\n this._focusEl.setAttribute(\"aria-activedescendant\", itemEl.id);\n } else {\n this._focusEl.removeAttribute(\"aria-activedescendant\");\n }\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantReset\", {\n detail: e.detail\n }));\n}\nfunction onModelMutation(e) {\n const {\n toIndex\n } = e.detail;\n const activeDescendantClassName = this._options.activeDescendantClassName;\n this.items.forEach(function (item, index) {\n (0, _makeupNextId.default)(item);\n if (index !== toIndex) {\n item.classList.remove(activeDescendantClassName);\n } else {\n item.classList.add(activeDescendantClassName);\n }\n });\n this._el.dispatchEvent(new CustomEvent(\"activeDescendantMutation\", {\n detail: e.detail\n }));\n}\nclass ActiveDescendant {\n constructor(el) {\n this._el = el;\n this._onMutationListener = onModelMutation.bind(this);\n this._onChangeListener = onModelChange.bind(this);\n this._onResetListener = onModelReset.bind(this);\n this._onInitListener = onModelInit.bind(this);\n this._el.addEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.addEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.addEventListener(\"navigationModelReset\", this._onResetListener);\n this._el.addEventListener(\"navigationModelInit\", this._onInitListener);\n }\n destroy() {\n this._el.removeEventListener(\"navigationModelMutation\", this._onMutationListener);\n this._el.removeEventListener(\"navigationModelChange\", this._onChangeListener);\n this._el.removeEventListener(\"navigationModelReset\", this._onResetListener);\n this._el.removeEventListener(\"navigationModelInit\", this._onInitListener);\n }\n}\nclass LinearActiveDescendant extends ActiveDescendant {\n constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n super(el);\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this._focusEl = focusEl;\n this._itemContainerEl = itemContainerEl;\n this._itemSelector = itemSelector;\n\n // ensure container has an id\n (0, _makeupNextId.default)(this._itemContainerEl);\n\n // if programmatic relationship set aria-owns\n if (this._itemContainerEl !== this._focusEl) {\n focusEl.setAttribute(\"aria-owns\", this._itemContainerEl.id);\n }\n this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {\n autoInit: this._options.autoInit,\n autoReset: this._options.autoReset,\n axis: this._options.axis,\n ignoreByDelegateSelector: this._options.ignoreByDelegateSelector,\n wrap: this._options.wrap\n });\n\n // ensure each item has an id\n this.items.forEach(function (itemEl) {\n (0, _makeupNextId.default)(itemEl);\n });\n }\n get index() {\n return this._navigationEmitter.model.index;\n }\n set index(newIndex) {\n this._navigationEmitter.model.index = newIndex;\n }\n reset() {\n this._navigationEmitter.model.reset();\n }\n get currentItem() {\n return this._navigationEmitter.model.currentItem;\n }\n get items() {\n return this._navigationEmitter.model.items;\n }\n set wrap(newWrap) {\n this._navigationEmitter.model.options.wrap = newWrap;\n }\n destroy() {\n super.destroy();\n this._navigationEmitter.destroy();\n }\n}\n\n/*\nclass GridActiveDescendant extends ActiveDescendant {\n constructor(el, focusEl, containerEl, rowSelector, cellSelector) {\n super(el);\n }\n}\n*/\n\nfunction createLinear(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {\n return new LinearActiveDescendant(el, focusEl, itemContainerEl, itemSelector, selectedOptions);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.addFocusExit = addFocusExit;\nexports.removeFocusExit = removeFocusExit;\nvar _makeupNextId = _interopRequireDefault(require(\"makeup-next-id\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst focusExitEmitters = {};\nfunction doFocusExit(el, fromElement, toElement) {\n el.dispatchEvent(new CustomEvent(\"focusExit\", {\n detail: {\n fromElement,\n toElement\n },\n bubbles: false // mirror the native mouseleave event\n }));\n}\nfunction onDocumentFocusIn(e) {\n const newFocusElement = e.target;\n const targetIsDescendant = this.el.contains(newFocusElement);\n\n // if focus has moved to a focusable descendant\n if (targetIsDescendant === true) {\n // set the target as the currently focussed element\n this.currentFocusElement = newFocusElement;\n } else {\n // else focus has not gone to a focusable descendant\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n doFocusExit(this.el, this.currentFocusElement, newFocusElement);\n this.currentFocusElement = null;\n }\n}\nfunction onWindowBlur() {\n doFocusExit(this.el, this.currentFocusElement, undefined);\n}\nfunction onWidgetFocusIn() {\n // listen for focus moving to anywhere in document\n // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!\n document.addEventListener(\"focusin\", this.onDocumentFocusInListener);\n // listen for focus leaving the window\n window.addEventListener(\"blur\", this.onWindowBlurListener);\n}\nclass FocusExitEmitter {\n constructor(el) {\n this.el = el;\n this.currentFocusElement = null;\n this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);\n this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);\n this.onWindowBlurListener = onWindowBlur.bind(this);\n this.el.addEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n removeEventListeners() {\n window.removeEventListener(\"blur\", this.onWindowBlurListener);\n document.removeEventListener(\"focusin\", this.onDocumentFocusInListener);\n this.el.removeEventListener(\"focusin\", this.onWidgetFocusInListener);\n }\n}\nfunction addFocusExit(el) {\n let exitEmitter = null;\n (0, _makeupNextId.default)(el);\n if (!focusExitEmitters[el.id]) {\n exitEmitter = new FocusExitEmitter(el);\n focusExitEmitters[el.id] = exitEmitter;\n }\n return exitEmitter;\n}\nfunction removeFocusExit(el) {\n const exitEmitter = focusExitEmitters[el.id];\n if (exitEmitter) {\n exitEmitter.removeEventListeners();\n delete focusExitEmitters[el.id];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.addKeyDown = addKeyDown;\nexports.addKeyUp = addKeyUp;\nexports.remove = remove;\nexports.removeKeyDown = removeKeyDown;\nexports.removeKeyUp = removeKeyUp;\nfunction uncapitalizeFirstLetter(str) {\n return str.charAt(0).toLowerCase() + str.slice(1);\n}\nfunction onKeyDownOrUp(evt, el, keyEventType) {\n if (!evt.shiftKey) {\n const key = evt.key;\n switch (key) {\n case \"Enter\":\n case \"Escape\":\n case \"PageUp\":\n case \"PageDown\":\n case \"End\":\n case \"Home\":\n case \"ArrowLeft\":\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"ArrowDown\":\n el.dispatchEvent(new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {\n detail: evt,\n bubbles: true\n }));\n break;\n case \" \":\n el.dispatchEvent(new CustomEvent(`spacebarKey${keyEventType}`, {\n detail: evt,\n bubbles: true\n }));\n break;\n default:\n return;\n }\n }\n}\nfunction onKeyDown(e) {\n onKeyDownOrUp(e, this, \"Down\");\n}\nfunction onKeyUp(e) {\n onKeyDownOrUp(e, this, \"Up\");\n}\nfunction addKeyDown(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction addKeyUp(el) {\n el.addEventListener(\"keyup\", onKeyUp);\n}\nfunction removeKeyDown(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\nfunction removeKeyUp(el) {\n el.removeEventListener(\"keyup\", onKeyUp);\n}\nfunction add(el) {\n addKeyDown(el);\n addKeyUp(el);\n}\nfunction remove(el) {\n removeKeyDown(el);\n removeKeyUp(el);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar ActiveDescendant = _interopRequireWildcard(require(\"makeup-active-descendant\"));\nvar PreventScrollKeys = _interopRequireWildcard(require(\"makeup-prevent-scroll-keys\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n/**\n * A listbox can be a standalone focusable widget, or controlled by a separate, focusable widget\n * (a textbox for example, in the case of a combobox or datepicker)\n *\n * This listbox code currently supports single-selct only!\n * This code has been copied from Skin & MIND Patterns and has not yet been cleaned up.\n */\n\nconst defaultOptions = {\n activeDescendantClassName: \"listbox__option--active\",\n // the classname applied to the current active desdcendant\n autoInit: \"none\",\n autoReset: null,\n autoSelect: true,\n // when true, aria-checked state matches active-descendant\n autoScroll: true,\n // when true, the listbox will scroll to keep the activeDescendant in view\n customElementMode: false,\n focusableElement: null,\n // used in a combobox/datepicker scenario\n listboxOwnerElement: null,\n // used in a combobox/datepicker scenario\n multiSelect: false,\n // todo\n useAriaChecked: true,\n // doubles up on support for aria-selected to announce visible selected/checked state\n valueSelector: \".listbox__value\" // Selector to get value from\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this.el = widgetEl;\n\n // in cases such as combobox, the active-descendant logic is controlled by a parent widget\n this._activeDescendantRootEl = this._options.listboxOwnerElement || this.el;\n\n // todo: not sure this check is needed any more\n if (widgetEl.getAttribute(\"role\") === \"listbox\") {\n this._listboxEl = widgetEl;\n } else {\n this._listboxEl = this.el.querySelector(\"[role=listbox]\");\n }\n if (!this._options.focusableElement && this._listboxEl.getAttribute(\"tabindex\") === null) {\n this._listboxEl.setAttribute(\"tabindex\", \"0\");\n }\n PreventScrollKeys.add(this.el);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onClickListener = _onClick.bind(this);\n this._onFirstMouseDownListener = _onFirstMouseDown.bind(this);\n this._onFirstFocusListener = _onFirstFocus.bind(this);\n this._onActiveDescendantChangeListener = _onActiveDescendantChange.bind(this);\n this._onMutationListener = _onMutation.bind(this);\n this.el.classList.add(\"listbox--js\");\n if (!this._options.customElementMode) {\n this._mutationObserver = new MutationObserver(this._onMutationListener);\n this._observeMutations();\n this._observeEvents();\n }\n this._activeDescendant = ActiveDescendant.createLinear(this._activeDescendantRootEl, this._options.focusableElement || this._listboxEl, this._listboxEl.parentElement, \"[role=option]\", {\n activeDescendantClassName: this._options.activeDescendantClassName,\n autoInit: this._options.autoInit,\n autoReset: this._options.autoReset,\n autoScroll: this._options.autoScroll,\n axis: \"y\"\n });\n }\n _observeMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.observe(this._listboxEl, {\n attributeFilter: [\"aria-selected\"],\n attributes: true,\n childList: true,\n subtree: true\n });\n }\n }\n _unobserveMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.disconnect();\n }\n }\n _observeEvents() {\n if (this._destroyed !== true) {\n this._activeDescendantRootEl.addEventListener(\"activeDescendantChange\", this._onActiveDescendantChangeListener);\n this._listboxEl.addEventListener(\"mousedown\", this._onFirstMouseDownListener, {\n once: true\n });\n this._listboxEl.addEventListener(\"focus\", this._onFirstFocusListener, {\n once: true\n });\n this._listboxEl.addEventListener(\"keydown\", this._onKeyDownListener);\n this._listboxEl.addEventListener(\"click\", this._onClickListener);\n }\n }\n _unobserveEvents() {\n this._listboxEl.removeEventListener(\"keydown\", this._onKeyDownListener);\n this._listboxEl.removeEventListener(\"click\", this._onClickListener);\n this._listboxEl.removeEventListener(\"focus\", this._onFirstFocusListener);\n this._listboxEl.removeEventListener(\"mousedown\", this._onFirstMouseDownListener);\n this._activeDescendantRootEl.removeEventListener(\"activeDescendantChange\", this._onActiveDescendantChangeListener);\n }\n get index() {\n return this.items.findIndex(el => el.getAttribute(\"aria-selected\") === \"true\");\n }\n get items() {\n return this._activeDescendant.items;\n }\n select(index) {\n this._unobserveMutations();\n if (this.index !== index) {\n this.unselect(this.index);\n const itemEl = this._activeDescendant.items[index];\n if (itemEl && itemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n const matchingItem = this.items[index];\n let optionValue;\n matchingItem.setAttribute(\"aria-selected\", \"true\");\n if (this._options.useAriaChecked === true) {\n matchingItem.setAttribute(\"aria-checked\", \"true\");\n }\n optionValue = matchingItem.innerText;\n\n // Check if value selector is present and use that to get innerText instead\n // If its not present, will default to innerText of the whole item\n if (this._options.valueSelector) {\n const valueSelector = matchingItem.querySelector(this._options.valueSelector);\n if (valueSelector) {\n optionValue = valueSelector.innerText;\n }\n }\n this.el.dispatchEvent(new CustomEvent(\"makeup-listbox-change\", {\n detail: {\n el: matchingItem,\n optionIndex: index,\n optionValue\n }\n }));\n }\n }\n this._observeMutations();\n }\n unselect(index) {\n this._unobserveMutations();\n const itemEl = this.items[index];\n if (itemEl && itemEl.getAttribute(\"aria-disabled\") !== \"true\") {\n const matchingItem = this.items[index];\n matchingItem.setAttribute(\"aria-selected\", \"false\");\n if (this._options.useAriaChecked === true) {\n matchingItem.setAttribute(\"aria-checked\", \"false\");\n }\n }\n this._observeMutations();\n }\n destroy() {\n this._destroyed = true;\n this._unobserveMutations();\n this._unobserveEvents();\n this._onKeyDownListener = null;\n this._onClickListener = null;\n this._onFirstMouseDownListener = null;\n this._onFirstFocusListener = null;\n this._onActiveDescendantChangeListener = null;\n this._onMutationListener = null;\n }\n}\nexports.default = _default;\nfunction _onFirstMouseDown() {\n this._isMouseDown = true;\n}\n\n// set activeDescendant on first keyboard focus\nfunction _onFirstFocus() {\n if (!this._isMouseDown) {\n this._activeDescendant.index = this.index === -1 ? 0 : this.index;\n }\n this._isMouseDown = false;\n}\nfunction _onClick(e) {\n const toEl = e.target.closest(\"[role=option]\");\n if (toEl) {\n this.select(this.items.indexOf(toEl));\n }\n}\nfunction _onKeyDown(e) {\n if (e.keyCode === 13 || e.keyCode === 32) {\n this.select(this._activeDescendant.index);\n }\n}\nfunction _onActiveDescendantChange(e) {\n const {\n toIndex\n } = e.detail;\n const toEl = this.items[toIndex];\n if (this._options.autoSelect === true && toEl) {\n this.select(toIndex);\n }\n}\nfunction _onMutation(mutationsList) {\n for (const mutation of mutationsList) {\n if (mutation.type === \"attributes\") {\n this.el.dispatchEvent(new CustomEvent(\"makeup-listbox-mutation\", {\n detail: {\n attributeName: mutation.attributeName\n }\n }));\n }\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.createLinear = createLinear;\nvar KeyEmitter = _interopRequireWildcard(require(\"makeup-key-emitter\"));\nvar ExitEmitter = _interopRequireWildcard(require(\"makeup-exit-emitter\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n axis: \"both\",\n autoInit: \"interactive\",\n autoReset: \"current\",\n ignoreByDelegateSelector: null,\n wrap: false\n};\nfunction isItemNavigable(el) {\n return !el.hidden && el.getAttribute(\"aria-disabled\") !== \"true\";\n}\nfunction isIndexNavigable(items, index) {\n return index >= 0 && index < items.length ? isItemNavigable(items[index]) : false;\n}\nfunction findNavigableItems(items) {\n return items.filter(isItemNavigable);\n}\nfunction findFirstNavigableIndex(items) {\n return items.findIndex(item => isItemNavigable(item));\n}\nfunction findLastNavigableIndex(items) {\n // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it\n return items.indexOf(findNavigableItems(items).reverse()[0]);\n}\nfunction findIndexByAttribute(items, attribute, value) {\n return items.findIndex(item => isItemNavigable(item) && item.getAttribute(attribute) === value);\n}\nfunction findFirstNavigableAriaCheckedIndex(items) {\n return findIndexByAttribute(items, \"aria-checked\", \"true\");\n}\nfunction findFirstNavigableAriaSelectedIndex(items) {\n return findIndexByAttribute(items, \"aria-selected\", \"true\");\n}\nfunction findIgnoredByDelegateItems(el, options) {\n return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];\n}\nfunction findPreviousNavigableIndex(items, index, wrap) {\n let previousNavigableIndex = -1;\n if (index === null || atStart(items, index)) {\n if (wrap === true) {\n previousNavigableIndex = findLastNavigableIndex(items);\n }\n } else {\n let i = index;\n while (--i >= 0) {\n if (isItemNavigable(items[i])) {\n previousNavigableIndex = i;\n break;\n }\n }\n }\n return previousNavigableIndex;\n}\nfunction findNextNavigableIndex(items, index, wrap) {\n let nextNavigableIndex = -1;\n if (index === null) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n } else if (atEnd(items, index)) {\n if (wrap === true) {\n nextNavigableIndex = findFirstNavigableIndex(items);\n }\n } else {\n let i = index;\n while (++i < items.length) {\n if (isItemNavigable(items[i])) {\n nextNavigableIndex = i;\n break;\n }\n }\n }\n return nextNavigableIndex;\n}\n\n// returning -1 means not found\nfunction findIndexPositionByType(typeOrNum, items, currentIndex) {\n let index = -1;\n switch (typeOrNum) {\n case \"none\":\n index = null;\n break;\n case \"current\":\n index = currentIndex;\n break;\n case \"interactive\":\n index = findFirstNavigableIndex(items);\n break;\n case \"ariaChecked\":\n index = findFirstNavigableAriaCheckedIndex(items);\n break;\n case \"ariaSelected\":\n index = findFirstNavigableAriaSelectedIndex(items);\n break;\n case \"ariaSelectedOrInteractive\":\n index = findFirstNavigableAriaSelectedIndex(items);\n index = index === -1 ? findFirstNavigableIndex(items) : index;\n break;\n default:\n index = typeof typeOrNum === \"number\" || typeOrNum === null ? typeOrNum : -1;\n }\n return index;\n}\nfunction atStart(items, index) {\n return index === findFirstNavigableIndex(items);\n}\nfunction atEnd(items, index) {\n return index === findLastNavigableIndex(items);\n}\nfunction onKeyPrev(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onKeyNext(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);\n }\n}\nfunction onClick(e) {\n const itemIndex = this.indexOf(e.target.closest(this._itemSelector));\n if (isIndexNavigable(this.items, itemIndex)) {\n this.index = itemIndex;\n }\n}\nfunction onKeyHome(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findFirstNavigableIndex(this.items);\n }\n}\nfunction onKeyEnd(e) {\n const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);\n\n // todo: update KeyEmitter to deal with ignored items?\n if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {\n this.index = findLastNavigableIndex(this.items);\n }\n}\nfunction onFocusExit() {\n if (this.options.autoReset !== null) {\n this.reset();\n }\n}\nfunction onMutation(e) {\n const fromIndex = this.index;\n let toIndex = this.index;\n // https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord\n const {\n addedNodes,\n attributeName,\n removedNodes,\n target,\n type\n } = e[0];\n if (type === \"attributes\") {\n if (target === this.currentItem) {\n if (attributeName === \"aria-disabled\") {\n // current item was disabled - keep it as current index (until a keyboard navigation happens)\n toIndex = this.index;\n } else if (attributeName === \"hidden\") {\n // current item was hidden and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n }\n } else {\n toIndex = this.index;\n }\n } else if (type === \"childList\") {\n if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {\n // current item was removed and focus is lost - reset index to first interactive element\n toIndex = findFirstNavigableIndex(this.items);\n } else if (removedNodes.length > 0 || addedNodes.length > 0) {\n // nodes were added and/or removed - keep current item and resync its index\n toIndex = this.indexOf(this._cachedElement);\n }\n }\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelMutation\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n}\nclass NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n /** @member {typeof defaultOptions} */\n this.options = Object.assign({}, defaultOptions, selectedOptions);\n\n /** @member {HTMLElement} */\n this._el = el;\n\n /** @member {string} */\n this._itemSelector = itemSelector;\n }\n}\nclass LinearNavigationModel extends NavigationModel {\n /**\n * @param {HTMLElement} el\n * @param {string} itemSelector\n * @param {typeof defaultOptions} selectedOptions\n */\n constructor(el, itemSelector, selectedOptions) {\n super(el, itemSelector, selectedOptions);\n const fromIndex = this._index;\n const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);\n\n // do not use setter as it will trigger a change event\n this._index = toIndex;\n\n // always keep an element reference to the last item (for use in mutation observer)\n // todo: convert index to Tuple to store last/current values instead?\n this._cachedElement = this.items[toIndex];\n this._el.dispatchEvent(new CustomEvent(\"navigationModelInit\", {\n bubbles: false,\n detail: {\n firstInteractiveIndex: this.firstNavigableIndex,\n fromIndex,\n items: this.items,\n toIndex\n }\n }));\n }\n get currentItem() {\n return this.items[this.index];\n }\n\n // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed\n get items() {\n return [...this._el.querySelectorAll(`${this._itemSelector}`)];\n }\n get index() {\n return this._index;\n }\n\n /**\n * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)\n */\n set index(toIndex) {\n if (toIndex === this.index) {\n return;\n } else if (!isIndexNavigable(this.items, toIndex)) {\n // no-op. throw exception?\n } else {\n const fromIndex = this.index;\n // update cached element reference (for use in mutation observer if DOM node gets removed)\n this._cachedElement = this.items[toIndex];\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelChange\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n indexOf(element) {\n return this.items.indexOf(element);\n }\n reset() {\n const fromIndex = this.index;\n const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);\n if (toIndex !== fromIndex) {\n // do not use setter as it will trigger a navigationModelChange event\n this._index = toIndex;\n this._el.dispatchEvent(new CustomEvent(\"navigationModelReset\", {\n bubbles: false,\n detail: {\n fromIndex,\n toIndex\n }\n }));\n }\n }\n}\n\n// 2D Grid Model will go here\n\n/*\nclass GridModel extends NavigationModel {\n constructor(el, rowSelector, colSelector) {\n super();\n this._coords = null;\n }\n}\n*/\n\nclass NavigationEmitter {\n /**\n * @param {HTMLElement} el\n * @param {LinearNavigationModel} model\n */\n constructor(el, model) {\n this.model = model;\n this.el = el;\n this._keyPrevListener = onKeyPrev.bind(model);\n this._keyNextListener = onKeyNext.bind(model);\n this._keyHomeListener = onKeyHome.bind(model);\n this._keyEndListener = onKeyEnd.bind(model);\n this._clickListener = onClick.bind(model);\n this._focusExitListener = onFocusExit.bind(model);\n this._observer = new MutationObserver(onMutation.bind(model));\n KeyEmitter.addKeyDown(this.el);\n ExitEmitter.addFocusExit(this.el);\n const axis = model.options.axis;\n if (axis === \"both\" || axis === \"x\") {\n this.el.addEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n }\n if (axis === \"both\" || axis === \"y\") {\n this.el.addEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.addEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n }\n this.el.addEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.addEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.addEventListener(\"click\", this._clickListener);\n this.el.addEventListener(\"focusExit\", this._focusExitListener);\n this._observer.observe(this.el, {\n childList: true,\n subtree: true,\n attributeFilter: [\"aria-disabled\", \"hidden\"],\n attributes: true,\n attributeOldValue: true\n });\n }\n destroy() {\n KeyEmitter.removeKeyDown(this.el);\n ExitEmitter.removeFocusExit(this.el);\n this.el.removeEventListener(\"arrowLeftKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowRightKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"arrowUpKeyDown\", this._keyPrevListener);\n this.el.removeEventListener(\"arrowDownKeyDown\", this._keyNextListener);\n this.el.removeEventListener(\"homeKeyDown\", this._keyHomeListener);\n this.el.removeEventListener(\"endKeyDown\", this._keyEndListener);\n this.el.removeEventListener(\"click\", this._clickListener);\n this.el.removeEventListener(\"focusExit\", this._focusExitListener);\n this._observer.disconnect();\n }\n}\nfunction createLinear(el, itemSelector, selectedOptions) {\n const model = new LinearNavigationModel(el, itemSelector, selectedOptions);\n return new NavigationEmitter(el, model);\n}\n\n/*\nstatic createGrid(el, rowSelector, colSelector, selectedOptions) {\n return null;\n}\n*/\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst sequenceMap = {};\nconst defaultPrefix = \"nid\";\nconst randomPortion = createRandomPortion(3);\nfunction randomNumber(max) {\n return Math.floor(Math.random() * max);\n}\nfunction createRandomPortion(size) {\n const letters = \"abcdefghijklmnopqrstuvwxyz\";\n const digits = \"0123456789\";\n const allChars = letters + digits;\n\n // to ensure a valid HTML ID (when prefix is empty), first character must be a letter\n let portion = letters[randomNumber(25)];\n\n // start iterating from 1, as we already have our first char\n for (let i = 1; i < size; i++) {\n portion += allChars[randomNumber(35)];\n }\n return portion;\n}\nfunction _default(el) {\n let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultPrefix;\n const separator = prefix === \"\" ? \"\" : \"-\";\n\n // join first prefix with random portion to create key\n const key = `${prefix}${separator}${randomPortion}`;\n\n // initialise key in sequence map if necessary\n sequenceMap[key] = sequenceMap[key] || 0;\n if (!el.id) {\n el.setAttribute(\"id\", `${key}-${sequenceMap[key]++}`);\n }\n return el.id;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.add = add;\nexports.remove = remove;\nfunction onKeyDown(e) {\n if (e.keyCode >= 32 && e.keyCode <= 40) {\n e.preventDefault();\n }\n}\nfunction add(el) {\n el.addEventListener(\"keydown\", onKeyDown);\n}\nfunction remove(el) {\n el.removeEventListener(\"keydown\", onKeyDown);\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/combobox\");\nvar _makeupCombobox = _interopRequireDefault(require(\"makeup-combobox\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const Combobox = require('makeup-combobox').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".combobox\").forEach(function (el, i) {\n const widget = new _makeupCombobox.default(el, {\n autoSelect: el.dataset.makeupAutoSelect === \"false\" ? false : true\n });\n el.addEventListener(\"makeup-combobox-change\", function (e) {\n console.log(e.type, e.detail);\n });\n el.addEventListener(\"makeup-combobox-mutation\", function (e) {\n console.log(e.type, e.detail);\n });\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-confirm-dialog/index.css b/docs/ui/makeup-confirm-dialog/index.css index a743e806..8883a623 100644 --- a/docs/ui/makeup-confirm-dialog/index.css +++ b/docs/ui/makeup-confirm-dialog/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-confirm-dialog/index.css.map b/docs/ui/makeup-confirm-dialog/index.css.map index 059f917e..660c5ca8 100644 --- a/docs/ui/makeup-confirm-dialog/index.css.map +++ b/docs/ui/makeup-confirm-dialog/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-confirm-dialog/index.css","mappings":"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U;AACd;AACA;IACI;;wBAEoB;AACxB;AACA;IACI,mBAAmB;IACnB,eAAe;IACf,2BAA2B;AAC/B;AACA;;IAEI,4BAA4B;AAChC;AACA;;IAEI,4BAA4B;IAC5B,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;IAEI,kBAAkB;AACtB;AACA;;;;;;IAMI;;;KAGC;IACD;;;KAGC;AACL;;ACxrBA;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;AACtC;AACA;IACI,uBAAuB;IACvB,gDAAgD;IAChD,QAAQ;IACR,uBAAuB;IACvB,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI;;;KAGC;IACD,sEAAsE;IACtE,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,YAAY;IACZ,+BAA+B;IAC/B,gCAAgC;IAChC,eAAe;IACf,4BAA4B;IAC5B,gBAAgB;IAChB,gBAAgB;IAChB,2BAA2B;IAC3B,+BAA+B;AACnC;AACA;IACI,mCAAmC;IACnC,mCAAmC;IACnC,iBAAiB;IACjB,SAAS;AACb;AACA;IACI,4BAA4B;IAC5B,8BAA8B;AAClC;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI,iBAAiB;AACrB;AACA;;IAEI,+BAA+B;AACnC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,mBAAmB;AACvB;AACA;;IAEI,sBAAsB;AAC1B;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,yCAAyC;IAC7C;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;AACJ","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/confirm-dialog/confirm-dialog.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.confirm-dialog[role=\"dialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.confirm-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.confirm-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto;\n margin-left: var(--spacing-200);\n margin-right: var(--spacing-200);\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n padding: var(--spacing-200);\n will-change: opacity, transform;\n}\n.confirm-dialog__title {\n font-size: var(--font-size-large-1);\n font-weight: var(--font-weight-600);\n line-height: 28px;\n margin: 0;\n}\n.confirm-dialog__main {\n margin: var(--spacing-200) 0;\n min-height: var(--spacing-200);\n}\n.confirm-dialog__main > :first-child {\n margin-top: 0;\n}\n.confirm-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.confirm-dialog__footer {\n text-align: right;\n}\na.confirm-dialog__confirm,\nbutton.confirm-dialog__confirm {\n margin-left: var(--spacing-100);\n}\n.confirm-dialog--hide.confirm-dialog--mask-fade,\n.confirm-dialog--hide.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show.confirm-dialog--mask-fade,\n.confirm-dialog--show.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.confirm-dialog--hide.confirm-dialog--hide,\n.confirm-dialog--hide.confirm-dialog--show-init,\n.confirm-dialog--show-init.confirm-dialog--hide,\n.confirm-dialog--show-init.confirm-dialog--show-init {\n display: flex;\n}\n.confirm-dialog--hide.confirm-dialog--mask-fade,\n.confirm-dialog--hide.confirm-dialog--mask-fade-slow,\n.confirm-dialog--show-init.confirm-dialog--mask-fade,\n.confirm-dialog--show-init.confirm-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate,\n.confirm-dialog--hide .confirm-dialog__window--animate > *,\n.confirm-dialog--hide .confirm-dialog__window--fade,\n.confirm-dialog--show-init .confirm-dialog__window--animate,\n.confirm-dialog--show-init .confirm-dialog__window--animate > *,\n.confirm-dialog--show-init .confirm-dialog__window--fade {\n opacity: 0;\n}\n.confirm-dialog--hide-init.confirm-dialog--hide-init,\n.confirm-dialog--hide-init.confirm-dialog--show,\n.confirm-dialog--show.confirm-dialog--hide-init,\n.confirm-dialog--show.confirm-dialog--show {\n display: flex;\n}\n.confirm-dialog--hide-init.confirm-dialog--mask-fade,\n.confirm-dialog--hide-init.confirm-dialog--mask-fade-slow,\n.confirm-dialog--show.confirm-dialog--mask-fade,\n.confirm-dialog--show.confirm-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.confirm-dialog--hide-init .confirm-dialog__window--animate,\n.confirm-dialog--hide-init .confirm-dialog__window--animate > *,\n.confirm-dialog--hide-init .confirm-dialog__window--fade,\n.confirm-dialog--show .confirm-dialog__window--animate,\n.confirm-dialog--show .confirm-dialog__window--animate > *,\n.confirm-dialog--show .confirm-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .confirm-dialog--hide.confirm-dialog--mask-fade,\n .confirm-dialog--hide.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .confirm-dialog--hide .confirm-dialog__window--animate,\n .confirm-dialog--hide .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .confirm-dialog--hide .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .confirm-dialog--show.confirm-dialog--mask-fade,\n .confirm-dialog--show.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .confirm-dialog--show .confirm-dialog__window--animate,\n .confirm-dialog--show .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .confirm-dialog--show .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.confirm-dialog--hide-init .confirm-dialog__window--animate,\n.confirm-dialog--show .confirm-dialog__window--animate {\n transform: scale(1);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate,\n.confirm-dialog--show-init .confirm-dialog__window--animate {\n transform: scale(0.75);\n}\n@media (prefers-reduced-motion) {\n .confirm-dialog--hide .confirm-dialog__window--animate,\n .confirm-dialog--hide-init .confirm-dialog__window--animate,\n .confirm-dialog--show .confirm-dialog__window--animate,\n .confirm-dialog--show-init .confirm-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .confirm-dialog__window {\n max-width: calc(88% - var(--spacing-400));\n }\n}\n@media (min-width: 1024px) {\n .confirm-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-confirm-dialog/index.css","mappings":"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ACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI,iBAAiB;AACrB;AACA;;IAEI,+BAA+B;AACnC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,mBAAmB;AACvB;AACA;;IAEI,sBAAsB;AAC1B;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,yCAAyC;IAC7C;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;AACJ","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/confirm-dialog/confirm-dialog.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.confirm-dialog[role=\"dialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.confirm-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.confirm-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto;\n margin-left: var(--spacing-200);\n margin-right: var(--spacing-200);\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n padding: var(--spacing-200);\n will-change: opacity, transform;\n}\n.confirm-dialog__title {\n font-size: var(--font-size-large-1);\n font-weight: var(--font-weight-600);\n line-height: 28px;\n margin: 0;\n}\n.confirm-dialog__main {\n margin: var(--spacing-200) 0;\n min-height: var(--spacing-200);\n}\n.confirm-dialog__main > :first-child {\n margin-top: 0;\n}\n.confirm-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.confirm-dialog__footer {\n text-align: right;\n}\na.confirm-dialog__confirm,\nbutton.confirm-dialog__confirm {\n margin-left: var(--spacing-100);\n}\n.confirm-dialog--hide.confirm-dialog--mask-fade,\n.confirm-dialog--hide.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show.confirm-dialog--mask-fade,\n.confirm-dialog--show.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.confirm-dialog--hide.confirm-dialog--hide,\n.confirm-dialog--hide.confirm-dialog--show-init,\n.confirm-dialog--show-init.confirm-dialog--hide,\n.confirm-dialog--show-init.confirm-dialog--show-init {\n display: flex;\n}\n.confirm-dialog--hide.confirm-dialog--mask-fade,\n.confirm-dialog--hide.confirm-dialog--mask-fade-slow,\n.confirm-dialog--show-init.confirm-dialog--mask-fade,\n.confirm-dialog--show-init.confirm-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate,\n.confirm-dialog--hide .confirm-dialog__window--animate > *,\n.confirm-dialog--hide .confirm-dialog__window--fade,\n.confirm-dialog--show-init .confirm-dialog__window--animate,\n.confirm-dialog--show-init .confirm-dialog__window--animate > *,\n.confirm-dialog--show-init .confirm-dialog__window--fade {\n opacity: 0;\n}\n.confirm-dialog--hide-init.confirm-dialog--hide-init,\n.confirm-dialog--hide-init.confirm-dialog--show,\n.confirm-dialog--show.confirm-dialog--hide-init,\n.confirm-dialog--show.confirm-dialog--show {\n display: flex;\n}\n.confirm-dialog--hide-init.confirm-dialog--mask-fade,\n.confirm-dialog--hide-init.confirm-dialog--mask-fade-slow,\n.confirm-dialog--show.confirm-dialog--mask-fade,\n.confirm-dialog--show.confirm-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.confirm-dialog--hide-init .confirm-dialog__window--animate,\n.confirm-dialog--hide-init .confirm-dialog__window--animate > *,\n.confirm-dialog--hide-init .confirm-dialog__window--fade,\n.confirm-dialog--show .confirm-dialog__window--animate,\n.confirm-dialog--show .confirm-dialog__window--animate > *,\n.confirm-dialog--show .confirm-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .confirm-dialog--hide.confirm-dialog--mask-fade,\n .confirm-dialog--hide.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .confirm-dialog--hide .confirm-dialog__window--animate,\n .confirm-dialog--hide .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .confirm-dialog--hide .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .confirm-dialog--show.confirm-dialog--mask-fade,\n .confirm-dialog--show.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .confirm-dialog--show .confirm-dialog__window--animate,\n .confirm-dialog--show .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .confirm-dialog--show .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.confirm-dialog--hide-init .confirm-dialog__window--animate,\n.confirm-dialog--show .confirm-dialog__window--animate {\n transform: scale(1);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate,\n.confirm-dialog--show-init .confirm-dialog__window--animate {\n transform: scale(0.75);\n}\n@media (prefers-reduced-motion) {\n .confirm-dialog--hide .confirm-dialog__window--animate,\n .confirm-dialog--hide-init .confirm-dialog__window--animate,\n .confirm-dialog--show .confirm-dialog__window--animate,\n .confirm-dialog--show-init .confirm-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .confirm-dialog__window {\n max-width: calc(88% - var(--spacing-400));\n }\n}\n@media (min-width: 1024px) {\n .confirm-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-confirm-dialog/index.html b/docs/ui/makeup-confirm-dialog/index.html index d3614809..9a00c1d2 100644 --- a/docs/ui/makeup-confirm-dialog/index.html +++ b/docs/ui/makeup-confirm-dialog/index.html @@ -2,48 +2,41 @@ makeup-confirm-dialog + + + - -
                                    -
                                    -

                                    makeup-confirm-dialog

                                    -

                                    Confirm-Dialog is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    - This page was loaded with the dialog in an "open" state. To see examples of dialogs opened by button click, - visit the makeup-dialog-button page. -

                                    -
                                    -
                                    - +
                                    diff --git a/docs/ui/makeup-confirm-dialog/index.min.js b/docs/ui/makeup-confirm-dialog/index.min.js index 24b5ddb3..737db3a1 100644 --- a/docs/ui/makeup-confirm-dialog/index.min.js +++ b/docs/ui/makeup-confirm-dialog/index.min.js @@ -121,9 +121,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(4490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(8448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(4490); +var _makeupScreenreaderTrap = __webpack_require__(8448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -146,6 +145,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -154,6 +158,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -161,7 +171,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -172,7 +182,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -188,8 +198,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -202,7 +212,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -211,11 +224,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/docs/ui/makeup-confirm-dialog/index.min.js.map b/docs/ui/makeup-confirm-dialog/index.min.js.map index b2afe59f..f419d6b7 100644 --- a/docs/ui/makeup-confirm-dialog/index.min.js.map +++ b/docs/ui/makeup-confirm-dialog/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-confirm-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0C;;;;;;;;ACAlD,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,IAAsB;AACzE,+CAA+C,mBAAO,CAAC,IAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACxDa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;UCzCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAA2B;AACnC,kDAAkD,mBAAO,CAAC,GAAuB;AACjF,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/confirm-dialog.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/confirm-dialog/confirm-dialog.css?448d","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-confirm-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-confirm-dialog/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/confirm-dialog/confirm-dialog.css');\n","require('./dist/global/global.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n baseClass: \"confirm-dialog\",\n closeButtonSelector: \".confirm-dialog__close\",\n quickDismiss: true,\n confirmButtonSelector: \".confirm-dialog__confirm\",\n focusManagementIndex: 1,\n rejectButtonSelector: \".confirm-dialog__reject\",\n windowSelector: \".confirm-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._confirmButtonEl = this._el.querySelector(this._options.confirmButtonSelector);\n this._rejectButtonEl = this._el.querySelector(this._options.rejectButtonSelector);\n this._onConfirmButtonClickListener = _onConfirmButtonClick.bind(this);\n this._onRejectButtonClickListener = _onRejectButtonClick.bind(this);\n this._confirmButtonEl.addEventListener(\"click\", this._onConfirmButtonClickListener);\n this._rejectButtonEl.addEventListener(\"click\", this._onRejectButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._confirmButtonEl.removeEventListener(\"click\", this._onConfirmButtonClickListener);\n this._rejectButtonEl.removeEventListener(\"click\", this._onRejectButtonClickListener);\n }\n confirm() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-confirm\"));\n }\n reject() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-reject\"));\n }\n destroy() {\n super.destroy();\n this._onConfirmButtonClickListener = null;\n this._onRejectButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onConfirmButtonClick() {\n this.confirm();\n}\nfunction _onRejectButtonClick() {\n this.reject();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/confirm-dialog\");\nvar _makeupConfirmDialog = _interopRequireDefault(require(\"makeup-confirm-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const ConfirmDialog = require('makeup-confirm-dialog');\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".confirm-dialog\").forEach(function (el, i) {\n const widget = new _makeupConfirmDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-confirm-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0C;;;;;;;;ACAlD,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,IAAsB;AACxD,8BAA8B,mBAAO,CAAC,IAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACxDa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;UCzCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAA2B;AACnC,kDAAkD,mBAAO,CAAC,GAAuB;AACjF,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/confirm-dialog.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/confirm-dialog/confirm-dialog.css?448d","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-confirm-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-confirm-dialog/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/confirm-dialog/confirm-dialog.css');\n","require('./dist/global/global.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n baseClass: \"confirm-dialog\",\n closeButtonSelector: \".confirm-dialog__close\",\n quickDismiss: true,\n confirmButtonSelector: \".confirm-dialog__confirm\",\n focusManagementIndex: 1,\n rejectButtonSelector: \".confirm-dialog__reject\",\n windowSelector: \".confirm-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._confirmButtonEl = this._el.querySelector(this._options.confirmButtonSelector);\n this._rejectButtonEl = this._el.querySelector(this._options.rejectButtonSelector);\n this._onConfirmButtonClickListener = _onConfirmButtonClick.bind(this);\n this._onRejectButtonClickListener = _onRejectButtonClick.bind(this);\n this._confirmButtonEl.addEventListener(\"click\", this._onConfirmButtonClickListener);\n this._rejectButtonEl.addEventListener(\"click\", this._onRejectButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._confirmButtonEl.removeEventListener(\"click\", this._onConfirmButtonClickListener);\n this._rejectButtonEl.removeEventListener(\"click\", this._onRejectButtonClickListener);\n }\n confirm() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-confirm\"));\n }\n reject() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-reject\"));\n }\n destroy() {\n super.destroy();\n this._onConfirmButtonClickListener = null;\n this._onRejectButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onConfirmButtonClick() {\n this.confirm();\n}\nfunction _onRejectButtonClick() {\n this.reject();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/confirm-dialog\");\nvar _makeupConfirmDialog = _interopRequireDefault(require(\"makeup-confirm-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const ConfirmDialog = require('makeup-confirm-dialog');\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".confirm-dialog\").forEach(function (el, i) {\n const widget = new _makeupConfirmDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-dialog-button/index.css b/docs/ui/makeup-dialog-button/index.css index 2257a3e7..af286166 100644 --- a/docs/ui/makeup-dialog-button/index.css +++ b/docs/ui/makeup-dialog-button/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-dialog-button/index.css.map b/docs/ui/makeup-dialog-button/index.css.map index bebd0298..24ed8a6c 100644 --- a/docs/ui/makeup-dialog-button/index.css.map +++ b/docs/ui/makeup-dialog-button/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-dialog-button/index.css","mappings":"AAAA;EACE,cAAc;EACd,gBAAgB;EAChB,WAAW;AACb;;ACJA;IACI,0BAA0B;IAC1B,yBAAyB;IACzB,0BAA0B;IAC1B,mCAAmC;IACnC,oCAAoC;IACpC,kCAAkC;IAClC,kCAAkC;IAClC,kCAAkC;IAClC,gCAAgC;IAChC,+BAA+B;IAC/B,+BAA+B;IAC/B,gCAAgC;IAChC,+BAA+B;IAC/B,yBAAyB;IACzB,0BAA0B;IAC1B,yBAAyB;IACzB,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,qCAAqC;IACrC,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,kBAAkB;IAClB,sBAAsB;IACtB,oBAAoB;IACpB,qBAAqB;IACrB,qBAAqB;IACrB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,qBAAqB;IACrB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,qCAAqC;IACrC,sCAAsC;IACtC,qCAAqC;IACrC,kCAAkC;IAClC,kCAAkC;IAClC,4BAA4B;IAC5B,6BAA6B;IAC7B,4BAA4B;IAC5B,oCAAoC;IACpC,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,qDAAqD;IACrD,qDAAqD;IACrD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,oDAAoD;IACpD,oDAAoD;IACpD,qDAAqD;IACrD,qDAAqD;IACrD,sDAAsD;IACtD,sDAAsD;IACtD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,qDAAqD;IACrD,qDAAqD;IACrD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,+CAA+C;IAC/C,+CAA+C;IAC/C,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,uCAAuC;IACvC,+BAA+B;IAC/B,qCAAqC;IACrC,qCAAqC;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,kCAAkC;IAClC,0BAA0B;IAC1B,6BAA6B;IAC7B,4BAA4B;IAC5B,6BAA6B;IAC7B,4BAA4B;IAC5B,2BAA2B;IAC3B,wBAAwB;IACxB,0BAA0B;IAC1B,8BAA8B;IAC9B,2BAA2B;IAC3B,qCAAqC;IACrC,iCAAiC;IACjC,2CAA2C;IAC3C,sBAAsB;IACtB,sBAAsB;IACtB,+BAA+B;IAC/B,+BAA+B;IAC/B,+BAA+B;IAC/B,gCAAgC;IAChC,iCAAiC;IACjC,iCAAiC;IACjC,iCAAiC;IACjC,+BAA+B;IAC/B,+BAA+B;IAC/B,gCAAgC;IAChC,qDAAqD;IACrD,wDAAwD;IACxD,gDAAgD;IAChD,qDAAqD;IACrD,oDAAoD;IACpD,sDAAsD;IACtD,qDAAqD;IACrD,oDAAoD;IACpD,4BAA4B;IAC5B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,0BAA0B;IAC1B,wBAAwB;IACxB,oBAAoB;IACpB,oBAAoB;IACpB,kBAAkB;IAClB,0BAA0B;IAC1B,yBAAyB;IACzB,gCAAgC;IAChC,mBAAmB;IACnB;gFAC4E;IAC5E,qDAAqD;IACrD,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,iBAAiB;IACjB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,iBAAiB;IACjB,mBAAmB;IACnB,iBAAiB;IACjB,+BAA+B;IAC/B,gCAAgC;IAChC,uDAAuD;IACvD,kDAAkD;IAClD,yDAAyD;IACzD,oDAAoD;IACpD,uDAAuD;IACvD,sDAAsD;IACtD,uDAAuD;IACvD,sDAAsD;IACtD,sDAAsD;IACtD,uDAAuD;IACvD,oDAAoD;IACpD,mDAAmD;IACnD,oDAAoD;IACpD,iDAAiD;IACjD,uBAAuB;IACvB,yBAAyB;IACzB,yBAAyB;IACzB,sCAAsC;IACtC,sCAAsC;IACtC,mCAAmC;IACnC,gCAAgC;IAChC,2CAA2C;IAC3C,0CAA0C;IAC1C,4CAA4C;IAC5C,yCAAyC;IACzC,kBAAkB;IAClB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,yCAAyC;IACzC,sCAAsC;IACtC,qCAAqC;IACrC,uCAAuC;IACvC,wBAAwB;IACxB,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,oBAAoB;IACpB,0CAA0C;IAC1C,wCAAwC;IACxC,6CAA6C;IAC7C,0CAA0C;IAC1C,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,yDAAyD;IACzD,kCAAkC;AACtC;;ACjaA;IACI,qCAAqC;IACrC,qCAAqC;IACrC,sCAAsC;IACtC,sCAAsC;IACtC,uCAAuC;IACvC,uCAAuC;IACvC,oCAAoC;IACpC,oCAAoC;IACpC,uCAAuC;IACvC,gDAAgD;IAChD,kDAAkD;IAClD,qDAAqD;IACrD,mDAAmD;IACnD,qDAAqD;IACrD,oDAAoD;IACpD,qDAAqD;IACrD,yDAAyD;IACzD,oDAAoD;IACpD,kEAAkE;IAClE,sDAAsD;IACtD,mDAAmD;IACnD,iDAAiD;IACjD,qDAAqD;IACrD,kDAAkD;IAClD,4CAA4C;IAC5C,8CAA8C;IAC9C,iDAAiD;IACjD,gDAAgD;IAChD,+CAA+C;IAC/C,kDAAkD;IAClD,qDAAqD;IACrD,oDAAoD;IACpD,mDAAmD;IACnD,mDAAmD;IACnD,+CAA+C;IAC/C,+CAA+C;IAC/C,6CAA6C;IAC7C,qCAAqC;IACrC,sCAAsC;IACtC,wCAAwC;IACxC,uCAAuC;IACvC,gDAAgD;IAChD,kDAAkD;IAClD,qDAAqD;IACrD,oDAAoD;IACpD,gEAAgE;IAChE,sDAAsD;IACtD,sDAAsD;IACtD,yDAAyD;IACzD,wDAAwD;IACxD,uDAAuD;IACvD,sDAAsD;IACtD,uDAAuD;IACvD,oDAAoD;IACpD,sDAAsD;IACtD,iDAAiD;IACjD;;;;;KAKC;IACD;;;;;KAKC;IACD;;;;;;;KAOC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;;;;;;;KAUC;IACD;;;;;;;;;;KAUC;IACD,0CAA0C;IAC1C,6BAA6B;IAC7B,4DAA4D;IAC5D,4DAA4D;IAC5D,8DAA8D;IAC9D,8DAA8D;IAC9D,4CAA4C;IAC5C,8DAA8D;IAC9D,8CAA8C;IAC9C,8DAA8D;IAC9D,8CAA8C;IAC9C,gEAAgE;IAChE,gDAAgD;IAChD,gEAAgE;IAChE,iDAAiD;IACjD,kEAAkE;IAClE,gEAAgE;IAChE,8DAA8D;IAC9D,gDAAgD;IAChD,2DAA2D;IAC3D,gEAAgE;IAChE,8DAA8D;IAC9D,gEAAgE;IAChE,8DAA8D;IAC9D,kEAAkE;IAClE,sEAAsE;IACtE,qEAAqE;IACrE,kDAAkD;IAClD,iDAAiD;IACjD,uDAAuD;IACvD,uDAAuD;IACvD,6DAA6D;IAC7D,wDAAwD;IACxD,8DAA8D;IAC9D,sDAAsD;IACtD,qDAAqD;IACrD,2DAA2D;IAC3D,iDAAiD;IACjD,iDAAiD;IACjD,sDAAsD;IACtD,4CAA4C;IAC5C,mCAAmC;IACnC,oCAAoC;IACpC,qCAAqC;IACrC,sCAAsC;IACtC,gDAAgD;IAChD,uCAAuC;IACvC,iDAAiD;IACjD,oCAAoC;IACpC,qCAAqC;IACrC,mCAAmC;IACnC,oDAAoD;IACpD,oCAAoC;IACpC,qDAAqD;IACrD,sCAAsC;IACtC,uCAAuC;IACvC,iEAAiE;IACjE,kEAAkE;IAClE,+CAA+C;IAC/C,iDAAiD;IACjD,iDAAiD;IACjD,0DAA0D;IAC1D,uDAAuD;IACvD,0DAA0D;IAC1D,8DAA8D;IAC9D,2DAA2D;IAC3D,6DAA6D;IAC7D,0DAA0D;IAC1D,sDAAsD;IACtD,qDAAqD;IACrD,qDAAqD;IACrD,uDAAuD;IACvD,mEAAmE;IACnE,6DAA6D;IAC7D,mEAAmE;IACnE,+DAA+D;IAC/D,gEAAgE;IAChE,4DAA4D;IAC5D,kDAAkD;IAClD,oDAAoD;IACpD,wCAAwC;IACxC,2DAA2D;IAC3D,6DAA6D;IAC7D,2DAA2D;IAC3D,2DAA2D;IAC3D,wDAAwD;IACxD,0DAA0D;IAC1D,6DAA6D;IAC7D,0DAA0D;IAC1D,gEAAgE;IAChE,8DAA8D;IAC9D,6DAA6D;IAC7D,6DAA6D;IAC7D,gEAAgE;IAChE,6DAA6D;IAC7D,2DAA2D;IAC3D,qEAAqE;IACrE;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;IACD,yEAAyE;IACzE;;KAEC;IACD,uEAAuE;IACvE,qEAAqE;IACrE,yEAAyE;IACzE,yEAAyE;IACzE,qEAAqE;IACrE,uEAAuE;IACvE,0DAA0D;IAC1D,+CAA+C;IAC/C,gDAAgD;IAChD,4DAA4D;IAC5D,6DAA6D;IAC7D;;;;;;;KAOC;IACD;;;;;;;KAOC;IACD;;;;KAIC;IACD;;;;;KAKC;IACD;;;;KAIC;AACL;;ACxRA;IACI,iDAAiD;IACjD,sCAAsC;IACtC;;;kBAGc;IACd,gCAAgC;IAChC,4CAA4C;IAC5C,8BAA8B;AAClC;AACA;IACI,oBAAoB;AACxB;AACA;IACI,SAAS;IACT,UAAU;AACd;AACA;IACI,iCAAiC;AACrC;AACA;IACI,2CAA2C;AAC/C;AACA;IACI,2CAA2C;AAC/C;AACA;IACI,wCAAwC;AAC5C;AACA;;IAEI,uCAAuC;AAC3C;;ACjCA;;IAEI,YAAY;IACZ,cAAc;IACd,cAAc;AAClB;AACA;IACI,WAAW;AACf;AACA;IACI,SAAS;IACT,qBAAqB;IACrB,WAAW;IACX,gBAAgB;IAChB,UAAU;IACV,kBAAkB;IAClB,mBAAmB;IACnB,UAAU;AACd;AACA;IACI,eAAe;IACf,YAAY;IACZ,iBAAiB;IACjB,mBAAmB;IACnB,WAAW;AACf;AACA;IACI,YAAY;IACZ,WAAW;AACf;AACA;IACI,YAAY;IACZ,eAAe;AACnB;AACA;IACI,mBAAmB;IACnB,kBAAkB;IAClB,sBAAsB;AAC1B;AACA;IACI,gBAAgB;IAChB,eAAe;AACnB;AACA;IACI,mBAAmB;IACnB,kBAAkB;IAClB,aAAa;IACb,uBAAuB;IACvB,gBAAgB;IAChB,kBAAkB;AACtB;AACA;IACI,+BAA+B;IAC/B,WAAW;IACX,cAAc;IACd,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;IACI,qBAAqB;IACrB,gBAAgB;IAChB,eAAe;IACf,mBAAmB;AACvB;AACA;IACI,mBAAmB;IACnB,mBAAmB;IACnB,aAAa;IACb,uBAAuB;IACvB,gBAAgB;IAChB,kBAAkB;AACtB;AACA;IACI,+BAA+B;IAC/B,WAAW;IACX,cAAc;IACd,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;IACI,qBAAqB;IACrB,gBAAgB;IAChB,eAAe;IACf,mBAAmB;AACvB;AACA;IACI,0CAA0C;AAC9C;AACA;IACI,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;AACvB;AACA;IACI,uBAAuB;IACvB,2BAA2B;IAC3B,6BAA6B;AACjC;AACA;IACI,gDAAgD;IAChD,mBAAmB;AACvB;AACA;IACI,UAAU;AACd;AACA;IACI,WAAW;AACf;AACA;IACI,mDAAmD;IACnD,yBAAyB;IACzB,mBAAmB;IACnB,yBAAyB;IACzB,gBAAgB;AACpB;;ACpHA;IACI,qEAAqE;IACrE,2DAA2D;AAC/D;AACA;;IAEI,qBAAqB;IACrB,mBAAmB;IACnB,yBAAyB;IACzB,iBAAiB;IACjB,6CAA6C;IAC7C,sBAAsB;IACtB,cAAc;IACd,qBAAqB;IACrB,oBAAoB;IACpB,gCAAgC;IAChC,SAAS;IACT,gBAAgB;IAChB,eAAe;IACf,eAAe;IACf,kBAAkB;IAClB,qBAAqB;IACrB,sBAAsB;AAC1B;AACA;;;;IAII,YAAY;AAChB;AACA;;IAEI,iCAAiC;IACjC,oBAAoB;IACpB,gCAAgC;AACpC;AACA;;IAEI,aAAa;AACjB;AACA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI,yBAAyB;IACzB,eAAe;IACf,eAAe;IACf,uBAAuB;AAC3B;AACA;;;;IAII,yBAAyB;IACzB,aAAa;IACb,0BAA0B;AAC9B;AACA;;;;IAII,yBAAyB;AAC7B;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI,YAAY;IACZ,eAAe;IACf,gCAAgC;IAChC,iCAAiC;AACrC;AACA;;IAEI,cAAc;AAClB;AACA;;IAEI,WAAW;AACf;AACA;;IAEI,mBAAmB;IACnB,aAAa;IACb,uBAAuB;IACvB,WAAW;AACf;AACA;;IAEI,oBAAoB;AACxB;AACA;;IAEI,oBAAoB;IACpB,4BAA4B;AAChC;AACA;;IAEI,oBAAoB;AACxB;AACA;;IAEI,oBAAoB;IACpB,4BAA4B;AAChC;AACA;;;;IAII,8BAA8B;AAClC;AACA;;IAEI,kBAAkB;AACtB;AACA;;IAEI,sBAAsB;AAC1B;AACA;;IAEI,wBAAwB;AAC5B;AACA;;IAEI,SAAS;AACb;AACA;;IAEI,kBAAkB;IAClB,YAAY;IACZ,iBAAiB;IACjB,WAAW;AACf;AACA;;IAEI,gDAAgD;IAChD,wCAAwC;IACxC,wCAAwC;IACxC,gBAAgB;IAChB;wCACoC;AACxC;AACA;;IAEI,sBAAsB;AAC1B;AACA;;IAEI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;IACI,8CAA8C;AAClD;AACA;;IAEI,wCAAwC;AAC5C;AACA;;IAEI,mDAAmD;IACnD,2CAA2C;IAC3C,2CAA2C;IAC3C,gBAAgB;IAChB,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;;;;;;;IAUI,gDAAgD;AACpD;AACA;;;;;;;;;;IAUI,gDAAgD;AACpD;AACA;;;;;;;;;;IAUI,kDAAkD;AACtD;AACA;;IAEI,kDAAkD;IAClD,0CAA0C;AAC9C;AACA;IACI,YAAY;IACZ,cAAc;IACd,WAAW;AACf;AACA;IACI,iBAAiB;IACjB,kBAAkB;AACtB;AACA;IACI,gEAAgE;IAChE,wCAAwC;AAC5C;AACA;IACI,kEAAkE;IAClE,wCAAwC;AAC5C;AACA;;IAEI,yBAAyB;AAC7B;AACA;;IAEI,gBAAgB;AACpB;AACA;;IAEI,gBAAgB;AACpB;AACA;;IAEI;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI,oEAAoE;IACpE,wCAAwC;IACxC,qCAAqC;IACrC;wCACoC;AACxC;AACA;;IAEI,sBAAsB;AAC1B;AACA;;IAEI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;;;;;IAUI,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI,wCAAwC;IACxC,wCAAwC;AAC5C;AACA;;IAEI;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI,0EAA0E;IAC1E;wCACoC;AACxC;AACA;;IAEI,sBAAsB;AAC1B;AACA;;IAEI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;;;;;IAUI,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;;;;;;IAMI;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;IACI,wCAAwC;IACxC,wCAAwC;AAC5C;AACA;;IAEI,6CAA6C;IAC7C,kCAAkC;IAClC,gBAAgB;IAChB,eAAe;AACnB;AACA;;IAEI,6CAA6C;IAC7C,gCAAgC;IAChC,gBAAgB;IAChB,eAAe;AACnB;AACA;;IAEI,qBAAqB;IACrB,uEAAuE;IACvE,eAAe;IACf,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;IACI,eAAe;AACnB;AACA;IACI,eAAe;AACnB;AACA;;;;;;IAMI,yBAAyB;AAC7B;AACA;;IAEI,YAAY;IACZ,gBAAgB;AACpB;AACA;;;;IAII,kBAAkB;IAClB,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;AACvB;AACA;;IAEI,kCAAkC;IAClC,YAAY;IACZ,gBAAgB;IAChB,eAAe;AACnB;AACA;;;;IAII,kBAAkB;IAClB,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;AACvB;AACA;;IAEI,4BAA4B;AAChC;AACA;;IAEI,4BAA4B;IAC5B,iBAAiB;IACjB,eAAe;IACf,iBAAiB;IACjB,kBAAkB;AACtB;AACA;;;;;;IAMI;;;KAGC;AACL;AACA;IACI,iBAAiB;IACjB,cAAc;AAClB;AACA;IACI,gBAAgB;IAChB,mBAAmB;IACnB,iBAAiB;AACrB;AACA;IACI,sBAAsB;IACtB,qBAAqB;IACrB,gBAAgB;IAChB,mBAAmB;IACnB,iBAAiB;IACjB,oBAAoB;IACpB,kBAAkB;IAClB,gBAAgB;IAChB,uBAAuB;IACvB,wCAAwC;IACxC,sBAAsB;IACtB,mBAAmB;IACnB,wBAAwB;IACxB,UAAU;AACd;AACA;IACI;;wBAEoB;AACxB;AACA;IACI,mBAAmB;IACnB,eAAe;IACf,2BAA2B;AAC/B;AACA;;IAEI,4BAA4B;AAChC;AACA;;IAEI,4BAA4B;IAC5B,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;IAEI,kBAAkB;AACtB;AACA;;;;;;IAMI;;;KAGC;IACD;;;KAGC;AACL;;ACxrBA;IACI,qEAAqE;IACrE,2DAA2D;AAC/D;AACA;IACI,mBAAmB;IACnB,oBAAoB;AACxB;AACA;IACI,cAAc;AAClB;AACA;;IAEI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,mBAAmB;IACnB,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;;IAEI,mBAAmB;IACnB,mDAAmD;IACnD,6BAA6B;IAC7B,mBAAmB;IACnB,sBAAsB;IACtB,oBAAoB;IACpB,oBAAoB;IACpB,YAAY;IACZ,uBAAuB;IACvB,SAAS;IACT,UAAU;IACV,2BAA2B;IAC3B,WAAW;AACf;AACA;;IAEI,qCAAqC;IACrC,cAAc;IACd,kBAAkB;AACtB;AACA;;IAEI,aAAa;AACjB;AACA;;IAEI,gDAAgD;IAChD,wCAAwC;IACxC,wCAAwC;AAC5C;AACA;;IAEI,uCAAuC;AAC3C;AACA;;IAEI,oCAAoC;AACxC;AACA;;IAEI,YAAY;IACZ,WAAW;AACf;AACA;;IAEI,eAAe;AACnB;AACA;;IAEI,YAAY;IACZ,WAAW;AACf;AACA;;IAEI,YAAY;IACZ,WAAW;AACf;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BI,yBAAyB;AAC7B;AACA;IACI,qCAAqC;AACzC;AACA;;;;IAII,yBAAyB;IACzB,sCAAsC;AAC1C;AACA;;;;;;;;IAQI,sCAAsC;AAC1C;AACA;;IAEI,qCAAqC;AACzC;AACA;IACI,uCAAuC;AAC3C;AACA;;IAEI,iBAAiB;IACjB,kBAAkB;AACtB;AACA;;IAEI,UAAU;IACV,oBAAoB;IACpB,kBAAkB;IAClB,UAAU;IACV,UAAU;AACd;AACA;;;;;;;;IAQI,qCAAqC;AACzC;AACA;;;;;;;;IAQI,uCAAuC;AAC3C;AACA;;;;;;;;IAQI,oCAAoC;AACxC;AACA;;;;;;IAMI,iBAAiB;AACrB;AACA;;;;IAII,kDAAkD;IAClD,0CAA0C;AAC9C;AACA;;;;IAII,uCAAuC;AAC3C;AACA;;IAEI,gEAAgE;IAChE,wCAAwC;AAC5C;AACA;;IAEI,yBAAyB;IACzB,wCAAwC;IACxC,qCAAqC;AACzC;AACA;;;;;;;IAOI,+BAA+B;IAC/B,uBAAuB;AAC3B;AACA;;;;;IAKI,uBAAuB;AAC3B;AACA;;;;IAII,0CAA0C;AAC9C;AACA;;;;IAII,0CAA0C;AAC9C;AACA;;;;IAII,sCAAsC;AAC1C;AACA;;IAEI,yBAAyB;IACzB,wCAAwC;IACxC,qCAAqC;AACzC;AACA;;;;IAII,0CAA0C;AAC9C;;ACtRA;;IAEI;;;KAGC;IACD,qBAAqB;AACzB;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;IACD,0BAA0B;AAC9B;AACA;;;;IAII;;;KAGC;IACD,qBAAqB;AACzB;AACA;IACI,yBAAyB;IACzB,SAAS;IACT;;;KAGC;IACD,oBAAoB;IACpB,kBAAkB;IAClB,UAAU;IACV,0BAA0B;AAC9B;AACA;IACI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI,0BAA0B;AAC9B;AACA;;;;;;IAMI;;;KAGC;AACL;;ACxEA;IACI,4BAA4B;IAC5B,0BAA0B;AAC9B;;AAEA;IACI,mBAAmB;IACnB;;;KAGC;IACD,qEAAqE;IACrE,oEAAoE;IACpE,mBAAmB;IACnB,iBAAiB;IACjB,sBAAsB;IACtB,uEAAuE;IACvE,oBAAoB;IACpB,gCAAgC;IAChC,uBAAuB;IACvB,gBAAgB;IAChB,kBAAkB;IAClB,kBAAkB;AACtB;;AAEA;IACI,yBAAyB;IACzB,UAAU;AACd;;AAEA;;;;IAII;;;KAGC;IACD,2EAA2E;IAC3E,gDAAgD;AACpD;;AAEA;;IAEI,yBAAyB;IACzB,YAAY;AAChB;;AAEA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;IACI,yBAAyB;IACzB,YAAY;IACZ,sBAAsB;IACtB,cAAc;AAClB;;AAEA;IACI,oBAAoB;IACpB,iBAAiB;IACjB,cAAc;IACd,2BAA2B;IAC3B,gBAAgB;IAChB,sBAAsB;AAC1B;;AAEA;IACI,oBAAoB;IACpB,UAAU;IACV,sBAAsB;AAC1B;;AAEA;IACI,wCAAwC;AAC5C;;AAEA;IACI,sCAAsC;AAC1C;;AAEA;;IAEI,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,YAAY;IACZ,SAAS;IACT,aAAa;AACjB;;AAEA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI,0EAA0E;IAC1E,gBAAgB;IAChB,UAAU;AACd;;AAEA;IACI,+CAA+C;AACnD;;AAEA;IACI,6CAA6C;AACjD;;AAEA;;IAEI,mEAAmE;IACnE,oBAAoB;IACpB,kEAAkE;IAClE,WAAW;IACX,oBAAoB;AACxB;;AAEA;;IAEI,cAAc;IACd,uCAAuC;AAC3C;;AAEA;;IAEI,qCAAqC;AACzC;;AAEA;IACI,kDAAkD;AACtD;;AAEA;IACI,gDAAgD;AACpD;;AAEA;;IAEI,0BAA0B;AAC9B;;AAEA;;IAEI,WAAW;AACf;;AC3MA;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;AACtC;AACA;IACI,uBAAuB;IACvB,gDAAgD;IAChD,QAAQ;IACR,uBAAuB;IACvB,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI;;;KAGC;IACD,sEAAsE;IACtE,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,YAAY;IACZ,+BAA+B;IAC/B,gCAAgC;IAChC,eAAe;IACf,4BAA4B;IAC5B,gBAAgB;IAChB,gBAAgB;IAChB,2BAA2B;IAC3B,+BAA+B;AACnC;AACA;IACI,mCAAmC;IACnC,mCAAmC;IACnC,iBAAiB;IACjB,SAAS;AACb;AACA;IACI,iBAAiB;AACrB;AACA;IACI,4BAA4B;IAC5B,8BAA8B;AAClC;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,kCAAkC;AACtC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,mBAAmB;AACvB;AACA;;IAEI,sBAAsB;AAC1B;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,yCAAyC;IAC7C;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;AACJ;;ACtMA;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;AACtC;AACA;IACI,uBAAuB;IACvB,gDAAgD;IAChD,QAAQ;IACR,uBAAuB;IACvB,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI;;;KAGC;IACD,sEAAsE;IACtE,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,YAAY;IACZ,+BAA+B;IAC/B,gCAAgC;IAChC,eAAe;IACf,4BAA4B;IAC5B,gBAAgB;IAChB,gBAAgB;IAChB,2BAA2B;IAC3B,+BAA+B;AACnC;AACA;IACI,mCAAmC;IACnC,mCAAmC;IACnC,iBAAiB;IACjB,SAAS;AACb;AACA;IACI,4BAA4B;IAC5B,8BAA8B;AAClC;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI,iBAAiB;AACrB;AACA;;IAEI,+BAA+B;AACnC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,mBAAmB;AACvB;AACA;;IAEI,sBAAsB;AAC1B;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,yCAAyC;IAC7C;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;AACJ;;AC9LA,8DAA8D;AAC9D,8DAA8D;AAC9D;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;AACtC;AACA;IACI,qBAAqB;IACrB,gDAAgD;IAChD,QAAQ;IACR,gBAAgB;IAChB,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI,yBAAyB;AAC7B;AACA;IACI,aAAa;IACb,cAAc;IACd,+CAA+C;IAC/C,kBAAkB;AACtB;AACA;;;;;;IAMI,kBAAkB;IAClB,cAAc;IACd,SAAS;IACT,uBAAuB;AAC3B;AACA;IACI,uCAAuC;AAC3C;AACA;IACI,sBAAsB;IACtB,qBAAqB;AACzB;AACA;IACI,yBAAyB;IACzB,YAAY;IACZ,OAAO;IACP,kBAAkB;IAClB,YAAY;IACZ,kBAAkB;IAClB,QAAQ;IACR,SAAS;IACT,UAAU;AACd;AACA;IACI,wEAAwE;IACxE,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,WAAW;IACX,WAAW;AACf;AACA;IACI,sBAAsB;IACtB,cAAc;IACd,gBAAgB;IAChB,cAAc;IACd,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI,aAAa;IACb,mBAAmB;IACnB,uBAAuB;IACvB,aAAa;IACb,kBAAkB;AACtB;AACA;IACI,OAAO;AACX;AACA;IACI,gBAAgB;AACpB;AACA;IACI,sBAAsB;IACtB,SAAS;IACT,YAAY;IACZ,eAAe;IACf,kBAAkB;IAClB,WAAW;IACX,UAAU;AACd;AACA;IACI;;;KAGC;IACD,oEAAoE;IACpE,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,eAAe;IACf,eAAe;IACf,gBAAgB;IAChB,kBAAkB;IAClB,+BAA+B;AACnC;AACA;IACI,WAAW;IACX,eAAe;AACnB;AACA;IACI,qCAAqC;AACzC;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,kCAAkC;AACtC;AACA;;IAEI,oCAAoC;AACxC;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;IAEI,2BAA2B;AAC/B;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;IAEI,UAAU;AACd;AACA;;IAEI,wBAAwB;AAC5B;AACA;IACI,aAAa;AACjB;;ACjLA,8DAA8D;AAC9D,8DAA8D;AAC9D;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;AACtC;AACA;IACI,gDAAgD;IAChD,QAAQ;IACR,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI,yBAAyB;AAC7B;AACA;IACI;;;KAGC;IACD,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,gBAAgB;IAChB,gBAAgB;IAChB,WAAW;IACX,+BAA+B;AACnC;AACA;IACI,aAAa;IACb,cAAc;IACd,+CAA+C;IAC/C,kBAAkB;AACtB;AACA;;;;;;IAMI,kBAAkB;IAClB,cAAc;IACd,SAAS;IACT,uBAAuB;AAC3B;AACA;IACI,uCAAuC;AAC3C;AACA;IACI,sBAAsB;IACtB,mBAAmB;IACnB,qBAAqB;AACzB;AACA;IACI,sBAAsB;IACtB,cAAc;IACd,gBAAgB;IAChB,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI,aAAa;IACb,sBAAsB;IACtB,uBAAuB;IACvB,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,8BAA8B;AAClC;AACA;IACI,YAAY;IACZ,eAAe;IACf,WAAW;AACf;AACA;;IAEI,sBAAsB;IACtB,SAAS;IACT,UAAU;IACV,kBAAkB;IAClB,UAAU;AACd;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,kCAAkC;AACtC;AACA;;;;IAII,oCAAoC;AACxC;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;IAEI,UAAU;AACd;AACA;;IAEI,2BAA2B;AAC/B;AACA;;IAEI,2BAA2B;AAC/B;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;IAEI,UAAU;AACd;AACA;;;;IAII,wBAAwB;AAC5B;;AC7JA;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;IAClC,uCAAuC;IACvC,yCAAyC;AAC7C;AACA;IACI,uBAAuB;IACvB,gDAAgD;IAChD,QAAQ;IACR,uBAAuB;IACvB,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI;;;KAGC;IACD,sEAAsE;IACtE,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,sBAAsB;IACtB,eAAe;IACf,4BAA4B;IAC5B,gBAAgB;IAChB,gBAAgB;IAChB,+BAA+B;AACnC;AACA;IACI,aAAa;IACb,cAAc;IACd,+CAA+C;IAC/C,kBAAkB;AACtB;AACA;;;;;;IAMI,kBAAkB;IAClB,cAAc;IACd,SAAS;IACT,uBAAuB;AAC3B;AACA;IACI,uCAAuC;AAC3C;AACA;IACI,sBAAsB;IACtB,cAAc;IACd,gBAAgB;IAChB,cAAc;IACd,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI;0EACsE;IACtE,aAAa;IACb,sBAAsB;IACtB,uBAAuB;IACvB,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,8BAA8B;AAClC;AACA;IACI,wBAAwB;IACxB,4BAA4B;IAC5B,sBAAsB;IACtB,oEAAoE;IACpE,aAAa;IACb,kBAAkB;IAClB,WAAW;AACf;AACA;IACI,kCAAkC;AACtC;AACA;IACI,iBAAiB;AACrB;AACA;IACI,+CAA+C;AACnD;AACA;;IAEI,8CAA8C;AAClD;AACA;;IAEI,sBAAsB;IACtB,SAAS;IACT,YAAY;IACZ,eAAe;IACf,kBAAkB;IAClB,WAAW;IACX,UAAU;AACd;AACA;IACI,qCAAqC;AACzC;AACA;;IAEI,sBAAsB;IACtB,SAAS;AACb;AACA;IACI,kBAAkB;AACtB;AACA;IACI,+BAA+B;AACnC;AACA;IACI,kBAAkB;AACtB;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/utility/utility.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/link/link.css","webpack://root/./node_modules/@ebay/skin/dist/textbox/textbox.css","webpack://root/./node_modules/@ebay/skin/dist/alert-dialog/alert-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/confirm-dialog/confirm-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/drawer-dialog/drawer-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/fullscreen-dialog/fullscreen-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/panel-dialog/panel-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/snackbar-dialog/snackbar-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/toast-dialog/toast-dialog.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",".clearfix:after,\n.clearfix:before {\n content: \" \";\n display: table;\n line-height: 0;\n}\n.clearfix:after {\n clear: both;\n}\n.clipped {\n border: 0;\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n.clipped--stealth:focus {\n clip-path: none;\n height: auto;\n overflow: visible;\n white-space: normal;\n width: auto;\n}\n.image-stretch {\n height: auto;\n width: 100%;\n}\n.image-scale {\n height: auto;\n max-width: 100%;\n}\n.image-center {\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n}\n.image-center img {\n max-height: 100%;\n max-width: 100%;\n}\n.image-treatment {\n align-items: center;\n border-radius: 8px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-treatment-large {\n align-items: center;\n border-radius: 16px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment-large:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment-large > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-disabled {\n filter: var(--color-media-disabled-filter);\n}\n.text-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.scrollbars-permanent {\n scroll-behavior: smooth;\n scroll-snap-type: proximity;\n scroll-snap-type: x proximity;\n}\n.scrollbars-permanent::-webkit-scrollbar {\n background-color: var(--color-state-layer-focus);\n border-radius: 12px;\n}\n.scrollbars-permanent::-webkit-scrollbar:vertical {\n width: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar:horizontal {\n height: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar-thumb {\n background-color: var(--color-foreground-secondary);\n border-color: transparent;\n border-radius: 12px;\n border-right-style: inset;\n box-shadow: none;\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n","a.nav-link,\na.standalone-link {\n color: var(\n --nav-link-foreground-color,\n var(--color-foreground-link-primary)\n );\n text-decoration: none;\n}\na.nav-link:visited,\na.standalone-link:visited {\n color: var(\n --link-foreground-color-default,\n var(--color-foreground-link-primary)\n );\n}\na.nav-link:hover,\na.standalone-link:hover {\n color: var(\n --nav-link-foreground-hover-color,\n var(--color-foreground-secondary)\n );\n text-decoration: underline;\n}\na.nav-link:not([href]),\na.nav-link[aria-disabled=\"true\"],\na.standalone-link:not([href]),\na.standalone-link[aria-disabled=\"true\"] {\n color: var(\n --link-forground-color-disabled,\n var(--color-foreground-disabled)\n );\n text-decoration: none;\n}\nbutton.fake-link {\n background-color: initial;\n border: 0;\n color: var(\n --fake-link-foreground-color,\n var(--color-foreground-link-primary)\n );\n font-family: inherit;\n font-size: inherit;\n padding: 0;\n text-decoration: underline;\n}\nbutton.fake-link:hover {\n color: var(\n --fake-link-foreground-color-hover,\n var(--color-foreground-secondary)\n );\n}\nbutton.fake-link[aria-disabled=\"true\"],\nbutton.fake-link[disabled] {\n color: var(\n --fake-link-foreground-disabled-color,\n var(--color-foreground-disabled)\n );\n}\na.legal-link,\nbutton.legal-link {\n text-decoration: underline;\n}\na.legal-link,\na.legal-link:hover,\na.legal-link:visited,\nbutton.legal-link,\nbutton.legal-link:hover,\nbutton.legal-link:visited {\n color: var(\n --legal-link-foreground-color,\n var(--color-foreground-link-legal)\n );\n}\n",":root {\n --input-default-height: 40px;\n --input-large-height: 48px;\n}\n\n.textbox {\n align-items: center;\n background-color: var(\n --textbox-background-color,\n var(--color-background-secondary)\n );\n border-color: var(--textbox-border-color, var(--color-border-medium));\n border-radius: var(--textbox-border-radius, var(--border-radius-50));\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--textbox-foreground-color, var(--color-foreground-primary));\n display: inline-flex;\n font-size: var(--font-size-body);\n gap: var(--spacing-100);\n overflow: hidden;\n position: relative;\n width: fit-content;\n}\n\n.textbox button.icon-btn {\n background-color: initial;\n padding: 0;\n}\n\n.textbox--focus,\n.textbox:has(> .textbox__control:focus):not(.textbox--readonly):not(\n :has(> .textbox__control[readonly])\n ) {\n background-color: var(\n --textbox-focus-background-color,\n var(--color-background-primary)\n );\n border-color: var(--textbox-focus-border-color, var(--color-border-strong));\n box-shadow: 0 0 0 1px var(--color-border-strong);\n}\n\n.textbox--readonly,\n.textbox:has(> .textbox__control[readonly]) {\n background-color: initial;\n border: none;\n}\n\n.textbox--disabled,\n.textbox:has(> .textbox__control[disabled]) {\n border-color: var(\n --textbox-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --textbox-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n\n.textbox--invalid,\n.textbox:has(> .textbox__control[aria-invalid=\"true\"]) {\n border-color: var(\n --textbox-invalid-border-color,\n var(--color-border-attention)\n );\n}\n\n.textbox__control {\n background-color: initial;\n border: none;\n box-sizing: border-box;\n color: inherit;\n}\n\ntextarea.textbox__control {\n font-family: inherit;\n min-height: 200px;\n overflow: auto;\n padding: var(--spacing-200);\n resize: vertical;\n vertical-align: middle;\n}\n\ninput.textbox__control {\n font-family: inherit;\n padding: 0;\n vertical-align: middle;\n}\n\ninput.textbox__control:first-child:not([readonly]) {\n padding-inline-start: var(--spacing-200);\n}\n\ninput.textbox__control:last-child:not([readonly]) {\n padding-inline-end: var(--spacing-200);\n}\n\ninput.textbox__control,\ntextarea.textbox__control {\n appearance: none;\n flex-grow: 1;\n font-size: 1em;\n height: 40px;\n margin: 0;\n outline: none;\n}\n\ninput.textbox__control[disabled],\ntextarea.textbox__control[disabled] {\n border-color: var(\n --textbox-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --textbox-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n\ninput.textbox__control[disabled]::-webkit-input-placeholder,\ntextarea.textbox__control[disabled]::-webkit-input-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[disabled]::-moz-placeholder,\ntextarea.textbox__control[disabled]::-moz-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[disabled]:-ms-input-placeholder,\ntextarea.textbox__control[disabled]:-ms-input-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[aria-invalid=\"true\"],\ntextarea.textbox__control[aria-invalid=\"true\"] {\n border-color: var(\n --textbox-invalid-foreground-color,\n var(--color-border-attention)\n );\n}\n\ninput.textbox__control::placeholder,\ntextarea.textbox__control::placeholder {\n color: var(--textbox-placeholder-color, var(--color-foreground-secondary));\n font-weight: 200;\n opacity: 1;\n}\n\ninput.textbox__control {\n height: calc(var(--input-default-height) - 2px);\n}\n\n.textbox--large input.textbox__control {\n height: calc(var(--input-large-height) - 2px);\n}\n\n.textbox .icon-btn > svg,\n.textbox > svg {\n color: var(--textbox-icon-color, var(--color-foreground-secondary));\n display: inline-flex;\n fill: var(--textbox-icon-color, var(--color-foreground-secondary));\n height: 1lh;\n pointer-events: none;\n}\n\n.textbox > span:first-child,\n.textbox > svg:first-child {\n flex-shrink: 0;\n margin-inline-start: var(--spacing-200);\n}\n\n.textbox > span:last-child,\n.textbox > svg:last-child {\n margin-inline-end: var(--spacing-200);\n}\n\n.textbox .icon-btn:last-child {\n margin-inline-start: calc(var(--spacing-100) * -1);\n}\n\n.textbox .icon-btn:first-child {\n margin-inline-end: calc(var(--spacing-100) * -1);\n}\n\ninput.textbox__control[readonly]:focus,\ntextarea.textbox__control[readonly]:focus {\n text-decoration: underline;\n}\n\n.textbox--fluid,\n.textbox--fluid .textbox__control {\n width: 100%;\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.alert-dialog[role=\"alertdialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.alert-dialog[role=\"alertdialog\"]:not([hidden]) {\n display: flex;\n}\n.alert-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto;\n margin-left: var(--spacing-200);\n margin-right: var(--spacing-200);\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n padding: var(--spacing-200);\n will-change: opacity, transform;\n}\n.alert-dialog__title {\n font-size: var(--font-size-large-1);\n font-weight: var(--font-weight-600);\n line-height: 28px;\n margin: 0;\n}\n.alert-dialog__footer {\n text-align: right;\n}\n.alert-dialog__main {\n margin: var(--spacing-200) 0;\n min-height: var(--spacing-200);\n}\n.alert-dialog__main > :first-child {\n margin-top: 0;\n}\n.alert-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.alert-dialog--hide.alert-dialog--mask-fade-slow,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.alert-dialog--hide .alert-dialog__window--fade,\n.alert-dialog--show .alert-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--hide.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.alert-dialog--hide.alert-dialog--hide,\n.alert-dialog--hide.alert-dialog--show-init,\n.alert-dialog--show-init.alert-dialog--hide,\n.alert-dialog--show-init.alert-dialog--show-init {\n display: flex;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--hide.alert-dialog--mask-fade-slow,\n.alert-dialog--show-init.alert-dialog--mask-fade,\n.alert-dialog--show-init.alert-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.alert-dialog--hide .alert-dialog__window--animate,\n.alert-dialog--hide .alert-dialog__window--animate > *,\n.alert-dialog--hide .alert-dialog__window--fade,\n.alert-dialog--show-init .alert-dialog__window--animate,\n.alert-dialog--show-init .alert-dialog__window--animate > *,\n.alert-dialog--show-init .alert-dialog__window--fade {\n opacity: 0;\n}\n.alert-dialog--hide-init.alert-dialog--hide-init,\n.alert-dialog--hide-init.alert-dialog--show,\n.alert-dialog--show.alert-dialog--hide-init,\n.alert-dialog--show.alert-dialog--show {\n display: flex;\n}\n.alert-dialog--hide-init.alert-dialog--mask-fade,\n.alert-dialog--hide-init.alert-dialog--mask-fade-slow,\n.alert-dialog--show.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.alert-dialog--hide-init .alert-dialog__window--animate,\n.alert-dialog--hide-init .alert-dialog__window--animate > *,\n.alert-dialog--hide-init .alert-dialog__window--fade,\n.alert-dialog--show .alert-dialog__window--animate,\n.alert-dialog--show .alert-dialog__window--animate > *,\n.alert-dialog--show .alert-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .alert-dialog--hide.alert-dialog--mask-fade,\n .alert-dialog--hide.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .alert-dialog--hide .alert-dialog__window--animate,\n .alert-dialog--hide .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .alert-dialog--hide .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .alert-dialog--show.alert-dialog--mask-fade,\n .alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .alert-dialog--show .alert-dialog__window--animate,\n .alert-dialog--show .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .alert-dialog--show .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.alert-dialog--hide-init .alert-dialog__window--animate,\n.alert-dialog--show .alert-dialog__window--animate {\n transform: scale(1);\n}\n.alert-dialog--hide .alert-dialog__window--animate,\n.alert-dialog--show-init .alert-dialog__window--animate {\n transform: scale(0.75);\n}\n@media (prefers-reduced-motion) {\n .alert-dialog--hide .alert-dialog__window--animate,\n .alert-dialog--hide-init .alert-dialog__window--animate,\n .alert-dialog--show .alert-dialog__window--animate,\n .alert-dialog--show-init .alert-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .alert-dialog__window {\n max-width: calc(88% - var(--spacing-400));\n }\n}\n@media (min-width: 1024px) {\n .alert-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.confirm-dialog[role=\"dialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.confirm-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.confirm-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto;\n margin-left: var(--spacing-200);\n margin-right: var(--spacing-200);\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n padding: var(--spacing-200);\n will-change: opacity, transform;\n}\n.confirm-dialog__title {\n font-size: var(--font-size-large-1);\n font-weight: var(--font-weight-600);\n line-height: 28px;\n margin: 0;\n}\n.confirm-dialog__main {\n margin: var(--spacing-200) 0;\n min-height: var(--spacing-200);\n}\n.confirm-dialog__main > :first-child {\n margin-top: 0;\n}\n.confirm-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.confirm-dialog__footer {\n text-align: right;\n}\na.confirm-dialog__confirm,\nbutton.confirm-dialog__confirm {\n margin-left: var(--spacing-100);\n}\n.confirm-dialog--hide.confirm-dialog--mask-fade,\n.confirm-dialog--hide.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show.confirm-dialog--mask-fade,\n.confirm-dialog--show.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.confirm-dialog--hide.confirm-dialog--hide,\n.confirm-dialog--hide.confirm-dialog--show-init,\n.confirm-dialog--show-init.confirm-dialog--hide,\n.confirm-dialog--show-init.confirm-dialog--show-init {\n display: flex;\n}\n.confirm-dialog--hide.confirm-dialog--mask-fade,\n.confirm-dialog--hide.confirm-dialog--mask-fade-slow,\n.confirm-dialog--show-init.confirm-dialog--mask-fade,\n.confirm-dialog--show-init.confirm-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate,\n.confirm-dialog--hide .confirm-dialog__window--animate > *,\n.confirm-dialog--hide .confirm-dialog__window--fade,\n.confirm-dialog--show-init .confirm-dialog__window--animate,\n.confirm-dialog--show-init .confirm-dialog__window--animate > *,\n.confirm-dialog--show-init .confirm-dialog__window--fade {\n opacity: 0;\n}\n.confirm-dialog--hide-init.confirm-dialog--hide-init,\n.confirm-dialog--hide-init.confirm-dialog--show,\n.confirm-dialog--show.confirm-dialog--hide-init,\n.confirm-dialog--show.confirm-dialog--show {\n display: flex;\n}\n.confirm-dialog--hide-init.confirm-dialog--mask-fade,\n.confirm-dialog--hide-init.confirm-dialog--mask-fade-slow,\n.confirm-dialog--show.confirm-dialog--mask-fade,\n.confirm-dialog--show.confirm-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.confirm-dialog--hide-init .confirm-dialog__window--animate,\n.confirm-dialog--hide-init .confirm-dialog__window--animate > *,\n.confirm-dialog--hide-init .confirm-dialog__window--fade,\n.confirm-dialog--show .confirm-dialog__window--animate,\n.confirm-dialog--show .confirm-dialog__window--animate > *,\n.confirm-dialog--show .confirm-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .confirm-dialog--hide.confirm-dialog--mask-fade,\n .confirm-dialog--hide.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .confirm-dialog--hide .confirm-dialog__window--animate,\n .confirm-dialog--hide .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .confirm-dialog--hide .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .confirm-dialog--show.confirm-dialog--mask-fade,\n .confirm-dialog--show.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .confirm-dialog--show .confirm-dialog__window--animate,\n .confirm-dialog--show .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .confirm-dialog--show .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.confirm-dialog--hide-init .confirm-dialog__window--animate,\n.confirm-dialog--show .confirm-dialog__window--animate {\n transform: scale(1);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate,\n.confirm-dialog--show-init .confirm-dialog__window--animate {\n transform: scale(0.75);\n}\n@media (prefers-reduced-motion) {\n .confirm-dialog--hide .confirm-dialog__window--animate,\n .confirm-dialog--hide-init .confirm-dialog__window--animate,\n .confirm-dialog--show .confirm-dialog__window--animate,\n .confirm-dialog--show-init .confirm-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .confirm-dialog__window {\n max-width: calc(88% - var(--spacing-400));\n }\n}\n@media (min-width: 1024px) {\n .confirm-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n}\n","/*! DEPRECATED COMPONENT. Will be removed next major version */\n/*! DEPRECATED COMPONENT. Will be removed next major version */\n:root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.drawer-dialog[role=\"dialog\"] {\n align-items: flex-end;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n overflow: hidden;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.drawer-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.drawer-dialog--no-mask[role=\"dialog\"] {\n background-color: initial;\n}\n.drawer-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-250) var(--spacing-200) 0;\n position: relative;\n}\n.drawer-dialog__header h1,\n.drawer-dialog__header h2,\n.drawer-dialog__header h3,\n.drawer-dialog__header h4,\n.drawer-dialog__header h5,\n.drawer-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.drawer-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.drawer-dialog__header .fake-link {\n align-self: flex-start;\n text-decoration: none;\n}\n.drawer-dialog__handle {\n background-color: initial;\n border: none;\n left: 0;\n margin: -11px auto;\n padding: 8px;\n position: relative;\n right: 0;\n top: 11px;\n z-index: 2;\n}\n.drawer-dialog__handle:after {\n background-color: var(--dialog-handle-color, var(--color-border-medium));\n border-radius: 3px;\n content: \"\";\n display: block;\n height: 2px;\n width: 24px;\n}\n.drawer-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: auto;\n overflow: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.drawer-dialog__main > :first-child {\n margin-top: 0;\n}\n.drawer-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.drawer-dialog__footer {\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding: 16px;\n position: relative;\n}\n.drawer-dialog__footer > * {\n flex: 1;\n}\n.drawer-dialog__footer > :not(:first-child) {\n margin-left: 8px;\n}\nbutton.icon-btn.drawer-dialog__close {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n position: relative;\n width: 32px;\n z-index: 1;\n}\n.drawer-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n max-height: 50%;\n max-width: 100%;\n min-height: 55px;\n overflow-y: hidden;\n will-change: opacity, transform;\n}\n.drawer-dialog__window--expanded {\n height: 95%;\n max-height: 95%;\n}\n.drawer-dialog__window--slide {\n transition: max-height 0.32s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade,\n.drawer-dialog--show.drawer-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show.drawer-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.drawer-dialog--hide .drawer-dialog__window--fade,\n.drawer-dialog--show .drawer-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.drawer-dialog--hide .drawer-dialog__window--slide,\n.drawer-dialog--show .drawer-dialog__window--slide {\n transition: transform 0.32s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--show-init,\n.drawer-dialog--hidedrawer-dialog--hide,\n.drawer-dialog--show-init.drawer-dialog--show-init,\n.drawer-dialog--show-initdrawer-dialog--hide {\n display: flex;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade,\n.drawer-dialog--hide.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show-init.drawer-dialog--mask-fade,\n.drawer-dialog--show-init.drawer-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.drawer-dialog--hide .drawer-dialog__window--slide,\n.drawer-dialog--show-init .drawer-dialog__window--slide {\n transform: translateY(100%);\n}\n.drawer-dialog--hide-init.drawer-dialog--hide-init,\n.drawer-dialog--hide-init.drawer-dialog--show,\n.drawer-dialog--show.drawer-dialog--hide-init,\n.drawer-dialog--show.drawer-dialog--show {\n display: flex;\n}\n.drawer-dialog--hide-init.drawer-dialog--mask-fade,\n.drawer-dialog--hide-init.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show.drawer-dialog--mask-fade,\n.drawer-dialog--show.drawer-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.drawer-dialog--hide-init .drawer-dialog__window--fade,\n.drawer-dialog--show .drawer-dialog__window--fade {\n opacity: 1;\n}\n.drawer-dialog--hide-init .drawer-dialog__window--slide,\n.drawer-dialog--show .drawer-dialog__window--slide {\n transform: translateX(0);\n}\n.drawer-dialog__handle:focus:not(:focus-visible) {\n outline: none;\n}\n","/*! DEPRECATED COMPONENT. Will be removed next major version */\n/*! DEPRECATED COMPONENT. Will be removed next major version */\n:root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.fullscreen-dialog[role=\"dialog\"] {\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.fullscreen-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.fullscreen-dialog--no-mask[role=\"dialog\"] {\n background-color: initial;\n}\n.fullscreen-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n min-height: 55px;\n overflow-y: auto;\n width: 100%;\n will-change: opacity, transform;\n}\n.fullscreen-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.fullscreen-dialog__header h1,\n.fullscreen-dialog__header h2,\n.fullscreen-dialog__header h3,\n.fullscreen-dialog__header h4,\n.fullscreen-dialog__header h5,\n.fullscreen-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.fullscreen-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.fullscreen-dialog__header .fake-link {\n align-self: flex-start;\n outline-offset: 4px;\n text-decoration: none;\n}\n.fullscreen-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.fullscreen-dialog__main > :first-child {\n margin-top: 0;\n}\n.fullscreen-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.fullscreen-dialog__footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.fullscreen-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\nbutton.icon-btn.fullscreen-dialog__close {\n height: 32px;\n min-width: 32px;\n width: 32px;\n}\nbutton.fullscreen-dialog__back,\nbutton.fullscreen-dialog__close {\n align-self: flex-start;\n border: 0;\n padding: 0;\n position: relative;\n z-index: 1;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show .fullscreen-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide,\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide-end {\n transition: transform 0.32s ease-out;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--hide,\n.fullscreen-dialog--hide.fullscreen-dialog--show-init,\n.fullscreen-dialog--show-init.fullscreen-dialog--hide,\n.fullscreen-dialog--show-init.fullscreen-dialog--show-init {\n display: flex;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show-init.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show-init.fullscreen-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--fade {\n opacity: 0;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--slide {\n transform: translateY(100%);\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--slide-end {\n transform: translateX(100%);\n}\n.fullscreen-dialog--hide-init.fullscreen-dialog--hide-init,\n.fullscreen-dialog--hide-init.fullscreen-dialog--show,\n.fullscreen-dialog--show.fullscreen-dialog--hide-init,\n.fullscreen-dialog--show.fullscreen-dialog--show {\n display: flex;\n}\n.fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show .fullscreen-dialog__window--fade {\n opacity: 1;\n}\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide,\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide-end {\n transform: translateX(0);\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n --dialog-lightbox-wide-max-width: 896px;\n --dialog-lightbox-narrow-max-width: 480px;\n}\n.lightbox-dialog[role=\"dialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.lightbox-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.lightbox-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-150));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto auto 16px;\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n will-change: opacity, transform;\n}\n.lightbox-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.lightbox-dialog__header h1,\n.lightbox-dialog__header h2,\n.lightbox-dialog__header h3,\n.lightbox-dialog__header h4,\n.lightbox-dialog__header h5,\n.lightbox-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.lightbox-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.lightbox-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: 18px;\n overflow: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__main > :first-child {\n margin-top: 0;\n}\n.lightbox-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.lightbox-dialog__footer {\n border-top: 1px solid\n var(--dialog-lightbox-separator-color, var(--color-border-subtle));\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\n.lightbox-dialog__image {\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;\n height: 218px;\n position: absolute;\n width: 100%;\n}\n.lightbox-dialog--expressive .lightbox-dialog__window {\n padding-bottom: var(--spacing-100);\n}\n.lightbox-dialog--expressive .lightbox-dialog__header > * {\n margin-top: 218px;\n}\n.lightbox-dialog--expressive .lightbox-dialog__header {\n margin: var(--spacing-300) var(--spacing-300) 0;\n}\n.lightbox-dialog--expressive .lightbox-dialog__footer,\n.lightbox-dialog--expressive .lightbox-dialog__main {\n padding: var(--spacing-200) var(--spacing-300);\n}\nbutton.icon-btn.lightbox-dialog__close,\nbutton.icon-btn.lightbox-dialog__prev {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n position: relative;\n width: 32px;\n z-index: 1;\n}\nbutton.icon-btn.lightbox-dialog__prev {\n margin-inline-end: var(--spacing-200);\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev {\n align-self: self-start;\n margin: 0;\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev + * {\n margin-left: -32px;\n}\n.lightbox-dialog__title:not(:first-child) {\n margin-left: var(--spacing-200);\n}\n.lightbox-dialog__title--center {\n text-align: center;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.lightbox-dialog--hide.lightbox-dialog--hide,\n.lightbox-dialog--hide.lightbox-dialog--show-init,\n.lightbox-dialog--show-init.lightbox-dialog--hide,\n.lightbox-dialog--show-init.lightbox-dialog--show-init {\n display: flex;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--hide .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide .lightbox-dialog__window--fade,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show-init .lightbox-dialog__window--fade {\n opacity: 0;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--hide-init,\n.lightbox-dialog--hide-init.lightbox-dialog--show,\n.lightbox-dialog--show.lightbox-dialog--hide-init,\n.lightbox-dialog--show.lightbox-dialog--show {\n display: flex;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide-init .lightbox-dialog__window--fade,\n.lightbox-dialog--show .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .lightbox-dialog--hide.lightbox-dialog--mask-fade,\n .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .lightbox-dialog--show.lightbox-dialog--mask-fade,\n .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: translateY(0);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: translateY(100%);\n}\n.lightbox-dialog__handle:after {\n background-color: var(--dialog-handle-color, var(--color-border-medium));\n border-radius: 3px;\n content: \"\";\n display: block;\n height: 2px;\n width: 24px;\n}\n[dir=\"rtl\"] button.icon-btn.lightbox-dialog__prev .icon--16 {\n transform: rotate(180deg);\n}\n.lightbox-dialog--fullscreen .lightbox-dialog__window,\n.lightbox-dialog--large .lightbox-dialog__window {\n align-self: center;\n height: 70%;\n margin: var(--spacing-100);\n max-height: 95%;\n}\n@media (max-width: 512px) {\n .lightbox-dialog--large .lightbox-dialog__window {\n height: 95%;\n max-height: 95%;\n width: 100%;\n }\n .lightbox-dialog--fullscreen .lightbox-dialog__window {\n border-radius: 0;\n height: 100%;\n margin: 0;\n max-height: 100%;\n max-width: 100%;\n width: 100%;\n }\n}\n@media (min-width: 512px) {\n .lightbox-dialog__window {\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n margin: auto;\n max-width: 88%;\n }\n .lightbox-dialog--narrow .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-narrow-max-width);\n }\n .lightbox-dialog__window .lightbox-dialog__footer {\n flex-direction: row;\n justify-content: flex-end;\n }\n .lightbox-dialog__window .lightbox-dialog__footer > :not(:first-child) {\n margin-left: var(--spacing-100);\n margin-top: 0;\n }\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(0.75);\n }\n}\n@media (min-width: 512px) and (prefers-reduced-motion) {\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: 88%;\n }\n .lightbox-dialog--wide .lightbox-dialog__image {\n height: 256px;\n }\n .lightbox-dialog--wide.lightbox-dialog--expressive\n .lightbox-dialog__header\n > * {\n margin-top: 256px;\n }\n}\n@media (min-width: 1024px) {\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-wide-max-width);\n }\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.panel-dialog[role=\"dialog\"] {\n background-color: var(--dialog-scrim-color-show);\n flex-direction: column;\n inset: 0;\n overflow: hidden;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.panel-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.panel-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-right: 1px solid rgba(153, 153, 153, 0.18);\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n min-height: 55px;\n overflow-y: auto;\n width: 100%;\n will-change: opacity, transform;\n}\n.panel-dialog__window--end {\n align-self: flex-end;\n border-left: 1px solid rgba(153, 153, 153, 0.18);\n}\n.panel-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.panel-dialog__header h1,\n.panel-dialog__header h2,\n.panel-dialog__header h3,\n.panel-dialog__header h4,\n.panel-dialog__header h5,\n.panel-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.panel-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.panel-dialog__header .fake-link {\n align-self: flex-start;\n outline-offset: 4px;\n text-decoration: none;\n}\n.panel-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n height: 1px;\n overflow-y: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.panel-dialog__main > :first-child {\n margin-top: 0;\n}\n.panel-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.panel-dialog__footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.panel-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\nbutton.icon-btn.panel-dialog__close,\nbutton.icon-btn.panel-dialog__prev {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n padding: 0;\n position: relative;\n width: 32px;\n z-index: 1;\n}\nbutton.icon-btn.panel-dialog__prev {\n margin-inline-end: var(--spacing-200);\n}\n.panel-dialog__title:not(:first-child) {\n margin-left: var(--spacing-200);\n}\n.panel-dialog--hide.panel-dialog--mask-fade,\n.panel-dialog--show.panel-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.panel-dialog--hide.panel-dialog--mask-fade-slow,\n.panel-dialog--show.panel-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.panel-dialog--hide .panel-dialog__window--slide,\n.panel-dialog--show .panel-dialog__window--slide {\n transition: transform 0.32s ease-out;\n}\n.panel-dialog--hide.panel-dialog--hide,\n.panel-dialog--hide.panel-dialog--show-init,\n.panel-dialog--show-init.panel-dialog--hide,\n.panel-dialog--show-init.panel-dialog--show-init {\n display: flex;\n}\n.panel-dialog--hide.panel-dialog--mask-fade,\n.panel-dialog--hide.panel-dialog--mask-fade-slow,\n.panel-dialog--show-init.panel-dialog--mask-fade,\n.panel-dialog--show-init.panel-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.panel-dialog--hide .panel-dialog__window--slide-left,\n.panel-dialog--show-init .panel-dialog__window--slide-left {\n transform: translateX(-100%);\n}\n.panel-dialog--hide .panel-dialog__window--slide-right,\n.panel-dialog--show-init .panel-dialog__window--slide-right {\n transform: translateX(100%);\n}\n.panel-dialog--hide .panel-dialog__window--slide,\n.panel-dialog--show-init .panel-dialog__window--slide {\n transform: translateX(-100%);\n}\n.panel-dialog--hide .panel-dialog__window--end.panel-dialog__window--slide,\n.panel-dialog--show-init\n .panel-dialog__window--end.panel-dialog__window--slide {\n transform: translateX(100%);\n}\n.panel-dialog--hide-init.panel-dialog--hide-init,\n.panel-dialog--hide-init.panel-dialog--show,\n.panel-dialog--show.panel-dialog--hide-init,\n.panel-dialog--show.panel-dialog--show {\n display: flex;\n}\n.panel-dialog--hide-init.panel-dialog--mask-fade,\n.panel-dialog--hide-init.panel-dialog--mask-fade-slow,\n.panel-dialog--show.panel-dialog--mask-fade,\n.panel-dialog--show.panel-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.panel-dialog--hide-init .panel-dialog__window--slide,\n.panel-dialog--show .panel-dialog__window--slide {\n transform: translateX(0);\n}\n[dir=\"rtl\"] button.icon-btn.panel-dialog__prev .icon {\n transform: rotate(180deg);\n}\n@media (min-width: 512px) {\n .panel-dialog__window {\n width: 384px;\n }\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.snackbar-dialog {\n background-color: var(\n --snackbar-dialog-background-color,\n var(--color-background-inverse)\n );\n border-radius: var(\n --snackbar-dialog-border-radius,\n var(--border-radius-100)\n );\n bottom: 40px;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n left: var(--spacing-100);\n margin: auto;\n max-height: 40vh;\n max-width: 448px;\n position: fixed;\n right: var(--spacing-100);\n transform: translateY(0);\n will-change: opacity, transform;\n z-index: 2;\n}\n.snackbar-dialog--transition {\n transition:\n opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,\n transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;\n}\n.snackbar-dialog--hide-init,\n.snackbar-dialog--show {\n display: block;\n opacity: 1;\n transform: translateY(0);\n}\n.snackbar-dialog--hide,\n.snackbar-dialog--show-init {\n display: block;\n opacity: 0;\n transform: translateY(110%);\n}\n.snackbar-dialog__window {\n display: flex;\n margin: var(--spacing-200) var(--spacing-300);\n}\n.snackbar-dialog__window--column {\n flex-direction: column;\n}\n.snackbar-dialog__main {\n margin-inline-end: var(--spacing-400);\n}\n.snackbar-dialog__main p {\n margin: 0;\n}\n.snackbar-dialog__actions {\n margin-inline-start: auto;\n}\n.snackbar-dialog__window--column .snackbar-dialog__actions {\n margin-top: var(--spacing-200);\n}\n.snackbar-dialog__actions .fake-link {\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n text-decoration: none;\n}\n.snackbar-dialog__actions .fake-link:first-letter {\n text-decoration: underline;\n}\n.snackbar-dialog__actions button.fake-link:hover:not(:disabled) {\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n text-decoration: underline;\n}\n@media (min-width: 512px) {\n .snackbar-dialog {\n bottom: 20px;\n }\n}\n[dir=\"rtl\"] .snackbar-dialog {\n left: auto;\n right: 0;\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\n.toast-dialog {\n background-color: var(--color-background-accent);\n border-top-left-radius: var(--border-radius-100);\n border-top-right-radius: var(--border-radius-100);\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);\n inset: auto 0 0;\n max-height: 40vh;\n min-width: 320px;\n position: fixed;\n transform: translateY(0);\n width: 100vw;\n will-change: opacity, transform;\n z-index: 2;\n}\n.toast-dialog,\n.toast-dialog a {\n color: var(--color-foreground-on-success);\n}\n.toast-dialog a:focus {\n outline: 1px auto currentColor;\n}\n.toast-dialog--transition {\n transition:\n opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,\n transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;\n}\n.toast-dialog--hide-init,\n.toast-dialog--show {\n display: block;\n opacity: 1;\n transform: translateY(0);\n}\n.toast-dialog--hide,\n.toast-dialog--show-init {\n display: block;\n opacity: 0;\n transform: translateY(110%);\n}\n.toast-dialog__window {\n padding: var(--spacing-100) var(--spacing-200) var(--spacing-200);\n}\n.toast-dialog__header {\n align-items: center;\n display: flex;\n}\n.toast-dialog__header h2,\n.toast-dialog__title {\n margin: 0;\n}\nbutton.icon-btn.toast-dialog__close {\n align-self: flex-start;\n border: 0;\n color: var(--color-foreground-on-success);\n flex-shrink: 0;\n margin-inline-start: auto;\n overflow: hidden;\n padding: 0;\n position: relative;\n}\nbutton.icon-btn.toast-dialog__close:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn.toast-dialog__close[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn.toast-dialog__close[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn.toast-dialog__close[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.icon-btn.toast-dialog__close:focus {\n outline: 2px solid var(--color-foreground-on-success);\n}\nbutton.icon-btn.toast-dialog__close > svg {\n fill: currentColor;\n}\n.toast-dialog__footer {\n display: flex;\n justify-content: flex-end;\n}\n.toast-dialog__footer button:first-letter {\n text-decoration: underline;\n}\n.toast-dialog__footer button.btn--primary,\n.toast-dialog__footer button.btn--secondary {\n overflow: hidden;\n position: relative;\n}\n.toast-dialog__footer button.btn--primary:after,\n.toast-dialog__footer button.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.toast-dialog__footer\n button.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\n.toast-dialog__footer button.btn--primary[href]:hover:after,\n.toast-dialog__footer\n button.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\n.toast-dialog__footer button.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\n.toast-dialog__footer\n button.btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\n.toast-dialog__footer button.btn--primary[href]:focus-visible:after,\n.toast-dialog__footer\n button.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\n.toast-dialog__footer button.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\n.toast-dialog__footer\n button.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\n.toast-dialog__footer button.btn--primary[href]:active:after,\n.toast-dialog__footer\n button.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\n.toast-dialog__footer button.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\n.toast-dialog__footer button.btn--primary,\n.toast-dialog__footer button.btn--secondary {\n border-color: var(--color-foreground-on-accent);\n border-style: solid;\n border-width: 1px;\n outline-offset: 2px;\n}\n.toast-dialog__footer button.btn--primary {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-accent);\n}\n.toast-dialog__footer button.btn--secondary {\n background-color: initial;\n color: var(--color-background-primary);\n font-weight: 700;\n margin-inline-end: var(--spacing-100);\n}\n.toast-dialog__footer button.btn--primary:focus,\n.toast-dialog__footer button.btn--secondary:focus {\n outline: 2px solid var(--color-foreground-on-success);\n}\n@media (min-width: 512px) {\n .toast-dialog {\n border-radius: var(--border-radius-100);\n bottom: var(--spacing-200);\n left: var(--spacing-200);\n max-width: 480px;\n width: auto;\n }\n .toast-dialog__window {\n padding: var(--spacing-200) var(--spacing-300) var(--spacing-300);\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-dialog-button/index.css","mappings":"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A;IACI,kDAAkD;AACtD;;AAEA;IACI,gDAAgD;AACpD;;AAEA;;IAEI,0BAA0B;AAC9B;;AAEA;;IAEI,WAAW;AACf;;AC3MA;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;AACtC;AACA;IACI,uBAAuB;IACvB,gDAAgD;IAChD,QAAQ;IACR,uBAAuB;IACvB,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI;;;KAGC;IACD,sEAAsE;IACtE,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,YAAY;IACZ,+BAA+B;IAC/B,gCAAgC;IAChC,eAAe;IACf,4BAA4B;IAC5B,gBAAgB;IAChB,gBAAgB;IAChB,2BAA2B;IAC3B,+BAA+B;AACnC;AACA;IACI,mCAAmC;IACnC,mCAAmC;IACnC,iBAAiB;IACjB,SAAS;AACb;AACA;IACI,iBAAiB;AACrB;AACA;IACI,4BAA4B;IAC5B,8BAA8B;AAClC;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,kCAAkC;AACtC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,mBAAmB;AACvB;AACA;;IAEI,sBAAsB;AAC1B;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,yCAAyC;IAC7C;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;AACJ;;ACtMA;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;AACtC;AACA;IACI,uBAAuB;IACvB,gDAAgD;IAChD,QAAQ;IACR,uBAAuB;IACvB,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI;;;KAGC;IACD,sEAAsE;IACtE,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,YAAY;IACZ,+BAA+B;IAC/B,gCAAgC;IAChC,eAAe;IACf,4BAA4B;IAC5B,gBAAgB;IAChB,gBAAgB;IAChB,2BAA2B;IAC3B,+BAA+B;AACnC;AACA;IACI,mCAAmC;IACnC,mCAAmC;IACnC,iBAAiB;IACjB,SAAS;AACb;AACA;IACI,4BAA4B;IAC5B,8BAA8B;AAClC;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI,iBAAiB;AACrB;AACA;;IAEI,+BAA+B;AACnC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,mBAAmB;AACvB;AACA;;IAEI,sBAAsB;AAC1B;AACA;IACI;;;;QAII,mBAAm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CA;IACI,kBAAkB;AACtB;AACA;IACI,+BAA+B;AACnC;AACA;IACI,kBAAkB;AACtB;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,wBAAwB;AAC5B;AACA;;IAEI,2BAA2B;AAC/B;AACA;IACI,wEAAwE;IACxE,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,WAAW;IACX,WAAW;AACf;AACA;IACI,yBAAyB;AAC7B;AACA;;IAEI,kBAAkB;IAClB,WAAW;IACX,0BAA0B;IAC1B,eAAe;AACnB;AACA;IACI;QACI,WAAW;QACX,eAAe;QACf,WAAW;IACf;IACA;QACI,gBAAgB;QAChB,YAAY;QACZ,SAAS;QACT,gBAAgB;QAChB,eAAe;QACf,WAAW;IACf;AACJ;AACA;IACI;QACI,sEAAsE;QACtE,YAAY;QACZ,cAAc;IAClB;IACA;QACI,kDAAkD;IACtD;IACA;QACI,mBAAmB;QACnB,yBAAyB;IAC7B;IACA;QACI,+BAA+B;QAC/B,aAAa;IACjB;IACA;;QAEI,mBAAmB;IACvB;IACA;;QAEI,sBAAsB;IAC1B;AACJ;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;IACA;QACI,cAAc;IAClB;IACA;QACI,aAAa;IACjB;IACA;;;QAGI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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/utility/utility.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/link/link.css","webpack://root/./node_modules/@ebay/skin/dist/textbox/textbox.css","webpack://root/./node_modules/@ebay/skin/dist/alert-dialog/alert-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/confirm-dialog/confirm-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/drawer-dialog/drawer-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/fullscreen-dialog/fullscreen-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/panel-dialog/panel-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/snackbar-dialog/snackbar-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/toast-dialog/toast-dialog.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",".clearfix:after,\n.clearfix:before {\n content: \" \";\n display: table;\n line-height: 0;\n}\n.clearfix:after {\n clear: both;\n}\n.clipped {\n border: 0;\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n.clipped--stealth:focus {\n clip-path: none;\n height: auto;\n overflow: visible;\n white-space: normal;\n width: auto;\n}\n.image-stretch {\n height: auto;\n width: 100%;\n}\n.image-scale {\n height: auto;\n max-width: 100%;\n}\n.image-center {\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n}\n.image-center img {\n max-height: 100%;\n max-width: 100%;\n}\n.image-treatment {\n align-items: center;\n border-radius: 8px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-treatment-large {\n align-items: center;\n border-radius: 16px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment-large:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment-large > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-disabled {\n filter: var(--color-media-disabled-filter);\n}\n.text-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.scrollbars-permanent {\n scroll-behavior: smooth;\n scroll-snap-type: proximity;\n scroll-snap-type: x proximity;\n}\n.scrollbars-permanent::-webkit-scrollbar {\n background-color: var(--color-state-layer-focus);\n border-radius: 12px;\n}\n.scrollbars-permanent::-webkit-scrollbar:vertical {\n width: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar:horizontal {\n height: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar-thumb {\n background-color: var(--color-foreground-secondary);\n border-color: transparent;\n border-radius: 12px;\n border-right-style: inset;\n box-shadow: none;\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n","a.nav-link,\na.standalone-link {\n color: var(\n --nav-link-foreground-color,\n var(--color-foreground-link-primary)\n );\n text-decoration: none;\n}\na.nav-link:visited,\na.standalone-link:visited {\n color: var(\n --link-foreground-color-default,\n var(--color-foreground-link-primary)\n );\n}\na.nav-link:hover,\na.standalone-link:hover {\n color: var(\n --nav-link-foreground-hover-color,\n var(--color-foreground-secondary)\n );\n text-decoration: underline;\n}\na.nav-link:not([href]),\na.nav-link[aria-disabled=\"true\"],\na.standalone-link:not([href]),\na.standalone-link[aria-disabled=\"true\"] {\n color: var(\n --link-forground-color-disabled,\n var(--color-foreground-disabled)\n );\n text-decoration: none;\n}\nbutton.fake-link {\n background-color: initial;\n border: 0;\n color: var(\n --fake-link-foreground-color,\n var(--color-foreground-link-primary)\n );\n font-family: inherit;\n font-size: inherit;\n padding: 0;\n text-decoration: underline;\n}\nbutton.fake-link:hover {\n color: var(\n --fake-link-foreground-color-hover,\n var(--color-foreground-secondary)\n );\n}\nbutton.fake-link[aria-disabled=\"true\"],\nbutton.fake-link[disabled] {\n color: var(\n --fake-link-foreground-disabled-color,\n var(--color-foreground-disabled)\n );\n}\na.legal-link,\nbutton.legal-link {\n text-decoration: underline;\n}\na.legal-link,\na.legal-link:hover,\na.legal-link:visited,\nbutton.legal-link,\nbutton.legal-link:hover,\nbutton.legal-link:visited {\n color: var(\n --legal-link-foreground-color,\n var(--color-foreground-link-legal)\n );\n}\n",":root {\n --input-default-height: 40px;\n --input-large-height: 48px;\n}\n\n.textbox {\n align-items: center;\n background-color: var(\n --textbox-background-color,\n var(--color-background-secondary)\n );\n border-color: var(--textbox-border-color, var(--color-border-medium));\n border-radius: var(--textbox-border-radius, var(--border-radius-50));\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--textbox-foreground-color, var(--color-foreground-primary));\n display: inline-flex;\n font-size: var(--font-size-body);\n gap: var(--spacing-100);\n overflow: hidden;\n position: relative;\n width: fit-content;\n}\n\n.textbox button.icon-btn {\n background-color: initial;\n padding: 0;\n}\n\n.textbox--focus,\n.textbox:has(> .textbox__control:focus):not(.textbox--readonly):not(\n :has(> .textbox__control[readonly])\n ) {\n background-color: var(\n --textbox-focus-background-color,\n var(--color-background-primary)\n );\n border-color: var(--textbox-focus-border-color, var(--color-border-strong));\n box-shadow: 0 0 0 1px var(--color-border-strong);\n}\n\n.textbox--readonly,\n.textbox:has(> .textbox__control[readonly]) {\n background-color: initial;\n border: none;\n}\n\n.textbox--disabled,\n.textbox:has(> .textbox__control[disabled]) {\n border-color: var(\n --textbox-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --textbox-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n\n.textbox--invalid,\n.textbox:has(> .textbox__control[aria-invalid=\"true\"]) {\n border-color: var(\n --textbox-invalid-border-color,\n var(--color-border-attention)\n );\n}\n\n.textbox__control {\n background-color: initial;\n border: none;\n box-sizing: border-box;\n color: inherit;\n}\n\ntextarea.textbox__control {\n font-family: inherit;\n min-height: 200px;\n overflow: auto;\n padding: var(--spacing-200);\n resize: vertical;\n vertical-align: middle;\n}\n\ninput.textbox__control {\n font-family: inherit;\n padding: 0;\n vertical-align: middle;\n}\n\ninput.textbox__control:first-child:not([readonly]) {\n padding-inline-start: var(--spacing-200);\n}\n\ninput.textbox__control:last-child:not([readonly]) {\n padding-inline-end: var(--spacing-200);\n}\n\ninput.textbox__control,\ntextarea.textbox__control {\n appearance: none;\n flex-grow: 1;\n font-size: 1em;\n height: 40px;\n margin: 0;\n outline: none;\n}\n\ninput.textbox__control[disabled],\ntextarea.textbox__control[disabled] {\n border-color: var(\n --textbox-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --textbox-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n\ninput.textbox__control[disabled]::-webkit-input-placeholder,\ntextarea.textbox__control[disabled]::-webkit-input-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[disabled]::-moz-placeholder,\ntextarea.textbox__control[disabled]::-moz-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[disabled]:-ms-input-placeholder,\ntextarea.textbox__control[disabled]:-ms-input-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[aria-invalid=\"true\"],\ntextarea.textbox__control[aria-invalid=\"true\"] {\n border-color: var(\n --textbox-invalid-foreground-color,\n var(--color-border-attention)\n );\n}\n\ninput.textbox__control::placeholder,\ntextarea.textbox__control::placeholder {\n color: var(--textbox-placeholder-color, var(--color-foreground-secondary));\n font-weight: 200;\n opacity: 1;\n}\n\ninput.textbox__control {\n height: calc(var(--input-default-height) - 2px);\n}\n\n.textbox--large input.textbox__control {\n height: calc(var(--input-large-height) - 2px);\n}\n\n.textbox .icon-btn > svg,\n.textbox > svg {\n color: var(--textbox-icon-color, var(--color-foreground-secondary));\n display: inline-flex;\n fill: var(--textbox-icon-color, var(--color-foreground-secondary));\n height: 1lh;\n pointer-events: none;\n}\n\n.textbox > span:first-child,\n.textbox > svg:first-child {\n flex-shrink: 0;\n margin-inline-start: var(--spacing-200);\n}\n\n.textbox > span:last-child,\n.textbox > svg:last-child {\n margin-inline-end: var(--spacing-200);\n}\n\n.textbox .icon-btn:last-child {\n margin-inline-start: calc(var(--spacing-100) * -1);\n}\n\n.textbox .icon-btn:first-child {\n margin-inline-end: calc(var(--spacing-100) * -1);\n}\n\ninput.textbox__control[readonly]:focus,\ntextarea.textbox__control[readonly]:focus {\n text-decoration: underline;\n}\n\n.textbox--fluid,\n.textbox--fluid .textbox__control {\n width: 100%;\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.alert-dialog[role=\"alertdialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.alert-dialog[role=\"alertdialog\"]:not([hidden]) {\n display: flex;\n}\n.alert-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto;\n margin-left: var(--spacing-200);\n margin-right: var(--spacing-200);\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n padding: var(--spacing-200);\n will-change: opacity, transform;\n}\n.alert-dialog__title {\n font-size: var(--font-size-large-1);\n font-weight: var(--font-weight-600);\n line-height: 28px;\n margin: 0;\n}\n.alert-dialog__footer {\n text-align: right;\n}\n.alert-dialog__main {\n margin: var(--spacing-200) 0;\n min-height: var(--spacing-200);\n}\n.alert-dialog__main > :first-child {\n margin-top: 0;\n}\n.alert-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.alert-dialog--hide.alert-dialog--mask-fade-slow,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.alert-dialog--hide .alert-dialog__window--fade,\n.alert-dialog--show .alert-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--hide.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.alert-dialog--hide .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.alert-dialog--show .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.alert-dialog--hide.alert-dialog--hide,\n.alert-dialog--hide.alert-dialog--show-init,\n.alert-dialog--show-init.alert-dialog--hide,\n.alert-dialog--show-init.alert-dialog--show-init {\n display: flex;\n}\n.alert-dialog--hide.alert-dialog--mask-fade,\n.alert-dialog--hide.alert-dialog--mask-fade-slow,\n.alert-dialog--show-init.alert-dialog--mask-fade,\n.alert-dialog--show-init.alert-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.alert-dialog--hide .alert-dialog__window--animate,\n.alert-dialog--hide .alert-dialog__window--animate > *,\n.alert-dialog--hide .alert-dialog__window--fade,\n.alert-dialog--show-init .alert-dialog__window--animate,\n.alert-dialog--show-init .alert-dialog__window--animate > *,\n.alert-dialog--show-init .alert-dialog__window--fade {\n opacity: 0;\n}\n.alert-dialog--hide-init.alert-dialog--hide-init,\n.alert-dialog--hide-init.alert-dialog--show,\n.alert-dialog--show.alert-dialog--hide-init,\n.alert-dialog--show.alert-dialog--show {\n display: flex;\n}\n.alert-dialog--hide-init.alert-dialog--mask-fade,\n.alert-dialog--hide-init.alert-dialog--mask-fade-slow,\n.alert-dialog--show.alert-dialog--mask-fade,\n.alert-dialog--show.alert-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.alert-dialog--hide-init .alert-dialog__window--animate,\n.alert-dialog--hide-init .alert-dialog__window--animate > *,\n.alert-dialog--hide-init .alert-dialog__window--fade,\n.alert-dialog--show .alert-dialog__window--animate,\n.alert-dialog--show .alert-dialog__window--animate > *,\n.alert-dialog--show .alert-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .alert-dialog--hide.alert-dialog--mask-fade,\n .alert-dialog--hide.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .alert-dialog--hide .alert-dialog__window--animate,\n .alert-dialog--hide .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .alert-dialog--hide .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .alert-dialog--show.alert-dialog--mask-fade,\n .alert-dialog--show.alert-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .alert-dialog--show .alert-dialog__window--animate,\n .alert-dialog--show .alert-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .alert-dialog--show .alert-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.alert-dialog--hide-init .alert-dialog__window--animate,\n.alert-dialog--show .alert-dialog__window--animate {\n transform: scale(1);\n}\n.alert-dialog--hide .alert-dialog__window--animate,\n.alert-dialog--show-init .alert-dialog__window--animate {\n transform: scale(0.75);\n}\n@media (prefers-reduced-motion) {\n .alert-dialog--hide .alert-dialog__window--animate,\n .alert-dialog--hide-init .alert-dialog__window--animate,\n .alert-dialog--show .alert-dialog__window--animate,\n .alert-dialog--show-init .alert-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .alert-dialog__window {\n max-width: calc(88% - var(--spacing-400));\n }\n}\n@media (min-width: 1024px) {\n .alert-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.confirm-dialog[role=\"dialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.confirm-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.confirm-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto;\n margin-left: var(--spacing-200);\n margin-right: var(--spacing-200);\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n padding: var(--spacing-200);\n will-change: opacity, transform;\n}\n.confirm-dialog__title {\n font-size: var(--font-size-large-1);\n font-weight: var(--font-weight-600);\n line-height: 28px;\n margin: 0;\n}\n.confirm-dialog__main {\n margin: var(--spacing-200) 0;\n min-height: var(--spacing-200);\n}\n.confirm-dialog__main > :first-child {\n margin-top: 0;\n}\n.confirm-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.confirm-dialog__footer {\n text-align: right;\n}\na.confirm-dialog__confirm,\nbutton.confirm-dialog__confirm {\n margin-left: var(--spacing-100);\n}\n.confirm-dialog--hide.confirm-dialog--mask-fade,\n.confirm-dialog--hide.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show.confirm-dialog--mask-fade,\n.confirm-dialog--show.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.confirm-dialog--show .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.confirm-dialog--hide.confirm-dialog--hide,\n.confirm-dialog--hide.confirm-dialog--show-init,\n.confirm-dialog--show-init.confirm-dialog--hide,\n.confirm-dialog--show-init.confirm-dialog--show-init {\n display: flex;\n}\n.confirm-dialog--hide.confirm-dialog--mask-fade,\n.confirm-dialog--hide.confirm-dialog--mask-fade-slow,\n.confirm-dialog--show-init.confirm-dialog--mask-fade,\n.confirm-dialog--show-init.confirm-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate,\n.confirm-dialog--hide .confirm-dialog__window--animate > *,\n.confirm-dialog--hide .confirm-dialog__window--fade,\n.confirm-dialog--show-init .confirm-dialog__window--animate,\n.confirm-dialog--show-init .confirm-dialog__window--animate > *,\n.confirm-dialog--show-init .confirm-dialog__window--fade {\n opacity: 0;\n}\n.confirm-dialog--hide-init.confirm-dialog--hide-init,\n.confirm-dialog--hide-init.confirm-dialog--show,\n.confirm-dialog--show.confirm-dialog--hide-init,\n.confirm-dialog--show.confirm-dialog--show {\n display: flex;\n}\n.confirm-dialog--hide-init.confirm-dialog--mask-fade,\n.confirm-dialog--hide-init.confirm-dialog--mask-fade-slow,\n.confirm-dialog--show.confirm-dialog--mask-fade,\n.confirm-dialog--show.confirm-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.confirm-dialog--hide-init .confirm-dialog__window--animate,\n.confirm-dialog--hide-init .confirm-dialog__window--animate > *,\n.confirm-dialog--hide-init .confirm-dialog__window--fade,\n.confirm-dialog--show .confirm-dialog__window--animate,\n.confirm-dialog--show .confirm-dialog__window--animate > *,\n.confirm-dialog--show .confirm-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .confirm-dialog--hide.confirm-dialog--mask-fade,\n .confirm-dialog--hide.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .confirm-dialog--hide .confirm-dialog__window--animate,\n .confirm-dialog--hide .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .confirm-dialog--hide .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .confirm-dialog--show.confirm-dialog--mask-fade,\n .confirm-dialog--show.confirm-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .confirm-dialog--show .confirm-dialog__window--animate,\n .confirm-dialog--show .confirm-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .confirm-dialog--show .confirm-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.confirm-dialog--hide-init .confirm-dialog__window--animate,\n.confirm-dialog--show .confirm-dialog__window--animate {\n transform: scale(1);\n}\n.confirm-dialog--hide .confirm-dialog__window--animate,\n.confirm-dialog--show-init .confirm-dialog__window--animate {\n transform: scale(0.75);\n}\n@media (prefers-reduced-motion) {\n .confirm-dialog--hide .confirm-dialog__window--animate,\n .confirm-dialog--hide-init .confirm-dialog__window--animate,\n .confirm-dialog--show .confirm-dialog__window--animate,\n .confirm-dialog--show-init .confirm-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .confirm-dialog__window {\n max-width: calc(88% - var(--spacing-400));\n }\n}\n@media (min-width: 1024px) {\n .confirm-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n}\n","/*! DEPRECATED COMPONENT. Will be removed next major version */\n/*! DEPRECATED COMPONENT. Will be removed next major version */\n:root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.drawer-dialog[role=\"dialog\"] {\n align-items: flex-end;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n overflow: hidden;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.drawer-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.drawer-dialog--no-mask[role=\"dialog\"] {\n background-color: initial;\n}\n.drawer-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-250) var(--spacing-200) 0;\n position: relative;\n}\n.drawer-dialog__header h1,\n.drawer-dialog__header h2,\n.drawer-dialog__header h3,\n.drawer-dialog__header h4,\n.drawer-dialog__header h5,\n.drawer-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.drawer-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.drawer-dialog__header .fake-link {\n align-self: flex-start;\n text-decoration: none;\n}\n.drawer-dialog__handle {\n background-color: initial;\n border: none;\n left: 0;\n margin: -11px auto;\n padding: 8px;\n position: relative;\n right: 0;\n top: 11px;\n z-index: 2;\n}\n.drawer-dialog__handle:after {\n background-color: var(--dialog-handle-color, var(--color-border-medium));\n border-radius: 3px;\n content: \"\";\n display: block;\n height: 2px;\n width: 24px;\n}\n.drawer-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: auto;\n overflow: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.drawer-dialog__main > :first-child {\n margin-top: 0;\n}\n.drawer-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.drawer-dialog__footer {\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding: 16px;\n position: relative;\n}\n.drawer-dialog__footer > * {\n flex: 1;\n}\n.drawer-dialog__footer > :not(:first-child) {\n margin-left: 8px;\n}\nbutton.icon-btn.drawer-dialog__close {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n position: relative;\n width: 32px;\n z-index: 1;\n}\n.drawer-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n max-height: 50%;\n max-width: 100%;\n min-height: 55px;\n overflow-y: hidden;\n will-change: opacity, transform;\n}\n.drawer-dialog__window--expanded {\n height: 95%;\n max-height: 95%;\n}\n.drawer-dialog__window--slide {\n transition: max-height 0.32s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade,\n.drawer-dialog--show.drawer-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show.drawer-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.drawer-dialog--hide .drawer-dialog__window--fade,\n.drawer-dialog--show .drawer-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.drawer-dialog--hide .drawer-dialog__window--slide,\n.drawer-dialog--show .drawer-dialog__window--slide {\n transition: transform 0.32s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--show-init,\n.drawer-dialog--hidedrawer-dialog--hide,\n.drawer-dialog--show-init.drawer-dialog--show-init,\n.drawer-dialog--show-initdrawer-dialog--hide {\n display: flex;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade,\n.drawer-dialog--hide.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show-init.drawer-dialog--mask-fade,\n.drawer-dialog--show-init.drawer-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.drawer-dialog--hide .drawer-dialog__window--slide,\n.drawer-dialog--show-init .drawer-dialog__window--slide {\n transform: translateY(100%);\n}\n.drawer-dialog--hide-init.drawer-dialog--hide-init,\n.drawer-dialog--hide-init.drawer-dialog--show,\n.drawer-dialog--show.drawer-dialog--hide-init,\n.drawer-dialog--show.drawer-dialog--show {\n display: flex;\n}\n.drawer-dialog--hide-init.drawer-dialog--mask-fade,\n.drawer-dialog--hide-init.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show.drawer-dialog--mask-fade,\n.drawer-dialog--show.drawer-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.drawer-dialog--hide-init .drawer-dialog__window--fade,\n.drawer-dialog--show .drawer-dialog__window--fade {\n opacity: 1;\n}\n.drawer-dialog--hide-init .drawer-dialog__window--slide,\n.drawer-dialog--show .drawer-dialog__window--slide {\n transform: translateX(0);\n}\n.drawer-dialog__handle:focus:not(:focus-visible) {\n outline: none;\n}\n","/*! DEPRECATED COMPONENT. Will be removed next major version */\n/*! DEPRECATED COMPONENT. Will be removed next major version */\n:root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.fullscreen-dialog[role=\"dialog\"] {\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.fullscreen-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.fullscreen-dialog--no-mask[role=\"dialog\"] {\n background-color: initial;\n}\n.fullscreen-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n min-height: 55px;\n overflow-y: auto;\n width: 100%;\n will-change: opacity, transform;\n}\n.fullscreen-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.fullscreen-dialog__header h1,\n.fullscreen-dialog__header h2,\n.fullscreen-dialog__header h3,\n.fullscreen-dialog__header h4,\n.fullscreen-dialog__header h5,\n.fullscreen-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.fullscreen-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.fullscreen-dialog__header .fake-link {\n align-self: flex-start;\n outline-offset: 4px;\n text-decoration: none;\n}\n.fullscreen-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.fullscreen-dialog__main > :first-child {\n margin-top: 0;\n}\n.fullscreen-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.fullscreen-dialog__footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.fullscreen-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\nbutton.icon-btn.fullscreen-dialog__close {\n height: 32px;\n min-width: 32px;\n width: 32px;\n}\nbutton.fullscreen-dialog__back,\nbutton.fullscreen-dialog__close {\n align-self: flex-start;\n border: 0;\n padding: 0;\n position: relative;\n z-index: 1;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show .fullscreen-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide,\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide-end {\n transition: transform 0.32s ease-out;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--hide,\n.fullscreen-dialog--hide.fullscreen-dialog--show-init,\n.fullscreen-dialog--show-init.fullscreen-dialog--hide,\n.fullscreen-dialog--show-init.fullscreen-dialog--show-init {\n display: flex;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show-init.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show-init.fullscreen-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--fade {\n opacity: 0;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--slide {\n transform: translateY(100%);\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--slide-end {\n transform: translateX(100%);\n}\n.fullscreen-dialog--hide-init.fullscreen-dialog--hide-init,\n.fullscreen-dialog--hide-init.fullscreen-dialog--show,\n.fullscreen-dialog--show.fullscreen-dialog--hide-init,\n.fullscreen-dialog--show.fullscreen-dialog--show {\n display: flex;\n}\n.fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show .fullscreen-dialog__window--fade {\n opacity: 1;\n}\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide,\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide-end {\n transform: translateX(0);\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n --dialog-lightbox-wide-max-width: 896px;\n --dialog-lightbox-narrow-max-width: 480px;\n}\n.lightbox-dialog[role=\"dialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.lightbox-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.lightbox-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-150));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto auto 16px;\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n will-change: opacity, transform;\n}\n.lightbox-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.lightbox-dialog__header h1,\n.lightbox-dialog__header h2,\n.lightbox-dialog__header h3,\n.lightbox-dialog__header h4,\n.lightbox-dialog__header h5,\n.lightbox-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.lightbox-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.lightbox-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: 18px;\n overflow: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__main > :first-child {\n margin-top: 0;\n}\n.lightbox-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.lightbox-dialog__footer {\n border-top: 1px solid\n var(--dialog-lightbox-separator-color, var(--color-border-subtle));\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\n.lightbox-dialog__image {\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;\n height: 218px;\n position: absolute;\n width: 100%;\n}\n.lightbox-dialog--expressive .lightbox-dialog__window {\n padding-bottom: var(--spacing-100);\n}\n.lightbox-dialog--expressive .lightbox-dialog__header > * {\n margin-top: 218px;\n}\n.lightbox-dialog--expressive .lightbox-dialog__header {\n margin: var(--spacing-300) var(--spacing-300) 0;\n}\n.lightbox-dialog--expressive .lightbox-dialog__footer,\n.lightbox-dialog--expressive .lightbox-dialog__main {\n padding: var(--spacing-200) var(--spacing-300);\n}\nbutton.icon-btn.lightbox-dialog__close,\nbutton.icon-btn.lightbox-dialog__prev {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n position: relative;\n width: 32px;\n z-index: 1;\n}\nbutton.icon-btn.lightbox-dialog__prev {\n margin-inline-end: var(--spacing-200);\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev {\n align-self: self-start;\n margin: 0;\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev + * {\n margin-left: -32px;\n}\n.lightbox-dialog__title:not(:first-child) {\n margin-left: var(--spacing-200);\n}\n.lightbox-dialog__title--center {\n text-align: center;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.lightbox-dialog--hide.lightbox-dialog--hide,\n.lightbox-dialog--hide.lightbox-dialog--show-init,\n.lightbox-dialog--show-init.lightbox-dialog--hide,\n.lightbox-dialog--show-init.lightbox-dialog--show-init {\n display: flex;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--hide .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide .lightbox-dialog__window--fade,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show-init .lightbox-dialog__window--fade {\n opacity: 0;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--hide-init,\n.lightbox-dialog--hide-init.lightbox-dialog--show,\n.lightbox-dialog--show.lightbox-dialog--hide-init,\n.lightbox-dialog--show.lightbox-dialog--show {\n display: flex;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide-init .lightbox-dialog__window--fade,\n.lightbox-dialog--show .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .lightbox-dialog--hide.lightbox-dialog--mask-fade,\n .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .lightbox-dialog--show.lightbox-dialog--mask-fade,\n .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: translateY(0);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: translateY(100%);\n}\n.lightbox-dialog__handle:after {\n background-color: var(--dialog-handle-color, var(--color-border-medium));\n border-radius: 3px;\n content: \"\";\n display: block;\n height: 2px;\n width: 24px;\n}\n[dir=\"rtl\"] button.icon-btn.lightbox-dialog__prev .icon--16 {\n transform: rotate(180deg);\n}\n.lightbox-dialog--fullscreen .lightbox-dialog__window,\n.lightbox-dialog--large .lightbox-dialog__window {\n align-self: center;\n height: 70%;\n margin: var(--spacing-100);\n max-height: 95%;\n}\n@media (max-width: 512px) {\n .lightbox-dialog--large .lightbox-dialog__window {\n height: 95%;\n max-height: 95%;\n width: 100%;\n }\n .lightbox-dialog--fullscreen .lightbox-dialog__window {\n border-radius: 0;\n height: 100%;\n margin: 0;\n max-height: 100%;\n max-width: 100%;\n width: 100%;\n }\n}\n@media (min-width: 512px) {\n .lightbox-dialog__window {\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n margin: auto;\n max-width: 88%;\n }\n .lightbox-dialog--narrow .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-narrow-max-width);\n }\n .lightbox-dialog__window .lightbox-dialog__footer {\n flex-direction: row;\n justify-content: flex-end;\n }\n .lightbox-dialog__window .lightbox-dialog__footer > :not(:first-child) {\n margin-left: var(--spacing-100);\n margin-top: 0;\n }\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(0.75);\n }\n}\n@media (min-width: 512px) and (prefers-reduced-motion) {\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: 88%;\n }\n .lightbox-dialog--wide .lightbox-dialog__image {\n height: 256px;\n }\n .lightbox-dialog--wide.lightbox-dialog--expressive\n .lightbox-dialog__header\n > * {\n margin-top: 256px;\n }\n}\n@media (min-width: 1024px) {\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-wide-max-width);\n }\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.panel-dialog[role=\"dialog\"] {\n background-color: var(--dialog-scrim-color-show);\n flex-direction: column;\n inset: 0;\n overflow: hidden;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.panel-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.panel-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-right: 1px solid rgba(153, 153, 153, 0.18);\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n min-height: 55px;\n overflow-y: auto;\n width: 100%;\n will-change: opacity, transform;\n}\n.panel-dialog__window--end {\n align-self: flex-end;\n border-left: 1px solid rgba(153, 153, 153, 0.18);\n}\n.panel-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.panel-dialog__header h1,\n.panel-dialog__header h2,\n.panel-dialog__header h3,\n.panel-dialog__header h4,\n.panel-dialog__header h5,\n.panel-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.panel-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.panel-dialog__header .fake-link {\n align-self: flex-start;\n outline-offset: 4px;\n text-decoration: none;\n}\n.panel-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n height: 1px;\n overflow-y: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.panel-dialog__main > :first-child {\n margin-top: 0;\n}\n.panel-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.panel-dialog__footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.panel-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\nbutton.icon-btn.panel-dialog__close,\nbutton.icon-btn.panel-dialog__prev {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n padding: 0;\n position: relative;\n width: 32px;\n z-index: 1;\n}\nbutton.icon-btn.panel-dialog__prev {\n margin-inline-end: var(--spacing-200);\n}\n.panel-dialog__title:not(:first-child) {\n margin-left: var(--spacing-200);\n}\n.panel-dialog--hide.panel-dialog--mask-fade,\n.panel-dialog--show.panel-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.panel-dialog--hide.panel-dialog--mask-fade-slow,\n.panel-dialog--show.panel-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.panel-dialog--hide .panel-dialog__window--slide,\n.panel-dialog--show .panel-dialog__window--slide {\n transition: transform 0.32s ease-out;\n}\n.panel-dialog--hide.panel-dialog--hide,\n.panel-dialog--hide.panel-dialog--show-init,\n.panel-dialog--show-init.panel-dialog--hide,\n.panel-dialog--show-init.panel-dialog--show-init {\n display: flex;\n}\n.panel-dialog--hide.panel-dialog--mask-fade,\n.panel-dialog--hide.panel-dialog--mask-fade-slow,\n.panel-dialog--show-init.panel-dialog--mask-fade,\n.panel-dialog--show-init.panel-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.panel-dialog--hide .panel-dialog__window--slide-left,\n.panel-dialog--show-init .panel-dialog__window--slide-left {\n transform: translateX(-100%);\n}\n.panel-dialog--hide .panel-dialog__window--slide-right,\n.panel-dialog--show-init .panel-dialog__window--slide-right {\n transform: translateX(100%);\n}\n.panel-dialog--hide .panel-dialog__window--slide,\n.panel-dialog--show-init .panel-dialog__window--slide {\n transform: translateX(-100%);\n}\n.panel-dialog--hide .panel-dialog__window--end.panel-dialog__window--slide,\n.panel-dialog--show-init\n .panel-dialog__window--end.panel-dialog__window--slide {\n transform: translateX(100%);\n}\n.panel-dialog--hide-init.panel-dialog--hide-init,\n.panel-dialog--hide-init.panel-dialog--show,\n.panel-dialog--show.panel-dialog--hide-init,\n.panel-dialog--show.panel-dialog--show {\n display: flex;\n}\n.panel-dialog--hide-init.panel-dialog--mask-fade,\n.panel-dialog--hide-init.panel-dialog--mask-fade-slow,\n.panel-dialog--show.panel-dialog--mask-fade,\n.panel-dialog--show.panel-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.panel-dialog--hide-init .panel-dialog__window--slide,\n.panel-dialog--show .panel-dialog__window--slide {\n transform: translateX(0);\n}\n[dir=\"rtl\"] button.icon-btn.panel-dialog__prev .icon {\n transform: rotate(180deg);\n}\n@media (min-width: 512px) {\n .panel-dialog__window {\n width: 384px;\n }\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.snackbar-dialog {\n background-color: var(\n --snackbar-dialog-background-color,\n var(--color-background-inverse)\n );\n border-radius: var(\n --snackbar-dialog-border-radius,\n var(--border-radius-100)\n );\n bottom: 40px;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n left: var(--spacing-100);\n margin: auto;\n max-height: 40vh;\n max-width: 448px;\n position: fixed;\n right: var(--spacing-100);\n transform: translateY(0);\n will-change: opacity, transform;\n z-index: 2;\n}\n.snackbar-dialog--transition {\n transition:\n opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,\n transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;\n}\n.snackbar-dialog--hide-init,\n.snackbar-dialog--show {\n display: block;\n opacity: 1;\n transform: translateY(0);\n}\n.snackbar-dialog--hide,\n.snackbar-dialog--show-init {\n display: block;\n opacity: 0;\n transform: translateY(110%);\n}\n.snackbar-dialog__window {\n display: flex;\n margin: var(--spacing-200) var(--spacing-300);\n}\n.snackbar-dialog__window--column {\n flex-direction: column;\n}\n.snackbar-dialog__main {\n margin-inline-end: var(--spacing-400);\n}\n.snackbar-dialog__main p {\n margin: 0;\n}\n.snackbar-dialog__actions {\n margin-inline-start: auto;\n}\n.snackbar-dialog__window--column .snackbar-dialog__actions {\n margin-top: var(--spacing-200);\n}\n.snackbar-dialog__actions .fake-link {\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n text-decoration: none;\n}\n.snackbar-dialog__actions .fake-link:first-letter {\n text-decoration: underline;\n}\n.snackbar-dialog__actions button.fake-link:hover:not(:disabled) {\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n text-decoration: underline;\n}\n@media (min-width: 512px) {\n .snackbar-dialog {\n bottom: 20px;\n }\n}\n[dir=\"rtl\"] .snackbar-dialog {\n left: auto;\n right: 0;\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\n.toast-dialog {\n background-color: var(--color-background-accent);\n border-top-left-radius: var(--border-radius-100);\n border-top-right-radius: var(--border-radius-100);\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);\n inset: auto 0 0;\n max-height: 40vh;\n min-width: 320px;\n position: fixed;\n transform: translateY(0);\n width: 100vw;\n will-change: opacity, transform;\n z-index: 2;\n}\n.toast-dialog,\n.toast-dialog a {\n color: var(--color-foreground-on-success);\n}\n.toast-dialog a:focus {\n outline: 1px auto currentColor;\n}\n.toast-dialog--transition {\n transition:\n opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,\n transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;\n}\n.toast-dialog--hide-init,\n.toast-dialog--show {\n display: block;\n opacity: 1;\n transform: translateY(0);\n}\n.toast-dialog--hide,\n.toast-dialog--show-init {\n display: block;\n opacity: 0;\n transform: translateY(110%);\n}\n.toast-dialog__window {\n padding: var(--spacing-100) var(--spacing-200) var(--spacing-200);\n}\n.toast-dialog__header {\n align-items: center;\n display: flex;\n}\n.toast-dialog__header h2,\n.toast-dialog__title {\n margin: 0;\n}\nbutton.icon-btn.toast-dialog__close {\n align-self: flex-start;\n border: 0;\n color: var(--color-foreground-on-success);\n flex-shrink: 0;\n margin-inline-start: auto;\n overflow: hidden;\n padding: 0;\n position: relative;\n}\nbutton.icon-btn.toast-dialog__close:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn.toast-dialog__close[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn.toast-dialog__close[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn.toast-dialog__close[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.icon-btn.toast-dialog__close:focus {\n outline: 2px solid var(--color-foreground-on-success);\n}\nbutton.icon-btn.toast-dialog__close > svg {\n fill: currentColor;\n}\n.toast-dialog__footer {\n display: flex;\n justify-content: flex-end;\n}\n.toast-dialog__footer button:first-letter {\n text-decoration: underline;\n}\n.toast-dialog__footer button.btn--primary,\n.toast-dialog__footer button.btn--secondary {\n overflow: hidden;\n position: relative;\n}\n.toast-dialog__footer button.btn--primary:after,\n.toast-dialog__footer button.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.toast-dialog__footer\n button.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\n.toast-dialog__footer button.btn--primary[href]:hover:after,\n.toast-dialog__footer\n button.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\n.toast-dialog__footer button.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\n.toast-dialog__footer\n button.btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\n.toast-dialog__footer button.btn--primary[href]:focus-visible:after,\n.toast-dialog__footer\n button.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\n.toast-dialog__footer button.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\n.toast-dialog__footer\n button.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\n.toast-dialog__footer button.btn--primary[href]:active:after,\n.toast-dialog__footer\n button.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\n.toast-dialog__footer button.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\n.toast-dialog__footer button.btn--primary,\n.toast-dialog__footer button.btn--secondary {\n border-color: var(--color-foreground-on-accent);\n border-style: solid;\n border-width: 1px;\n outline-offset: 2px;\n}\n.toast-dialog__footer button.btn--primary {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-accent);\n}\n.toast-dialog__footer button.btn--secondary {\n background-color: initial;\n color: var(--color-background-primary);\n font-weight: 700;\n margin-inline-end: var(--spacing-100);\n}\n.toast-dialog__footer button.btn--primary:focus,\n.toast-dialog__footer button.btn--secondary:focus {\n outline: 2px solid var(--color-foreground-on-success);\n}\n@media (min-width: 512px) {\n .toast-dialog {\n border-radius: var(--border-radius-100);\n bottom: var(--spacing-200);\n left: var(--spacing-200);\n max-width: 480px;\n width: auto;\n }\n .toast-dialog__window {\n padding: var(--spacing-200) var(--spacing-300) var(--spacing-300);\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-dialog-button/index.html b/docs/ui/makeup-dialog-button/index.html index 6a767284..b25585f2 100644 --- a/docs/ui/makeup-dialog-button/index.html +++ b/docs/ui/makeup-dialog-button/index.html @@ -2,188 +2,183 @@ makeup-dialog-button + + + - -
                                    -
                                    -

                                    makeup-dialog-button

                                    -

                                    Dialog-Button is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base styles from eBay Skin. A subset - of style properties are being customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    - This page was loaded with all dialogs in a non-open state. To see an example of a dialog open on page load, - visit the makeup-lightbox-dialog page. -

                                    -
                                    -
                                    -
                                    - +
                                    +

                                    ui / makeup-dialog-button

                                    +

                                    Dialog-Button is headless UI widget and does not come bundled with any CSS.

                                    +

                                    + This page was loaded with all dialogs in a non-open state. To see an example of a dialog open on page load, + visit the makeup-lightbox-dialog page. +

                                    - + - - -
                                    -
                                    +
                                    +

                                    + We detected something unusual about a recent sign-in to your eBay account. To help keep you safe, we + recommend you change the password. +

                                    +
                                    +
                                    + +
                                    +
                                    + + +
                                    diff --git a/docs/ui/makeup-dialog-button/index.min.js b/docs/ui/makeup-dialog-button/index.min.js index 67ff32b1..24b90f42 100644 --- a/docs/ui/makeup-dialog-button/index.min.js +++ b/docs/ui/makeup-dialog-button/index.min.js @@ -319,9 +319,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(4490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(8448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(4490); +var _makeupScreenreaderTrap = __webpack_require__(8448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -344,6 +343,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -352,6 +356,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -359,7 +369,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -370,7 +380,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -386,8 +396,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -400,7 +410,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -409,11 +422,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/docs/ui/makeup-dialog-button/index.min.js.map b/docs/ui/makeup-dialog-button/index.min.js.map index cd2ee942..d257e3c7 100644 --- a/docs/ui/makeup-dialog-button/index.min.js.map +++ b/docs/ui/makeup-dialog-button/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-dialog-button/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0C;;;;;;;;ACAlD,mBAAO,CAAC,IAAwC;;;;;;;;ACAhD,mBAAO,CAAC,GAAgD;;;;;;;;ACAxD,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,IAA4C;;;;;;;;ACApD,mBAAO,CAAC,GAAsB;;;;;;;;ACA9B,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAA4C;;;;;;;;ACApD,mBAAO,CAAC,IAA4B;;;;;;;;ACApC,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;ACAxC,mBAAO,CAAC,IAA4B;;;;;;;;;;ACApC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,IAAsB;AACzE,+CAA+C,mBAAO,CAAC,IAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;;;AC1Ca;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACxDa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;;;AC3Ca;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA,kBAAe;;;;;;;;;ACvBF;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACtDa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;;;ACzCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA,kBAAe;;;;;;;;;ACtBF;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;;;ACtDa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;UChDA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAoB;AAC5B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,IAAiB;AACzB,mBAAO,CAAC,IAAoB;AAC5B,mBAAO,CAAC,IAAyB;AACjC,mBAAO,CAAC,IAA2B;AACnC,mBAAO,CAAC,IAA0B;AAClC,mBAAO,CAAC,IAA8B;AACtC,mBAAO,CAAC,IAA4B;AACpC,mBAAO,CAAC,GAAyB;AACjC,mBAAO,CAAC,IAA4B;AACpC,mBAAO,CAAC,IAAyB;AACjC,iDAAiD,mBAAO,CAAC,IAAsB;AAC/E,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,kDAAkD,mBAAO,CAAC,GAAuB;AACjF,iDAAiD,mBAAO,CAAC,IAAsB;AAC/E,qDAAqD,mBAAO,CAAC,IAA0B;AACvF,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,iCAAiC;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/alert-dialog.js","webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/confirm-dialog.js","webpack://root/./node_modules/@ebay/skin/drawer-dialog.js","webpack://root/./node_modules/@ebay/skin/fullscreen-dialog.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/lightbox-dialog.js","webpack://root/./node_modules/@ebay/skin/link.js","webpack://root/./node_modules/@ebay/skin/panel-dialog.js","webpack://root/./node_modules/@ebay/skin/snackbar-dialog.js","webpack://root/./node_modules/@ebay/skin/textbox.js","webpack://root/./node_modules/@ebay/skin/toast-dialog.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./node_modules/@ebay/skin/utility.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/alert-dialog/alert-dialog.css?1d20","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/confirm-dialog/confirm-dialog.css?448d","webpack://root/./node_modules/@ebay/skin/dist/drawer-dialog/drawer-dialog.css?5b6e","webpack://root/./node_modules/@ebay/skin/dist/fullscreen-dialog/fullscreen-dialog.css?df3a","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css?d75e","webpack://root/./node_modules/@ebay/skin/dist/link/link.css?4616","webpack://root/./node_modules/@ebay/skin/dist/panel-dialog/panel-dialog.css?ed5b","webpack://root/./node_modules/@ebay/skin/dist/snackbar-dialog/snackbar-dialog.css?c7bb","webpack://root/./node_modules/@ebay/skin/dist/textbox/textbox.css?d7ec","webpack://root/./node_modules/@ebay/skin/dist/toast-dialog/toast-dialog.css?81ab","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./node_modules/@ebay/skin/dist/utility/utility.css?6c3b","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-alert-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-confirm-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog-button/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-drawer-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-fullscreen-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-input-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-panel-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-snackbar-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-toast-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-dialog-button/index.compiled.js"],"sourcesContent":["require('./dist/alert-dialog/alert-dialog.css');\n","require('./dist/button/button.css');\n","require('./dist/confirm-dialog/confirm-dialog.css');\n","require('./dist/drawer-dialog/drawer-dialog.css');\n","require('./dist/fullscreen-dialog/fullscreen-dialog.css');\n","require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/lightbox-dialog/lightbox-dialog.css');\n","require('./dist/link/link.css');\n","require('./dist/panel-dialog/panel-dialog.css');\n","require('./dist/snackbar-dialog/snackbar-dialog.css');\n","require('./dist/textbox/textbox.css');\n","require('./dist/toast-dialog/toast-dialog.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","require('./dist/utility/utility.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultAlertOptions = {\n baseClass: \"alert-dialog\",\n baseClassModifier: \"alert\",\n quickDismiss: false,\n acknowledgeButtonSelector: \".alert-dialog__acknowledge\",\n windowSelector: \".alert-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultAlertOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._acknowledgeButtonEl = this._el.querySelector(this._options.acknowledgeButtonSelector);\n this._onAcknowledgeButtonClickListener = _onAcknowledgeButtonClick.bind(this);\n this._acknowledgeButtonEl.addEventListener(\"click\", this._onAcknowledgeButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._acknowledgeButtonEl.removeEventListener(\"click\", this._onAcknowledgeButtonClickListener);\n }\n acknowledge() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-acknowledge\"));\n }\n destroy() {\n super.destroy();\n this._onAcknowledgeButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onAcknowledgeButtonClick() {\n this.acknowledge();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n baseClass: \"confirm-dialog\",\n closeButtonSelector: \".confirm-dialog__close\",\n quickDismiss: true,\n confirmButtonSelector: \".confirm-dialog__confirm\",\n focusManagementIndex: 1,\n rejectButtonSelector: \".confirm-dialog__reject\",\n windowSelector: \".confirm-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._confirmButtonEl = this._el.querySelector(this._options.confirmButtonSelector);\n this._rejectButtonEl = this._el.querySelector(this._options.rejectButtonSelector);\n this._onConfirmButtonClickListener = _onConfirmButtonClick.bind(this);\n this._onRejectButtonClickListener = _onRejectButtonClick.bind(this);\n this._confirmButtonEl.addEventListener(\"click\", this._onConfirmButtonClickListener);\n this._rejectButtonEl.addEventListener(\"click\", this._onRejectButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._confirmButtonEl.removeEventListener(\"click\", this._onConfirmButtonClickListener);\n this._rejectButtonEl.removeEventListener(\"click\", this._onRejectButtonClickListener);\n }\n confirm() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-confirm\"));\n }\n reject() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-reject\"));\n }\n destroy() {\n super.destroy();\n this._onConfirmButtonClickListener = null;\n this._onRejectButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onConfirmButtonClick() {\n this.confirm();\n}\nfunction _onRejectButtonClick() {\n this.reject();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nconst defaultOptions = {\n customElementMode: false\n};\nclass _default {\n constructor(widgetEl, dialog, selectedOptions) {\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this._el = widgetEl;\n this._el.setAttribute(\"aria-haspopup\", \"dialog\");\n this._dialog = dialog;\n this._onClickListener = _onClick.bind(this);\n this._onDialogCloseListener = _onDialogClose.bind(this);\n this._onMutationListener = _onMutation.bind(this);\n this._el.classList.add(\"dialog-button--js\");\n if (!this._options.customElementMode) {\n this._mutationObserver = new MutationObserver(this._onMutationListener);\n this._observeMutations();\n this._observeEvents();\n }\n }\n _observeMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.observe(this._el, {\n attributes: true,\n childList: false,\n subtree: false\n });\n }\n }\n _unobserveMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.disconnect();\n }\n }\n _observeEvents() {\n if (this._destroyed !== true) {\n this._el.addEventListener(\"click\", this._onClickListener);\n this._dialog._el.addEventListener(\"dialog-close\", this._onDialogCloseListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\");\n this._dialog._el.removeEventListener(\"dialog-close\", this._onDialogCloseListener);\n }\n destroy() {\n this._destroyed = true;\n this._unobserveMutations();\n this._unobserveEvents();\n this._onClickListener = null;\n this._onDialogCloseListener = null;\n this._onMutationListener = null;\n }\n}\nexports.default = _default;\nfunction _onMutation(mutationsList) {\n for (const mutation of mutationsList) {\n if (mutation.type === \"attributes\") {\n this._el.dispatchEvent(new CustomEvent(\"makeup-dialog-button-mutation\", {\n detail: {\n attributeName: mutation.attributeName\n }\n }));\n }\n }\n}\nfunction _onClick() {\n this._dialog.open();\n}\nfunction _onDialogClose() {\n if (this._dialog.modal === true) {\n this._el.focus();\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultDrawerOptions = {\n baseClass: \"drawer-dialog\",\n quickDismiss: true,\n closeButtonSelector: \".drawer-dialog__close\",\n focusManagementIndex: 1,\n resizeButtonSelector: \".drawer-dialog__handle\",\n windowSelector: \".drawer-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultDrawerOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._resizeButtonEl = this._el.querySelector(this._options.resizeButtonSelector);\n this._onResizeButtonClickListener = _onResizeButtonClick.bind(this);\n this._resizeButtonEl.addEventListener(\"click\", this._onResizeButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._resizeButtonEl.removeEventListener(\"click\", this._onResizeButtonClickListener);\n }\n resize() {\n this._el.querySelector(\".drawer-dialog__window\").classList.toggle(\"drawer-dialog__window--expanded\");\n this._el.dispatchEvent(new CustomEvent(\"dialog-resize\"));\n }\n destroy() {\n super.destroy();\n this._onResizeButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onResizeButtonClick() {\n this.resize();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultFullscreenOptions = {\n baseClass: \"fullscreen-dialog\",\n quickDismiss: false,\n closeButtonSelector: \".fullscreen-dialog__close\",\n transitionsModifier: \"transition\",\n windowSelector: \".fullscreen-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultFullscreenOptions, selectedOptions, {\n modal: true\n }));\n }\n}\nexports.default = _default;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultInputOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"input\",\n submitButtonSelector: \".lightbox-dialog__submit\",\n cancelButtonSelector: \".lightbox-dialog__cancel\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultInputOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._submitButtonEl = this._el.querySelector(this._options.submitButtonSelector);\n this._cancelButtonEl = this._el.querySelector(this._options.cancelButtonSelector);\n this._onSubmitButtonClickListener = _onSubmitButtonClick.bind(this);\n this._onCancelButtonClickListener = _onCancelButtonClick.bind(this);\n this._submitButtonEl.addEventListener(\"click\", this._onSubmitButtonClickListener);\n this._cancelButtonEl.addEventListener(\"click\", this._onCancelButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._submitButtonEl.removeEventListener(\"click\", this._onSubmitButtonClickListener);\n this._cancelButtonEl.removeEventListener(\"click\", this._onCancelButtonClickListener);\n }\n submit() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-submit\"));\n }\n cancel() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cancel\"));\n }\n destroy() {\n super.destroy();\n this._onSubmitButtonClickListener = null;\n this._onCancelButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onSubmitButtonClick() {\n this.submit();\n}\nfunction _onCancelButtonClick() {\n this.cancel();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultPanelOptions = {\n baseClass: \"panel-dialog\",\n quickDismiss: true,\n closeButtonSelector: \".panel-dialog__close\",\n doneButtonSelector: \".panel-dialog__done\",\n windowSelector: \".panel-dialog__window\",\n transitionsModifier: \"mask-fade-slow\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultPanelOptions, selectedOptions));\n }\n}\nexports.default = _default;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultSnackbarOptions = {\n autoDismissTimer: 6000,\n baseClass: \"snackbar-dialog\",\n ctaButtonSelector: \".snackbar-dialog__cta\",\n transitionsModifier: \"transition\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultSnackbarOptions, selectedOptions));\n this._autoDismissTimeout = null;\n }\n _show() {\n var _this = this;\n super._show();\n this._autoDismissTimeout = setTimeout(function () {\n let widget = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this;\n return widget.close();\n }, this._options.autoDismissTimer);\n }\n _observeEvents() {\n super._observeEvents();\n this._ctaEl = this._el.querySelector(this._options.ctaButtonSelector);\n if (this._ctaEl) {\n this._onCtaClickListener = _onCtaButtonClick.bind(this);\n this._ctaEl.addEventListener(\"click\", this._onCtaClickListener);\n }\n }\n _unobserveEvents() {\n super._unobserveEvents();\n if (this._ctaEl) {\n this._ctaEl.removeEventListener(\"click\", this._onCtaClickListener);\n }\n }\n cta() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cta\"));\n }\n destroy() {\n super.destroy();\n this._onCtaClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onCtaButtonClick() {\n this.cta();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultToastOptions = {\n baseClass: \"toast-dialog\",\n closeButtonSelector: \".toast-dialog__close\",\n ctaButtonSelector: \".toast-dialog__cta\",\n transitionsModifier: \"transition\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultToastOptions, selectedOptions));\n }\n _show() {\n super._show();\n }\n _observeEvents() {\n super._observeEvents();\n this._ctaEl = this._el.querySelector(this._options.ctaButtonSelector);\n if (this._ctaEl) {\n this._onCtaClickListener = _onCtaButtonClick.bind(this);\n this._ctaEl.addEventListener(\"click\", this._onCtaClickListener);\n }\n }\n _unobserveEvents() {\n super._unobserveEvents();\n if (this._ctaEl) {\n this._ctaEl.removeEventListener(\"click\", this._onCtaClickListener);\n }\n }\n cta() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cta\"));\n }\n destroy() {\n super.destroy();\n this._onCtaClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onCtaButtonClick() {\n this.cta();\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/utility\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/link\");\nrequire(\"@ebay/skin/textbox\");\nrequire(\"@ebay/skin/alert-dialog\");\nrequire(\"@ebay/skin/confirm-dialog\");\nrequire(\"@ebay/skin/drawer-dialog\");\nrequire(\"@ebay/skin/fullscreen-dialog\");\nrequire(\"@ebay/skin/lightbox-dialog\");\nrequire(\"@ebay/skin/panel-dialog\");\nrequire(\"@ebay/skin/snackbar-dialog\");\nrequire(\"@ebay/skin/toast-dialog\");\nvar _makeupDialogButton = _interopRequireDefault(require(\"makeup-dialog-button\"));\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nvar _makeupAlertDialog = _interopRequireDefault(require(\"makeup-alert-dialog\"));\nvar _makeupConfirmDialog = _interopRequireDefault(require(\"makeup-confirm-dialog\"));\nvar _makeupDrawerDialog = _interopRequireDefault(require(\"makeup-drawer-dialog\"));\nvar _makeupFullscreenDialog = _interopRequireDefault(require(\"makeup-fullscreen-dialog\"));\nvar _makeupInputDialog = _interopRequireDefault(require(\"makeup-input-dialog\"));\nvar _makeupPanelDialog = _interopRequireDefault(require(\"makeup-panel-dialog\"));\nvar _makeupSnackbarDialog = _interopRequireDefault(require(\"makeup-snackbar-dialog\"));\nvar _makeupToastDialog = _interopRequireDefault(require(\"makeup-toast-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// STYLES\n\n// REQUIRE\n/*\nconst DialogButton = require('makeup-dialog-button');\nconst LightboxDialog = require('makeup-lightbox-dialog');\nconst AlertDialog = require('makeup-alert-dialog');\nconst ConfirmDialog = require('makeup-confirm-dialog');\nconst DrawerDialog = require('makeup-drawer-dialog');\nconst FullscreenDialog = require('makeup-fullscreen-dialog');\nconst InputDialog = require('makeup-input-dialog');\nconst PanelDialog = require('makeup-panel-dialog');\nconst SnackbarDialog = require('makeup-snackbar-dialog');\nconst ToastDialog = require('makeup-toast-dialog');\n*/\n\n// IMPORT\n\nconst log = e => console.log(e); // eslint-disable-line no-console\n\nwindow.onload = function () {\n document.querySelectorAll(\".dialog-button\").forEach(function (el, i) {\n const dialogId = el.dataset.makeupFor;\n const dialogEl = document.getElementById(dialogId);\n const dialogClassList = dialogEl.classList;\n let dialogWidget;\n if (dialogClassList.contains(\"confirm-dialog\")) {\n dialogWidget = new _makeupConfirmDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"alert-dialog\")) {\n dialogWidget = new _makeupAlertDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"lightbox-dialog--input\")) {\n dialogWidget = new _makeupInputDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"fullscreen-dialog\")) {\n dialogWidget = new _makeupFullscreenDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"snackbar-dialog\")) {\n dialogWidget = new _makeupSnackbarDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"toast-dialog\")) {\n dialogWidget = new _makeupToastDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"drawer-dialog\")) {\n dialogWidget = new _makeupDrawerDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"panel-dialog\")) {\n dialogWidget = new _makeupPanelDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"lightbox-dialog\")) {\n dialogWidget = new _makeupLightboxDialog.default(dialogEl);\n }\n const buttonWidget = new _makeupDialogButton.default(el, dialogWidget);\n dialogWidget._el.addEventListener(\"dialog-open\", log);\n dialogWidget._el.addEventListener(\"dialog-close\", log);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-dialog-button/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0C;;;;;;;;ACAlD,mBAAO,CAAC,IAAwC;;;;;;;;ACAhD,mBAAO,CAAC,GAAgD;;;;;;;;ACAxD,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,IAA4C;;;;;;;;ACApD,mBAAO,CAAC,GAAsB;;;;;;;;ACA9B,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAA4C;;;;;;;;ACApD,mBAAO,CAAC,IAA4B;;;;;;;;ACApC,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;ACAxC,mBAAO,CAAC,IAA4B;;;;;;;;;;ACApC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,IAAsB;AACxD,8BAA8B,mBAAO,CAAC,IAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;;;AC1Ca;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACxDa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ea;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;;;AC3Ca;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA,kBAAe;;;;;;;;;ACvBF;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACtDa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;;;ACzCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA,kBAAe;;;;;;;;;ACtBF;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;;;ACtDa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;UChDA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAoB;AAC5B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,IAAiB;AACzB,mBAAO,CAAC,IAAoB;AAC5B,mBAAO,CAAC,IAAyB;AACjC,mBAAO,CAAC,IAA2B;AACnC,mBAAO,CAAC,IAA0B;AAClC,mBAAO,CAAC,IAA8B;AACtC,mBAAO,CAAC,IAA4B;AACpC,mBAAO,CAAC,GAAyB;AACjC,mBAAO,CAAC,IAA4B;AACpC,mBAAO,CAAC,IAAyB;AACjC,iDAAiD,mBAAO,CAAC,IAAsB;AAC/E,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,kDAAkD,mBAAO,CAAC,GAAuB;AACjF,iDAAiD,mBAAO,CAAC,IAAsB;AAC/E,qDAAqD,mBAAO,CAAC,IAA0B;AACvF,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,iCAAiC;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/alert-dialog.js","webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/confirm-dialog.js","webpack://root/./node_modules/@ebay/skin/drawer-dialog.js","webpack://root/./node_modules/@ebay/skin/fullscreen-dialog.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/lightbox-dialog.js","webpack://root/./node_modules/@ebay/skin/link.js","webpack://root/./node_modules/@ebay/skin/panel-dialog.js","webpack://root/./node_modules/@ebay/skin/snackbar-dialog.js","webpack://root/./node_modules/@ebay/skin/textbox.js","webpack://root/./node_modules/@ebay/skin/toast-dialog.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./node_modules/@ebay/skin/utility.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/alert-dialog/alert-dialog.css?1d20","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/confirm-dialog/confirm-dialog.css?448d","webpack://root/./node_modules/@ebay/skin/dist/drawer-dialog/drawer-dialog.css?5b6e","webpack://root/./node_modules/@ebay/skin/dist/fullscreen-dialog/fullscreen-dialog.css?df3a","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css?d75e","webpack://root/./node_modules/@ebay/skin/dist/link/link.css?4616","webpack://root/./node_modules/@ebay/skin/dist/panel-dialog/panel-dialog.css?ed5b","webpack://root/./node_modules/@ebay/skin/dist/snackbar-dialog/snackbar-dialog.css?c7bb","webpack://root/./node_modules/@ebay/skin/dist/textbox/textbox.css?d7ec","webpack://root/./node_modules/@ebay/skin/dist/toast-dialog/toast-dialog.css?81ab","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./node_modules/@ebay/skin/dist/utility/utility.css?6c3b","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-alert-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-confirm-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog-button/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-drawer-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-fullscreen-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-input-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-panel-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-snackbar-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-toast-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-dialog-button/index.compiled.js"],"sourcesContent":["require('./dist/alert-dialog/alert-dialog.css');\n","require('./dist/button/button.css');\n","require('./dist/confirm-dialog/confirm-dialog.css');\n","require('./dist/drawer-dialog/drawer-dialog.css');\n","require('./dist/fullscreen-dialog/fullscreen-dialog.css');\n","require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/lightbox-dialog/lightbox-dialog.css');\n","require('./dist/link/link.css');\n","require('./dist/panel-dialog/panel-dialog.css');\n","require('./dist/snackbar-dialog/snackbar-dialog.css');\n","require('./dist/textbox/textbox.css');\n","require('./dist/toast-dialog/toast-dialog.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","require('./dist/utility/utility.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultAlertOptions = {\n baseClass: \"alert-dialog\",\n baseClassModifier: \"alert\",\n quickDismiss: false,\n acknowledgeButtonSelector: \".alert-dialog__acknowledge\",\n windowSelector: \".alert-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultAlertOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._acknowledgeButtonEl = this._el.querySelector(this._options.acknowledgeButtonSelector);\n this._onAcknowledgeButtonClickListener = _onAcknowledgeButtonClick.bind(this);\n this._acknowledgeButtonEl.addEventListener(\"click\", this._onAcknowledgeButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._acknowledgeButtonEl.removeEventListener(\"click\", this._onAcknowledgeButtonClickListener);\n }\n acknowledge() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-acknowledge\"));\n }\n destroy() {\n super.destroy();\n this._onAcknowledgeButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onAcknowledgeButtonClick() {\n this.acknowledge();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultOptions = {\n baseClass: \"confirm-dialog\",\n closeButtonSelector: \".confirm-dialog__close\",\n quickDismiss: true,\n confirmButtonSelector: \".confirm-dialog__confirm\",\n focusManagementIndex: 1,\n rejectButtonSelector: \".confirm-dialog__reject\",\n windowSelector: \".confirm-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._confirmButtonEl = this._el.querySelector(this._options.confirmButtonSelector);\n this._rejectButtonEl = this._el.querySelector(this._options.rejectButtonSelector);\n this._onConfirmButtonClickListener = _onConfirmButtonClick.bind(this);\n this._onRejectButtonClickListener = _onRejectButtonClick.bind(this);\n this._confirmButtonEl.addEventListener(\"click\", this._onConfirmButtonClickListener);\n this._rejectButtonEl.addEventListener(\"click\", this._onRejectButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._confirmButtonEl.removeEventListener(\"click\", this._onConfirmButtonClickListener);\n this._rejectButtonEl.removeEventListener(\"click\", this._onRejectButtonClickListener);\n }\n confirm() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-confirm\"));\n }\n reject() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-reject\"));\n }\n destroy() {\n super.destroy();\n this._onConfirmButtonClickListener = null;\n this._onRejectButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onConfirmButtonClick() {\n this.confirm();\n}\nfunction _onRejectButtonClick() {\n this.reject();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nconst defaultOptions = {\n customElementMode: false\n};\nclass _default {\n constructor(widgetEl, dialog, selectedOptions) {\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this._el = widgetEl;\n this._el.setAttribute(\"aria-haspopup\", \"dialog\");\n this._dialog = dialog;\n this._onClickListener = _onClick.bind(this);\n this._onDialogCloseListener = _onDialogClose.bind(this);\n this._onMutationListener = _onMutation.bind(this);\n this._el.classList.add(\"dialog-button--js\");\n if (!this._options.customElementMode) {\n this._mutationObserver = new MutationObserver(this._onMutationListener);\n this._observeMutations();\n this._observeEvents();\n }\n }\n _observeMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.observe(this._el, {\n attributes: true,\n childList: false,\n subtree: false\n });\n }\n }\n _unobserveMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.disconnect();\n }\n }\n _observeEvents() {\n if (this._destroyed !== true) {\n this._el.addEventListener(\"click\", this._onClickListener);\n this._dialog._el.addEventListener(\"dialog-close\", this._onDialogCloseListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\");\n this._dialog._el.removeEventListener(\"dialog-close\", this._onDialogCloseListener);\n }\n destroy() {\n this._destroyed = true;\n this._unobserveMutations();\n this._unobserveEvents();\n this._onClickListener = null;\n this._onDialogCloseListener = null;\n this._onMutationListener = null;\n }\n}\nexports.default = _default;\nfunction _onMutation(mutationsList) {\n for (const mutation of mutationsList) {\n if (mutation.type === \"attributes\") {\n this._el.dispatchEvent(new CustomEvent(\"makeup-dialog-button-mutation\", {\n detail: {\n attributeName: mutation.attributeName\n }\n }));\n }\n }\n}\nfunction _onClick() {\n this._dialog.open();\n}\nfunction _onDialogClose() {\n if (this._dialog.modal === true) {\n this._el.focus();\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultDrawerOptions = {\n baseClass: \"drawer-dialog\",\n quickDismiss: true,\n closeButtonSelector: \".drawer-dialog__close\",\n focusManagementIndex: 1,\n resizeButtonSelector: \".drawer-dialog__handle\",\n windowSelector: \".drawer-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultDrawerOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._resizeButtonEl = this._el.querySelector(this._options.resizeButtonSelector);\n this._onResizeButtonClickListener = _onResizeButtonClick.bind(this);\n this._resizeButtonEl.addEventListener(\"click\", this._onResizeButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._resizeButtonEl.removeEventListener(\"click\", this._onResizeButtonClickListener);\n }\n resize() {\n this._el.querySelector(\".drawer-dialog__window\").classList.toggle(\"drawer-dialog__window--expanded\");\n this._el.dispatchEvent(new CustomEvent(\"dialog-resize\"));\n }\n destroy() {\n super.destroy();\n this._onResizeButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onResizeButtonClick() {\n this.resize();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultFullscreenOptions = {\n baseClass: \"fullscreen-dialog\",\n quickDismiss: false,\n closeButtonSelector: \".fullscreen-dialog__close\",\n transitionsModifier: \"transition\",\n windowSelector: \".fullscreen-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultFullscreenOptions, selectedOptions, {\n modal: true\n }));\n }\n}\nexports.default = _default;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultInputOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"input\",\n submitButtonSelector: \".lightbox-dialog__submit\",\n cancelButtonSelector: \".lightbox-dialog__cancel\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultInputOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._submitButtonEl = this._el.querySelector(this._options.submitButtonSelector);\n this._cancelButtonEl = this._el.querySelector(this._options.cancelButtonSelector);\n this._onSubmitButtonClickListener = _onSubmitButtonClick.bind(this);\n this._onCancelButtonClickListener = _onCancelButtonClick.bind(this);\n this._submitButtonEl.addEventListener(\"click\", this._onSubmitButtonClickListener);\n this._cancelButtonEl.addEventListener(\"click\", this._onCancelButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._submitButtonEl.removeEventListener(\"click\", this._onSubmitButtonClickListener);\n this._cancelButtonEl.removeEventListener(\"click\", this._onCancelButtonClickListener);\n }\n submit() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-submit\"));\n }\n cancel() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cancel\"));\n }\n destroy() {\n super.destroy();\n this._onSubmitButtonClickListener = null;\n this._onCancelButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onSubmitButtonClick() {\n this.submit();\n}\nfunction _onCancelButtonClick() {\n this.cancel();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultPanelOptions = {\n baseClass: \"panel-dialog\",\n quickDismiss: true,\n closeButtonSelector: \".panel-dialog__close\",\n doneButtonSelector: \".panel-dialog__done\",\n windowSelector: \".panel-dialog__window\",\n transitionsModifier: \"mask-fade-slow\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultPanelOptions, selectedOptions));\n }\n}\nexports.default = _default;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultSnackbarOptions = {\n autoDismissTimer: 6000,\n baseClass: \"snackbar-dialog\",\n ctaButtonSelector: \".snackbar-dialog__cta\",\n transitionsModifier: \"transition\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultSnackbarOptions, selectedOptions));\n this._autoDismissTimeout = null;\n }\n _show() {\n var _this = this;\n super._show();\n this._autoDismissTimeout = setTimeout(function () {\n let widget = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this;\n return widget.close();\n }, this._options.autoDismissTimer);\n }\n _observeEvents() {\n super._observeEvents();\n this._ctaEl = this._el.querySelector(this._options.ctaButtonSelector);\n if (this._ctaEl) {\n this._onCtaClickListener = _onCtaButtonClick.bind(this);\n this._ctaEl.addEventListener(\"click\", this._onCtaClickListener);\n }\n }\n _unobserveEvents() {\n super._unobserveEvents();\n if (this._ctaEl) {\n this._ctaEl.removeEventListener(\"click\", this._onCtaClickListener);\n }\n }\n cta() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cta\"));\n }\n destroy() {\n super.destroy();\n this._onCtaClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onCtaButtonClick() {\n this.cta();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultToastOptions = {\n baseClass: \"toast-dialog\",\n closeButtonSelector: \".toast-dialog__close\",\n ctaButtonSelector: \".toast-dialog__cta\",\n transitionsModifier: \"transition\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultToastOptions, selectedOptions));\n }\n _show() {\n super._show();\n }\n _observeEvents() {\n super._observeEvents();\n this._ctaEl = this._el.querySelector(this._options.ctaButtonSelector);\n if (this._ctaEl) {\n this._onCtaClickListener = _onCtaButtonClick.bind(this);\n this._ctaEl.addEventListener(\"click\", this._onCtaClickListener);\n }\n }\n _unobserveEvents() {\n super._unobserveEvents();\n if (this._ctaEl) {\n this._ctaEl.removeEventListener(\"click\", this._onCtaClickListener);\n }\n }\n cta() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cta\"));\n }\n destroy() {\n super.destroy();\n this._onCtaClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onCtaButtonClick() {\n this.cta();\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/utility\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/link\");\nrequire(\"@ebay/skin/textbox\");\nrequire(\"@ebay/skin/alert-dialog\");\nrequire(\"@ebay/skin/confirm-dialog\");\nrequire(\"@ebay/skin/drawer-dialog\");\nrequire(\"@ebay/skin/fullscreen-dialog\");\nrequire(\"@ebay/skin/lightbox-dialog\");\nrequire(\"@ebay/skin/panel-dialog\");\nrequire(\"@ebay/skin/snackbar-dialog\");\nrequire(\"@ebay/skin/toast-dialog\");\nvar _makeupDialogButton = _interopRequireDefault(require(\"makeup-dialog-button\"));\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nvar _makeupAlertDialog = _interopRequireDefault(require(\"makeup-alert-dialog\"));\nvar _makeupConfirmDialog = _interopRequireDefault(require(\"makeup-confirm-dialog\"));\nvar _makeupDrawerDialog = _interopRequireDefault(require(\"makeup-drawer-dialog\"));\nvar _makeupFullscreenDialog = _interopRequireDefault(require(\"makeup-fullscreen-dialog\"));\nvar _makeupInputDialog = _interopRequireDefault(require(\"makeup-input-dialog\"));\nvar _makeupPanelDialog = _interopRequireDefault(require(\"makeup-panel-dialog\"));\nvar _makeupSnackbarDialog = _interopRequireDefault(require(\"makeup-snackbar-dialog\"));\nvar _makeupToastDialog = _interopRequireDefault(require(\"makeup-toast-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// STYLES\n\n// REQUIRE\n/*\nconst DialogButton = require('makeup-dialog-button');\nconst LightboxDialog = require('makeup-lightbox-dialog');\nconst AlertDialog = require('makeup-alert-dialog');\nconst ConfirmDialog = require('makeup-confirm-dialog');\nconst DrawerDialog = require('makeup-drawer-dialog');\nconst FullscreenDialog = require('makeup-fullscreen-dialog');\nconst InputDialog = require('makeup-input-dialog');\nconst PanelDialog = require('makeup-panel-dialog');\nconst SnackbarDialog = require('makeup-snackbar-dialog');\nconst ToastDialog = require('makeup-toast-dialog');\n*/\n\n// IMPORT\n\nconst log = e => console.log(e); // eslint-disable-line no-console\n\nwindow.onload = function () {\n document.querySelectorAll(\".dialog-button\").forEach(function (el, i) {\n const dialogId = el.dataset.makeupFor;\n const dialogEl = document.getElementById(dialogId);\n const dialogClassList = dialogEl.classList;\n let dialogWidget;\n if (dialogClassList.contains(\"confirm-dialog\")) {\n dialogWidget = new _makeupConfirmDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"alert-dialog\")) {\n dialogWidget = new _makeupAlertDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"lightbox-dialog--input\")) {\n dialogWidget = new _makeupInputDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"fullscreen-dialog\")) {\n dialogWidget = new _makeupFullscreenDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"snackbar-dialog\")) {\n dialogWidget = new _makeupSnackbarDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"toast-dialog\")) {\n dialogWidget = new _makeupToastDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"drawer-dialog\")) {\n dialogWidget = new _makeupDrawerDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"panel-dialog\")) {\n dialogWidget = new _makeupPanelDialog.default(dialogEl);\n } else if (dialogClassList.contains(\"lightbox-dialog\")) {\n dialogWidget = new _makeupLightboxDialog.default(dialogEl);\n }\n const buttonWidget = new _makeupDialogButton.default(el, dialogWidget);\n dialogWidget._el.addEventListener(\"dialog-open\", log);\n dialogWidget._el.addEventListener(\"dialog-close\", log);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-drawer-dialog/index.css b/docs/ui/makeup-drawer-dialog/index.css index 6c65bfed..9e271cf7 100644 --- a/docs/ui/makeup-drawer-dialog/index.css +++ b/docs/ui/makeup-drawer-dialog/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-drawer-dialog/index.css.map b/docs/ui/makeup-drawer-dialog/index.css.map index 3579a109..b200d2af 100644 --- a/docs/ui/makeup-drawer-dialog/index.css.map +++ b/docs/ui/makeup-drawer-dialog/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-drawer-dialog/index.css","mappings":"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ACA;IACI,sBAAsB;IACtB,qBAAqB;AACzB;AACA;IACI,yBAAyB;IACzB,YAAY;IACZ,OAAO;IACP,kBAAkB;IAClB,YAAY;IACZ,kBAAkB;IAClB,QAAQ;IACR,SAAS;IACT,UAAU;AACd;AACA;IACI,wEAAwE;IACxE,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,WAAW;IACX,WAAW;AACf;AACA;IACI,sBAAsB;IACtB,cAAc;IACd,gBAAgB;IAChB,cAAc;IACd,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI,aAAa;IACb,mBAAmB;IACnB,uBAAuB;IACvB,aAAa;IACb,kBAAkB;AACtB;AACA;IACI,OAAO;AACX;AACA;IACI,gBAAgB;AACpB;AACA;IACI,sBAAsB;IACtB,SAAS;IACT,YAAY;IACZ,eAAe;IACf,kBAAkB;IAClB,WAAW;IACX,UAAU;AACd;AACA;IACI;;;KAGC;IACD,oEAAoE;IACpE,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,eAAe;IACf,eAAe;IACf,gBAAgB;IAChB,kBAAkB;IAClB,+BAA+B;AACnC;AACA;IACI,WAAW;IACX,eAAe;AACnB;AACA;IACI,qCAAqC;AACzC;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,kCAAkC;AACtC;AACA;;IAEI,oCAAoC;AACxC;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;IAEI,2BAA2B;AAC/B;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;IAEI,UAAU;AACd;AACA;;IAEI,wBAAwB;AAC5B;AACA;IACI,aAAa;AACjB","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/icon/icon.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/drawer-dialog/drawer-dialog.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n","svg.icon {\n display: inline-block;\n fill: currentColor;\n pointer-events: none;\n stroke: currentColor;\n stroke-width: 0;\n vertical-align: middle;\n}\nsvg.icon--12,\nsvg.icon--12-fit {\n height: 12px;\n width: 12px;\n}\nsvg.icon--16,\nsvg.icon--16-fit {\n height: 16px;\n width: 16px;\n}\nsvg.icon--18,\nsvg.icon--18-fit {\n height: 18px;\n width: 18px;\n}\nsvg.icon--20,\nsvg.icon--20-fit {\n height: 20px;\n width: 20px;\n}\nsvg.icon--24,\nsvg.icon--24-fit {\n height: 24px;\n width: 24px;\n}\nsvg.icon--30,\nsvg.icon--30-fit {\n height: 30px;\n width: 30px;\n}\nsvg.icon--32,\nsvg.icon--32-fit {\n height: 32px;\n width: 32px;\n}\nsvg.icon--40,\nsvg.icon--40-fit {\n height: 40px;\n width: 40px;\n}\nsvg.icon--48,\nsvg.icon--48-fit {\n height: 48px;\n width: 48px;\n}\nsvg.icon--64,\nsvg.icon--64-fit {\n height: 32px;\n width: 64px;\n}\nsvg.icon--12-colored {\n height: 12px;\n width: fit-content;\n}\nsvg.icon--16-colored {\n height: 16px;\n width: fit-content;\n}\nsvg.icon--18-colored {\n height: 18px;\n width: fit-content;\n}\nsvg.icon--20-colored {\n height: 20px;\n width: fit-content;\n}\nsvg.icon--24-colored {\n height: 24px;\n width: fit-content;\n}\nsvg.icon--30-colored {\n height: 30px;\n width: fit-content;\n}\nsvg.icon--32-colored {\n height: 32px;\n width: fit-content;\n}\nsvg.icon--48-colored {\n height: 48px;\n width: fit-content;\n}\nsvg.icon--64-colored {\n height: 64px;\n width: fit-content;\n}\nsvg.icon--disabled {\n filter: var(--color-media-disabled-filter);\n}\nsvg.icon--attention-filled {\n color: var(--color-foreground-attention);\n}\nsvg.icon--confirmation-filled {\n color: var(--color-foreground-success);\n}\nsvg.icon--information-filled {\n color: var(--color-foreground-accent);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n","/*! DEPRECATED COMPONENT. Will be removed next major version */\n/*! DEPRECATED COMPONENT. Will be removed next major version */\n:root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.drawer-dialog[role=\"dialog\"] {\n align-items: flex-end;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n overflow: hidden;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.drawer-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.drawer-dialog--no-mask[role=\"dialog\"] {\n background-color: initial;\n}\n.drawer-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-250) var(--spacing-200) 0;\n position: relative;\n}\n.drawer-dialog__header h1,\n.drawer-dialog__header h2,\n.drawer-dialog__header h3,\n.drawer-dialog__header h4,\n.drawer-dialog__header h5,\n.drawer-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.drawer-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.drawer-dialog__header .fake-link {\n align-self: flex-start;\n text-decoration: none;\n}\n.drawer-dialog__handle {\n background-color: initial;\n border: none;\n left: 0;\n margin: -11px auto;\n padding: 8px;\n position: relative;\n right: 0;\n top: 11px;\n z-index: 2;\n}\n.drawer-dialog__handle:after {\n background-color: var(--dialog-handle-color, var(--color-border-medium));\n border-radius: 3px;\n content: \"\";\n display: block;\n height: 2px;\n width: 24px;\n}\n.drawer-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: auto;\n overflow: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.drawer-dialog__main > :first-child {\n margin-top: 0;\n}\n.drawer-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.drawer-dialog__footer {\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding: 16px;\n position: relative;\n}\n.drawer-dialog__footer > * {\n flex: 1;\n}\n.drawer-dialog__footer > :not(:first-child) {\n margin-left: 8px;\n}\nbutton.icon-btn.drawer-dialog__close {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n position: relative;\n width: 32px;\n z-index: 1;\n}\n.drawer-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n max-height: 50%;\n max-width: 100%;\n min-height: 55px;\n overflow-y: hidden;\n will-change: opacity, transform;\n}\n.drawer-dialog__window--expanded {\n height: 95%;\n max-height: 95%;\n}\n.drawer-dialog__window--slide {\n transition: max-height 0.32s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade,\n.drawer-dialog--show.drawer-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show.drawer-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.drawer-dialog--hide .drawer-dialog__window--fade,\n.drawer-dialog--show .drawer-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.drawer-dialog--hide .drawer-dialog__window--slide,\n.drawer-dialog--show .drawer-dialog__window--slide {\n transition: transform 0.32s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--show-init,\n.drawer-dialog--hidedrawer-dialog--hide,\n.drawer-dialog--show-init.drawer-dialog--show-init,\n.drawer-dialog--show-initdrawer-dialog--hide {\n display: flex;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade,\n.drawer-dialog--hide.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show-init.drawer-dialog--mask-fade,\n.drawer-dialog--show-init.drawer-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.drawer-dialog--hide .drawer-dialog__window--slide,\n.drawer-dialog--show-init .drawer-dialog__window--slide {\n transform: translateY(100%);\n}\n.drawer-dialog--hide-init.drawer-dialog--hide-init,\n.drawer-dialog--hide-init.drawer-dialog--show,\n.drawer-dialog--show.drawer-dialog--hide-init,\n.drawer-dialog--show.drawer-dialog--show {\n display: flex;\n}\n.drawer-dialog--hide-init.drawer-dialog--mask-fade,\n.drawer-dialog--hide-init.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show.drawer-dialog--mask-fade,\n.drawer-dialog--show.drawer-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.drawer-dialog--hide-init .drawer-dialog__window--fade,\n.drawer-dialog--show .drawer-dialog__window--fade {\n opacity: 1;\n}\n.drawer-dialog--hide-init .drawer-dialog__window--slide,\n.drawer-dialog--show .drawer-dialog__window--slide {\n transform: translateX(0);\n}\n.drawer-dialog__handle:focus:not(:focus-visible) {\n outline: none;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-drawer-dialog/index.css","mappings":"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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/icon/icon.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/drawer-dialog/drawer-dialog.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n","svg.icon {\n display: inline-block;\n fill: currentColor;\n pointer-events: none;\n stroke: currentColor;\n stroke-width: 0;\n vertical-align: middle;\n}\nsvg.icon--12,\nsvg.icon--12-fit {\n height: 12px;\n width: 12px;\n}\nsvg.icon--16,\nsvg.icon--16-fit {\n height: 16px;\n width: 16px;\n}\nsvg.icon--18,\nsvg.icon--18-fit {\n height: 18px;\n width: 18px;\n}\nsvg.icon--20,\nsvg.icon--20-fit {\n height: 20px;\n width: 20px;\n}\nsvg.icon--24,\nsvg.icon--24-fit {\n height: 24px;\n width: 24px;\n}\nsvg.icon--30,\nsvg.icon--30-fit {\n height: 30px;\n width: 30px;\n}\nsvg.icon--32,\nsvg.icon--32-fit {\n height: 32px;\n width: 32px;\n}\nsvg.icon--40,\nsvg.icon--40-fit {\n height: 40px;\n width: 40px;\n}\nsvg.icon--48,\nsvg.icon--48-fit {\n height: 48px;\n width: 48px;\n}\nsvg.icon--64,\nsvg.icon--64-fit {\n height: 32px;\n width: 64px;\n}\nsvg.icon--12-colored {\n height: 12px;\n width: fit-content;\n}\nsvg.icon--16-colored {\n height: 16px;\n width: fit-content;\n}\nsvg.icon--18-colored {\n height: 18px;\n width: fit-content;\n}\nsvg.icon--20-colored {\n height: 20px;\n width: fit-content;\n}\nsvg.icon--24-colored {\n height: 24px;\n width: fit-content;\n}\nsvg.icon--30-colored {\n height: 30px;\n width: fit-content;\n}\nsvg.icon--32-colored {\n height: 32px;\n width: fit-content;\n}\nsvg.icon--48-colored {\n height: 48px;\n width: fit-content;\n}\nsvg.icon--64-colored {\n height: 64px;\n width: fit-content;\n}\nsvg.icon--disabled {\n filter: var(--color-media-disabled-filter);\n}\nsvg.icon--attention-filled {\n color: var(--color-foreground-attention);\n}\nsvg.icon--confirmation-filled {\n color: var(--color-foreground-success);\n}\nsvg.icon--information-filled {\n color: var(--color-foreground-accent);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n","/*! DEPRECATED COMPONENT. Will be removed next major version */\n/*! DEPRECATED COMPONENT. Will be removed next major version */\n:root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.drawer-dialog[role=\"dialog\"] {\n align-items: flex-end;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n overflow: hidden;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.drawer-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.drawer-dialog--no-mask[role=\"dialog\"] {\n background-color: initial;\n}\n.drawer-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-250) var(--spacing-200) 0;\n position: relative;\n}\n.drawer-dialog__header h1,\n.drawer-dialog__header h2,\n.drawer-dialog__header h3,\n.drawer-dialog__header h4,\n.drawer-dialog__header h5,\n.drawer-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.drawer-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.drawer-dialog__header .fake-link {\n align-self: flex-start;\n text-decoration: none;\n}\n.drawer-dialog__handle {\n background-color: initial;\n border: none;\n left: 0;\n margin: -11px auto;\n padding: 8px;\n position: relative;\n right: 0;\n top: 11px;\n z-index: 2;\n}\n.drawer-dialog__handle:after {\n background-color: var(--dialog-handle-color, var(--color-border-medium));\n border-radius: 3px;\n content: \"\";\n display: block;\n height: 2px;\n width: 24px;\n}\n.drawer-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: auto;\n overflow: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.drawer-dialog__main > :first-child {\n margin-top: 0;\n}\n.drawer-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.drawer-dialog__footer {\n display: flex;\n flex-direction: row;\n justify-content: center;\n padding: 16px;\n position: relative;\n}\n.drawer-dialog__footer > * {\n flex: 1;\n}\n.drawer-dialog__footer > :not(:first-child) {\n margin-left: 8px;\n}\nbutton.icon-btn.drawer-dialog__close {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n position: relative;\n width: 32px;\n z-index: 1;\n}\n.drawer-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n max-height: 50%;\n max-width: 100%;\n min-height: 55px;\n overflow-y: hidden;\n will-change: opacity, transform;\n}\n.drawer-dialog__window--expanded {\n height: 95%;\n max-height: 95%;\n}\n.drawer-dialog__window--slide {\n transition: max-height 0.32s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade,\n.drawer-dialog--show.drawer-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show.drawer-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.drawer-dialog--hide .drawer-dialog__window--fade,\n.drawer-dialog--show .drawer-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.drawer-dialog--hide .drawer-dialog__window--slide,\n.drawer-dialog--show .drawer-dialog__window--slide {\n transition: transform 0.32s ease-out;\n}\n.drawer-dialog--hide.drawer-dialog--show-init,\n.drawer-dialog--hidedrawer-dialog--hide,\n.drawer-dialog--show-init.drawer-dialog--show-init,\n.drawer-dialog--show-initdrawer-dialog--hide {\n display: flex;\n}\n.drawer-dialog--hide.drawer-dialog--mask-fade,\n.drawer-dialog--hide.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show-init.drawer-dialog--mask-fade,\n.drawer-dialog--show-init.drawer-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.drawer-dialog--hide .drawer-dialog__window--slide,\n.drawer-dialog--show-init .drawer-dialog__window--slide {\n transform: translateY(100%);\n}\n.drawer-dialog--hide-init.drawer-dialog--hide-init,\n.drawer-dialog--hide-init.drawer-dialog--show,\n.drawer-dialog--show.drawer-dialog--hide-init,\n.drawer-dialog--show.drawer-dialog--show {\n display: flex;\n}\n.drawer-dialog--hide-init.drawer-dialog--mask-fade,\n.drawer-dialog--hide-init.drawer-dialog--mask-fade-slow,\n.drawer-dialog--show.drawer-dialog--mask-fade,\n.drawer-dialog--show.drawer-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.drawer-dialog--hide-init .drawer-dialog__window--fade,\n.drawer-dialog--show .drawer-dialog__window--fade {\n opacity: 1;\n}\n.drawer-dialog--hide-init .drawer-dialog__window--slide,\n.drawer-dialog--show .drawer-dialog__window--slide {\n transform: translateX(0);\n}\n.drawer-dialog__handle:focus:not(:focus-visible) {\n outline: none;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-drawer-dialog/index.html b/docs/ui/makeup-drawer-dialog/index.html index 222d4fb4..7d539e66 100644 --- a/docs/ui/makeup-drawer-dialog/index.html +++ b/docs/ui/makeup-drawer-dialog/index.html @@ -2,88 +2,81 @@ makeup-drawer-dialog + + + - -
                                    -
                                    -

                                    makeup-drawer-dialog

                                    -

                                    - NOTE: Drawer dialog is an adaptive pattern with its roots in mobile app architecture. For a - fully responsive web pattern we recommend lightbox-dialog instead. -

                                    -

                                    Drawer-Dialog is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    - This page was loaded with the dialog in an "open" state. To see examples of dialogs opened by button click, - visit the makeup-dialog-button page. -

                                    -
                                    -
                                    - +
                                    diff --git a/docs/ui/makeup-drawer-dialog/index.min.js b/docs/ui/makeup-drawer-dialog/index.min.js index 10afb139..544702fd 100644 --- a/docs/ui/makeup-drawer-dialog/index.min.js +++ b/docs/ui/makeup-drawer-dialog/index.min.js @@ -139,9 +139,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(4490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(8448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(4490); +var _makeupScreenreaderTrap = __webpack_require__(8448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -164,6 +163,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -172,6 +176,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -179,7 +189,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -190,7 +200,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -206,8 +216,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -220,7 +230,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -229,11 +242,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/docs/ui/makeup-drawer-dialog/index.min.js.map b/docs/ui/makeup-drawer-dialog/index.min.js.map index 6865ed94..5868915a 100644 --- a/docs/ui/makeup-drawer-dialog/index.min.js.map +++ b/docs/ui/makeup-drawer-dialog/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-drawer-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAAwC;;;;;;;;ACAhD,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,GAAsB;;;;;;;;ACA9B,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,IAAsB;AACzE,+CAA+C,mBAAO,CAAC,IAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;;;AC3Ca;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;UCzCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAiB;AACzB,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,IAA0B;AAClC,iDAAiD,mBAAO,CAAC,IAAsB;AAC/E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/drawer-dialog.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/icon.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/drawer-dialog/drawer-dialog.css?5b6e","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/icon/icon.css?674d","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-drawer-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-drawer-dialog/index.compiled.js"],"sourcesContent":["require('./dist/drawer-dialog/drawer-dialog.css');\n","require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/icon/icon.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultDrawerOptions = {\n baseClass: \"drawer-dialog\",\n quickDismiss: true,\n closeButtonSelector: \".drawer-dialog__close\",\n focusManagementIndex: 1,\n resizeButtonSelector: \".drawer-dialog__handle\",\n windowSelector: \".drawer-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultDrawerOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._resizeButtonEl = this._el.querySelector(this._options.resizeButtonSelector);\n this._onResizeButtonClickListener = _onResizeButtonClick.bind(this);\n this._resizeButtonEl.addEventListener(\"click\", this._onResizeButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._resizeButtonEl.removeEventListener(\"click\", this._onResizeButtonClickListener);\n }\n resize() {\n this._el.querySelector(\".drawer-dialog__window\").classList.toggle(\"drawer-dialog__window--expanded\");\n this._el.dispatchEvent(new CustomEvent(\"dialog-resize\"));\n }\n destroy() {\n super.destroy();\n this._onResizeButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onResizeButtonClick() {\n this.resize();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/icon\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/drawer-dialog\");\nvar _makeupDrawerDialog = _interopRequireDefault(require(\"makeup-drawer-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const DrawerDialog = require('makeup-drawer-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".drawer-dialog\").forEach(function (el, i) {\n const widget = new _makeupDrawerDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-drawer-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAAwC;;;;;;;;ACAhD,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,GAAsB;;;;;;;;ACA9B,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,IAAsB;AACxD,8BAA8B,mBAAO,CAAC,IAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;;;AC3Ca;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;UCzCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAiB;AACzB,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,IAA0B;AAClC,iDAAiD,mBAAO,CAAC,IAAsB;AAC/E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/drawer-dialog.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/icon.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/drawer-dialog/drawer-dialog.css?5b6e","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/icon/icon.css?674d","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-drawer-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-drawer-dialog/index.compiled.js"],"sourcesContent":["require('./dist/drawer-dialog/drawer-dialog.css');\n","require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/icon/icon.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultDrawerOptions = {\n baseClass: \"drawer-dialog\",\n quickDismiss: true,\n closeButtonSelector: \".drawer-dialog__close\",\n focusManagementIndex: 1,\n resizeButtonSelector: \".drawer-dialog__handle\",\n windowSelector: \".drawer-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultDrawerOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._resizeButtonEl = this._el.querySelector(this._options.resizeButtonSelector);\n this._onResizeButtonClickListener = _onResizeButtonClick.bind(this);\n this._resizeButtonEl.addEventListener(\"click\", this._onResizeButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._resizeButtonEl.removeEventListener(\"click\", this._onResizeButtonClickListener);\n }\n resize() {\n this._el.querySelector(\".drawer-dialog__window\").classList.toggle(\"drawer-dialog__window--expanded\");\n this._el.dispatchEvent(new CustomEvent(\"dialog-resize\"));\n }\n destroy() {\n super.destroy();\n this._onResizeButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onResizeButtonClick() {\n this.resize();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/icon\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/drawer-dialog\");\nvar _makeupDrawerDialog = _interopRequireDefault(require(\"makeup-drawer-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const DrawerDialog = require('makeup-drawer-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".drawer-dialog\").forEach(function (el, i) {\n const widget = new _makeupDrawerDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-floating-label/index.html b/docs/ui/makeup-floating-label/index.html index 879439da..9d8dd01b 100644 --- a/docs/ui/makeup-floating-label/index.html +++ b/docs/ui/makeup-floating-label/index.html @@ -1,8 +1,10 @@ - makeup-floating-label demo + makeup-floating-label + + -
                                    -

                                    makeup-floating-label demo

                                    +
                                    +

                                    ui / makeup-floating-label

                                    diff --git a/docs/ui/makeup-fullscreen-dialog/index.css b/docs/ui/makeup-fullscreen-dialog/index.css index a8817f06..1a1a89f9 100644 --- a/docs/ui/makeup-fullscreen-dialog/index.css +++ b/docs/ui/makeup-fullscreen-dialog/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-fullscreen-dialog/index.css.map b/docs/ui/makeup-fullscreen-dialog/index.css.map index c98cf999..4bd07d5c 100644 --- a/docs/ui/makeup-fullscreen-dialog/index.css.map +++ b/docs/ui/makeup-fullscreen-dialog/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-fullscreen-dialog/index.css","mappings":"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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/icon/icon.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/fullscreen-dialog/fullscreen-dialog.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n","svg.icon {\n display: inline-block;\n fill: currentColor;\n pointer-events: none;\n stroke: currentColor;\n stroke-width: 0;\n vertical-align: middle;\n}\nsvg.icon--12,\nsvg.icon--12-fit {\n height: 12px;\n width: 12px;\n}\nsvg.icon--16,\nsvg.icon--16-fit {\n height: 16px;\n width: 16px;\n}\nsvg.icon--18,\nsvg.icon--18-fit {\n height: 18px;\n width: 18px;\n}\nsvg.icon--20,\nsvg.icon--20-fit {\n height: 20px;\n width: 20px;\n}\nsvg.icon--24,\nsvg.icon--24-fit {\n height: 24px;\n width: 24px;\n}\nsvg.icon--30,\nsvg.icon--30-fit {\n height: 30px;\n width: 30px;\n}\nsvg.icon--32,\nsvg.icon--32-fit {\n height: 32px;\n width: 32px;\n}\nsvg.icon--40,\nsvg.icon--40-fit {\n height: 40px;\n width: 40px;\n}\nsvg.icon--48,\nsvg.icon--48-fit {\n height: 48px;\n width: 48px;\n}\nsvg.icon--64,\nsvg.icon--64-fit {\n height: 32px;\n width: 64px;\n}\nsvg.icon--12-colored {\n height: 12px;\n width: fit-content;\n}\nsvg.icon--16-colored {\n height: 16px;\n width: fit-content;\n}\nsvg.icon--18-colored {\n height: 18px;\n width: fit-content;\n}\nsvg.icon--20-colored {\n height: 20px;\n width: fit-content;\n}\nsvg.icon--24-colored {\n height: 24px;\n width: fit-content;\n}\nsvg.icon--30-colored {\n height: 30px;\n width: fit-content;\n}\nsvg.icon--32-colored {\n height: 32px;\n width: fit-content;\n}\nsvg.icon--48-colored {\n height: 48px;\n width: fit-content;\n}\nsvg.icon--64-colored {\n height: 64px;\n width: fit-content;\n}\nsvg.icon--disabled {\n filter: var(--color-media-disabled-filter);\n}\nsvg.icon--attention-filled {\n color: var(--color-foreground-attention);\n}\nsvg.icon--confirmation-filled {\n color: var(--color-foreground-success);\n}\nsvg.icon--information-filled {\n color: var(--color-foreground-accent);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n","/*! DEPRECATED COMPONENT. Will be removed next major version */\n/*! DEPRECATED COMPONENT. Will be removed next major version */\n:root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.fullscreen-dialog[role=\"dialog\"] {\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.fullscreen-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.fullscreen-dialog--no-mask[role=\"dialog\"] {\n background-color: initial;\n}\n.fullscreen-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n min-height: 55px;\n overflow-y: auto;\n width: 100%;\n will-change: opacity, transform;\n}\n.fullscreen-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.fullscreen-dialog__header h1,\n.fullscreen-dialog__header h2,\n.fullscreen-dialog__header h3,\n.fullscreen-dialog__header h4,\n.fullscreen-dialog__header h5,\n.fullscreen-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.fullscreen-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.fullscreen-dialog__header .fake-link {\n align-self: flex-start;\n outline-offset: 4px;\n text-decoration: none;\n}\n.fullscreen-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.fullscreen-dialog__main > :first-child {\n margin-top: 0;\n}\n.fullscreen-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.fullscreen-dialog__footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.fullscreen-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\nbutton.icon-btn.fullscreen-dialog__close {\n height: 32px;\n min-width: 32px;\n width: 32px;\n}\nbutton.fullscreen-dialog__back,\nbutton.fullscreen-dialog__close {\n align-self: flex-start;\n border: 0;\n padding: 0;\n position: relative;\n z-index: 1;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show .fullscreen-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide,\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide-end {\n transition: transform 0.32s ease-out;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--hide,\n.fullscreen-dialog--hide.fullscreen-dialog--show-init,\n.fullscreen-dialog--show-init.fullscreen-dialog--hide,\n.fullscreen-dialog--show-init.fullscreen-dialog--show-init {\n display: flex;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show-init.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show-init.fullscreen-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--fade {\n opacity: 0;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--slide {\n transform: translateY(100%);\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--slide-end {\n transform: translateX(100%);\n}\n.fullscreen-dialog--hide-init.fullscreen-dialog--hide-init,\n.fullscreen-dialog--hide-init.fullscreen-dialog--show,\n.fullscreen-dialog--show.fullscreen-dialog--hide-init,\n.fullscreen-dialog--show.fullscreen-dialog--show {\n display: flex;\n}\n.fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show .fullscreen-dialog__window--fade {\n opacity: 1;\n}\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide,\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide-end {\n transform: translateX(0);\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-fullscreen-dialog/index.css","mappings":"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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/icon/icon.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/fullscreen-dialog/fullscreen-dialog.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n","svg.icon {\n display: inline-block;\n fill: currentColor;\n pointer-events: none;\n stroke: currentColor;\n stroke-width: 0;\n vertical-align: middle;\n}\nsvg.icon--12,\nsvg.icon--12-fit {\n height: 12px;\n width: 12px;\n}\nsvg.icon--16,\nsvg.icon--16-fit {\n height: 16px;\n width: 16px;\n}\nsvg.icon--18,\nsvg.icon--18-fit {\n height: 18px;\n width: 18px;\n}\nsvg.icon--20,\nsvg.icon--20-fit {\n height: 20px;\n width: 20px;\n}\nsvg.icon--24,\nsvg.icon--24-fit {\n height: 24px;\n width: 24px;\n}\nsvg.icon--30,\nsvg.icon--30-fit {\n height: 30px;\n width: 30px;\n}\nsvg.icon--32,\nsvg.icon--32-fit {\n height: 32px;\n width: 32px;\n}\nsvg.icon--40,\nsvg.icon--40-fit {\n height: 40px;\n width: 40px;\n}\nsvg.icon--48,\nsvg.icon--48-fit {\n height: 48px;\n width: 48px;\n}\nsvg.icon--64,\nsvg.icon--64-fit {\n height: 32px;\n width: 64px;\n}\nsvg.icon--12-colored {\n height: 12px;\n width: fit-content;\n}\nsvg.icon--16-colored {\n height: 16px;\n width: fit-content;\n}\nsvg.icon--18-colored {\n height: 18px;\n width: fit-content;\n}\nsvg.icon--20-colored {\n height: 20px;\n width: fit-content;\n}\nsvg.icon--24-colored {\n height: 24px;\n width: fit-content;\n}\nsvg.icon--30-colored {\n height: 30px;\n width: fit-content;\n}\nsvg.icon--32-colored {\n height: 32px;\n width: fit-content;\n}\nsvg.icon--48-colored {\n height: 48px;\n width: fit-content;\n}\nsvg.icon--64-colored {\n height: 64px;\n width: fit-content;\n}\nsvg.icon--disabled {\n filter: var(--color-media-disabled-filter);\n}\nsvg.icon--attention-filled {\n color: var(--color-foreground-attention);\n}\nsvg.icon--confirmation-filled {\n color: var(--color-foreground-success);\n}\nsvg.icon--information-filled {\n color: var(--color-foreground-accent);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n","/*! DEPRECATED COMPONENT. Will be removed next major version */\n/*! DEPRECATED COMPONENT. Will be removed next major version */\n:root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.fullscreen-dialog[role=\"dialog\"] {\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.fullscreen-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.fullscreen-dialog--no-mask[role=\"dialog\"] {\n background-color: initial;\n}\n.fullscreen-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n min-height: 55px;\n overflow-y: auto;\n width: 100%;\n will-change: opacity, transform;\n}\n.fullscreen-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.fullscreen-dialog__header h1,\n.fullscreen-dialog__header h2,\n.fullscreen-dialog__header h3,\n.fullscreen-dialog__header h4,\n.fullscreen-dialog__header h5,\n.fullscreen-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.fullscreen-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.fullscreen-dialog__header .fake-link {\n align-self: flex-start;\n outline-offset: 4px;\n text-decoration: none;\n}\n.fullscreen-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.fullscreen-dialog__main > :first-child {\n margin-top: 0;\n}\n.fullscreen-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.fullscreen-dialog__footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.fullscreen-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\nbutton.icon-btn.fullscreen-dialog__close {\n height: 32px;\n min-width: 32px;\n width: 32px;\n}\nbutton.fullscreen-dialog__back,\nbutton.fullscreen-dialog__close {\n align-self: flex-start;\n border: 0;\n padding: 0;\n position: relative;\n z-index: 1;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show .fullscreen-dialog__window--fade {\n transition: opacity 0.16s ease-out;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide,\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide-end {\n transition: transform 0.32s ease-out;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--hide,\n.fullscreen-dialog--hide.fullscreen-dialog--show-init,\n.fullscreen-dialog--show-init.fullscreen-dialog--hide,\n.fullscreen-dialog--show-init.fullscreen-dialog--show-init {\n display: flex;\n}\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show-init.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show-init.fullscreen-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--fade {\n opacity: 0;\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--slide {\n transform: translateY(100%);\n}\n.fullscreen-dialog--hide .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show-init .fullscreen-dialog__window--slide-end {\n transform: translateX(100%);\n}\n.fullscreen-dialog--hide-init.fullscreen-dialog--hide-init,\n.fullscreen-dialog--hide-init.fullscreen-dialog--show,\n.fullscreen-dialog--show.fullscreen-dialog--hide-init,\n.fullscreen-dialog--show.fullscreen-dialog--show {\n display: flex;\n}\n.fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade-slow,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade,\n.fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--fade,\n.fullscreen-dialog--show .fullscreen-dialog__window--fade {\n opacity: 1;\n}\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide,\n.fullscreen-dialog--hide-init .fullscreen-dialog__window--slide-end,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide,\n.fullscreen-dialog--show .fullscreen-dialog__window--slide-end {\n transform: translateX(0);\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-fullscreen-dialog/index.html b/docs/ui/makeup-fullscreen-dialog/index.html index ff1a3c9d..66e64201 100644 --- a/docs/ui/makeup-fullscreen-dialog/index.html +++ b/docs/ui/makeup-fullscreen-dialog/index.html @@ -2,59 +2,52 @@ makeup-fullscreen-dialog + + + - -
                                    -
                                    -

                                    makeup-fullscreen-dialog

                                    -

                                    - NOTE: Fullscreen dialog is an adaptive pattern with its roots in mobile app architecture. For - a fully responsive web pattern we recommend lightbox-dialog instead. -

                                    -

                                    Fullscreen-Dialog is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    - This page was loaded with the dialog in an "open" state. To see examples of dialogs opened by button click, - visit the makeup-dialog-button page. -

                                    -
                                    -
                                    - +
                                    diff --git a/docs/ui/makeup-fullscreen-dialog/index.min.js b/docs/ui/makeup-fullscreen-dialog/index.min.js index e7df54a8..3038355b 100644 --- a/docs/ui/makeup-fullscreen-dialog/index.min.js +++ b/docs/ui/makeup-fullscreen-dialog/index.min.js @@ -139,9 +139,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(4490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(8448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(4490); +var _makeupScreenreaderTrap = __webpack_require__(8448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -164,6 +163,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -172,6 +176,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -179,7 +189,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -190,7 +200,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -206,8 +216,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -220,7 +230,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -229,11 +242,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/docs/ui/makeup-fullscreen-dialog/index.min.js.map b/docs/ui/makeup-fullscreen-dialog/index.min.js.map index 24f3bf14..35abf64f 100644 --- a/docs/ui/makeup-fullscreen-dialog/index.min.js.map +++ b/docs/ui/makeup-fullscreen-dialog/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-fullscreen-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,GAAgD;;;;;;;;ACAxD,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,GAAsB;;;;;;;;ACA9B,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,IAAsB;AACzE,+CAA+C,mBAAO,CAAC,IAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA,kBAAe;;;;;;;UCvBf;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAiB;AACzB,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,IAA8B;AACtC,qDAAqD,mBAAO,CAAC,IAA0B;AACvF,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/fullscreen-dialog.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/icon.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/fullscreen-dialog/fullscreen-dialog.css?df3a","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/icon/icon.css?674d","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-fullscreen-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-fullscreen-dialog/index.compiled.js"],"sourcesContent":["require('./dist/fullscreen-dialog/fullscreen-dialog.css');\n","require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/icon/icon.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultFullscreenOptions = {\n baseClass: \"fullscreen-dialog\",\n quickDismiss: false,\n closeButtonSelector: \".fullscreen-dialog__close\",\n transitionsModifier: \"transition\",\n windowSelector: \".fullscreen-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultFullscreenOptions, selectedOptions, {\n modal: true\n }));\n }\n}\nexports.default = _default;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/icon\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/fullscreen-dialog\");\nvar _makeupFullscreenDialog = _interopRequireDefault(require(\"makeup-fullscreen-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const FullscreenDialog = require('makeup-fullscreen-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".fullscreen-dialog\").forEach(function (el, i) {\n const widget = new _makeupFullscreenDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-fullscreen-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,GAAgD;;;;;;;;ACAxD,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,GAAsB;;;;;;;;ACA9B,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,IAAsB;AACxD,8BAA8B,mBAAO,CAAC,IAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA,kBAAe;;;;;;;UCvBf;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAiB;AACzB,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,IAA8B;AACtC,qDAAqD,mBAAO,CAAC,IAA0B;AACvF,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/fullscreen-dialog.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/icon.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/fullscreen-dialog/fullscreen-dialog.css?df3a","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/icon/icon.css?674d","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-fullscreen-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-fullscreen-dialog/index.compiled.js"],"sourcesContent":["require('./dist/fullscreen-dialog/fullscreen-dialog.css');\n","require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/icon/icon.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultFullscreenOptions = {\n baseClass: \"fullscreen-dialog\",\n quickDismiss: false,\n closeButtonSelector: \".fullscreen-dialog__close\",\n transitionsModifier: \"transition\",\n windowSelector: \".fullscreen-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultFullscreenOptions, selectedOptions, {\n modal: true\n }));\n }\n}\nexports.default = _default;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/icon\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/fullscreen-dialog\");\nvar _makeupFullscreenDialog = _interopRequireDefault(require(\"makeup-fullscreen-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const FullscreenDialog = require('makeup-fullscreen-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".fullscreen-dialog\").forEach(function (el, i) {\n const widget = new _makeupFullscreenDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-input-dialog/index.css b/docs/ui/makeup-input-dialog/index.css index d87d81ba..11a28d38 100644 --- a/docs/ui/makeup-input-dialog/index.css +++ b/docs/ui/makeup-input-dialog/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-input-dialog/index.css.map b/docs/ui/makeup-input-dialog/index.css.map index c4564900..cf68fed9 100644 --- a/docs/ui/makeup-input-dialog/index.css.map +++ b/docs/ui/makeup-input-dialog/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-input-dialog/index.css","mappings":"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CA;IACI,qCAAqC;AACzC;AACA;;IAEI,sBAAsB;IACtB,SAAS;AACb;AACA;IACI,kBAAkB;AACtB;AACA;IACI,+BAA+B;AACnC;AACA;IACI,kBAAkB;AACtB;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,wBAAwB;AAC5B;AACA;;IAEI,2BAA2B;AAC/B;AACA;IACI,wEAAwE;IACxE,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,WAAW;IACX,WAAW;AACf;AACA;IACI,yBAAyB;AAC7B;AACA;;IAEI,kBAAkB;IAClB,WAAW;IACX,0BAA0B;IAC1B,eAAe;AACnB;AACA;IACI;QACI,WAAW;QACX,eAAe;QACf,WAAW;IACf;IACA;QACI,gBAAgB;QAChB,YAAY;QACZ,SAAS;QACT,gBAAgB;QAChB,eAAe;QACf,WAAW;IACf;AACJ;AACA;IACI;QACI,sEAAsE;QACtE,YAAY;QACZ,cAAc;IAClB;IACA;QACI,kDAAkD;IACtD;IACA;QACI,mBAAmB;QACnB,yBAAyB;IAC7B;IACA;QACI,+BAA+B;QAC/B,aAAa;IACjB;IACA;;QAEI,mBAAmB;IACvB;IACA;;QAEI,sBAAsB;IAC1B;AACJ;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;IACA;QACI,cAAc;IAClB;IACA;QACI,aAAa;IACjB;IACA;;;QAGI,iBAAiB;IACrB;AACJ;AACA;IACI;QACI,gDAAgD;IACpD;AACJ;;AC3UA;IACI,4BAA4B;IAC5B,0BAA0B;AAC9B;;AAEA;IACI,mBAAmB;IACnB;;;KAGC;IACD,qEAAqE;IACrE,oEAAoE;IACpE,mBAAmB;IACnB,iBAAiB;IACjB,sBAAsB;IACtB,uEAAuE;IACvE,oBAAoB;IACpB,gCAAgC;IAChC,uBAAuB;IACvB,gBAAgB;IAChB,kBAAkB;IAClB,kBAAkB;AACtB;;AAEA;IACI,yBAAyB;IACzB,UAAU;AACd;;AAEA;;;;IAII;;;KAGC;IACD,2EAA2E;IAC3E,gDAAgD;AACpD;;AAEA;;IAEI,yBAAyB;IACzB,YAAY;AAChB;;AAEA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;IACI,yBAAyB;IACzB,YAAY;IACZ,sBAAsB;IACtB,cAAc;AAClB;;AAEA;IACI,oBAAoB;IACpB,iBAAiB;IACjB,cAAc;IACd,2BAA2B;IAC3B,gBAAgB;IAChB,sBAAsB;AAC1B;;AAEA;IACI,oBAAoB;IACpB,UAAU;IACV,sBAAsB;AAC1B;;AAEA;IACI,wCAAwC;AAC5C;;AAEA;IACI,sCAAsC;AAC1C;;AAEA;;IAEI,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,YAAY;IACZ,SAAS;IACT,aAAa;AACjB;;AAEA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI,0EAA0E;IAC1E,gBAAgB;IAChB,UAAU;AACd;;AAEA;IACI,+CAA+C;AACnD;;AAEA;IACI,6CAA6C;AACjD;;AAEA;;IAEI,mEAAmE;IACnE,oBAAoB;IACpB,kEAAkE;IAClE,WAAW;IACX,oBAAoB;AACxB;;AAEA;;IAEI,cAAc;IACd,uCAAuC;AAC3C;;AAEA;;IAEI,qCAAqC;AACzC;;AAEA;IACI,kDAAkD;AACtD;;AAEA;IACI,gDAAgD;AACpD;;AAEA;;IAEI,0BAA0B;AAC9B;;AAEA;;IAEI,WAAW;AACf","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/textbox/textbox.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n --dialog-lightbox-wide-max-width: 896px;\n --dialog-lightbox-narrow-max-width: 480px;\n}\n.lightbox-dialog[role=\"dialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.lightbox-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.lightbox-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-150));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto auto 16px;\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n will-change: opacity, transform;\n}\n.lightbox-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.lightbox-dialog__header h1,\n.lightbox-dialog__header h2,\n.lightbox-dialog__header h3,\n.lightbox-dialog__header h4,\n.lightbox-dialog__header h5,\n.lightbox-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.lightbox-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.lightbox-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: 18px;\n overflow: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__main > :first-child {\n margin-top: 0;\n}\n.lightbox-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.lightbox-dialog__footer {\n border-top: 1px solid\n var(--dialog-lightbox-separator-color, var(--color-border-subtle));\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\n.lightbox-dialog__image {\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;\n height: 218px;\n position: absolute;\n width: 100%;\n}\n.lightbox-dialog--expressive .lightbox-dialog__window {\n padding-bottom: var(--spacing-100);\n}\n.lightbox-dialog--expressive .lightbox-dialog__header > * {\n margin-top: 218px;\n}\n.lightbox-dialog--expressive .lightbox-dialog__header {\n margin: var(--spacing-300) var(--spacing-300) 0;\n}\n.lightbox-dialog--expressive .lightbox-dialog__footer,\n.lightbox-dialog--expressive .lightbox-dialog__main {\n padding: var(--spacing-200) var(--spacing-300);\n}\nbutton.icon-btn.lightbox-dialog__close,\nbutton.icon-btn.lightbox-dialog__prev {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n position: relative;\n width: 32px;\n z-index: 1;\n}\nbutton.icon-btn.lightbox-dialog__prev {\n margin-inline-end: var(--spacing-200);\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev {\n align-self: self-start;\n margin: 0;\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev + * {\n margin-left: -32px;\n}\n.lightbox-dialog__title:not(:first-child) {\n margin-left: var(--spacing-200);\n}\n.lightbox-dialog__title--center {\n text-align: center;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.lightbox-dialog--hide.lightbox-dialog--hide,\n.lightbox-dialog--hide.lightbox-dialog--show-init,\n.lightbox-dialog--show-init.lightbox-dialog--hide,\n.lightbox-dialog--show-init.lightbox-dialog--show-init {\n display: flex;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--hide .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide .lightbox-dialog__window--fade,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show-init .lightbox-dialog__window--fade {\n opacity: 0;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--hide-init,\n.lightbox-dialog--hide-init.lightbox-dialog--show,\n.lightbox-dialog--show.lightbox-dialog--hide-init,\n.lightbox-dialog--show.lightbox-dialog--show {\n display: flex;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide-init .lightbox-dialog__window--fade,\n.lightbox-dialog--show .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .lightbox-dialog--hide.lightbox-dialog--mask-fade,\n .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .lightbox-dialog--show.lightbox-dialog--mask-fade,\n .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: translateY(0);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: translateY(100%);\n}\n.lightbox-dialog__handle:after {\n background-color: var(--dialog-handle-color, var(--color-border-medium));\n border-radius: 3px;\n content: \"\";\n display: block;\n height: 2px;\n width: 24px;\n}\n[dir=\"rtl\"] button.icon-btn.lightbox-dialog__prev .icon--16 {\n transform: rotate(180deg);\n}\n.lightbox-dialog--fullscreen .lightbox-dialog__window,\n.lightbox-dialog--large .lightbox-dialog__window {\n align-self: center;\n height: 70%;\n margin: var(--spacing-100);\n max-height: 95%;\n}\n@media (max-width: 512px) {\n .lightbox-dialog--large .lightbox-dialog__window {\n height: 95%;\n max-height: 95%;\n width: 100%;\n }\n .lightbox-dialog--fullscreen .lightbox-dialog__window {\n border-radius: 0;\n height: 100%;\n margin: 0;\n max-height: 100%;\n max-width: 100%;\n width: 100%;\n }\n}\n@media (min-width: 512px) {\n .lightbox-dialog__window {\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n margin: auto;\n max-width: 88%;\n }\n .lightbox-dialog--narrow .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-narrow-max-width);\n }\n .lightbox-dialog__window .lightbox-dialog__footer {\n flex-direction: row;\n justify-content: flex-end;\n }\n .lightbox-dialog__window .lightbox-dialog__footer > :not(:first-child) {\n margin-left: var(--spacing-100);\n margin-top: 0;\n }\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(0.75);\n }\n}\n@media (min-width: 512px) and (prefers-reduced-motion) {\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: 88%;\n }\n .lightbox-dialog--wide .lightbox-dialog__image {\n height: 256px;\n }\n .lightbox-dialog--wide.lightbox-dialog--expressive\n .lightbox-dialog__header\n > * {\n margin-top: 256px;\n }\n}\n@media (min-width: 1024px) {\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-wide-max-width);\n }\n}\n",":root {\n --input-default-height: 40px;\n --input-large-height: 48px;\n}\n\n.textbox {\n align-items: center;\n background-color: var(\n --textbox-background-color,\n var(--color-background-secondary)\n );\n border-color: var(--textbox-border-color, var(--color-border-medium));\n border-radius: var(--textbox-border-radius, var(--border-radius-50));\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--textbox-foreground-color, var(--color-foreground-primary));\n display: inline-flex;\n font-size: var(--font-size-body);\n gap: var(--spacing-100);\n overflow: hidden;\n position: relative;\n width: fit-content;\n}\n\n.textbox button.icon-btn {\n background-color: initial;\n padding: 0;\n}\n\n.textbox--focus,\n.textbox:has(> .textbox__control:focus):not(.textbox--readonly):not(\n :has(> .textbox__control[readonly])\n ) {\n background-color: var(\n --textbox-focus-background-color,\n var(--color-background-primary)\n );\n border-color: var(--textbox-focus-border-color, var(--color-border-strong));\n box-shadow: 0 0 0 1px var(--color-border-strong);\n}\n\n.textbox--readonly,\n.textbox:has(> .textbox__control[readonly]) {\n background-color: initial;\n border: none;\n}\n\n.textbox--disabled,\n.textbox:has(> .textbox__control[disabled]) {\n border-color: var(\n --textbox-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --textbox-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n\n.textbox--invalid,\n.textbox:has(> .textbox__control[aria-invalid=\"true\"]) {\n border-color: var(\n --textbox-invalid-border-color,\n var(--color-border-attention)\n );\n}\n\n.textbox__control {\n background-color: initial;\n border: none;\n box-sizing: border-box;\n color: inherit;\n}\n\ntextarea.textbox__control {\n font-family: inherit;\n min-height: 200px;\n overflow: auto;\n padding: var(--spacing-200);\n resize: vertical;\n vertical-align: middle;\n}\n\ninput.textbox__control {\n font-family: inherit;\n padding: 0;\n vertical-align: middle;\n}\n\ninput.textbox__control:first-child:not([readonly]) {\n padding-inline-start: var(--spacing-200);\n}\n\ninput.textbox__control:last-child:not([readonly]) {\n padding-inline-end: var(--spacing-200);\n}\n\ninput.textbox__control,\ntextarea.textbox__control {\n appearance: none;\n flex-grow: 1;\n font-size: 1em;\n height: 40px;\n margin: 0;\n outline: none;\n}\n\ninput.textbox__control[disabled],\ntextarea.textbox__control[disabled] {\n border-color: var(\n --textbox-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --textbox-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n\ninput.textbox__control[disabled]::-webkit-input-placeholder,\ntextarea.textbox__control[disabled]::-webkit-input-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[disabled]::-moz-placeholder,\ntextarea.textbox__control[disabled]::-moz-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[disabled]:-ms-input-placeholder,\ntextarea.textbox__control[disabled]:-ms-input-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[aria-invalid=\"true\"],\ntextarea.textbox__control[aria-invalid=\"true\"] {\n border-color: var(\n --textbox-invalid-foreground-color,\n var(--color-border-attention)\n );\n}\n\ninput.textbox__control::placeholder,\ntextarea.textbox__control::placeholder {\n color: var(--textbox-placeholder-color, var(--color-foreground-secondary));\n font-weight: 200;\n opacity: 1;\n}\n\ninput.textbox__control {\n height: calc(var(--input-default-height) - 2px);\n}\n\n.textbox--large input.textbox__control {\n height: calc(var(--input-large-height) - 2px);\n}\n\n.textbox .icon-btn > svg,\n.textbox > svg {\n color: var(--textbox-icon-color, var(--color-foreground-secondary));\n display: inline-flex;\n fill: var(--textbox-icon-color, var(--color-foreground-secondary));\n height: 1lh;\n pointer-events: none;\n}\n\n.textbox > span:first-child,\n.textbox > svg:first-child {\n flex-shrink: 0;\n margin-inline-start: var(--spacing-200);\n}\n\n.textbox > span:last-child,\n.textbox > svg:last-child {\n margin-inline-end: var(--spacing-200);\n}\n\n.textbox .icon-btn:last-child {\n margin-inline-start: calc(var(--spacing-100) * -1);\n}\n\n.textbox .icon-btn:first-child {\n margin-inline-end: calc(var(--spacing-100) * -1);\n}\n\ninput.textbox__control[readonly]:focus,\ntextarea.textbox__control[readonly]:focus {\n text-decoration: underline;\n}\n\n.textbox--fluid,\n.textbox--fluid .textbox__control {\n width: 100%;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-input-dialog/index.css","mappings":"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AAuB;AAC3B;AACA;IACI,uCAAuC;AAC3C;AACA;IACI,sBAAsB;IACtB,cAAc;IACd,gBAAgB;IAChB,cAAc;IACd,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI;0EACsE;IACtE,aAAa;IACb,sBAAsB;IACtB,uBAAuB;IACvB,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,8BAA8B;AAClC;AACA;IACI,wBAAwB;IACxB,4BAA4B;IAC5B,sBAAsB;IACtB,oEAAoE;IACpE,aAAa;IACb,kBAAkB;IAClB,WAAW;AACf;AACA;IACI,kCAAkC;AACtC;AACA;IACI,iBAAiB;AACrB;AACA;IACI,+CAA+C;AACnD;AACA;;IAEI,8CAA8C;AAClD;AACA;;IAEI,sBAAsB;IACtB,SAAS;IACT,YAAY;IACZ,eAAe;IACf,kBAAkB;IAClB,WAAW;IACX,UAAU;AACd;AACA;IACI,qCAAqC;AACzC;AACA;;IAEI,sBAAsB;IACtB,SAAS;AACb;AACA;IACI,kBAAkB;AACtB;AACA;IACI,+BAA+B;AACnC;AACA;IACI,kBAAkB;AACtB;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,wBAAwB;AAC5B;AACA;;IAEI,2BAA2B;AAC/B;AACA;IACI,wEAAwE;IACxE,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,WAAW;IACX,WAAW;AACf;AACA;IACI,yBAAyB;AAC7B;AACA;;IAEI,kBAAkB;IAClB,WAAW;IACX,0BAA0B;IAC1B,eAAe;AACnB;AACA;IACI;QACI,WAAW;QACX,eAAe;QACf,WAAW;IACf;IACA;QACI,gBAAgB;QAChB,YAAY;QACZ,SAAS;QACT,gBAAgB;QAChB,eAAe;QACf,WAAW;IACf;AACJ;AACA;IACI;QACI,sEAAsE;QACtE,YAAY;QACZ,cAAc;IAClB;IACA;QACI,kDAAkD;IACtD;IACA;QACI,mBAAmB;QACnB,yBAAyB;IAC7B;IACA;QACI,+BAA+B;QAC/B,aAAa;IACjB;IACA;;QAEI,mBAAmB;IACvB;IACA;;QAEI,sBAAsB;IAC1B;AACJ;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;IACA;QACI,cAAc;IAClB;IACA;QACI,aAAa;IACjB;IACA;;;QAGI,iBAAiB;IACrB;AACJ;AACA;IACI;QACI,gDAAgD;IACpD;AACJ;;AC3UA;IACI,4BAA4B;IAC5B,0BAA0B;AAC9B;;AAEA;IACI,mBAAmB;IACnB;;;KAGC;IACD,qEAAqE;IACrE,oEAAoE;IACpE,mBAAmB;IACnB,iBAAiB;IACjB,sBAAsB;IACtB,uEAAuE;IACvE,oBAAoB;IACpB,gCAAgC;IAChC,uBAAuB;IACvB,gBAAgB;IAChB,kBAAkB;IAClB,kBAAkB;AACtB;;AAEA;IACI,yBAAyB;IACzB,UAAU;AACd;;AAEA;;;;IAII;;;KAGC;IACD,2EAA2E;IAC3E,gDAAgD;AACpD;;AAEA;;IAEI,yBAAyB;IACzB,YAAY;AAChB;;AAEA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;IACI,yBAAyB;IACzB,YAAY;IACZ,sBAAsB;IACtB,cAAc;AAClB;;AAEA;IACI,oBAAoB;IACpB,iBAAiB;IACjB,cAAc;IACd,2BAA2B;IAC3B,gBAAgB;IAChB,sBAAsB;AAC1B;;AAEA;IACI,oBAAoB;IACpB,UAAU;IACV,sBAAsB;AAC1B;;AAEA;IACI,wCAAwC;AAC5C;;AAEA;IACI,sCAAsC;AAC1C;;AAEA;;IAEI,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,YAAY;IACZ,SAAS;IACT,aAAa;AACjB;;AAEA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI;;;KAGC;AACL;;AAEA;;IAEI,0EAA0E;IAC1E,gBAAgB;IAChB,UAAU;AACd;;AAEA;IACI,+CAA+C;AACnD;;AAEA;IACI,6CAA6C;AACjD;;AAEA;;IAEI,mEAAmE;IACnE,oBAAoB;IACpB,kEAAkE;IAClE,WAAW;IACX,oBAAoB;AACxB;;AAEA;;IAEI,cAAc;IACd,uCAAuC;AAC3C;;AAEA;;IAEI,qCAAqC;AACzC;;AAEA;IACI,kDAAkD;AACtD;;AAEA;IACI,gDAAgD;AACpD;;AAEA;;IAEI,0BAA0B;AAC9B;;AAEA;;IAEI,WAAW;AACf","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css","webpack://root/./node_modules/@ebay/skin/dist/textbox/textbox.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n --dialog-lightbox-wide-max-width: 896px;\n --dialog-lightbox-narrow-max-width: 480px;\n}\n.lightbox-dialog[role=\"dialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.lightbox-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.lightbox-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-150));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto auto 16px;\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n will-change: opacity, transform;\n}\n.lightbox-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.lightbox-dialog__header h1,\n.lightbox-dialog__header h2,\n.lightbox-dialog__header h3,\n.lightbox-dialog__header h4,\n.lightbox-dialog__header h5,\n.lightbox-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.lightbox-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.lightbox-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: 18px;\n overflow: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__main > :first-child {\n margin-top: 0;\n}\n.lightbox-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.lightbox-dialog__footer {\n border-top: 1px solid\n var(--dialog-lightbox-separator-color, var(--color-border-subtle));\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\n.lightbox-dialog__image {\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;\n height: 218px;\n position: absolute;\n width: 100%;\n}\n.lightbox-dialog--expressive .lightbox-dialog__window {\n padding-bottom: var(--spacing-100);\n}\n.lightbox-dialog--expressive .lightbox-dialog__header > * {\n margin-top: 218px;\n}\n.lightbox-dialog--expressive .lightbox-dialog__header {\n margin: var(--spacing-300) var(--spacing-300) 0;\n}\n.lightbox-dialog--expressive .lightbox-dialog__footer,\n.lightbox-dialog--expressive .lightbox-dialog__main {\n padding: var(--spacing-200) var(--spacing-300);\n}\nbutton.icon-btn.lightbox-dialog__close,\nbutton.icon-btn.lightbox-dialog__prev {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n position: relative;\n width: 32px;\n z-index: 1;\n}\nbutton.icon-btn.lightbox-dialog__prev {\n margin-inline-end: var(--spacing-200);\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev {\n align-self: self-start;\n margin: 0;\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev + * {\n margin-left: -32px;\n}\n.lightbox-dialog__title:not(:first-child) {\n margin-left: var(--spacing-200);\n}\n.lightbox-dialog__title--center {\n text-align: center;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.lightbox-dialog--hide.lightbox-dialog--hide,\n.lightbox-dialog--hide.lightbox-dialog--show-init,\n.lightbox-dialog--show-init.lightbox-dialog--hide,\n.lightbox-dialog--show-init.lightbox-dialog--show-init {\n display: flex;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--hide .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide .lightbox-dialog__window--fade,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show-init .lightbox-dialog__window--fade {\n opacity: 0;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--hide-init,\n.lightbox-dialog--hide-init.lightbox-dialog--show,\n.lightbox-dialog--show.lightbox-dialog--hide-init,\n.lightbox-dialog--show.lightbox-dialog--show {\n display: flex;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide-init .lightbox-dialog__window--fade,\n.lightbox-dialog--show .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .lightbox-dialog--hide.lightbox-dialog--mask-fade,\n .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .lightbox-dialog--show.lightbox-dialog--mask-fade,\n .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: translateY(0);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: translateY(100%);\n}\n.lightbox-dialog__handle:after {\n background-color: var(--dialog-handle-color, var(--color-border-medium));\n border-radius: 3px;\n content: \"\";\n display: block;\n height: 2px;\n width: 24px;\n}\n[dir=\"rtl\"] button.icon-btn.lightbox-dialog__prev .icon--16 {\n transform: rotate(180deg);\n}\n.lightbox-dialog--fullscreen .lightbox-dialog__window,\n.lightbox-dialog--large .lightbox-dialog__window {\n align-self: center;\n height: 70%;\n margin: var(--spacing-100);\n max-height: 95%;\n}\n@media (max-width: 512px) {\n .lightbox-dialog--large .lightbox-dialog__window {\n height: 95%;\n max-height: 95%;\n width: 100%;\n }\n .lightbox-dialog--fullscreen .lightbox-dialog__window {\n border-radius: 0;\n height: 100%;\n margin: 0;\n max-height: 100%;\n max-width: 100%;\n width: 100%;\n }\n}\n@media (min-width: 512px) {\n .lightbox-dialog__window {\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n margin: auto;\n max-width: 88%;\n }\n .lightbox-dialog--narrow .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-narrow-max-width);\n }\n .lightbox-dialog__window .lightbox-dialog__footer {\n flex-direction: row;\n justify-content: flex-end;\n }\n .lightbox-dialog__window .lightbox-dialog__footer > :not(:first-child) {\n margin-left: var(--spacing-100);\n margin-top: 0;\n }\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(0.75);\n }\n}\n@media (min-width: 512px) and (prefers-reduced-motion) {\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: 88%;\n }\n .lightbox-dialog--wide .lightbox-dialog__image {\n height: 256px;\n }\n .lightbox-dialog--wide.lightbox-dialog--expressive\n .lightbox-dialog__header\n > * {\n margin-top: 256px;\n }\n}\n@media (min-width: 1024px) {\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-wide-max-width);\n }\n}\n",":root {\n --input-default-height: 40px;\n --input-large-height: 48px;\n}\n\n.textbox {\n align-items: center;\n background-color: var(\n --textbox-background-color,\n var(--color-background-secondary)\n );\n border-color: var(--textbox-border-color, var(--color-border-medium));\n border-radius: var(--textbox-border-radius, var(--border-radius-50));\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--textbox-foreground-color, var(--color-foreground-primary));\n display: inline-flex;\n font-size: var(--font-size-body);\n gap: var(--spacing-100);\n overflow: hidden;\n position: relative;\n width: fit-content;\n}\n\n.textbox button.icon-btn {\n background-color: initial;\n padding: 0;\n}\n\n.textbox--focus,\n.textbox:has(> .textbox__control:focus):not(.textbox--readonly):not(\n :has(> .textbox__control[readonly])\n ) {\n background-color: var(\n --textbox-focus-background-color,\n var(--color-background-primary)\n );\n border-color: var(--textbox-focus-border-color, var(--color-border-strong));\n box-shadow: 0 0 0 1px var(--color-border-strong);\n}\n\n.textbox--readonly,\n.textbox:has(> .textbox__control[readonly]) {\n background-color: initial;\n border: none;\n}\n\n.textbox--disabled,\n.textbox:has(> .textbox__control[disabled]) {\n border-color: var(\n --textbox-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --textbox-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n\n.textbox--invalid,\n.textbox:has(> .textbox__control[aria-invalid=\"true\"]) {\n border-color: var(\n --textbox-invalid-border-color,\n var(--color-border-attention)\n );\n}\n\n.textbox__control {\n background-color: initial;\n border: none;\n box-sizing: border-box;\n color: inherit;\n}\n\ntextarea.textbox__control {\n font-family: inherit;\n min-height: 200px;\n overflow: auto;\n padding: var(--spacing-200);\n resize: vertical;\n vertical-align: middle;\n}\n\ninput.textbox__control {\n font-family: inherit;\n padding: 0;\n vertical-align: middle;\n}\n\ninput.textbox__control:first-child:not([readonly]) {\n padding-inline-start: var(--spacing-200);\n}\n\ninput.textbox__control:last-child:not([readonly]) {\n padding-inline-end: var(--spacing-200);\n}\n\ninput.textbox__control,\ntextarea.textbox__control {\n appearance: none;\n flex-grow: 1;\n font-size: 1em;\n height: 40px;\n margin: 0;\n outline: none;\n}\n\ninput.textbox__control[disabled],\ntextarea.textbox__control[disabled] {\n border-color: var(\n --textbox-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --textbox-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n\ninput.textbox__control[disabled]::-webkit-input-placeholder,\ntextarea.textbox__control[disabled]::-webkit-input-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[disabled]::-moz-placeholder,\ntextarea.textbox__control[disabled]::-moz-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[disabled]:-ms-input-placeholder,\ntextarea.textbox__control[disabled]:-ms-input-placeholder {\n color: var(\n --textbox-disabled-placeholder-color,\n var(--color-foreground-ghost)\n );\n}\n\ninput.textbox__control[aria-invalid=\"true\"],\ntextarea.textbox__control[aria-invalid=\"true\"] {\n border-color: var(\n --textbox-invalid-foreground-color,\n var(--color-border-attention)\n );\n}\n\ninput.textbox__control::placeholder,\ntextarea.textbox__control::placeholder {\n color: var(--textbox-placeholder-color, var(--color-foreground-secondary));\n font-weight: 200;\n opacity: 1;\n}\n\ninput.textbox__control {\n height: calc(var(--input-default-height) - 2px);\n}\n\n.textbox--large input.textbox__control {\n height: calc(var(--input-large-height) - 2px);\n}\n\n.textbox .icon-btn > svg,\n.textbox > svg {\n color: var(--textbox-icon-color, var(--color-foreground-secondary));\n display: inline-flex;\n fill: var(--textbox-icon-color, var(--color-foreground-secondary));\n height: 1lh;\n pointer-events: none;\n}\n\n.textbox > span:first-child,\n.textbox > svg:first-child {\n flex-shrink: 0;\n margin-inline-start: var(--spacing-200);\n}\n\n.textbox > span:last-child,\n.textbox > svg:last-child {\n margin-inline-end: var(--spacing-200);\n}\n\n.textbox .icon-btn:last-child {\n margin-inline-start: calc(var(--spacing-100) * -1);\n}\n\n.textbox .icon-btn:first-child {\n margin-inline-end: calc(var(--spacing-100) * -1);\n}\n\ninput.textbox__control[readonly]:focus,\ntextarea.textbox__control[readonly]:focus {\n text-decoration: underline;\n}\n\n.textbox--fluid,\n.textbox--fluid .textbox__control {\n width: 100%;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-input-dialog/index.html b/docs/ui/makeup-input-dialog/index.html index d21c8552..8dd647cd 100644 --- a/docs/ui/makeup-input-dialog/index.html +++ b/docs/ui/makeup-input-dialog/index.html @@ -2,8 +2,10 @@ makeup-input-dialog + + + - -
                                    -
                                    -

                                    makeup-input-dialog

                                    -

                                    Input-Dialog is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    - This page was loaded with the dialog in an "open" state. To see examples of dialogs opened by button click, - visit the makeup-dialog-button page. -

                                    -
                                    -
                                    - +
                                    +
                                    diff --git a/docs/ui/makeup-input-dialog/index.min.js b/docs/ui/makeup-input-dialog/index.min.js index 3ba0edd8..76face3d 100644 --- a/docs/ui/makeup-input-dialog/index.min.js +++ b/docs/ui/makeup-input-dialog/index.min.js @@ -139,9 +139,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(4490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(8448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(4490); +var _makeupScreenreaderTrap = __webpack_require__(8448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -164,6 +163,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -172,6 +176,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -179,7 +189,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -190,7 +200,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -206,8 +216,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -220,7 +230,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -229,11 +242,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/docs/ui/makeup-input-dialog/index.min.js.map b/docs/ui/makeup-input-dialog/index.min.js.map index d593091a..3e085741 100644 --- a/docs/ui/makeup-input-dialog/index.min.js.map +++ b/docs/ui/makeup-input-dialog/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-input-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA4C;;;;;;;;ACApD,mBAAO,CAAC,IAA4B;;;;;;;;ACApC,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,IAAsB;AACzE,+CAA+C,mBAAO,CAAC,IAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACtDa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;UCzCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAA4B;AACpC,mBAAO,CAAC,IAAoB;AAC5B,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/lightbox-dialog.js","webpack://root/./node_modules/@ebay/skin/textbox.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css?d75e","webpack://root/./node_modules/@ebay/skin/dist/textbox/textbox.css?d7ec","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-input-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-input-dialog/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./dist/lightbox-dialog/lightbox-dialog.css');\n","require('./dist/textbox/textbox.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultInputOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"input\",\n submitButtonSelector: \".lightbox-dialog__submit\",\n cancelButtonSelector: \".lightbox-dialog__cancel\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultInputOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._submitButtonEl = this._el.querySelector(this._options.submitButtonSelector);\n this._cancelButtonEl = this._el.querySelector(this._options.cancelButtonSelector);\n this._onSubmitButtonClickListener = _onSubmitButtonClick.bind(this);\n this._onCancelButtonClickListener = _onCancelButtonClick.bind(this);\n this._submitButtonEl.addEventListener(\"click\", this._onSubmitButtonClickListener);\n this._cancelButtonEl.addEventListener(\"click\", this._onCancelButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._submitButtonEl.removeEventListener(\"click\", this._onSubmitButtonClickListener);\n this._cancelButtonEl.removeEventListener(\"click\", this._onCancelButtonClickListener);\n }\n submit() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-submit\"));\n }\n cancel() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cancel\"));\n }\n destroy() {\n super.destroy();\n this._onSubmitButtonClickListener = null;\n this._onCancelButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onSubmitButtonClick() {\n this.submit();\n}\nfunction _onCancelButtonClick() {\n this.cancel();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/lightbox-dialog\");\nrequire(\"@ebay/skin/textbox\");\nvar _makeupInputDialog = _interopRequireDefault(require(\"makeup-input-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const InputDialog = require('makeup-input-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".lightbox-dialog--input\").forEach(function (el, i) {\n const widget = new _makeupInputDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-input-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA4C;;;;;;;;ACApD,mBAAO,CAAC,IAA4B;;;;;;;;ACApC,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,IAAsB;AACxD,8BAA8B,mBAAO,CAAC,IAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;;;;;;;;;ACtDa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;UCzCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAA4B;AACpC,mBAAO,CAAC,IAAoB;AAC5B,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/lightbox-dialog.js","webpack://root/./node_modules/@ebay/skin/textbox.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css?d75e","webpack://root/./node_modules/@ebay/skin/dist/textbox/textbox.css?d7ec","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-input-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-input-dialog/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./dist/lightbox-dialog/lightbox-dialog.css');\n","require('./dist/textbox/textbox.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultInputOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"input\",\n submitButtonSelector: \".lightbox-dialog__submit\",\n cancelButtonSelector: \".lightbox-dialog__cancel\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultInputOptions, selectedOptions));\n }\n _observeEvents() {\n super._observeEvents();\n this._submitButtonEl = this._el.querySelector(this._options.submitButtonSelector);\n this._cancelButtonEl = this._el.querySelector(this._options.cancelButtonSelector);\n this._onSubmitButtonClickListener = _onSubmitButtonClick.bind(this);\n this._onCancelButtonClickListener = _onCancelButtonClick.bind(this);\n this._submitButtonEl.addEventListener(\"click\", this._onSubmitButtonClickListener);\n this._cancelButtonEl.addEventListener(\"click\", this._onCancelButtonClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._submitButtonEl.removeEventListener(\"click\", this._onSubmitButtonClickListener);\n this._cancelButtonEl.removeEventListener(\"click\", this._onCancelButtonClickListener);\n }\n submit() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-submit\"));\n }\n cancel() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cancel\"));\n }\n destroy() {\n super.destroy();\n this._onSubmitButtonClickListener = null;\n this._onCancelButtonClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onSubmitButtonClick() {\n this.submit();\n}\nfunction _onCancelButtonClick() {\n this.cancel();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/lightbox-dialog\");\nrequire(\"@ebay/skin/textbox\");\nvar _makeupInputDialog = _interopRequireDefault(require(\"makeup-input-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const InputDialog = require('makeup-input-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".lightbox-dialog--input\").forEach(function (el, i) {\n const widget = new _makeupInputDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-lightbox-dialog/index.css b/docs/ui/makeup-lightbox-dialog/index.css index 03827b34..22b65c2e 100644 --- a/docs/ui/makeup-lightbox-dialog/index.css +++ b/docs/ui/makeup-lightbox-dialog/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-lightbox-dialog/index.css.map b/docs/ui/makeup-lightbox-dialog/index.css.map index e56ddf5e..96d5b14e 100644 --- a/docs/ui/makeup-lightbox-dialog/index.css.map +++ b/docs/ui/makeup-lightbox-dialog/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-lightbox-dialog/index.css","mappings":"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B,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,8BAA8B;AAClC;AACA;IACI,wBAAwB;IACxB,4BAA4B;IAC5B,sBAAsB;IACtB,oEAAoE;IACpE,aAAa;IACb,kBAAkB;IAClB,WAAW;AACf;AACA;IACI,kCAAkC;AACtC;AACA;IACI,iBAAiB;AACrB;AACA;IACI,+CAA+C;AACnD;AACA;;IAEI,8CAA8C;AAClD;AACA;;IAEI,sBAAsB;IACtB,SAAS;IACT,YAAY;IACZ,eAAe;IACf,kBAAkB;IAClB,WAAW;IACX,UAAU;AACd;AACA;IACI,qCAAqC;AACzC;AACA;;IAEI,sBAAsB;IACtB,SAAS;AACb;AACA;IACI,kBAAkB;AACtB;AACA;IACI,+BAA+B;AACnC;AACA;IACI,kBAAkB;AACtB;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,wBAAwB;AAC5B;AACA;;IAEI,2BAA2B;AAC/B;AACA;IACI,wEAAwE;IACxE,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,WAAW;IACX,WAAW;AACf;AACA;IACI,yBAAyB;AAC7B;AACA;;IAEI,kBAAkB;IAClB,WAAW;IACX,0BAA0B;IAC1B,eAAe;AACnB;AACA;IACI;QACI,WAAW;QACX,eAAe;QACf,WAAW;IACf;IACA;QACI,gBAAgB;QAChB,YAAY;QACZ,SAAS;QACT,gBAAgB;QAChB,eAAe;QACf,WAAW;IACf;AACJ;AACA;IACI;QACI,sEAAsE;QACtE,YAAY;QACZ,cAAc;IAClB;IACA;QACI,kDAAkD;IACtD;IACA;QACI,mBAAmB;QACnB,yBAAyB;IAC7B;IACA;QACI,+BAA+B;QAC/B,aAAa;IACjB;IACA;;QAEI,mBAAmB;IACvB;IACA;;QAEI,sBAAsB;IAC1B;AACJ;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;IACA;QACI,cAAc;IAClB;IACA;QACI,aAAa;IACjB;IACA;;;QAGI,iBAAiB;IACrB;AACJ;AACA;IACI;QACI,gDAAgD;IACpD;AACJ","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n --dialog-lightbox-wide-max-width: 896px;\n --dialog-lightbox-narrow-max-width: 480px;\n}\n.lightbox-dialog[role=\"dialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.lightbox-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.lightbox-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-150));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto auto 16px;\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n will-change: opacity, transform;\n}\n.lightbox-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.lightbox-dialog__header h1,\n.lightbox-dialog__header h2,\n.lightbox-dialog__header h3,\n.lightbox-dialog__header h4,\n.lightbox-dialog__header h5,\n.lightbox-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.lightbox-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.lightbox-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: 18px;\n overflow: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__main > :first-child {\n margin-top: 0;\n}\n.lightbox-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.lightbox-dialog__footer {\n border-top: 1px solid\n var(--dialog-lightbox-separator-color, var(--color-border-subtle));\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\n.lightbox-dialog__image {\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;\n height: 218px;\n position: absolute;\n width: 100%;\n}\n.lightbox-dialog--expressive .lightbox-dialog__window {\n padding-bottom: var(--spacing-100);\n}\n.lightbox-dialog--expressive .lightbox-dialog__header > * {\n margin-top: 218px;\n}\n.lightbox-dialog--expressive .lightbox-dialog__header {\n margin: var(--spacing-300) var(--spacing-300) 0;\n}\n.lightbox-dialog--expressive .lightbox-dialog__footer,\n.lightbox-dialog--expressive .lightbox-dialog__main {\n padding: var(--spacing-200) var(--spacing-300);\n}\nbutton.icon-btn.lightbox-dialog__close,\nbutton.icon-btn.lightbox-dialog__prev {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n position: relative;\n width: 32px;\n z-index: 1;\n}\nbutton.icon-btn.lightbox-dialog__prev {\n margin-inline-end: var(--spacing-200);\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev {\n align-self: self-start;\n margin: 0;\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev + * {\n margin-left: -32px;\n}\n.lightbox-dialog__title:not(:first-child) {\n margin-left: var(--spacing-200);\n}\n.lightbox-dialog__title--center {\n text-align: center;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.lightbox-dialog--hide.lightbox-dialog--hide,\n.lightbox-dialog--hide.lightbox-dialog--show-init,\n.lightbox-dialog--show-init.lightbox-dialog--hide,\n.lightbox-dialog--show-init.lightbox-dialog--show-init {\n display: flex;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--hide .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide .lightbox-dialog__window--fade,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show-init .lightbox-dialog__window--fade {\n opacity: 0;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--hide-init,\n.lightbox-dialog--hide-init.lightbox-dialog--show,\n.lightbox-dialog--show.lightbox-dialog--hide-init,\n.lightbox-dialog--show.lightbox-dialog--show {\n display: flex;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide-init .lightbox-dialog__window--fade,\n.lightbox-dialog--show .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .lightbox-dialog--hide.lightbox-dialog--mask-fade,\n .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .lightbox-dialog--show.lightbox-dialog--mask-fade,\n .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: translateY(0);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: translateY(100%);\n}\n.lightbox-dialog__handle:after {\n background-color: var(--dialog-handle-color, var(--color-border-medium));\n border-radius: 3px;\n content: \"\";\n display: block;\n height: 2px;\n width: 24px;\n}\n[dir=\"rtl\"] button.icon-btn.lightbox-dialog__prev .icon--16 {\n transform: rotate(180deg);\n}\n.lightbox-dialog--fullscreen .lightbox-dialog__window,\n.lightbox-dialog--large .lightbox-dialog__window {\n align-self: center;\n height: 70%;\n margin: var(--spacing-100);\n max-height: 95%;\n}\n@media (max-width: 512px) {\n .lightbox-dialog--large .lightbox-dialog__window {\n height: 95%;\n max-height: 95%;\n width: 100%;\n }\n .lightbox-dialog--fullscreen .lightbox-dialog__window {\n border-radius: 0;\n height: 100%;\n margin: 0;\n max-height: 100%;\n max-width: 100%;\n width: 100%;\n }\n}\n@media (min-width: 512px) {\n .lightbox-dialog__window {\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n margin: auto;\n max-width: 88%;\n }\n .lightbox-dialog--narrow .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-narrow-max-width);\n }\n .lightbox-dialog__window .lightbox-dialog__footer {\n flex-direction: row;\n justify-content: flex-end;\n }\n .lightbox-dialog__window .lightbox-dialog__footer > :not(:first-child) {\n margin-left: var(--spacing-100);\n margin-top: 0;\n }\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(0.75);\n }\n}\n@media (min-width: 512px) and (prefers-reduced-motion) {\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: 88%;\n }\n .lightbox-dialog--wide .lightbox-dialog__image {\n height: 256px;\n }\n .lightbox-dialog--wide.lightbox-dialog--expressive\n .lightbox-dialog__header\n > * {\n margin-top: 256px;\n }\n}\n@media (min-width: 1024px) {\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-wide-max-width);\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-lightbox-dialog/index.css","mappings":"AAAA;;;EAGE,sBAAsB;AACxB;;AAEA;EACE,WAAW;EACX,iDAAiD;EACjD,eAAe;EACf,gBAAgB;EAChB,SAAS;EACT,kBAAkB;AACpB;;AAEA;EACE,cAAc;EACd,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;EAClB,kBAAkB;AACpB;;AAEA;EACE,eAAe;EACf,uBAAuB;AACzB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,YAAY;EACZ,0BAA0B;EAC1B,gBAAgB;AAClB;;AAEA;EACE,mBAAmB;EACnB,kBAAkB;EAClB,kBAAkB;EAClB,oBAAoB;AACtB;;AAEA;EACE,qBAAqB;AACvB;;AAEA;EACE,oBAAoB;AACtB;;AAEA,uEAAuE;AACvE;EACE,sBAAsB;EACtB,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;EAChB,eAAe;AACjB;;AAEA;EACE,WAAW;EACX,wBAAwB;AAC1B;;AC3EA;IACI,0BAA0B;IAC1B,yBAAyB;IACzB,0BAA0B;IAC1B,mCAAmC;IACnC,oCAAoC;IACpC,kCAAkC;IAClC,kCAAkC;IAClC,kCAAkC;IAClC,gCAAgC;IAChC,+BAA+B;IAC/B,+BAA+B;IAC/B,gCAAgC;IAChC,+BAA+B;IAC/B,yBAAyB;IACzB,0BAA0B;IAC1B,yBAAyB;IACzB,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,qCAAqC;IACrC,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,kBAAkB;IAClB,sBAAsB;IACtB,oBAAoB;IACpB,qBAAqB;IACrB,qBAAqB;IACrB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,qBAAqB;IACrB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,qCAAqC;IACrC,sCAAsC;IACtC,qCAAqC;IACrC,kCAAkC;IAClC,kCAAkC;IAClC,4BAA4B;IAC5B,6BAA6B;IAC7B,4BAA4B;IAC5B,oCAAoC;IACpC,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,qDAAqD;IACrD,qDAAqD;IACrD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,oDAAoD;IACpD,oDAAoD;IACpD,qDAAqD;IACrD,qDAAqD;IACrD,sDAAsD;IACtD,sDAAsD;IACtD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,qDAAqD;IACrD,qDAAqD;IACrD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,+CAA+C;IAC/C,+CAA+C;IAC/C,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,uCAAuC;IACvC,+BAA+B;IAC/B,qCAAqC;IACrC,qCAAqC;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,kCAAkC;IAClC,0BAA0B;IAC1B,6BAA6B;IAC7B,4BAA4B;IAC5B,6BAA6B;IAC7B,4BAA4B;IAC5B,2BAA2B;IAC3B,wBAAwB;IACxB,0BAA0B;IAC1B,8BAA8B;IAC9B,2BAA2B;IAC3B,qCAAqC;IACrC,iCAAiC;IACjC,2CAA2C;IAC3C,sBAAsB;IACtB,sBAAsB;IACtB,+BAA+B;IAC/B,+BAA+B;IAC/B,+BAA+B;IAC/B,gCAAgC;IAChC,iCAAiC;IACjC,iCAAiC;IACjC,iCAAiC;IACjC,+BAA+B;IAC/B,+BAA+B;IAC/B,gCAAgC;IAChC,qDAAqD;IACrD,wDAAwD;IACxD,gDAAgD;IAChD,qDAAqD;IACrD,oDAAoD;IACpD,sDAAsD;IACtD,qDAAqD;IACrD,oDAAoD;IACpD,4BAA4B;IAC5B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,0BAA0B;IAC1B,wBAAwB;IACxB,oBAAoB;IACpB,oBAAoB;IACpB,kBAAkB;IAClB,0BAA0B;IAC1B,yBAAyB;IACzB,gCAAgC;IAChC,mBAAmB;IACnB;gFAC4E;IAC5E,qDAAqD;IACrD,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,iBAAiB;IACjB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,iBAAiB;IACjB,mBAAmB;IACnB,iBAAiB;IACjB,+BAA+B;IAC/B,gCAAgC;IAChC,uDAAuD;IACvD,kDAAkD;IAClD,yDAAyD;IACzD,oDAAoD;IACpD,uDAAuD;IACvD,sDAAsD;IACtD,uDAAuD;IACvD,sDAAsD;IACtD,sDAAsD;IACtD,uDAAuD;IACvD,oDAAoD;IACpD,mDAAmD;IACnD,oDAAoD;IACpD,iDAAiD;IACjD,uBAAuB;IACvB,yBAAyB;IACzB,yBAAyB;IACzB,sCAAsC;IACtC,sCAAsC;IACtC,mCAAmC;IACnC,gCAAgC;IAChC,2CAA2C;IAC3C,0CAA0C;IAC1C,4CAA4C;IAC5C,yCAAyC;IACzC,kBAAkB;IAClB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,yCAAyC;IACzC,sCAAsC;IACtC,qCAAqC;IACrC,uCAAuC;IACvC,wBAAwB;IACxB,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,oBAAoB;IACpB,0CAA0C;IAC1C,wCAAwC;IACxC,6CAA6C;IAC7C,0CAA0C;IAC1C,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,yDAAyD;IACzD,kCAAkC;AACtC;;ACjaA;IACI,qCAAqC;IACrC,qCAAqC;IACrC,sCAAsC;IACtC,sCAAsC;IACtC,uCAAuC;IACvC,uCAAuC;IACvC,oCAAoC;IACpC,oCAAoC;IACpC,uCAAuC;IACvC,gDAAgD;IAChD,kDAAkD;IAClD,qDAAqD;IACrD,mDAAmD;IACnD,qDAAqD;IACrD,oDAAoD;IACpD,qDAAqD;IACrD,yDAAyD;IACzD,oDAAoD;IACpD,kEAAkE;IAClE,sDAAsD;IACtD,mDAAmD;IACnD,iDAAiD;IACjD,qDAAqD;IACrD,kDAAkD;IAClD,4CAA4C;IAC5C,8CAA8C;IAC9C,iDAAiD;IACjD,gDAAgD;IAChD,+CAA+C;IAC/C,kDAAkD;IAClD,qDAAqD;IACrD,oDAAoD;IACpD,mDAAmD;IACnD,mDAAmD;IACnD,+CAA+C;IAC/C,+CAA+C;IAC/C,6CAA6C;IAC7C,qCAAqC;IACrC,sCAAsC;IACtC,wCAAwC;IACxC,uCAAuC;IACvC,gDAAgD;IAChD,kDAAkD;IAClD,qDAAqD;IACrD,oDAAoD;IACpD,gEAAgE;IAChE,sDAAsD;IACtD,sDAAsD;IACtD,yDAAyD;IACzD,wDAAwD;IACxD,uDAAuD;IACvD,sDAAsD;IACtD,uDAAuD;IACvD,oDAAoD;IACpD,sDAAsD;IACtD,iDAAiD;IACjD;;;;;KAKC;IACD;;;;;KAKC;IACD;;;;;;;KAOC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;;;;;;;KAUC;IACD;;;;;;;;;;KAUC;IACD,0CAA0C;IAC1C,6BAA6B;IAC7B,4DAA4D;IAC5D,4DAA4D;IAC5D,8DAA8D;IAC9D,8DAA8D;IAC9D,4CAA4C;IAC5C,8DAA8D;IAC9D,8CAA8C;IAC9C,8DAA8D;IAC9D,8CAA8C;IAC9C,gEAAgE;IAChE,gDAAgD;IAChD,gEAAgE;IAChE,iDAAiD;IACjD,kEAAkE;IAClE,gEAAgE;IAChE,8DAA8D;IAC9D,gDAAgD;IAChD,2DAA2D;IAC3D,gEAAgE;IAChE,8DAA8D;IAC9D,gEAAgE;IAChE,8DAA8D;IAC9D,kEAAkE;IAClE,sEAAsE;IACtE,qEAAqE;IACrE,kDAAkD;IAClD,iDAAiD;IACjD,uDAAuD;IACvD,uDAAuD;IACvD,6DAA6D;IAC7D,wDAAwD;IACxD,8DAA8D;IAC9D,sDAAsD;IACtD,qDAAqD;IACrD,2DAA2D;IAC3D,iDAAiD;IACjD,iDAAiD;IACjD,sDAAsD;IACtD,4CAA4C;IAC5C,mCAAmC;IACnC,oCAAoC;IACpC,qCAAqC;IACrC,sCAAsC;IACtC,gDAAgD;IAChD,uCAAuC;IACvC,iDAAiD;IACjD,oCAAoC;IACpC,qCAAqC;IACrC,mCAAmC;IACnC,oDAAoD;IACpD,oCAAoC;IACpC,qDAAqD;IACrD,sCAAsC;IACtC,uCAAuC;IACvC,iEAAiE;IACjE,kEAAkE;IAClE,+CAA+C;IAC/C,iDAAiD;IACjD,iDAAiD;IACjD,0DAA0D;IAC1D,uDAAuD;IACvD,0DAA0D;IAC1D,8DAA8D;IAC9D,2DAA2D;IAC3D,6DAA6D;IAC7D,0DAA0D;IAC1D,sDAAsD;IACtD,qDAAqD;IACrD,qDAAqD;IACrD,uDAAuD;IACvD,mEAAmE;IACnE,6DAA6D;IAC7D,mEAAmE;IACnE,+DAA+D;IAC/D,gEAAgE;IAChE,4DAA4D;IAC5D,kDAAkD;IAClD,oDAAoD;IACpD,wCAAwC;IACxC,2DAA2D;IAC3D,6DAA6D;IAC7D,2DAA2D;IAC3D,2DAA2D;IAC3D,wDAAwD;IACxD,0DAA0D;IAC1D,6DAA6D;IAC7D,0DAA0D;IAC1D,gEAAgE;IAChE,8DAA8D;IAC9D,6DAA6D;IAC7D,6DAA6D;IAC7D,gEAAgE;IAChE,6DAA6D;IAC7D,2DAA2D;IAC3D,qEAAqE;IACrE;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;IACD,yEAAyE;IACzE;;KAEC;IACD,uEAAuE;IACvE,qEAAqE;IACrE,yEAAyE;IACzE,yEAAyE;IACzE,qEAAqE;IACrE,uEAAuE;IACvE,0DAA0D;IAC1D,+CAA+C;IAC/C,gDAAgD;IAChD,4DAA4D;IAC5D,6DAA6D;IAC7D;;;;;;;KAOC;IACD;;;;;;;KAOC;IACD;;;;KAIC;IACD;;;;;KAKC;IACD;;;;KAIC;AACL;;ACxRA;IACI,iDAAiD;IACjD,sCAAsC;IACtC;;;kBAGc;IACd,gCAAgC;IAChC,4CAA4C;IAC5C,8BAA8B;AAClC;AACA;IACI,oBAAoB;AACxB;AACA;IACI,SAAS;IACT,UAAU;AACd;AACA;IACI,iCAAiC;AACrC;AACA;IACI,2CAA2C;AAC/C;AACA;IACI,2CAA2C;AAC/C;AACA;IACI,wCAAwC;AAC5C;AACA;;IAEI,uCAAuC;AAC3C;;ACjCA;IACI,qEAAqE;IACrE,2DAA2D;AAC/D;AACA;;IAEI,qBAAqB;IACrB,mBAAmB;IACnB,yBAAyB;IACzB,iBAAiB;IACjB,6CAA6C;IAC7C,sBAAsB;IACtB,cAAc;IACd,qBAAqB;IACrB,oBAAoB;IACpB,gCAAgC;IAChC,SAAS;IACT,gBAAgB;IAChB,eAAe;IACf,eAAe;IACf,kBAAkB;IAClB,qBAAqB;IACrB,sBAAsB;AAC1B;AACA;;;;IAII,YAAY;AAChB;AACA;;IAEI,iCAAiC;IACjC,oBAAoB;IACpB,gCAAgC;AACpC;AACA;;IAEI,aAAa;AACjB;AACA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI,yBAAyB;IACzB,eAAe;IACf,eAAe;IACf,uBAAuB;AAC3B;AACA;;;;IAII,yBAAyB;IACzB,aAAa;IACb,0BAA0B;AAC9B;AACA;;;;IAII,yBAAyB;AAC7B;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI,YAAY;IACZ,eAAe;IACf,gCAAgC;IAChC,iCAAiC;AACrC;AACA;;IAEI,cAAc;AAClB;AACA;;IAEI,WAAW;AACf;AACA;;IAEI,mBAAmB;IACnB,aAAa;IACb,uBAAuB;IACvB,WAAW;AACf;AACA;;IAEI,oBAAoB;AACxB;AACA;;IAEI,oBAAoB;IACpB,4BAA4B;AAChC;AACA;;IAEI,oBAAoB;AACxB;AACA;;IAEI,oBAAoB;IACpB,4BAA4B;AAChC;AACA;;;;IAII,8BAA8B;AAClC;AACA;;IAEI,kBAAkB;AACtB;AACA;;IAEI,sBAAsB;AAC1B;AACA;;IAEI,wBAAwB;AAC5B;AACA;;IAEI,SAAS;AACb;AACA;;IAEI,kBAAkB;IAClB,YAAY;IACZ,iBAAiB;IACjB,WAAW;AACf;AACA;;IAEI,gDAAgD;IAChD,wCAAwC;IACxC,wCAAwC;IACxC,gBAAgB;IAChB;wCACoC;AACxC;AACA;;IAEI,sBAAsB;AAC1B;AACA;;IAEI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;IACI,8CAA8C;AAClD;AACA;;IAEI,wCAAwC;AAC5C;AACA;;IAEI,mDAAmD;IACnD,2CAA2C;IAC3C,2CAA2C;IAC3C,gBAAgB;IAChB,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;;;;;;;IAUI,gDAAgD;AACpD;AACA;;;;;;;;;;IAUI,gDAAgD;AACpD;AACA;;;;;;;;;;IAUI,kDAAkD;AACtD;AACA;;IAEI,kDAAkD;IAClD,0CAA0C;AAC9C;AACA;IACI,YAAY;IACZ,cAAc;IACd,WAAW;AACf;AACA;IACI,iBAAiB;IACjB,kBAAkB;AACtB;AACA;IACI,gEAAgE;IAChE,wCAAwC;AAC5C;AACA;IACI,kEAAkE;IAClE,wCAAwC;AAC5C;AACA;;IAEI,yBAAyB;AAC7B;AACA;;IAEI,gBAAgB;AACpB;AACA;;IAEI,gBAAgB;AACpB;AACA;;IAEI;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI,oEAAoE;IACpE,wCAAwC;IACxC,qCAAqC;IACrC;wCACoC;AACxC;AACA;;IAEI,sBAAsB;AAC1B;AACA;;IAEI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;;;;;IAUI,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI,wCAAwC;IACxC,wCAAwC;AAC5C;AACA;;IAEI;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI,0EAA0E;IAC1E;wCACoC;AACxC;AACA;;IAEI,sBAAsB;AAC1B;AACA;;IAEI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;;;;;IAUI,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;;;;;;IAMI;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;;IAEI;;;KAGC;AACL;AACA;IACI,wCAAwC;IACxC,wCAAwC;AAC5C;AACA;;IAEI,6CAA6C;IAC7C,kCAAkC;IAClC,gBAAgB;IAChB,eAAe;AACnB;AACA;;IAEI,6CAA6C;IAC7C,gCAAgC;IAChC,gBAAgB;IAChB,eAAe;AACnB;AACA;;IAEI,qBAAqB;IACrB,uEAAuE;IACvE,eAAe;IACf,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;IACI,eAAe;AACnB;AACA;IACI,eAAe;AACnB;AACA;;;;;;IAMI,yBAAyB;AAC7B;AACA;;IAEI,YAAY;IACZ,gBAAgB;AACpB;AACA;;;;IAII,kBAAkB;IAClB,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;AACvB;AACA;;IAEI,kCAAkC;IAClC,YAAY;IACZ,gBAAgB;IAChB,eAAe;AACnB;AACA;;;;IAII,kBAAkB;IAClB,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;AACvB;AACA;;IAEI,4BAA4B;AAChC;AACA;;IAEI,4BAA4B;IAC5B,iBAAiB;IACjB,eAAe;IACf,iBAAiB;IACjB,kBAAkB;AACtB;AACA;;;;;;IAMI;;;KAGC;AACL;AACA;IACI,iBAAiB;IACjB,cAAc;AAClB;AACA;IACI,gBAAgB;IAChB,mBAAmB;IACnB,iBAAiB;AACrB;AACA;IACI,sBAAsB;IACtB,qBAAqB;IACrB,gBAAgB;IAChB,mBAAmB;IACnB,iBAAiB;IACjB,oBAAoB;IACpB,kBAAkB;IAClB,gBAAgB;IAChB,uBAAuB;IACvB,wCAAwC;IACxC,sBAAsB;IACtB,mBAAmB;IACnB,wBAAwB;IACxB,UAAU;AACd;AACA;IACI;;wBAEoB;AACxB;AACA;IACI,mBAAmB;IACnB,eAAe;IACf,2BAA2B;AAC/B;AACA;;IAEI,4BAA4B;AAChC;AACA;;IAEI,4BAA4B;IAC5B,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;IAEI,kBAAkB;AACtB;AACA;;;;;;IAMI;;;KAGC;IACD;;;KAGC;AACL;;ACxrBA;IACI,qEAAqE;IACrE,2DAA2D;AAC/D;AACA;IACI,mBAAmB;IACnB,oBAAoB;AACxB;AACA;IACI,cAAc;AAClB;AACA;;IAEI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,mBAAmB;IACnB,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;;IAEI,mBAAmB;IACnB,mDAAmD;IACnD,6BAA6B;IAC7B,mBAAmB;IACnB,sBAAsB;IACtB,oBAAoB;IACpB,oBAAoB;IACpB,YAAY;IACZ,uBAAuB;IACvB,SAAS;IACT,UAAU;IACV,2BAA2B;IAC3B,WAAW;AACf;AACA;;IAEI,qCAAqC;IACrC,cAAc;IACd,kBAAkB;AACtB;AACA;;IAEI,aAAa;AACjB;AACA;;IAEI,gDAAgD;IAChD,wCAAwC;IACxC,wCAAwC;AAC5C;AACA;;IAEI,uCAAuC;AAC3C;AACA;;IAEI,oCAAoC;AACxC;AACA;;IAEI,YAAY;IACZ,WAAW;AACf;AACA;;IAEI,eAAe;AACnB;AACA;;IAEI,YAAY;IACZ,WAAW;AACf;AACA;;IAEI,YAAY;IACZ,WAAW;AACf;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BI,yBAAyB;AAC7B;AACA;IACI,qCAAqC;AACzC;AACA;;;;IAII,yBAAyB;IACzB,sCAAsC;AAC1C;AACA;;;;;;;;IAQI,sCAAsC;AAC1C;AACA;;IAEI,qCAAqC;AACzC;AACA;IACI,uCAAuC;AAC3C;AACA;;IAEI,iBAAiB;IACjB,kBAAkB;AACtB;AACA;;IAEI,UAAU;IACV,oBAAoB;IACpB,kBAAkB;IAClB,UAAU;IACV,UAAU;AACd;AACA;;;;;;;;IAQI,qCAAqC;AACzC;AACA;;;;;;;;IAQI,uCAAuC;AAC3C;AACA;;;;;;;;IAQI,oCAAoC;AACxC;AACA;;;;;;IAMI,iBAAiB;AACrB;AACA;;;;IAII,kDAAkD;IAClD,0CAA0C;AAC9C;AACA;;;;IAII,uCAAuC;AAC3C;AACA;;IAEI,gEAAgE;IAChE,wCAAwC;AAC5C;AACA;;IAEI,yBAAyB;IACzB,wCAAwC;IACxC,qCAAqC;AACzC;AACA;;;;;;;IAOI,+BAA+B;IAC/B,uBAAuB;AAC3B;AACA;;;;;IAKI,uBAAuB;AAC3B;AACA;;;;IAII,0CAA0C;AAC9C;AACA;;;;IAII,0CAA0C;AAC9C;AACA;;;;IAII,sCAAsC;AAC1C;AACA;;IAEI,yBAAyB;IACzB,wCAAwC;IACxC,qCAAqC;AACzC;AACA;;;;IAII,0CAA0C;AAC9C;;ACtRA;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;IAClC,uCAAuC;IACvC,yCAAyC;AAC7C;AACA;IACI,uBAAuB;IACvB,gDAAgD;IAChD,QAAQ;IACR,uBAAuB;IACvB,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI;;;KAGC;IACD,sEAAsE;IACtE,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,sBAAsB;IACtB,eAAe;IACf,4BAA4B;IAC5B,gBAAgB;IAChB,gBAAgB;IAChB,+BAA+B;AACnC;AACA;IACI,aAAa;IACb,cAAc;IACd,+CAA+C;IAC/C,kBAAkB;AACtB;AACA;;;;;;IAMI,kBAAkB;IAClB,cAAc;IACd,SAAS;IACT,uBAAuB;AAC3B;AACA;IACI,uCAAuC;AAC3C;AACA;IACI,sBAAsB;IACtB,cAAc;IACd,gBAAgB;IAChB,cAAc;IACd,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI;0EACsE;IACtE,aAAa;IACb,sBAAsB;IACtB,uBAAuB;IACvB,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,8BAA8B;AAClC;AACA;IACI,wBAAwB;IACxB,4BAA4B;IAC5B,sBAAsB;IACtB,oEAAoE;IACpE,aAAa;IACb,kBAAkB;IAClB,WAAW;AACf;AACA;IACI,kCAAkC;AACtC;AACA;IACI,iBAAiB;AACrB;AACA;IACI,+CAA+C;AACnD;AACA;;IAEI,8CAA8C;AAClD;AACA;;IAEI,sBAAsB;IACtB,SAAS;IACT,YAAY;IACZ,eAAe;IACf,kBAAkB;IAClB,WAAW;IACX,UAAU;AACd;AACA;IACI,qCAAqC;AACzC;AACA;;IAEI,sBAAsB;IACtB,SAAS;AACb;AACA;IACI,kBAAkB;AACtB;AACA;IACI,+BAA+B;AACnC;AACA;IACI,kBAAkB;AACtB;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;uCACmC;AACvC;AACA;;IAEI;uCACmC;AACvC;AACA;IACI;uCACmC;AACvC;AACA;IACI;;8EAE0E;AAC9E;AACA;IACI;sEACkE;AACtE;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;;;IAMI,UAAU;AACd;AACA;IACI;;QAEI;0CACkC;IACtC;IACA;;QAEI;0CACkC;IACtC;IACA;QACI;mCAC2B;IAC/B;IACA;;QAEI;2CACmC;IACvC;IACA;;QAEI;2CACmC;IACvC;IACA;QACI;0EACkE;IACtE;AACJ;AACA;;IAEI,wBAAwB;AAC5B;AACA;;IAEI,2BAA2B;AAC/B;AACA;IACI,wEAAwE;IACxE,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,WAAW;IACX,WAAW;AACf;AACA;IACI,yBAAyB;AAC7B;AACA;;IAEI,kBAAkB;IAClB,WAAW;IACX,0BAA0B;IAC1B,eAAe;AACnB;AACA;IACI;QACI,WAAW;QACX,eAAe;QACf,WAAW;IACf;IACA;QACI,gBAAgB;QAChB,YAAY;QACZ,SAAS;QACT,gBAAgB;QAChB,eAAe;QACf,WAAW;IACf;AACJ;AACA;IACI;QACI,sEAAsE;QACtE,YAAY;QACZ,cAAc;IAClB;IACA;QACI,kDAAkD;IACtD;IACA;QACI,mBAAmB;QACnB,yBAAyB;IAC7B;IACA;QACI,+BAA+B;QAC/B,aAAa;IACjB;IACA;;QAEI,mBAAmB;IACvB;IACA;;QAEI,sBAAsB;IAC1B;AACJ;AACA;IACI;;;;QAII,mBAAmB;IACvB;AACJ;AACA;IACI;QACI,2CAA2C;IAC/C;IACA;QACI,cAAc;IAClB;IACA;QACI,aAAa;IACjB;IACA;;;QAGI,iBAAiB;IACrB;AACJ;AACA;IACI;QACI,gDAAgD;IACpD;AACJ","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n --dialog-lightbox-wide-max-width: 896px;\n --dialog-lightbox-narrow-max-width: 480px;\n}\n.lightbox-dialog[role=\"dialog\"] {\n align-items: flex-start;\n background-color: var(--dialog-scrim-color-show);\n inset: 0;\n justify-content: center;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.lightbox-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.lightbox-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-radius: var(--lightbox-border-radius, var(--border-radius-150));\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n margin: auto auto 16px;\n max-height: 90%;\n max-width: calc(100% - 32px);\n min-height: 55px;\n min-width: 208px;\n will-change: opacity, transform;\n}\n.lightbox-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.lightbox-dialog__header h1,\n.lightbox-dialog__header h2,\n.lightbox-dialog__header h3,\n.lightbox-dialog__header h4,\n.lightbox-dialog__header h5,\n.lightbox-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.lightbox-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.lightbox-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n min-height: 18px;\n overflow: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__main > :first-child {\n margin-top: 0;\n}\n.lightbox-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.lightbox-dialog__footer {\n border-top: 1px solid\n var(--dialog-lightbox-separator-color, var(--color-border-subtle));\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.lightbox-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\n.lightbox-dialog__image {\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: cover;\n border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;\n height: 218px;\n position: absolute;\n width: 100%;\n}\n.lightbox-dialog--expressive .lightbox-dialog__window {\n padding-bottom: var(--spacing-100);\n}\n.lightbox-dialog--expressive .lightbox-dialog__header > * {\n margin-top: 218px;\n}\n.lightbox-dialog--expressive .lightbox-dialog__header {\n margin: var(--spacing-300) var(--spacing-300) 0;\n}\n.lightbox-dialog--expressive .lightbox-dialog__footer,\n.lightbox-dialog--expressive .lightbox-dialog__main {\n padding: var(--spacing-200) var(--spacing-300);\n}\nbutton.icon-btn.lightbox-dialog__close,\nbutton.icon-btn.lightbox-dialog__prev {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n position: relative;\n width: 32px;\n z-index: 1;\n}\nbutton.icon-btn.lightbox-dialog__prev {\n margin-inline-end: var(--spacing-200);\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev {\n align-self: self-start;\n margin: 0;\n}\n.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev + * {\n margin-left: -32px;\n}\n.lightbox-dialog__title:not(:first-child) {\n margin-left: var(--spacing-200);\n}\n.lightbox-dialog__title--center {\n text-align: center;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-soft-exit),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transition:\n transform var(--motion-duration-medium-3) var(--motion-easing-standard),\n opacity var(--motion-duration-short-3) var(--motion-easing-continuous);\n}\n.lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-continuous) var(--motion-duration-short-3);\n}\n.lightbox-dialog--hide.lightbox-dialog--hide,\n.lightbox-dialog--hide.lightbox-dialog--show-init,\n.lightbox-dialog--show-init.lightbox-dialog--hide,\n.lightbox-dialog--show-init.lightbox-dialog--show-init {\n display: flex;\n}\n.lightbox-dialog--hide.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--hide .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide .lightbox-dialog__window--fade,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show-init .lightbox-dialog__window--fade {\n opacity: 0;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--hide-init,\n.lightbox-dialog--hide-init.lightbox-dialog--show,\n.lightbox-dialog--show.lightbox-dialog--hide-init,\n.lightbox-dialog--show.lightbox-dialog--show {\n display: flex;\n}\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade,\n.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,\n.lightbox-dialog--show.lightbox-dialog--mask-fade,\n.lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate > *,\n.lightbox-dialog--hide-init .lightbox-dialog__window--fade,\n.lightbox-dialog--show .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate > *,\n.lightbox-dialog--show .lightbox-dialog__window--fade {\n opacity: 1;\n}\n@media (prefers-reduced-motion) {\n .lightbox-dialog--hide.lightbox-dialog--mask-fade,\n .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-short-3)\n var(--motion-easing-soft-exit);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-short-2)\n var(--motion-soft-exit);\n }\n .lightbox-dialog--show.lightbox-dialog--mask-fade,\n .lightbox-dialog--show.lightbox-dialog--mask-fade-slow {\n transition: background-color var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--fade {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter);\n }\n .lightbox-dialog--show .lightbox-dialog__window--animate > * {\n transition: opacity var(--motion-duration-medium-2)\n var(--motion-easing-soft-enter) var(--motion-duration-short-3);\n }\n}\n.lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n.lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: translateY(0);\n}\n.lightbox-dialog--hide .lightbox-dialog__window--animate,\n.lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: translateY(100%);\n}\n.lightbox-dialog__handle:after {\n background-color: var(--dialog-handle-color, var(--color-border-medium));\n border-radius: 3px;\n content: \"\";\n display: block;\n height: 2px;\n width: 24px;\n}\n[dir=\"rtl\"] button.icon-btn.lightbox-dialog__prev .icon--16 {\n transform: rotate(180deg);\n}\n.lightbox-dialog--fullscreen .lightbox-dialog__window,\n.lightbox-dialog--large .lightbox-dialog__window {\n align-self: center;\n height: 70%;\n margin: var(--spacing-100);\n max-height: 95%;\n}\n@media (max-width: 512px) {\n .lightbox-dialog--large .lightbox-dialog__window {\n height: 95%;\n max-height: 95%;\n width: 100%;\n }\n .lightbox-dialog--fullscreen .lightbox-dialog__window {\n border-radius: 0;\n height: 100%;\n margin: 0;\n max-height: 100%;\n max-width: 100%;\n width: 100%;\n }\n}\n@media (min-width: 512px) {\n .lightbox-dialog__window {\n border-radius: var(--lightbox-border-radius, var(--border-radius-100));\n margin: auto;\n max-width: 88%;\n }\n .lightbox-dialog--narrow .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-narrow-max-width);\n }\n .lightbox-dialog__window .lightbox-dialog__footer {\n flex-direction: row;\n justify-content: flex-end;\n }\n .lightbox-dialog__window .lightbox-dialog__footer > :not(:first-child) {\n margin-left: var(--spacing-100);\n margin-top: 0;\n }\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(0.75);\n }\n}\n@media (min-width: 512px) and (prefers-reduced-motion) {\n .lightbox-dialog--hide .lightbox-dialog__window--animate,\n .lightbox-dialog--hide-init .lightbox-dialog__window--animate,\n .lightbox-dialog--show .lightbox-dialog__window--animate,\n .lightbox-dialog--show-init .lightbox-dialog__window--animate {\n transform: scale(1);\n }\n}\n@media (min-width: 768px) {\n .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-max-width);\n }\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: 88%;\n }\n .lightbox-dialog--wide .lightbox-dialog__image {\n height: 256px;\n }\n .lightbox-dialog--wide.lightbox-dialog--expressive\n .lightbox-dialog__header\n > * {\n margin-top: 256px;\n }\n}\n@media (min-width: 1024px) {\n .lightbox-dialog--wide .lightbox-dialog__window {\n max-width: var(--dialog-lightbox-wide-max-width);\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-lightbox-dialog/index.html b/docs/ui/makeup-lightbox-dialog/index.html index aea11278..f21215ca 100644 --- a/docs/ui/makeup-lightbox-dialog/index.html +++ b/docs/ui/makeup-lightbox-dialog/index.html @@ -2,55 +2,48 @@ makeup-lightbox-dialog + + + - -
                                    -
                                    -

                                    makeup-lightbox-dialog

                                    -

                                    Lightbox-Dialog is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    - This page was loaded with the dialog in an "open" state. To see examples of dialogs opened by button click, - visit the makeup-dialog-button page. -

                                    -
                                    -
                                    - +
                                    diff --git a/docs/ui/makeup-lightbox-dialog/index.min.js b/docs/ui/makeup-lightbox-dialog/index.min.js index 27d1106a..cf2dca30 100644 --- a/docs/ui/makeup-lightbox-dialog/index.min.js +++ b/docs/ui/makeup-lightbox-dialog/index.min.js @@ -139,9 +139,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(4490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(8448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(4490); +var _makeupScreenreaderTrap = __webpack_require__(8448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -164,6 +163,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -172,6 +176,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -179,7 +189,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -190,7 +200,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -206,8 +216,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -220,7 +230,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -229,11 +242,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/docs/ui/makeup-lightbox-dialog/index.min.js.map b/docs/ui/makeup-lightbox-dialog/index.min.js.map index 48bcd441..02be7c91 100644 --- a/docs/ui/makeup-lightbox-dialog/index.min.js.map +++ b/docs/ui/makeup-lightbox-dialog/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-lightbox-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,IAA4C;;;;;;;;ACApD,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,IAAsB;AACzE,+CAA+C,mBAAO,CAAC,IAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;UCzCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,IAA4B;AACpC,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/lightbox-dialog.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css?d75e","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-lightbox-dialog/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/lightbox-dialog/lightbox-dialog.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/lightbox-dialog\");\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const LightboxDialog = require('makeup-lightbox-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".lightbox-dialog\").forEach(function (el, i) {\n const widget = new _makeupLightboxDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-lightbox-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,IAA4C;;;;;;;;ACApD,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,IAAsB;AACxD,8BAA8B,mBAAO,CAAC,IAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;UCzCA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,IAA4B;AACpC,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/lightbox-dialog.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/lightbox-dialog/lightbox-dialog.css?d75e","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-lightbox-dialog/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/lightbox-dialog/lightbox-dialog.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/lightbox-dialog\");\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const LightboxDialog = require('makeup-lightbox-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".lightbox-dialog\").forEach(function (el, i) {\n const widget = new _makeupLightboxDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-listbox-button/index.css b/docs/ui/makeup-listbox-button/index.css index c9ebe1c5..a5b0edfc 100644 --- a/docs/ui/makeup-listbox-button/index.css +++ b/docs/ui/makeup-listbox-button/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-listbox-button/index.css.map b/docs/ui/makeup-listbox-button/index.css.map index 6542fd89..26727dc3 100644 --- a/docs/ui/makeup-listbox-button/index.css.map +++ b/docs/ui/makeup-listbox-button/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-listbox-button/index.css","mappings":"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,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,uCAAuC;IACvC,UAAU;IACV,oBAAoB;IACpB,eAAe;AACnB;AACA;IACI,UAAU;AACd;AACA;IACI;;;KAGC;IACD,iCAAiC;IACjC,gBAAgB;IAChB,gBAAgB;IAChB,WAAW;AACf;AACA;IACI,yBAAyB;IACzB,6CAA6C;IAC7C,mBAAmB;IACnB,iBAAiB;IACjB,sBAAsB;IACtB,sCAAsC;IACtC,eAAe;IACf,oBAAoB;IACpB,oBAAoB;IACpB,gCAAgC;IAChC,8BAA8B;IAC9B,iBAAiB;IACjB,WAAW;AACf;AACA;IACI,kBAAkB;AACtB;AACA;IACI,oBAAoB;AACxB;AACA;IACI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;IACI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;;IAKI,gDAAgD;AACpD;AACA;;;;;IAKI,gDAAgD;AACpD;AACA;;;;;IAKI,kDAAkD;AACtD;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;;IAEI,uBAAuB;IACvB;;;KAGC;IACD,kBAAkB;AACtB;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;;;IAGI,uBAAuB;IACvB;;;KAGC;IACD,kBAAkB;AACtB;AACA;IACI,gBAAgB;AACpB;AACA;IACI,cAAc;IACd,mBAAmB;AACvB;AACA;IACI,aAAa;AACjB;AACA;IACI,2EAA2E;IAC3E,gBAAgB;IAChB,eAAe;AACnB","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/utility/utility.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/listbox-button/listbox-button.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",".clearfix:after,\n.clearfix:before {\n content: \" \";\n display: table;\n line-height: 0;\n}\n.clearfix:after {\n clear: both;\n}\n.clipped {\n border: 0;\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n.clipped--stealth:focus {\n clip-path: none;\n height: auto;\n overflow: visible;\n white-space: normal;\n width: auto;\n}\n.image-stretch {\n height: auto;\n width: 100%;\n}\n.image-scale {\n height: auto;\n max-width: 100%;\n}\n.image-center {\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n}\n.image-center img {\n max-height: 100%;\n max-width: 100%;\n}\n.image-treatment {\n align-items: center;\n border-radius: 8px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-treatment-large {\n align-items: center;\n border-radius: 16px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment-large:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment-large > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-disabled {\n filter: var(--color-media-disabled-filter);\n}\n.text-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.scrollbars-permanent {\n scroll-behavior: smooth;\n scroll-snap-type: proximity;\n scroll-snap-type: x proximity;\n}\n.scrollbars-permanent::-webkit-scrollbar {\n background-color: var(--color-state-layer-focus);\n border-radius: 12px;\n}\n.scrollbars-permanent::-webkit-scrollbar:vertical {\n width: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar:horizontal {\n height: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar-thumb {\n background-color: var(--color-foreground-secondary);\n border-color: transparent;\n border-radius: 12px;\n border-right-style: inset;\n box-shadow: none;\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\n.listbox-button {\n line-height: normal;\n position: relative;\n vertical-align: bottom;\n}\nspan.listbox-button {\n display: inline-block;\n}\n.listbox-button .btn {\n padding-left: 15px;\n padding-right: 15px;\n}\nspan.listbox-button--fluid,\nspan.listbox-button--fluid .btn,\nspan.listbox-button--fluid .expand-btn,\nspan.listbox-button--fluid div.listbox-button__listbox {\n width: 100%;\n}\ndiv.listbox-button__listbox {\n background-color: var(--color-background-elevated);\n border-radius: var(--border-radius-50);\n box-shadow: var(--bubble-shadow);\n box-sizing: border-box;\n display: none;\n left: 0;\n max-height: 400px;\n overflow-y: auto;\n position: absolute;\n top: 0;\n width: fit-content;\n z-index: 2;\n}\ndiv.listbox-button__listbox--set-position {\n min-width: 100%;\n top: calc(100% + 4px);\n width: auto;\n}\ndiv.listbox-button__listbox--fixed {\n position: fixed;\n}\n[dir=\"rtl\"] div.listbox-button__listbox {\n left: unset;\n right: 0;\n}\n.listbox-button button.btn[aria-expanded=\"true\"] ~ div.listbox-button__listbox,\nbutton.expand-btn[aria-expanded=\"true\"] ~ div.listbox-button__listbox {\n display: block;\n}\n.listbox-button button[aria-invalid=\"true\"] {\n border-color: var(\n --listbox-button-invalid-border-color,\n var(--color-border-attention)\n );\n}\n.listbox-button:not(.listbox-button--error)\n button:not(\n [disabled],\n [aria-disabled=\"true\"],\n [aria-invalid=\"true\"]\n ).btn--form {\n border-color: var(\n --listbox-button-border-color,\n var(--color-border-medium)\n );\n}\n.listbox-button:not(.listbox-button--error)\n button:not(\n [disabled],\n [aria-disabled=\"true\"],\n [aria-invalid=\"true\"]\n ).btn--form:active,\n.listbox-button:not(.listbox-button--error)\n button:not(\n [disabled],\n [aria-disabled=\"true\"],\n [aria-invalid=\"true\"]\n ).btn--form:focus,\n.listbox-button:not(.listbox-button--error)\n button:not(\n [disabled],\n [aria-disabled=\"true\"],\n [aria-invalid=\"true\"]\n ).btn--form:hover {\n border-color: inherit;\n}\n.listbox-button button.btn--borderless,\n.listbox-button button.expand-btn--borderless {\n background-color: initial;\n border-color: transparent;\n padding-left: 0;\n vertical-align: initial;\n}\n.listbox-button button.btn--borderless:focus,\n.listbox-button button.expand-btn--borderless:focus {\n outline: none;\n text-decoration: underline;\n}\n.listbox-button\n button.btn--borderless[aria-expanded=\"true\"]\n ~ .listbox-button__listbox,\n.listbox-button\n button.expand-btn--borderless[aria-expanded=\"true\"]\n ~ .listbox-button__listbox {\n top: 41px;\n}\n.listbox-button.listbox-button--form button {\n background-color: var(\n --listbox-button-background-color,\n var(--color-background-secondary)\n );\n border-color: var(\n --listbox-button-border-color,\n var(--color-border-medium)\n );\n color: var(\n --listbox-button-foreground-color,\n var(--color-foreground-primary)\n );\n}\n.listbox-button.listbox-button--form button[aria-disabled=\"true\"],\n.listbox-button.listbox-button--form button[disabled] {\n border-color: var(\n --listbox-button-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --listbox-button-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n.listbox-button.listbox-button--form button:focus {\n background-color: var(\n --combobox-textbox-focus-background-color,\n var(--color-background-primary)\n );\n}\n.listbox-button.listbox-button--form button[aria-invalid=\"true\"] {\n border-color: var(\n --listbox-button-invalid-border-color,\n var(--color-border-attention)\n );\n}\n.listbox-button.listbox-button--error button:not(.btn--borderless) {\n background-color: var(\n --listbox-button-background-color,\n var(--color-background-secondary)\n );\n border-color: var(\n --listbox-button-border-color,\n var(--color-border-attention)\n );\n}\n.listbox-button .btn__label {\n color: var(--listbox-button-label-color, var(--color-foreground-secondary));\n margin-right: 3px;\n}\n.listbox-button--expanded .btn__label {\n color: var(--listbox-button-label-color, var(--color-foreground-primary));\n}\n.listbox-button.listbox-button--error button .btn__floating-label,\n.listbox-button.listbox-button--error button .btn__label {\n color: var(--listbox-button-label-color, var(--color-foreground-attention));\n}\n.listbox-button .btn__text {\n font-weight: 700;\n margin-right: auto;\n}\n.listbox-button__options {\n border-radius: var(--listbox-button-border-radius, var(--border-radius-50));\n}\n.listbox-button__options[role=\"listbox\"]:focus\n .listbox-button__option--active[role=\"option\"] {\n overflow: hidden;\n position: relative;\n}\n.listbox-button__options[role=\"listbox\"]:focus\n .listbox-button__option--active[role=\"option\"]:after {\n background-color: var(--color-state-layer-neutral);\n background-color: var(--color-state-layer-hover);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.listbox-button__option svg.icon {\n align-self: center;\n fill: currentColor;\n margin: 0 auto;\n margin-inline-start: var(--spacing-100);\n opacity: 0;\n stroke: currentColor;\n stroke-width: 0;\n}\ndiv.listbox-button__option[role=\"option\"][aria-selected=\"true\"] svg.icon {\n opacity: 1;\n}\n.listbox-button__description {\n color: var(\n --listbox-button-subtitle-color,\n var(--color-foreground-secondary)\n );\n font-size: var(--font-size-small);\n font-weight: 400;\n grid-column: 1 2;\n grid-row: 2;\n}\ndiv.listbox-button__option[role=\"option\"] {\n background-color: initial;\n border-color: var(--color-background-primary);\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--color-foreground-primary);\n cursor: default;\n display: inline-grid;\n font-family: inherit;\n grid-template-columns: auto auto;\n justify-content: space-between;\n padding: 8px 15px;\n width: 100%;\n}\ndiv.listbox-button__option[role=\"option\"]:not(:last-child) {\n margin-bottom: 1px;\n}\ndiv.listbox-button__option[role=\"option\"]:focus {\n outline-offset: -4px;\n}\ndiv.listbox-button__option[role=\"option\"] {\n overflow: hidden;\n position: relative;\n}\ndiv.listbox-button__option[role=\"option\"]:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\ndiv.listbox-button__option[role=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\ndiv.listbox-button__option[role=\"option\"][href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\ndiv.listbox-button__option[role=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\ndiv.listbox-button__option[role=\"option\"][href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\ndiv.listbox-button__option[role=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\ndiv.listbox-button__option[role=\"option\"][href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\ndiv.listbox-button__option[role=\"option\"][hidden] {\n display: none;\n}\ndiv.listbox-button__option[role=\"option\"]:active {\n font-weight: 700;\n}\ndiv.listbox-button__option[role=\"option\"]:disabled,\ndiv.listbox-button__option[role=\"option\"][aria-disabled=\"true\"] {\n background-color: unset;\n color: var(\n --listbox-option-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n font-weight: unset;\n}\ndiv.listbox-button__option[role=\"option\"]:first-child {\n border-top-left-radius: var(\n --listbox-button-listbox-border-radius,\n var(--border-radius-50)\n );\n border-top-right-radius: var(\n --listbox-button-listbox-border-radius,\n var(--border-radius-50)\n );\n}\ndiv.listbox-button__option[role=\"option\"]:last-child {\n border-bottom-left-radius: var(\n --listbox-button-listbox-border-radius,\n var(--border-radius-50)\n );\n border-bottom-right-radius: var(\n --listbox-button-listbox-border-radius,\n var(--border-radius-50)\n );\n}\ndiv.listbox-button__option[role=\"option\"]:disabled .listbox-button__description,\ndiv.listbox-button__option[role=\"option\"][aria-disabled=\"true\"]\n .listbox-button__description {\n background-color: unset;\n color: var(\n --listbox-option-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n font-weight: unset;\n}\ndiv.listbox-button__option--active[role=\"option\"] {\n font-weight: 700;\n}\nspan.listbox-button__value {\n flex: 1 0 auto;\n white-space: nowrap;\n}\n.listbox-button__options:focus:not(:focus-visible) {\n outline: none;\n}\n[dir=\"rtl\"] .listbox-button .btn__label {\n color: var(--listbox-button-label-color, var(--color-foreground-secondary));\n margin-left: 3px;\n margin-right: 0;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-listbox-button/index.css","mappings":"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;;IAEI,yBAAyB;IACzB,yBAAyB;IACzB,eAAe;IACf,uBAAuB;AAC3B;AACA;;IAEI,aAAa;IACb,0BAA0B;AAC9B;AACA;;;;;;IAMI,SAAS;AACb;AACA;IACI;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;AACL;AACA;;IAEI;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI;;;KAGC;AACL;AACA;IACI;;;KAGC;AACL;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI,2EAA2E;IAC3E,iBAAiB;AACrB;AACA;IACI,yEAAyE;AAC7E;AACA;;IAEI,2EAA2E;AAC/E;AACA;IACI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;IACI,2EAA2E;AAC/E;AACA;;IAEI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,gDAAgD;IAChD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;IACI,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,uCAAuC;IACvC,UAAU;IACV,oBAAoB;IACpB,eAAe;AACnB;AACA;IACI,UAAU;AACd;AACA;IACI;;;KAGC;IACD,iCAAiC;IACjC,gBAAgB;IAChB,gBAAgB;IAChB,WAAW;AACf;AACA;IACI,yBAAyB;IACzB,6CAA6C;IAC7C,mBAAmB;IACnB,iBAAiB;IACjB,sBAAsB;IACtB,sCAAsC;IACtC,eAAe;IACf,oBAAoB;IACpB,oBAAoB;IACpB,gCAAgC;IAChC,8BAA8B;IAC9B,iBAAiB;IACjB,WAAW;AACf;AACA;IACI,kBAAkB;AACtB;AACA;IACI,oBAAoB;AACxB;AACA;IACI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;IACI,kDAAkD;IAClD,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;;IAKI,gDAAgD;AACpD;AACA;;;;;IAKI,gDAAgD;AACpD;AACA;;;;;IAKI,kDAAkD;AACtD;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;;IAEI,uBAAuB;IACvB;;;KAGC;IACD,kBAAkB;AACtB;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;IACI;;;KAGC;IACD;;;KAGC;AACL;AACA;;;IAGI,uBAAuB;IACvB;;;KAGC;IACD,kBAAkB;AACtB;AACA;IACI,gBAAgB;AACpB;AACA;IACI,cAAc;IACd,mBAAmB;AACvB;AACA;IACI,aAAa;AACjB;AACA;IACI,2EAA2E;IAC3E,gBAAgB;IAChB,eAAe;AACnB","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/utility/utility.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/listbox-button/listbox-button.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",".clearfix:after,\n.clearfix:before {\n content: \" \";\n display: table;\n line-height: 0;\n}\n.clearfix:after {\n clear: both;\n}\n.clipped {\n border: 0;\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n.clipped--stealth:focus {\n clip-path: none;\n height: auto;\n overflow: visible;\n white-space: normal;\n width: auto;\n}\n.image-stretch {\n height: auto;\n width: 100%;\n}\n.image-scale {\n height: auto;\n max-width: 100%;\n}\n.image-center {\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n}\n.image-center img {\n max-height: 100%;\n max-width: 100%;\n}\n.image-treatment {\n align-items: center;\n border-radius: 8px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-treatment-large {\n align-items: center;\n border-radius: 16px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment-large:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment-large > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-disabled {\n filter: var(--color-media-disabled-filter);\n}\n.text-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.scrollbars-permanent {\n scroll-behavior: smooth;\n scroll-snap-type: proximity;\n scroll-snap-type: x proximity;\n}\n.scrollbars-permanent::-webkit-scrollbar {\n background-color: var(--color-state-layer-focus);\n border-radius: 12px;\n}\n.scrollbars-permanent::-webkit-scrollbar:vertical {\n width: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar:horizontal {\n height: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar-thumb {\n background-color: var(--color-foreground-secondary);\n border-color: transparent;\n border-radius: 12px;\n border-right-style: inset;\n box-shadow: none;\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\n.listbox-button {\n line-height: normal;\n position: relative;\n vertical-align: bottom;\n}\nspan.listbox-button {\n display: inline-block;\n}\n.listbox-button .btn {\n padding-left: 15px;\n padding-right: 15px;\n}\nspan.listbox-button--fluid,\nspan.listbox-button--fluid .btn,\nspan.listbox-button--fluid .expand-btn,\nspan.listbox-button--fluid div.listbox-button__listbox {\n width: 100%;\n}\ndiv.listbox-button__listbox {\n background-color: var(--color-background-elevated);\n border-radius: var(--border-radius-50);\n box-shadow: var(--bubble-shadow);\n box-sizing: border-box;\n display: none;\n left: 0;\n max-height: 400px;\n overflow-y: auto;\n position: absolute;\n top: 0;\n width: fit-content;\n z-index: 2;\n}\ndiv.listbox-button__listbox--set-position {\n min-width: 100%;\n top: calc(100% + 4px);\n width: auto;\n}\ndiv.listbox-button__listbox--fixed {\n position: fixed;\n}\n[dir=\"rtl\"] div.listbox-button__listbox {\n left: unset;\n right: 0;\n}\n.listbox-button button.btn[aria-expanded=\"true\"] ~ div.listbox-button__listbox,\nbutton.expand-btn[aria-expanded=\"true\"] ~ div.listbox-button__listbox {\n display: block;\n}\n.listbox-button button[aria-invalid=\"true\"] {\n border-color: var(\n --listbox-button-invalid-border-color,\n var(--color-border-attention)\n );\n}\n.listbox-button:not(.listbox-button--error)\n button:not(\n [disabled],\n [aria-disabled=\"true\"],\n [aria-invalid=\"true\"]\n ).btn--form {\n border-color: var(\n --listbox-button-border-color,\n var(--color-border-medium)\n );\n}\n.listbox-button:not(.listbox-button--error)\n button:not(\n [disabled],\n [aria-disabled=\"true\"],\n [aria-invalid=\"true\"]\n ).btn--form:active,\n.listbox-button:not(.listbox-button--error)\n button:not(\n [disabled],\n [aria-disabled=\"true\"],\n [aria-invalid=\"true\"]\n ).btn--form:focus,\n.listbox-button:not(.listbox-button--error)\n button:not(\n [disabled],\n [aria-disabled=\"true\"],\n [aria-invalid=\"true\"]\n ).btn--form:hover {\n border-color: inherit;\n}\n.listbox-button button.btn--borderless,\n.listbox-button button.expand-btn--borderless {\n background-color: initial;\n border-color: transparent;\n padding-left: 0;\n vertical-align: initial;\n}\n.listbox-button button.btn--borderless:focus,\n.listbox-button button.expand-btn--borderless:focus {\n outline: none;\n text-decoration: underline;\n}\n.listbox-button\n button.btn--borderless[aria-expanded=\"true\"]\n ~ .listbox-button__listbox,\n.listbox-button\n button.expand-btn--borderless[aria-expanded=\"true\"]\n ~ .listbox-button__listbox {\n top: 41px;\n}\n.listbox-button.listbox-button--form button {\n background-color: var(\n --listbox-button-background-color,\n var(--color-background-secondary)\n );\n border-color: var(\n --listbox-button-border-color,\n var(--color-border-medium)\n );\n color: var(\n --listbox-button-foreground-color,\n var(--color-foreground-primary)\n );\n}\n.listbox-button.listbox-button--form button[aria-disabled=\"true\"],\n.listbox-button.listbox-button--form button[disabled] {\n border-color: var(\n --listbox-button-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --listbox-button-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\n.listbox-button.listbox-button--form button:focus {\n background-color: var(\n --combobox-textbox-focus-background-color,\n var(--color-background-primary)\n );\n}\n.listbox-button.listbox-button--form button[aria-invalid=\"true\"] {\n border-color: var(\n --listbox-button-invalid-border-color,\n var(--color-border-attention)\n );\n}\n.listbox-button.listbox-button--error button:not(.btn--borderless) {\n background-color: var(\n --listbox-button-background-color,\n var(--color-background-secondary)\n );\n border-color: var(\n --listbox-button-border-color,\n var(--color-border-attention)\n );\n}\n.listbox-button .btn__label {\n color: var(--listbox-button-label-color, var(--color-foreground-secondary));\n margin-right: 3px;\n}\n.listbox-button--expanded .btn__label {\n color: var(--listbox-button-label-color, var(--color-foreground-primary));\n}\n.listbox-button.listbox-button--error button .btn__floating-label,\n.listbox-button.listbox-button--error button .btn__label {\n color: var(--listbox-button-label-color, var(--color-foreground-attention));\n}\n.listbox-button .btn__text {\n font-weight: 700;\n margin-right: auto;\n}\n.listbox-button__options {\n border-radius: var(--listbox-button-border-radius, var(--border-radius-50));\n}\n.listbox-button__options[role=\"listbox\"]:focus\n .listbox-button__option--active[role=\"option\"] {\n overflow: hidden;\n position: relative;\n}\n.listbox-button__options[role=\"listbox\"]:focus\n .listbox-button__option--active[role=\"option\"]:after {\n background-color: var(--color-state-layer-neutral);\n background-color: var(--color-state-layer-hover);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.listbox-button__option svg.icon {\n align-self: center;\n fill: currentColor;\n margin: 0 auto;\n margin-inline-start: var(--spacing-100);\n opacity: 0;\n stroke: currentColor;\n stroke-width: 0;\n}\ndiv.listbox-button__option[role=\"option\"][aria-selected=\"true\"] svg.icon {\n opacity: 1;\n}\n.listbox-button__description {\n color: var(\n --listbox-button-subtitle-color,\n var(--color-foreground-secondary)\n );\n font-size: var(--font-size-small);\n font-weight: 400;\n grid-column: 1 2;\n grid-row: 2;\n}\ndiv.listbox-button__option[role=\"option\"] {\n background-color: initial;\n border-color: var(--color-background-primary);\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--color-foreground-primary);\n cursor: default;\n display: inline-grid;\n font-family: inherit;\n grid-template-columns: auto auto;\n justify-content: space-between;\n padding: 8px 15px;\n width: 100%;\n}\ndiv.listbox-button__option[role=\"option\"]:not(:last-child) {\n margin-bottom: 1px;\n}\ndiv.listbox-button__option[role=\"option\"]:focus {\n outline-offset: -4px;\n}\ndiv.listbox-button__option[role=\"option\"] {\n overflow: hidden;\n position: relative;\n}\ndiv.listbox-button__option[role=\"option\"]:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\ndiv.listbox-button__option[role=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\ndiv.listbox-button__option[role=\"option\"][href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\ndiv.listbox-button__option[role=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\ndiv.listbox-button__option[role=\"option\"][href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\ndiv.listbox-button__option[role=\"option\"]:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\ndiv.listbox-button__option[role=\"option\"][href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\ndiv.listbox-button__option[role=\"option\"][hidden] {\n display: none;\n}\ndiv.listbox-button__option[role=\"option\"]:active {\n font-weight: 700;\n}\ndiv.listbox-button__option[role=\"option\"]:disabled,\ndiv.listbox-button__option[role=\"option\"][aria-disabled=\"true\"] {\n background-color: unset;\n color: var(\n --listbox-option-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n font-weight: unset;\n}\ndiv.listbox-button__option[role=\"option\"]:first-child {\n border-top-left-radius: var(\n --listbox-button-listbox-border-radius,\n var(--border-radius-50)\n );\n border-top-right-radius: var(\n --listbox-button-listbox-border-radius,\n var(--border-radius-50)\n );\n}\ndiv.listbox-button__option[role=\"option\"]:last-child {\n border-bottom-left-radius: var(\n --listbox-button-listbox-border-radius,\n var(--border-radius-50)\n );\n border-bottom-right-radius: var(\n --listbox-button-listbox-border-radius,\n var(--border-radius-50)\n );\n}\ndiv.listbox-button__option[role=\"option\"]:disabled .listbox-button__description,\ndiv.listbox-button__option[role=\"option\"][aria-disabled=\"true\"]\n .listbox-button__description {\n background-color: unset;\n color: var(\n --listbox-option-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n font-weight: unset;\n}\ndiv.listbox-button__option--active[role=\"option\"] {\n font-weight: 700;\n}\nspan.listbox-button__value {\n flex: 1 0 auto;\n white-space: nowrap;\n}\n.listbox-button__options:focus:not(:focus-visible) {\n outline: none;\n}\n[dir=\"rtl\"] .listbox-button .btn__label {\n color: var(--listbox-button-label-color, var(--color-foreground-secondary));\n margin-left: 3px;\n margin-right: 0;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-listbox-button/index.html b/docs/ui/makeup-listbox-button/index.html index 2defb5d4..ddf8ab56 100644 --- a/docs/ui/makeup-listbox-button/index.html +++ b/docs/ui/makeup-listbox-button/index.html @@ -2,8 +2,10 @@ makeup-listbox-button + + + - -
                                    -
                                    -

                                    makeup-menu

                                    -

                                    Menu is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base markup and styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    The menu class is consumed by the menu-button module.

                                    -
                                    -
                                    -
                                    - -
                                    - +
                                    +
                                    diff --git a/docs/ui/makeup-panel-dialog/index.css b/docs/ui/makeup-panel-dialog/index.css index 5ccaf25b..ba1f158d 100644 --- a/docs/ui/makeup-panel-dialog/index.css +++ b/docs/ui/makeup-panel-dialog/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-panel-dialog/index.css.map b/docs/ui/makeup-panel-dialog/index.css.map index 14947cd4..26be4090 100644 --- a/docs/ui/makeup-panel-dialog/index.css.map +++ b/docs/ui/makeup-panel-dialog/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-panel-dialog/index.css","mappings":"AAAA;EACE,cAAc;EACd,gBAAgB;EAChB,WAAW;AACb;;ACJA;IACI,0BAA0B;IAC1B,yBAAyB;IACzB,0BAA0B;IAC1B,mCAAmC;IACnC,oCAAoC;IACpC,kCAAkC;IAClC,kCAAkC;IAClC,kCAAkC;IAClC,gCAAgC;IAChC,+BAA+B;IAC/B,+BAA+B;IAC/B,gCAAgC;IAChC,+BAA+B;IAC/B,yBAAyB;IACzB,0BAA0B;IAC1B,yBAAyB;IACzB,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,qCAAqC;IACrC,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,0BAA0B;IAC1B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,6BAA6B;IAC7B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;IACzB,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,kBAAkB;IAClB,sBAAsB;IACtB,oBAAoB;IACpB,qBAAqB;IACrB,qBAAqB;IACrB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,qBAAqB;IACrB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,qCAAqC;IACrC,sCAAsC;IACtC,qCAAqC;IACrC,kCAAkC;IAClC,kCAAkC;IAClC,4BAA4B;IAC5B,6BAA6B;IAC7B,4BAA4B;IAC5B,oCAAoC;IACpC,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,qDAAqD;IACrD,qDAAqD;IACrD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,oDAAoD;IACpD,oDAAoD;IACpD,qDAAqD;IACrD,qDAAqD;IACrD,sDAAsD;IACtD,sDAAsD;IACtD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,qDAAqD;IACrD,qDAAqD;IACrD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,+CAA+C;IAC/C,+CAA+C;IAC/C,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,gDAAgD;IAChD,gDAAgD;IAChD,iDAAiD;IACjD,iDAAiD;IACjD,kDAAkD;IAClD,kDAAkD;IAClD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,kDAAkD;IAClD,kDAAkD;IAClD,mDAAmD;IACnD,mDAAmD;IACnD,oDAAoD;IACpD,oDAAoD;IACpD,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,uCAAuC;IACvC,+BAA+B;IAC/B,qCAAqC;IACrC,qCAAqC;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,4BAA4B;IAC5B,kCAAkC;IAClC,0BAA0B;IAC1B,6BAA6B;IAC7B,4BAA4B;IAC5B,6BAA6B;IAC7B,4BAA4B;IAC5B,2BAA2B;IAC3B,wBAAwB;IACxB,0BAA0B;IAC1B,8BAA8B;IAC9B,2BAA2B;IAC3B,qCAAqC;IACrC,iCAAiC;IACjC,2CAA2C;IAC3C,sBAAsB;IACtB,sBAAsB;IACtB,+BAA+B;IAC/B,+BAA+B;IAC/B,+BAA+B;IAC/B,gCAAgC;IAChC,iCAAiC;IACjC,iCAAiC;IACjC,iCAAiC;IACjC,+BAA+B;IAC/B,+BAA+B;IAC/B,gCAAgC;IAChC,qDAAqD;IACrD,wDAAwD;IACxD,gDAAgD;IAChD,qDAAqD;IACrD,oDAAoD;IACpD,sDAAsD;IACtD,qDAAqD;IACrD,oDAAoD;IACpD,4BAA4B;IAC5B,2BAA2B;IAC3B,2BAA2B;IAC3B,2BAA2B;IAC3B,0BAA0B;IAC1B,wBAAwB;IACxB,oBAAoB;IACpB,oBAAoB;IACpB,kBAAkB;IAClB,0BAA0B;IAC1B,yBAAyB;IACzB,gCAAgC;IAChC,mBAAmB;IACnB;gFAC4E;IAC5E,qDAAqD;IACrD,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,iBAAiB;IACjB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,iBAAiB;IACjB,mBAAmB;IACnB,iBAAiB;IACjB,+BAA+B;IAC/B,gCAAgC;IAChC,uDAAuD;IACvD,kDAAkD;IAClD,yDAAyD;IACzD,oDAAoD;IACpD,uDAAuD;IACvD,sDAAsD;IACtD,uDAAuD;IACvD,sDAAsD;IACtD,sDAAsD;IACtD,uDAAuD;IACvD,oDAAoD;IACpD,mDAAmD;IACnD,oDAAoD;IACpD,iDAAiD;IACjD,uBAAuB;IACvB,yBAAyB;IACzB,yBAAyB;IACzB,sCAAsC;IACtC,sCAAsC;IACtC,mCAAmC;IACnC,gCAAgC;IAChC,2CAA2C;IAC3C,0CAA0C;IAC1C,4CAA4C;IAC5C,yCAAyC;IACzC,kBAAkB;IAClB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,yCAAyC;IACzC,sCAAsC;IACtC,qCAAqC;IACrC,uCAAuC;IACvC,wBAAwB;IACxB,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,wCAAwC;IACxC,oBAAoB;IACpB,0CAA0C;IAC1C,wCAAwC;IACxC,6CAA6C;IAC7C,0CAA0C;IAC1C,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,mBAAmB;IACnB,yDAAyD;IACzD,kCAAkC;AACtC;;ACjaA;IACI,qCAAqC;IACrC,qCAAqC;IACrC,sCAAsC;IACtC,sCAAsC;IACtC,uCAAuC;IACvC,uCAAuC;IACvC,oCAAoC;IACpC,oCAAoC;IACpC,uCAAuC;IACvC,gDAAgD;IAChD,kDAAkD;IAClD,qDAAqD;IACrD,mDAAmD;IACnD,qDAAqD;IACrD,oDAAoD;IACpD,qDAAqD;IACrD,yDAAyD;IACzD,oDAAoD;IACpD,kEAAkE;IAClE,sDAAsD;IACtD,mDAAmD;IACnD,iDAAiD;IACjD,qDAAqD;IACrD,kDAAkD;IAClD,4CAA4C;IAC5C,8CAA8C;IAC9C,iDAAiD;IACjD,gDAAgD;IAChD,+CAA+C;IAC/C,kDAAkD;IAClD,qDAAqD;IACrD,oDAAoD;IACpD,mDAAmD;IACnD,mDAAmD;IACnD,+CAA+C;IAC/C,+CAA+C;IAC/C,6CAA6C;IAC7C,qCAAqC;IACrC,sCAAsC;IACtC,wCAAwC;IACxC,uCAAuC;IACvC,gDAAgD;IAChD,kDAAkD;IAClD,qDAAqD;IACrD,oDAAoD;IACpD,gEAAgE;IAChE,sDAAsD;IACtD,sDAAsD;IACtD,yDAAyD;IACzD,wDAAwD;IACxD,uDAAuD;IACvD,sDAAsD;IACtD,uDAAuD;IACvD,oDAAoD;IACpD,sDAAsD;IACtD,iDAAiD;IACjD;;;;;KAKC;IACD;;;;;KAKC;IACD;;;;;;;KAOC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;KAIC;IACD;;;;;;;;;;KAUC;IACD;;;;;;;;;;KAUC;IACD,0CAA0C;IAC1C,6BAA6B;IAC7B,4DAA4D;IAC5D,4DAA4D;IAC5D,8DAA8D;IAC9D,8DAA8D;IAC9D,4CAA4C;IAC5C,8DAA8D;IAC9D,8CAA8C;IAC9C,8DAA8D;IAC9D,8CAA8C;IAC9C,gEAAgE;IAChE,gDAAgD;IAChD,gEAAgE;IAChE,iDAAiD;IACjD,kEAAkE;IAClE,gEAAgE;IAChE,8DAA8D;IAC9D,gDAAgD;IAChD,2DAA2D;IAC3D,gEAAgE;IAChE,8DAA8D;IAC9D,gEAAgE;IAChE,8DAA8D;IAC9D,kEAAkE;IAClE,sEAAsE;IACtE,qEAAqE;IACrE,kDAAkD;IAClD,iDAAiD;IACjD,uDAAuD;IACvD,uDAAuD;IACvD,6DAA6D;IAC7D,wDAAwD;IACxD,8DAA8D;IAC9D,sDAAsD;IACtD,qDAAqD;IACrD,2DAA2D;IAC3D,iDAAiD;IACjD,iDAAiD;IACjD,sDAAsD;IACtD,4CAA4C;IAC5C,mCAAmC;IACnC,oCAAoC;IACpC,qCAAqC;IACrC,sCAAsC;IACtC,gDAAgD;IAChD,uCAAuC;IACvC,iDAAiD;IACjD,oCAAoC;IACpC,qCAAqC;IACrC,mCAAmC;IACnC,oDAAoD;IACpD,oCAAoC;IACpC,qDAAqD;IACrD,sCAAsC;IACtC,uCAAuC;IACvC,iEAAiE;IACjE,kEAAkE;IAClE,+CAA+C;IAC/C,iDAAiD;IACjD,iDAAiD;IACjD,0DAA0D;IAC1D,uDAAuD;IACvD,0DAA0D;IAC1D,8DAA8D;IAC9D,2DAA2D;IAC3D,6DAA6D;IAC7D,0DAA0D;IAC1D,sDAAsD;IACtD,qDAAqD;IACrD,qDAAqD;IACrD,uDAAuD;IACvD,mEAAmE;IACnE,6DAA6D;IAC7D,mEAAmE;IACnE,+DAA+D;IAC/D,gEAAgE;IAChE,4DAA4D;IAC5D,kDAAkD;IAClD,oDAAoD;IACpD,wCAAwC;IACxC,2DAA2D;IAC3D,6DAA6D;IAC7D,2DAA2D;IAC3D,2DAA2D;IAC3D,wDAAwD;IACxD,0DAA0D;IAC1D,6DAA6D;IAC7D,0DAA0D;IAC1D,gEAAgE;IAChE,8DAA8D;IAC9D,6DAA6D;IAC7D,6DAA6D;IAC7D,gEAAgE;IAChE,6DAA6D;IAC7D,2DAA2D;IAC3D,qEAAqE;IACrE;;;KAGC;IACD;;;KAGC;IACD;;;KAGC;IACD,yEAAyE;IACzE;;KAEC;IACD,uEAAuE;IACvE,qEAAqE;IACrE,yEAAyE;IACzE,yEAAyE;IACzE,qEAAqE;IACrE,uEAAuE;IACvE,0DAA0D;IAC1D,+CAA+C;IAC/C,gDAAgD;IAChD,4DAA4D;IAC5D,6DAA6D;IAC7D;;;;;;;KAOC;IACD;;;;;;;KAOC;IACD;;;;KAIC;IACD;;;;;KAKC;IACD;;;;KAIC;AACL;;ACxRA;IACI,iDAAiD;IACjD,sCAAsC;IACtC;;;kBAGc;IACd,gCAAgC;IAChC,4CAA4C;IAC5C,8BAA8B;AAClC;AACA;IACI,oBAAoB;AACxB;AACA;IACI,SAAS;IACT,UAAU;AACd;AACA;IACI,iCAAiC;AACrC;AACA;IACI,2CAA2C;AAC/C;AACA;IACI,2CAA2C;AAC/C;AACA;IACI,wCAAwC;AAC5C;AACA;;IAEI,uCAAuC;AAC3C;;ACjCA;IACI,qEAAqE;IACrE,2DAA2D;AAC/D;AACA;IACI,mBAAmB;IACnB,oBAAoB;AACxB;AACA;IACI,cAAc;AAClB;AACA;;IAEI,gBAAgB;IAChB,kBAAkB;AACtB;AACA;;IAEI,kDAAkD;IAClD,mBAAmB;IACnB,WAAW;IACX,QAAQ;IACR,oBAAoB;IACpB,kBAAkB;AACtB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,gDAAgD;AACpD;AACA;;;;IAII,kDAAkD;AACtD;AACA;;IAEI,mBAAmB;IACnB,mDAAmD;IACnD,6BAA6B;IAC7B,mBAAmB;IACnB,sBAAsB;IACtB,oBAAoB;IACpB,oBAAoB;IACpB,YAAY;IACZ,uBAAuB;IACvB,SAAS;IACT,UAAU;IACV,2BAA2B;IAC3B,WAAW;AACf;AACA;;IAEI,qCAAqC;IACrC,cAAc;IACd,kBAAkB;AACtB;AACA;;IAEI,aAAa;AACjB;AACA;;IAEI,gDAAgD;IAChD,wCAAwC;IACxC,wCAAwC;AAC5C;AACA;;IAEI,uCAAuC;AAC3C;AACA;;IAEI,oCAAoC;AACxC;AACA;;IAEI,YAAY;IACZ,WAAW;AACf;AACA;;IAEI,eAAe;AACnB;AACA;;IAEI,YAAY;IACZ,WAAW;AACf;AACA;;IAEI,YAAY;IACZ,WAAW;AACf;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BI,yBAAyB;AAC7B;AACA;IACI,qCAAqC;AACzC;AACA;;;;IAII,yBAAyB;IACzB,sCAAsC;AAC1C;AACA;;;;;;;;IAQI,sCAAsC;AAC1C;AACA;;IAEI,qCAAqC;AACzC;AACA;IACI,uCAAuC;AAC3C;AACA;;IAEI,iBAAiB;IACjB,kBAAkB;AACtB;AACA;;IAEI,UAAU;IACV,oBAAoB;IACpB,kBAAkB;IAClB,UAAU;IACV,UAAU;AACd;AACA;;;;;;;;IAQI,qCAAqC;AACzC;AACA;;;;;;;;IAQI,uCAAuC;AAC3C;AACA;;;;;;;;IAQI,oCAAoC;AACxC;AACA;;;;;;IAMI,iBAAiB;AACrB;AACA;;;;IAII,kDAAkD;IAClD,0CAA0C;AAC9C;AACA;;;;IAII,uCAAuC;AAC3C;AACA;;IAEI,gEAAgE;IAChE,wCAAwC;AAC5C;AACA;;IAEI,yBAAyB;IACzB,wCAAwC;IACxC,qCAAqC;AACzC;AACA;;;;;;;IAOI,+BAA+B;IAC/B,uBAAuB;AAC3B;AACA;;;;;IAKI,uBAAuB;AAC3B;AACA;;;;IAII,0CAA0C;AAC9C;AACA;;;;IAII,0CAA0C;AAC9C;AACA;;;;IAII,sCAAsC;AAC1C;AACA;;IAEI,yBAAyB;IACzB,wCAAwC;IACxC,qCAAqC;AACzC;AACA;;;;IAII,0CAA0C;AAC9C;;ACtRA;IACI,4CAA4C;IAC5C,8CAA8C;IAC9C,kCAAkC;AACtC;AACA;IACI,gDAAgD;IAChD,sBAAsB;IACtB,QAAQ;IACR,gBAAgB;IAChB,eAAe;IACf,6BAA6B;IAC7B,eAAe;AACnB;AACA;IACI,aAAa;AACjB;AACA;IACI;;;KAGC;IACD,iDAAiD;IACjD,aAAa;IACb,cAAc;IACd,sBAAsB;IACtB,gBAAgB;IAChB,gBAAgB;IAChB,WAAW;IACX,+BAA+B;AACnC;AACA;IACI,oBAAoB;IACpB,gDAAgD;AACpD;AACA;IACI,aAAa;IACb,cAAc;IACd,+CAA+C;IAC/C,kBAAkB;AACtB;AACA;;;;;;IAMI,kBAAkB;IAClB,cAAc;IACd,SAAS;IACT,uBAAuB;AAC3B;AACA;IACI,uCAAuC;AAC3C;AACA;IACI,sBAAsB;IACtB,mBAAmB;IACnB,qBAAqB;AACzB;AACA;IACI,sBAAsB;IACtB,cAAc;IACd,WAAW;IACX,gBAAgB;IAChB,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,aAAa;AACjB;AACA;IACI,gBAAgB;AACpB;AACA;IACI,aAAa;IACb,sBAAsB;IACtB,uBAAuB;IACvB,2BAA2B;IAC3B,kBAAkB;AACtB;AACA;IACI,8BAA8B;AAClC;AACA;;IAEI,sBAAsB;IACtB,SAAS;IACT,YAAY;IACZ,eAAe;IACf,UAAU;IACV,kBAAkB;IAClB,WAAW;IACX,UAAU;AACd;AACA;IACI,qCAAqC;AACzC;AACA;IACI,+BAA+B;AACnC;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,2CAA2C;AAC/C;AACA;;IAEI,oCAAoC;AACxC;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;IAEI,4BAA4B;AAChC;AACA;;IAEI,2BAA2B;AAC/B;AACA;;IAEI,4BAA4B;AAChC;AACA;;;IAGI,2BAA2B;AAC/B;AACA;;;;IAII,aAAa;AACjB;AACA;;;;IAII,gDAAgD;AACpD;AACA;;IAEI,wBAAwB;AAC5B;AACA;IACI,yBAAyB;AAC7B;AACA;IACI;QACI,YAAY;IAChB;AACJ","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/panel-dialog/panel-dialog.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.panel-dialog[role=\"dialog\"] {\n background-color: var(--dialog-scrim-color-show);\n flex-direction: column;\n inset: 0;\n overflow: hidden;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.panel-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.panel-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-right: 1px solid rgba(153, 153, 153, 0.18);\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n min-height: 55px;\n overflow-y: auto;\n width: 100%;\n will-change: opacity, transform;\n}\n.panel-dialog__window--end {\n align-self: flex-end;\n border-left: 1px solid rgba(153, 153, 153, 0.18);\n}\n.panel-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.panel-dialog__header h1,\n.panel-dialog__header h2,\n.panel-dialog__header h3,\n.panel-dialog__header h4,\n.panel-dialog__header h5,\n.panel-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.panel-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.panel-dialog__header .fake-link {\n align-self: flex-start;\n outline-offset: 4px;\n text-decoration: none;\n}\n.panel-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n height: 1px;\n overflow-y: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.panel-dialog__main > :first-child {\n margin-top: 0;\n}\n.panel-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.panel-dialog__footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.panel-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\nbutton.icon-btn.panel-dialog__close,\nbutton.icon-btn.panel-dialog__prev {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n padding: 0;\n position: relative;\n width: 32px;\n z-index: 1;\n}\nbutton.icon-btn.panel-dialog__prev {\n margin-inline-end: var(--spacing-200);\n}\n.panel-dialog__title:not(:first-child) {\n margin-left: var(--spacing-200);\n}\n.panel-dialog--hide.panel-dialog--mask-fade,\n.panel-dialog--show.panel-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.panel-dialog--hide.panel-dialog--mask-fade-slow,\n.panel-dialog--show.panel-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.panel-dialog--hide .panel-dialog__window--slide,\n.panel-dialog--show .panel-dialog__window--slide {\n transition: transform 0.32s ease-out;\n}\n.panel-dialog--hide.panel-dialog--hide,\n.panel-dialog--hide.panel-dialog--show-init,\n.panel-dialog--show-init.panel-dialog--hide,\n.panel-dialog--show-init.panel-dialog--show-init {\n display: flex;\n}\n.panel-dialog--hide.panel-dialog--mask-fade,\n.panel-dialog--hide.panel-dialog--mask-fade-slow,\n.panel-dialog--show-init.panel-dialog--mask-fade,\n.panel-dialog--show-init.panel-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.panel-dialog--hide .panel-dialog__window--slide-left,\n.panel-dialog--show-init .panel-dialog__window--slide-left {\n transform: translateX(-100%);\n}\n.panel-dialog--hide .panel-dialog__window--slide-right,\n.panel-dialog--show-init .panel-dialog__window--slide-right {\n transform: translateX(100%);\n}\n.panel-dialog--hide .panel-dialog__window--slide,\n.panel-dialog--show-init .panel-dialog__window--slide {\n transform: translateX(-100%);\n}\n.panel-dialog--hide .panel-dialog__window--end.panel-dialog__window--slide,\n.panel-dialog--show-init\n .panel-dialog__window--end.panel-dialog__window--slide {\n transform: translateX(100%);\n}\n.panel-dialog--hide-init.panel-dialog--hide-init,\n.panel-dialog--hide-init.panel-dialog--show,\n.panel-dialog--show.panel-dialog--hide-init,\n.panel-dialog--show.panel-dialog--show {\n display: flex;\n}\n.panel-dialog--hide-init.panel-dialog--mask-fade,\n.panel-dialog--hide-init.panel-dialog--mask-fade-slow,\n.panel-dialog--show.panel-dialog--mask-fade,\n.panel-dialog--show.panel-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.panel-dialog--hide-init .panel-dialog__window--slide,\n.panel-dialog--show .panel-dialog__window--slide {\n transform: translateX(0);\n}\n[dir=\"rtl\"] button.icon-btn.panel-dialog__prev .icon {\n transform: rotate(180deg);\n}\n@media (min-width: 512px) {\n .panel-dialog__window {\n width: 384px;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-panel-dialog/index.css","mappings":"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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/panel-dialog/panel-dialog.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.panel-dialog[role=\"dialog\"] {\n background-color: var(--dialog-scrim-color-show);\n flex-direction: column;\n inset: 0;\n overflow: hidden;\n position: fixed;\n will-change: background-color;\n z-index: 100000;\n}\n.panel-dialog[role=\"dialog\"]:not([hidden]) {\n display: flex;\n}\n.panel-dialog__window {\n background-color: var(\n --dialog-window-background-color,\n var(--color-background-primary)\n );\n border-right: 1px solid rgba(153, 153, 153, 0.18);\n display: flex;\n flex: 1 0 auto;\n flex-direction: column;\n min-height: 55px;\n overflow-y: auto;\n width: 100%;\n will-change: opacity, transform;\n}\n.panel-dialog__window--end {\n align-self: flex-end;\n border-left: 1px solid rgba(153, 153, 153, 0.18);\n}\n.panel-dialog__header {\n display: flex;\n flex-shrink: 0;\n margin: var(--spacing-200) var(--spacing-200) 0;\n position: relative;\n}\n.panel-dialog__header h1,\n.panel-dialog__header h2,\n.panel-dialog__header h3,\n.panel-dialog__header h4,\n.panel-dialog__header h5,\n.panel-dialog__header h6 {\n align-self: center;\n flex: 1 1 auto;\n margin: 0;\n overflow-wrap: anywhere;\n}\n.panel-dialog__header > :last-child:not(:only-child) {\n margin-inline-start: var(--spacing-200);\n}\n.panel-dialog__header .fake-link {\n align-self: flex-start;\n outline-offset: 4px;\n text-decoration: none;\n}\n.panel-dialog__main {\n box-sizing: border-box;\n flex: 1 1 auto;\n height: 1px;\n overflow-y: auto;\n padding: var(--spacing-200);\n position: relative;\n}\n.panel-dialog__main > :first-child {\n margin-top: 0;\n}\n.panel-dialog__main > :last-child {\n margin-bottom: 0;\n}\n.panel-dialog__footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--spacing-200);\n position: relative;\n}\n.panel-dialog__footer > :not(:first-child) {\n margin-top: var(--spacing-200);\n}\nbutton.icon-btn.panel-dialog__close,\nbutton.icon-btn.panel-dialog__prev {\n align-self: flex-start;\n border: 0;\n height: 32px;\n min-width: 32px;\n padding: 0;\n position: relative;\n width: 32px;\n z-index: 1;\n}\nbutton.icon-btn.panel-dialog__prev {\n margin-inline-end: var(--spacing-200);\n}\n.panel-dialog__title:not(:first-child) {\n margin-left: var(--spacing-200);\n}\n.panel-dialog--hide.panel-dialog--mask-fade,\n.panel-dialog--show.panel-dialog--mask-fade {\n transition: background-color 0.16s ease-out;\n}\n.panel-dialog--hide.panel-dialog--mask-fade-slow,\n.panel-dialog--show.panel-dialog--mask-fade-slow {\n transition: background-color 0.32s ease-out;\n}\n.panel-dialog--hide .panel-dialog__window--slide,\n.panel-dialog--show .panel-dialog__window--slide {\n transition: transform 0.32s ease-out;\n}\n.panel-dialog--hide.panel-dialog--hide,\n.panel-dialog--hide.panel-dialog--show-init,\n.panel-dialog--show-init.panel-dialog--hide,\n.panel-dialog--show-init.panel-dialog--show-init {\n display: flex;\n}\n.panel-dialog--hide.panel-dialog--mask-fade,\n.panel-dialog--hide.panel-dialog--mask-fade-slow,\n.panel-dialog--show-init.panel-dialog--mask-fade,\n.panel-dialog--show-init.panel-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-hide);\n}\n.panel-dialog--hide .panel-dialog__window--slide-left,\n.panel-dialog--show-init .panel-dialog__window--slide-left {\n transform: translateX(-100%);\n}\n.panel-dialog--hide .panel-dialog__window--slide-right,\n.panel-dialog--show-init .panel-dialog__window--slide-right {\n transform: translateX(100%);\n}\n.panel-dialog--hide .panel-dialog__window--slide,\n.panel-dialog--show-init .panel-dialog__window--slide {\n transform: translateX(-100%);\n}\n.panel-dialog--hide .panel-dialog__window--end.panel-dialog__window--slide,\n.panel-dialog--show-init\n .panel-dialog__window--end.panel-dialog__window--slide {\n transform: translateX(100%);\n}\n.panel-dialog--hide-init.panel-dialog--hide-init,\n.panel-dialog--hide-init.panel-dialog--show,\n.panel-dialog--show.panel-dialog--hide-init,\n.panel-dialog--show.panel-dialog--show {\n display: flex;\n}\n.panel-dialog--hide-init.panel-dialog--mask-fade,\n.panel-dialog--hide-init.panel-dialog--mask-fade-slow,\n.panel-dialog--show.panel-dialog--mask-fade,\n.panel-dialog--show.panel-dialog--mask-fade-slow {\n background-color: var(--dialog-scrim-color-show);\n}\n.panel-dialog--hide-init .panel-dialog__window--slide,\n.panel-dialog--show .panel-dialog__window--slide {\n transform: translateX(0);\n}\n[dir=\"rtl\"] button.icon-btn.panel-dialog__prev .icon {\n transform: rotate(180deg);\n}\n@media (min-width: 512px) {\n .panel-dialog__window {\n width: 384px;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-panel-dialog/index.html b/docs/ui/makeup-panel-dialog/index.html index 1b131b38..586189e9 100644 --- a/docs/ui/makeup-panel-dialog/index.html +++ b/docs/ui/makeup-panel-dialog/index.html @@ -2,55 +2,48 @@ makeup-panel-dialog + + + - -
                                    -
                                    -

                                    makeup-panel-dialog

                                    -

                                    Panel-Dialog is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    - This page was loaded with the dialog in an "open" state. To see examples of dialogs opened by button click, - visit the makeup-dialog-button page. -

                                    -
                                    -
                                    - +
                                    diff --git a/docs/ui/makeup-panel-dialog/index.min.js b/docs/ui/makeup-panel-dialog/index.min.js index 6ae34b79..a0806858 100644 --- a/docs/ui/makeup-panel-dialog/index.min.js +++ b/docs/ui/makeup-panel-dialog/index.min.js @@ -121,9 +121,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(4490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(8448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(4490); +var _makeupScreenreaderTrap = __webpack_require__(8448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -146,6 +145,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -154,6 +158,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -161,7 +171,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -172,7 +182,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -188,8 +198,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -202,7 +212,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -211,11 +224,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/docs/ui/makeup-panel-dialog/index.min.js.map b/docs/ui/makeup-panel-dialog/index.min.js.map index 862a624a..97aa0be7 100644 --- a/docs/ui/makeup-panel-dialog/index.min.js.map +++ b/docs/ui/makeup-panel-dialog/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-panel-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,IAAsB;AACzE,+CAA+C,mBAAO,CAAC,IAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;;;ACzCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA,kBAAe;;;;;;;UCtBf;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,GAAyB;AACjC,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/panel-dialog.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/panel-dialog/panel-dialog.css?ed5b","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-panel-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-panel-dialog/index.compiled.js"],"sourcesContent":["require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/panel-dialog/panel-dialog.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultPanelOptions = {\n baseClass: \"panel-dialog\",\n quickDismiss: true,\n closeButtonSelector: \".panel-dialog__close\",\n doneButtonSelector: \".panel-dialog__done\",\n windowSelector: \".panel-dialog__window\",\n transitionsModifier: \"mask-fade-slow\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultPanelOptions, selectedOptions));\n }\n}\nexports.default = _default;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/panel-dialog\");\nvar _makeupPanelDialog = _interopRequireDefault(require(\"makeup-panel-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const PanelDialog = require('makeup-panel-dialog');\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".panel-dialog\").forEach(function (el, i) {\n const widget = new _makeupPanelDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-panel-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,IAAsB;AACxD,8BAA8B,mBAAO,CAAC,IAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;;;;;;;;;ACzCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA,kBAAe;;;;;;;UCtBf;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,GAAyB;AACjC,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/panel-dialog.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/panel-dialog/panel-dialog.css?ed5b","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-lightbox-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-panel-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-panel-dialog/index.compiled.js"],"sourcesContent":["require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/panel-dialog/panel-dialog.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultLightboxOptions = {\n baseClass: \"lightbox-dialog\",\n baseClassModifier: \"\",\n quickDismiss: true,\n closeButtonSelector: \".lightbox-dialog__close\",\n windowSelector: \".lightbox-dialog__window\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultLightboxOptions, selectedOptions, {\n modal: true\n }));\n }\n _observeEvents() {\n super._observeEvents();\n this._onClickListener = _onClick.bind(this);\n this._el.addEventListener(\"click\", this._onClickListener);\n }\n _unobserveEvents() {\n super._unobserveEvents();\n this._el.removeEventListener(\"click\", this._onClickListener);\n }\n destroy() {\n super.destroy();\n this._onClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onClick(e) {\n if (this._options.quickDismiss === true && e.target === this._el) {\n this.close();\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupLightboxDialog = _interopRequireDefault(require(\"makeup-lightbox-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultPanelOptions = {\n baseClass: \"panel-dialog\",\n quickDismiss: true,\n closeButtonSelector: \".panel-dialog__close\",\n doneButtonSelector: \".panel-dialog__done\",\n windowSelector: \".panel-dialog__window\",\n transitionsModifier: \"mask-fade-slow\"\n};\nclass _default extends _makeupLightboxDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultPanelOptions, selectedOptions));\n }\n}\nexports.default = _default;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/panel-dialog\");\nvar _makeupPanelDialog = _interopRequireDefault(require(\"makeup-panel-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const PanelDialog = require('makeup-panel-dialog');\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".panel-dialog\").forEach(function (el, i) {\n const widget = new _makeupPanelDialog.default(el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-snackbar-dialog/index.css b/docs/ui/makeup-snackbar-dialog/index.css index 67773ec1..4af43652 100644 --- a/docs/ui/makeup-snackbar-dialog/index.css +++ b/docs/ui/makeup-snackbar-dialog/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-snackbar-dialog/index.css.map b/docs/ui/makeup-snackbar-dialog/index.css.map index 11d12461..9a3d8f4b 100644 --- a/docs/ui/makeup-snackbar-dialog/index.css.map +++ b/docs/ui/makeup-snackbar-dialog/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-snackbar-dialog/index.css","mappings":"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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/utility/utility.css","webpack://root/./node_modules/@ebay/skin/dist/link/link.css","webpack://root/./node_modules/@ebay/skin/dist/snackbar-dialog/snackbar-dialog.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",".clearfix:after,\n.clearfix:before {\n content: \" \";\n display: table;\n line-height: 0;\n}\n.clearfix:after {\n clear: both;\n}\n.clipped {\n border: 0;\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n.clipped--stealth:focus {\n clip-path: none;\n height: auto;\n overflow: visible;\n white-space: normal;\n width: auto;\n}\n.image-stretch {\n height: auto;\n width: 100%;\n}\n.image-scale {\n height: auto;\n max-width: 100%;\n}\n.image-center {\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n}\n.image-center img {\n max-height: 100%;\n max-width: 100%;\n}\n.image-treatment {\n align-items: center;\n border-radius: 8px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-treatment-large {\n align-items: center;\n border-radius: 16px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment-large:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment-large > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-disabled {\n filter: var(--color-media-disabled-filter);\n}\n.text-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.scrollbars-permanent {\n scroll-behavior: smooth;\n scroll-snap-type: proximity;\n scroll-snap-type: x proximity;\n}\n.scrollbars-permanent::-webkit-scrollbar {\n background-color: var(--color-state-layer-focus);\n border-radius: 12px;\n}\n.scrollbars-permanent::-webkit-scrollbar:vertical {\n width: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar:horizontal {\n height: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar-thumb {\n background-color: var(--color-foreground-secondary);\n border-color: transparent;\n border-radius: 12px;\n border-right-style: inset;\n box-shadow: none;\n}\n","a.nav-link,\na.standalone-link {\n color: var(\n --nav-link-foreground-color,\n var(--color-foreground-link-primary)\n );\n text-decoration: none;\n}\na.nav-link:visited,\na.standalone-link:visited {\n color: var(\n --link-foreground-color-default,\n var(--color-foreground-link-primary)\n );\n}\na.nav-link:hover,\na.standalone-link:hover {\n color: var(\n --nav-link-foreground-hover-color,\n var(--color-foreground-secondary)\n );\n text-decoration: underline;\n}\na.nav-link:not([href]),\na.nav-link[aria-disabled=\"true\"],\na.standalone-link:not([href]),\na.standalone-link[aria-disabled=\"true\"] {\n color: var(\n --link-forground-color-disabled,\n var(--color-foreground-disabled)\n );\n text-decoration: none;\n}\nbutton.fake-link {\n background-color: initial;\n border: 0;\n color: var(\n --fake-link-foreground-color,\n var(--color-foreground-link-primary)\n );\n font-family: inherit;\n font-size: inherit;\n padding: 0;\n text-decoration: underline;\n}\nbutton.fake-link:hover {\n color: var(\n --fake-link-foreground-color-hover,\n var(--color-foreground-secondary)\n );\n}\nbutton.fake-link[aria-disabled=\"true\"],\nbutton.fake-link[disabled] {\n color: var(\n --fake-link-foreground-disabled-color,\n var(--color-foreground-disabled)\n );\n}\na.legal-link,\nbutton.legal-link {\n text-decoration: underline;\n}\na.legal-link,\na.legal-link:hover,\na.legal-link:visited,\nbutton.legal-link,\nbutton.legal-link:hover,\nbutton.legal-link:visited {\n color: var(\n --legal-link-foreground-color,\n var(--color-foreground-link-legal)\n );\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.snackbar-dialog {\n background-color: var(\n --snackbar-dialog-background-color,\n var(--color-background-inverse)\n );\n border-radius: var(\n --snackbar-dialog-border-radius,\n var(--border-radius-100)\n );\n bottom: 40px;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n left: var(--spacing-100);\n margin: auto;\n max-height: 40vh;\n max-width: 448px;\n position: fixed;\n right: var(--spacing-100);\n transform: translateY(0);\n will-change: opacity, transform;\n z-index: 2;\n}\n.snackbar-dialog--transition {\n transition:\n opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,\n transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;\n}\n.snackbar-dialog--hide-init,\n.snackbar-dialog--show {\n display: block;\n opacity: 1;\n transform: translateY(0);\n}\n.snackbar-dialog--hide,\n.snackbar-dialog--show-init {\n display: block;\n opacity: 0;\n transform: translateY(110%);\n}\n.snackbar-dialog__window {\n display: flex;\n margin: var(--spacing-200) var(--spacing-300);\n}\n.snackbar-dialog__window--column {\n flex-direction: column;\n}\n.snackbar-dialog__main {\n margin-inline-end: var(--spacing-400);\n}\n.snackbar-dialog__main p {\n margin: 0;\n}\n.snackbar-dialog__actions {\n margin-inline-start: auto;\n}\n.snackbar-dialog__window--column .snackbar-dialog__actions {\n margin-top: var(--spacing-200);\n}\n.snackbar-dialog__actions .fake-link {\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n text-decoration: none;\n}\n.snackbar-dialog__actions .fake-link:first-letter {\n text-decoration: underline;\n}\n.snackbar-dialog__actions button.fake-link:hover:not(:disabled) {\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n text-decoration: underline;\n}\n@media (min-width: 512px) {\n .snackbar-dialog {\n bottom: 20px;\n }\n}\n[dir=\"rtl\"] .snackbar-dialog {\n left: auto;\n right: 0;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-snackbar-dialog/index.css","mappings":"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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/utility/utility.css","webpack://root/./node_modules/@ebay/skin/dist/link/link.css","webpack://root/./node_modules/@ebay/skin/dist/snackbar-dialog/snackbar-dialog.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",".clearfix:after,\n.clearfix:before {\n content: \" \";\n display: table;\n line-height: 0;\n}\n.clearfix:after {\n clear: both;\n}\n.clipped {\n border: 0;\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n.clipped--stealth:focus {\n clip-path: none;\n height: auto;\n overflow: visible;\n white-space: normal;\n width: auto;\n}\n.image-stretch {\n height: auto;\n width: 100%;\n}\n.image-scale {\n height: auto;\n max-width: 100%;\n}\n.image-center {\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n}\n.image-center img {\n max-height: 100%;\n max-width: 100%;\n}\n.image-treatment {\n align-items: center;\n border-radius: 8px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-treatment-large {\n align-items: center;\n border-radius: 16px;\n display: flex;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n.image-treatment-large:after {\n background: rgba(0, 0, 0, 0.05);\n content: \"\";\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.image-treatment-large > img {\n display: inline-block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.image-disabled {\n filter: var(--color-media-disabled-filter);\n}\n.text-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.scrollbars-permanent {\n scroll-behavior: smooth;\n scroll-snap-type: proximity;\n scroll-snap-type: x proximity;\n}\n.scrollbars-permanent::-webkit-scrollbar {\n background-color: var(--color-state-layer-focus);\n border-radius: 12px;\n}\n.scrollbars-permanent::-webkit-scrollbar:vertical {\n width: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar:horizontal {\n height: 6px;\n}\n.scrollbars-permanent::-webkit-scrollbar-thumb {\n background-color: var(--color-foreground-secondary);\n border-color: transparent;\n border-radius: 12px;\n border-right-style: inset;\n box-shadow: none;\n}\n","a.nav-link,\na.standalone-link {\n color: var(\n --nav-link-foreground-color,\n var(--color-foreground-link-primary)\n );\n text-decoration: none;\n}\na.nav-link:visited,\na.standalone-link:visited {\n color: var(\n --link-foreground-color-default,\n var(--color-foreground-link-primary)\n );\n}\na.nav-link:hover,\na.standalone-link:hover {\n color: var(\n --nav-link-foreground-hover-color,\n var(--color-foreground-secondary)\n );\n text-decoration: underline;\n}\na.nav-link:not([href]),\na.nav-link[aria-disabled=\"true\"],\na.standalone-link:not([href]),\na.standalone-link[aria-disabled=\"true\"] {\n color: var(\n --link-forground-color-disabled,\n var(--color-foreground-disabled)\n );\n text-decoration: none;\n}\nbutton.fake-link {\n background-color: initial;\n border: 0;\n color: var(\n --fake-link-foreground-color,\n var(--color-foreground-link-primary)\n );\n font-family: inherit;\n font-size: inherit;\n padding: 0;\n text-decoration: underline;\n}\nbutton.fake-link:hover {\n color: var(\n --fake-link-foreground-color-hover,\n var(--color-foreground-secondary)\n );\n}\nbutton.fake-link[aria-disabled=\"true\"],\nbutton.fake-link[disabled] {\n color: var(\n --fake-link-foreground-disabled-color,\n var(--color-foreground-disabled)\n );\n}\na.legal-link,\nbutton.legal-link {\n text-decoration: underline;\n}\na.legal-link,\na.legal-link:hover,\na.legal-link:visited,\nbutton.legal-link,\nbutton.legal-link:hover,\nbutton.legal-link:visited {\n color: var(\n --legal-link-foreground-color,\n var(--color-foreground-link-legal)\n );\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n}\n.snackbar-dialog {\n background-color: var(\n --snackbar-dialog-background-color,\n var(--color-background-inverse)\n );\n border-radius: var(\n --snackbar-dialog-border-radius,\n var(--border-radius-100)\n );\n bottom: 40px;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n left: var(--spacing-100);\n margin: auto;\n max-height: 40vh;\n max-width: 448px;\n position: fixed;\n right: var(--spacing-100);\n transform: translateY(0);\n will-change: opacity, transform;\n z-index: 2;\n}\n.snackbar-dialog--transition {\n transition:\n opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,\n transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;\n}\n.snackbar-dialog--hide-init,\n.snackbar-dialog--show {\n display: block;\n opacity: 1;\n transform: translateY(0);\n}\n.snackbar-dialog--hide,\n.snackbar-dialog--show-init {\n display: block;\n opacity: 0;\n transform: translateY(110%);\n}\n.snackbar-dialog__window {\n display: flex;\n margin: var(--spacing-200) var(--spacing-300);\n}\n.snackbar-dialog__window--column {\n flex-direction: column;\n}\n.snackbar-dialog__main {\n margin-inline-end: var(--spacing-400);\n}\n.snackbar-dialog__main p {\n margin: 0;\n}\n.snackbar-dialog__actions {\n margin-inline-start: auto;\n}\n.snackbar-dialog__window--column .snackbar-dialog__actions {\n margin-top: var(--spacing-200);\n}\n.snackbar-dialog__actions .fake-link {\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n text-decoration: none;\n}\n.snackbar-dialog__actions .fake-link:first-letter {\n text-decoration: underline;\n}\n.snackbar-dialog__actions button.fake-link:hover:not(:disabled) {\n color: var(\n --snackbar-dialog-foreground-color,\n var(--color-foreground-on-inverse)\n );\n text-decoration: underline;\n}\n@media (min-width: 512px) {\n .snackbar-dialog {\n bottom: 20px;\n }\n}\n[dir=\"rtl\"] .snackbar-dialog {\n left: auto;\n right: 0;\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-snackbar-dialog/index.html b/docs/ui/makeup-snackbar-dialog/index.html index ecbef32b..d68bac52 100644 --- a/docs/ui/makeup-snackbar-dialog/index.html +++ b/docs/ui/makeup-snackbar-dialog/index.html @@ -2,46 +2,39 @@ makeup-snackbar-dialog + + + - -
                                    -
                                    -

                                    makeup-snackbar-dialog

                                    -

                                    Snackbar-Dialog is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -

                                    - This page was loaded with the dialog in an "open" state. To see examples of dialogs opened by button click, - visit the makeup-dialog-button page. -

                                    -
                                    -
                                    -
                                    -
                                    + +
                                    +
                                    diff --git a/docs/ui/makeup-snackbar-dialog/index.min.js b/docs/ui/makeup-snackbar-dialog/index.min.js index 02bcb611..01251cee 100644 --- a/docs/ui/makeup-snackbar-dialog/index.min.js +++ b/docs/ui/makeup-snackbar-dialog/index.min.js @@ -139,9 +139,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(4490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(8448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(4490); +var _makeupScreenreaderTrap = __webpack_require__(8448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -164,6 +163,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -172,6 +176,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -179,7 +189,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -190,7 +200,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -206,8 +216,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -220,7 +230,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -229,11 +242,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/docs/ui/makeup-snackbar-dialog/index.min.js.map b/docs/ui/makeup-snackbar-dialog/index.min.js.map index 5dd30128..268dd746 100644 --- a/docs/ui/makeup-snackbar-dialog/index.min.js.map +++ b/docs/ui/makeup-snackbar-dialog/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-snackbar-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,GAAsB;;;;;;;;ACA9B,mBAAO,CAAC,IAA4C;;;;;;;;ACApD,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;ACAxC,mBAAO,CAAC,IAA4B;;;;;;;;;;ACApC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,IAAsB;AACzE,+CAA+C,mBAAO,CAAC,IAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;UCtDA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAoB;AAC5B,mBAAO,CAAC,IAAiB;AACzB,mBAAO,CAAC,IAA4B;AACpC,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/link.js","webpack://root/./node_modules/@ebay/skin/snackbar-dialog.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./node_modules/@ebay/skin/utility.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/link/link.css?4616","webpack://root/./node_modules/@ebay/skin/dist/snackbar-dialog/snackbar-dialog.css?c7bb","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./node_modules/@ebay/skin/dist/utility/utility.css?6c3b","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-snackbar-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-snackbar-dialog/index.compiled.js"],"sourcesContent":["require('./dist/global/global.css');\n","require('./dist/link/link.css');\n","require('./dist/snackbar-dialog/snackbar-dialog.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","require('./dist/utility/utility.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultSnackbarOptions = {\n autoDismissTimer: 6000,\n baseClass: \"snackbar-dialog\",\n ctaButtonSelector: \".snackbar-dialog__cta\",\n transitionsModifier: \"transition\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultSnackbarOptions, selectedOptions));\n this._autoDismissTimeout = null;\n }\n _show() {\n var _this = this;\n super._show();\n this._autoDismissTimeout = setTimeout(function () {\n let widget = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this;\n return widget.close();\n }, this._options.autoDismissTimer);\n }\n _observeEvents() {\n super._observeEvents();\n this._ctaEl = this._el.querySelector(this._options.ctaButtonSelector);\n if (this._ctaEl) {\n this._onCtaClickListener = _onCtaButtonClick.bind(this);\n this._ctaEl.addEventListener(\"click\", this._onCtaClickListener);\n }\n }\n _unobserveEvents() {\n super._unobserveEvents();\n if (this._ctaEl) {\n this._ctaEl.removeEventListener(\"click\", this._onCtaClickListener);\n }\n }\n cta() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cta\"));\n }\n destroy() {\n super.destroy();\n this._onCtaClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onCtaButtonClick() {\n this.cta();\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/utility\");\nrequire(\"@ebay/skin/link\");\nrequire(\"@ebay/skin/snackbar-dialog\");\nvar _makeupSnackbarDialog = _interopRequireDefault(require(\"makeup-snackbar-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const SnackbarDialog = require('makeup-snackbar-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".snackbar-dialog\").forEach(function (el, i) {\n const widget = new _makeupSnackbarDialog.default(el);\n console.log(widget, el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-snackbar-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,GAAsB;;;;;;;;ACA9B,mBAAO,CAAC,IAA4C;;;;;;;;ACApD,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;ACAxC,mBAAO,CAAC,IAA4B;;;;;;;;;;ACApC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,IAAsB;AACxD,8BAA8B,mBAAO,CAAC,IAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;UCtDA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAoB;AAC5B,mBAAO,CAAC,IAAiB;AACzB,mBAAO,CAAC,IAA4B;AACpC,mDAAmD,mBAAO,CAAC,IAAwB;AACnF,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/link.js","webpack://root/./node_modules/@ebay/skin/snackbar-dialog.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./node_modules/@ebay/skin/utility.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/link/link.css?4616","webpack://root/./node_modules/@ebay/skin/dist/snackbar-dialog/snackbar-dialog.css?c7bb","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./node_modules/@ebay/skin/dist/utility/utility.css?6c3b","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-snackbar-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-snackbar-dialog/index.compiled.js"],"sourcesContent":["require('./dist/global/global.css');\n","require('./dist/link/link.css');\n","require('./dist/snackbar-dialog/snackbar-dialog.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","require('./dist/utility/utility.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultSnackbarOptions = {\n autoDismissTimer: 6000,\n baseClass: \"snackbar-dialog\",\n ctaButtonSelector: \".snackbar-dialog__cta\",\n transitionsModifier: \"transition\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultSnackbarOptions, selectedOptions));\n this._autoDismissTimeout = null;\n }\n _show() {\n var _this = this;\n super._show();\n this._autoDismissTimeout = setTimeout(function () {\n let widget = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this;\n return widget.close();\n }, this._options.autoDismissTimer);\n }\n _observeEvents() {\n super._observeEvents();\n this._ctaEl = this._el.querySelector(this._options.ctaButtonSelector);\n if (this._ctaEl) {\n this._onCtaClickListener = _onCtaButtonClick.bind(this);\n this._ctaEl.addEventListener(\"click\", this._onCtaClickListener);\n }\n }\n _unobserveEvents() {\n super._unobserveEvents();\n if (this._ctaEl) {\n this._ctaEl.removeEventListener(\"click\", this._onCtaClickListener);\n }\n }\n cta() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cta\"));\n }\n destroy() {\n super.destroy();\n this._onCtaClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onCtaButtonClick() {\n this.cta();\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/utility\");\nrequire(\"@ebay/skin/link\");\nrequire(\"@ebay/skin/snackbar-dialog\");\nvar _makeupSnackbarDialog = _interopRequireDefault(require(\"makeup-snackbar-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const SnackbarDialog = require('makeup-snackbar-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".snackbar-dialog\").forEach(function (el, i) {\n const widget = new _makeupSnackbarDialog.default(el);\n console.log(widget, el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-switch/index.css b/docs/ui/makeup-switch/index.css index cf380313..9232c6be 100644 --- a/docs/ui/makeup-switch/index.css +++ b/docs/ui/makeup-switch/index.css @@ -1,9 +1,3 @@ -#page { - margin: 0 auto; - max-width: 960px; - width: 100%; -} - :root { --border-width-medium: 1px; --border-width-thick: 2px; diff --git a/docs/ui/makeup-switch/index.css.map b/docs/ui/makeup-switch/index.css.map index 1db588f9..dea3677f 100644 --- a/docs/ui/makeup-switch/index.css.map +++ b/docs/ui/makeup-switch/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-switch/index.css","mappings":"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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/switch/switch.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\n\n.switch {\n box-sizing: border-box;\n height: 40px;\n position: relative;\n vertical-align: middle;\n}\n\ndiv.switch {\n display: flex;\n}\n\nspan.switch {\n display: inline-flex;\n}\n\nspan.switch__button {\n align-self: center;\n background-color: var(\n --switch-unchecked-background-color,\n var(--color-background-secondary)\n );\n border-color: var(--switch-border-color, var(--color-border-strong));\n border-radius: 400px;\n border-style: solid;\n border-width: 1px;\n color: transparent;\n display: inline-block;\n position: relative;\n text-indent: 100%;\n width: 40px;\n}\n\nspan.switch__button,\nspan.switch__button:after {\n height: 24px;\n transition: left 0.15s ease-out 0s;\n}\n\nspan.switch__button:after {\n background-color: var(\n --switch-foreground-color,\n var(--color-background-primary)\n );\n border-color: var(\n --switch-foreground-border-color,\n var(--color-border-strong)\n );\n border-radius: 50%;\n border-style: solid;\n border-width: 1px;\n content: \"\";\n display: block;\n left: -1px;\n position: absolute;\n top: -1px;\n transform: translateZ(0);\n width: 24px;\n}\n\ninput.switch__control,\nspan.switch__control {\n height: 24px;\n left: 0;\n margin: 0;\n outline: 0;\n padding: 0;\n position: absolute;\n top: 8px;\n width: 40px;\n z-index: 1;\n}\n\ninput.switch__control[disabled] + span.switch__button,\nspan.switch__control[aria-disabled=\"true\"] + span.switch__button {\n border-color: var(--switch-border-color, var(--color-border-disabled));\n}\n\ninput.switch__control {\n opacity: 0;\n}\n\ninput.switch__control:focus + span.switch__button {\n outline: 1px auto\n var(--switch-custom-outline-color, var(--color-foreground-secondary));\n}\n\ninput.switch__control:focus:not(:focus-visible) + span.switch__button {\n outline: none;\n}\n\ninput.switch__control[disabled] + span.switch__button:after,\nspan.switch__control[aria-disabled=\"true\"] + span.switch__button:after {\n border-color: var(--switch-border-color, var(--color-background-disabled));\n}\n\ninput.switch__control:not([disabled]):focus + span.switch__button,\ninput.switch__control:not([disabled]):hover + span.switch__button,\nspan.switch__control:not([aria-disabled=\"true\"]):focus + span.switch__button,\nspan.switch__control:not([aria-disabled=\"true\"]):hover + span.switch__button {\n overflow: hidden;\n position: relative;\n}\n\ninput.switch__control:not([disabled]):focus + span.switch__button:before,\ninput.switch__control:not([disabled]):hover + span.switch__button:before,\nspan.switch__control:not([aria-disabled=\"true\"]):focus\n + span.switch__button:before,\nspan.switch__control:not([aria-disabled=\"true\"]):hover\n + span.switch__button:before {\n background-color: var(--color-state-layer-neutral);\n background-color: var(--color-state-layer-hover);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\ninput.switch__control:not([disabled]):checked + span.switch__button,\nspan.switch__control:not([aria-disabled=\"true\"])[aria-checked=\"true\"]\n + span.switch__button {\n background-color: var(\n --switch-checked-background-color,\n var(--color-background-accent)\n );\n}\n\ninput.switch__control[disabled]:checked + span.switch__button,\nspan.switch__control[aria-disabled=\"true\"][aria-checked=\"true\"]\n + span.switch__button {\n background-color: var(\n --switch-disabled-background-color,\n var(--color-background-disabled)\n );\n border-color: var(--switch-border-color, var(--color-background-disabled));\n}\n\ninput.switch__control:not([disabled]):focus-visible + span.switch__button,\nspan.switch__control:not([aria-disabled=\"true\"]):focus-visible\n + span.switch__button {\n box-shadow:\n 0 0 0 2px var(--color-background-primary),\n 0 0 0 4px var(--color-background-accent);\n}\n\ninput.switch__control:checked + span.switch__button:after,\nspan.switch__control[aria-checked=\"true\"] + span.switch__button:after {\n left: 15px;\n}\n\nspan.switch__control:focus:not(:focus-visible) {\n outline: 0;\n}\n\n@media screen and (-ms-high-contrast: active) {\n input.switch__control {\n opacity: 1;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-switch/index.css","mappings":"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","sources":["webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/switch/switch.css"],"sourcesContent":[":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\n\n.switch {\n box-sizing: border-box;\n height: 40px;\n position: relative;\n vertical-align: middle;\n}\n\ndiv.switch {\n display: flex;\n}\n\nspan.switch {\n display: inline-flex;\n}\n\nspan.switch__button {\n align-self: center;\n background-color: var(\n --switch-unchecked-background-color,\n var(--color-background-secondary)\n );\n border-color: var(--switch-border-color, var(--color-border-strong));\n border-radius: 400px;\n border-style: solid;\n border-width: 1px;\n color: transparent;\n display: inline-block;\n position: relative;\n text-indent: 100%;\n width: 40px;\n}\n\nspan.switch__button,\nspan.switch__button:after {\n height: 24px;\n transition: left 0.15s ease-out 0s;\n}\n\nspan.switch__button:after {\n background-color: var(\n --switch-foreground-color,\n var(--color-background-primary)\n );\n border-color: var(\n --switch-foreground-border-color,\n var(--color-border-strong)\n );\n border-radius: 50%;\n border-style: solid;\n border-width: 1px;\n content: \"\";\n display: block;\n left: -1px;\n position: absolute;\n top: -1px;\n transform: translateZ(0);\n width: 24px;\n}\n\ninput.switch__control,\nspan.switch__control {\n height: 24px;\n left: 0;\n margin: 0;\n outline: 0;\n padding: 0;\n position: absolute;\n top: 8px;\n width: 40px;\n z-index: 1;\n}\n\ninput.switch__control[disabled] + span.switch__button,\nspan.switch__control[aria-disabled=\"true\"] + span.switch__button {\n border-color: var(--switch-border-color, var(--color-border-disabled));\n}\n\ninput.switch__control {\n opacity: 0;\n}\n\ninput.switch__control:focus + span.switch__button {\n outline: 1px auto\n var(--switch-custom-outline-color, var(--color-foreground-secondary));\n}\n\ninput.switch__control:focus:not(:focus-visible) + span.switch__button {\n outline: none;\n}\n\ninput.switch__control[disabled] + span.switch__button:after,\nspan.switch__control[aria-disabled=\"true\"] + span.switch__button:after {\n border-color: var(--switch-border-color, var(--color-background-disabled));\n}\n\ninput.switch__control:not([disabled]):focus + span.switch__button,\ninput.switch__control:not([disabled]):hover + span.switch__button,\nspan.switch__control:not([aria-disabled=\"true\"]):focus + span.switch__button,\nspan.switch__control:not([aria-disabled=\"true\"]):hover + span.switch__button {\n overflow: hidden;\n position: relative;\n}\n\ninput.switch__control:not([disabled]):focus + span.switch__button:before,\ninput.switch__control:not([disabled]):hover + span.switch__button:before,\nspan.switch__control:not([aria-disabled=\"true\"]):focus\n + span.switch__button:before,\nspan.switch__control:not([aria-disabled=\"true\"]):hover\n + span.switch__button:before {\n background-color: var(--color-state-layer-neutral);\n background-color: var(--color-state-layer-hover);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\ninput.switch__control:not([disabled]):checked + span.switch__button,\nspan.switch__control:not([aria-disabled=\"true\"])[aria-checked=\"true\"]\n + span.switch__button {\n background-color: var(\n --switch-checked-background-color,\n var(--color-background-accent)\n );\n}\n\ninput.switch__control[disabled]:checked + span.switch__button,\nspan.switch__control[aria-disabled=\"true\"][aria-checked=\"true\"]\n + span.switch__button {\n background-color: var(\n --switch-disabled-background-color,\n var(--color-background-disabled)\n );\n border-color: var(--switch-border-color, var(--color-background-disabled));\n}\n\ninput.switch__control:not([disabled]):focus-visible + span.switch__button,\nspan.switch__control:not([aria-disabled=\"true\"]):focus-visible\n + span.switch__button {\n box-shadow:\n 0 0 0 2px var(--color-background-primary),\n 0 0 0 4px var(--color-background-accent);\n}\n\ninput.switch__control:checked + span.switch__button:after,\nspan.switch__control[aria-checked=\"true\"] + span.switch__button:after {\n left: 15px;\n}\n\nspan.switch__control:focus:not(:focus-visible) {\n outline: 0;\n}\n\n@media screen and (-ms-high-contrast: active) {\n input.switch__control {\n opacity: 1;\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-switch/index.html b/docs/ui/makeup-switch/index.html index 9d1f38f6..d4184c0d 100644 --- a/docs/ui/makeup-switch/index.html +++ b/docs/ui/makeup-switch/index.html @@ -1,60 +1,58 @@ - makeup-switch + makeup-switch demo + + + - -
                                    -
                                    -

                                    makeup-switch

                                    -

                                    Switch is headless UI widget and does not come bundled with any CSS.

                                    -

                                    - This example is receiving its base markup and styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                    -
                                    +
                                    +

                                    ui / makeup-switch

                                    +

                                    ARIA switch widget. Headless — bring your own CSS (this demo uses eBay Skin).

                                    + +
                                    + +

                                    Enabled

                                    + + + + + Wi-Fi +
                                    -
                                    - - - - - Enabled Switch -
                                    +

                                    Disabled

                                    + + + + + Bluetooth + +
                                    - - - - - Disabled Switch -
                                    -
                                    +

                                    Events

                                    +

                                    makeup-switch-toggle fires on each toggle; detail.on is true or false.

                                    +
                                      + +
                                      diff --git a/docs/ui/makeup-switch/index.js b/docs/ui/makeup-switch/index.js index 9267ef0e..0733082a 100644 --- a/docs/ui/makeup-switch/index.js +++ b/docs/ui/makeup-switch/index.js @@ -1,24 +1,22 @@ -import "../../docs.css"; import "@ebay/skin/tokens"; import "@ebay/skin/global"; import "@ebay/skin/switch"; -// REQUIRE -//const MakeupSwitch = require('makeup-switch').default; - -// IMPORT import MakeupSwitch from "makeup-switch"; -window.onload = function () { - document.querySelectorAll(".switch").forEach(function (el, i) { - const widget = new MakeupSwitch(el); +const logEl = document.getElementById("log"); + +function logEvent(e) { + const item = document.createElement("li"); + item.textContent = `makeup-switch-toggle — on: ${e.detail.on}`; + logEl.prepend(item); +} - el.addEventListener("makeup-switch-toggle", function (e) { - console.log(e.type, e.detail); - }); +document.querySelectorAll(".switch").forEach((el) => { + new MakeupSwitch(el); + el.addEventListener("makeup-switch-toggle", logEvent); +}); - el.addEventListener("makeup-switch-mutation", function (e) { - console.log(e.type, e.detail); - }); - }); -}; +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; +}); diff --git a/docs/ui/makeup-switch/index.min.js b/docs/ui/makeup-switch/index.min.js index dd70310c..b7e4438d 100644 --- a/docs/ui/makeup-switch/index.min.js +++ b/docs/ui/makeup-switch/index.min.js @@ -40,16 +40,6 @@ __webpack_require__(9357); __webpack_require__(2002); -/***/ }, - -/***/ 5957 -(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -// extracted by mini-css-extract-plugin - - /***/ }, /***/ 1381 @@ -294,28 +284,24 @@ var __webpack_exports__ = {}; "use strict"; -__webpack_require__(5957); __webpack_require__(4658); __webpack_require__(5015); __webpack_require__(3352); var _makeupSwitch = _interopRequireDefault(__webpack_require__(7001)); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } -// REQUIRE -//const MakeupSwitch = require('makeup-switch').default; - -// IMPORT - -window.onload = function () { - document.querySelectorAll(".switch").forEach(function (el, i) { - const widget = new _makeupSwitch.default(el); - el.addEventListener("makeup-switch-toggle", function (e) { - console.log(e.type, e.detail); - }); - el.addEventListener("makeup-switch-mutation", function (e) { - console.log(e.type, e.detail); - }); - }); -}; +const logEl = document.getElementById("log"); +function logEvent(e) { + const item = document.createElement("li"); + item.textContent = `makeup-switch-toggle — on: ${e.detail.on}`; + logEl.prepend(item); +} +document.querySelectorAll(".switch").forEach(el => { + new _makeupSwitch.default(el); + el.addEventListener("makeup-switch-toggle", logEvent); +}); +document.getElementById("clear").addEventListener("click", () => { + logEl.innerHTML = ""; +}); })(); /******/ })() diff --git a/docs/ui/makeup-switch/index.min.js.map b/docs/ui/makeup-switch/index.min.js.map index d2245864..e0f3f48e 100644 --- a/docs/ui/makeup-switch/index.min.js.map +++ b/docs/ui/makeup-switch/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-switch/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC,0BAA0B;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;;;;;;UCpJA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/switch.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/switch/switch.css?1917","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/ui/makeup-switch/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-switch/index.compiled.js"],"sourcesContent":["require('./dist/global/global.css');\n","require('./dist/switch/switch.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nconst defaultOptions = {\n bem: {\n control: \"switch__control\"\n },\n customElementMode: false\n};\nclass _default {\n constructor(el, selectedOptions) {\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this.el = el;\n this._onClickListener = _onClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onMutationListener = _onMutation.bind(this);\n if (this.disabled) {\n this._focusableElement.setAttribute(\"tabindex\", \"-1\");\n }\n this.el.classList.add(\"switch--js\");\n if (!this._options.customElementMode) {\n this._mutationObserver = new MutationObserver(this._onMutationListener);\n this._observeMutations();\n this._observeEvents();\n }\n }\n _observeMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.observe(this._focusableElement, {\n attributes: true,\n childList: false,\n subtree: false\n });\n }\n }\n _unobserveMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.disconnect();\n }\n }\n _observeEvents() {\n this._focusableElement.addEventListener(\"click\", this._onClickListener);\n this._focusableElement.addEventListener(\"keydown\", this._onKeyDownListener);\n }\n _unobserveEvents() {\n this._focusableElement.removeEventListener(\"click\", this._onClickListener);\n this._focusableElement.removeEventListener(\"keydown\", this._onKeyDownListener);\n }\n get _focusableElement() {\n return this.el.querySelector(`.${this._options.bem.control}`);\n }\n set checked(isChecked) {\n this._unobserveMutations();\n this._focusableElement.setAttribute(\"aria-checked\", isChecked.toString());\n this.el.dispatchEvent(new CustomEvent(\"makeup-switch-toggle\", {\n composed: true,\n detail: {\n on: this.checked\n }\n }));\n this._observeMutations();\n }\n get checked() {\n return this._focusableElement.getAttribute(\"aria-checked\") === \"true\";\n }\n set disabled(isDisabled) {\n this._unobserveMutations();\n this._focusableElement.setAttribute(\"aria-disabled\", isDisabled.toString());\n this._focusableElement.setAttribute(\"tabindex\", isDisabled ? \"-1\" : \"0\");\n this._observeMutations();\n }\n get disabled() {\n return this._focusableElement.getAttribute(\"aria-disabled\") === \"true\";\n }\n set labelledby(theId) {\n this._unobserveMutations();\n this._focusableElement.setAttribute(\"aria-labelledby\", theId);\n\n // customElementMode a11y workaround\n // aria-labelledby cannot resolve element id references that live outside of the Shadow DOM\n // as a workaround we can use aria-label\n if (this._options.customElementMode) {\n const labellingEl = document.getElementById(this.labelledby);\n if (labellingEl && labellingEl.innerText !== \"\") {\n this.label = labellingEl.innerText;\n }\n }\n this._observeMutations();\n }\n get labelledby() {\n return this._focusableElement.getAttribute(\"aria-labelledby\");\n }\n get label() {\n return this._focusableElement.getAttribute(\"aria-label\");\n }\n set label(theLabel) {\n this._unobserveMutations();\n this._focusableElement.setAttribute(\"aria-label\", theLabel);\n this._observeMutations();\n }\n toggle() {\n this.checked = !this.checked;\n }\n destroy() {\n this._unobserveMutations();\n this._unobserveEvents();\n this._onClickListener = null;\n this._onKeyDownListener = null;\n this._onMutationListener = null;\n }\n}\nexports.default = _default;\nfunction _onKeyDown(e) {\n if (!this.disabled) {\n switch (e.keyCode) {\n case 32:\n e.preventDefault();\n this.toggle();\n break;\n case 37:\n this.checked = false;\n break;\n case 39:\n this.checked = true;\n break;\n default:\n break;\n }\n }\n}\nfunction _onClick() {\n if (!this.disabled) {\n this.toggle();\n }\n}\nfunction _onMutation(mutationsList) {\n for (const mutation of mutationsList) {\n if (mutation.type === \"attributes\") {\n this.el.dispatchEvent(new CustomEvent(\"makeup-switch-mutation\", {\n detail: {\n attributeName: mutation.attributeName\n }\n }));\n }\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/switch\");\nvar _makeupSwitch = _interopRequireDefault(require(\"makeup-switch\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n//const MakeupSwitch = require('makeup-switch').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".switch\").forEach(function (el, i) {\n const widget = new _makeupSwitch.default(el);\n el.addEventListener(\"makeup-switch-toggle\", function (e) {\n console.log(e.type, e.detail);\n });\n el.addEventListener(\"makeup-switch-mutation\", function (e) {\n console.log(e.type, e.detail);\n });\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-switch/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC,0BAA0B;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;;;;;;UCpJA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA,mDAAmD,YAAY;AAC/D;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA,CAAC,E","sources":["webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/switch.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/switch/switch.css?1917","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/ui/makeup-switch/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-switch/index.compiled.js"],"sourcesContent":["require('./dist/global/global.css');\n","require('./dist/switch/switch.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nconst defaultOptions = {\n bem: {\n control: \"switch__control\"\n },\n customElementMode: false\n};\nclass _default {\n constructor(el, selectedOptions) {\n this._options = Object.assign({}, defaultOptions, selectedOptions);\n this.el = el;\n this._onClickListener = _onClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onMutationListener = _onMutation.bind(this);\n if (this.disabled) {\n this._focusableElement.setAttribute(\"tabindex\", \"-1\");\n }\n this.el.classList.add(\"switch--js\");\n if (!this._options.customElementMode) {\n this._mutationObserver = new MutationObserver(this._onMutationListener);\n this._observeMutations();\n this._observeEvents();\n }\n }\n _observeMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.observe(this._focusableElement, {\n attributes: true,\n childList: false,\n subtree: false\n });\n }\n }\n _unobserveMutations() {\n if (!this._options.customElementMode) {\n this._mutationObserver.disconnect();\n }\n }\n _observeEvents() {\n this._focusableElement.addEventListener(\"click\", this._onClickListener);\n this._focusableElement.addEventListener(\"keydown\", this._onKeyDownListener);\n }\n _unobserveEvents() {\n this._focusableElement.removeEventListener(\"click\", this._onClickListener);\n this._focusableElement.removeEventListener(\"keydown\", this._onKeyDownListener);\n }\n get _focusableElement() {\n return this.el.querySelector(`.${this._options.bem.control}`);\n }\n set checked(isChecked) {\n this._unobserveMutations();\n this._focusableElement.setAttribute(\"aria-checked\", isChecked.toString());\n this.el.dispatchEvent(new CustomEvent(\"makeup-switch-toggle\", {\n composed: true,\n detail: {\n on: this.checked\n }\n }));\n this._observeMutations();\n }\n get checked() {\n return this._focusableElement.getAttribute(\"aria-checked\") === \"true\";\n }\n set disabled(isDisabled) {\n this._unobserveMutations();\n this._focusableElement.setAttribute(\"aria-disabled\", isDisabled.toString());\n this._focusableElement.setAttribute(\"tabindex\", isDisabled ? \"-1\" : \"0\");\n this._observeMutations();\n }\n get disabled() {\n return this._focusableElement.getAttribute(\"aria-disabled\") === \"true\";\n }\n set labelledby(theId) {\n this._unobserveMutations();\n this._focusableElement.setAttribute(\"aria-labelledby\", theId);\n\n // customElementMode a11y workaround\n // aria-labelledby cannot resolve element id references that live outside of the Shadow DOM\n // as a workaround we can use aria-label\n if (this._options.customElementMode) {\n const labellingEl = document.getElementById(this.labelledby);\n if (labellingEl && labellingEl.innerText !== \"\") {\n this.label = labellingEl.innerText;\n }\n }\n this._observeMutations();\n }\n get labelledby() {\n return this._focusableElement.getAttribute(\"aria-labelledby\");\n }\n get label() {\n return this._focusableElement.getAttribute(\"aria-label\");\n }\n set label(theLabel) {\n this._unobserveMutations();\n this._focusableElement.setAttribute(\"aria-label\", theLabel);\n this._observeMutations();\n }\n toggle() {\n this.checked = !this.checked;\n }\n destroy() {\n this._unobserveMutations();\n this._unobserveEvents();\n this._onClickListener = null;\n this._onKeyDownListener = null;\n this._onMutationListener = null;\n }\n}\nexports.default = _default;\nfunction _onKeyDown(e) {\n if (!this.disabled) {\n switch (e.keyCode) {\n case 32:\n e.preventDefault();\n this.toggle();\n break;\n case 37:\n this.checked = false;\n break;\n case 39:\n this.checked = true;\n break;\n default:\n break;\n }\n }\n}\nfunction _onClick() {\n if (!this.disabled) {\n this.toggle();\n }\n}\nfunction _onMutation(mutationsList) {\n for (const mutation of mutationsList) {\n if (mutation.type === \"attributes\") {\n this.el.dispatchEvent(new CustomEvent(\"makeup-switch-mutation\", {\n detail: {\n attributeName: mutation.attributeName\n }\n }));\n }\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/switch\");\nvar _makeupSwitch = _interopRequireDefault(require(\"makeup-switch\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst logEl = document.getElementById(\"log\");\nfunction logEvent(e) {\n const item = document.createElement(\"li\");\n item.textContent = `makeup-switch-toggle — on: ${e.detail.on}`;\n logEl.prepend(item);\n}\ndocument.querySelectorAll(\".switch\").forEach(el => {\n new _makeupSwitch.default(el);\n el.addEventListener(\"makeup-switch-toggle\", logEvent);\n});\ndocument.getElementById(\"clear\").addEventListener(\"click\", () => {\n logEl.innerHTML = \"\";\n});"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-tabs/index.html b/docs/ui/makeup-tabs/index.html index 3c95e34c..fca68cb9 100644 --- a/docs/ui/makeup-tabs/index.html +++ b/docs/ui/makeup-tabs/index.html @@ -2,174 +2,170 @@ makeup-tabs + + + - -
                                      -
                                      -

                                      makeup-tabs

                                      -

                                      - Tabs is headless UI widget and does not come bundled with any CSS. This example is receiving its base markup - and styles from eBay Skin. A subset of style properties are - being customized/themed via Skin's CSS Custom Properties. -

                                      -
                                      -
                                      -
                                      -

                                      Automatic Selection

                                      -

                                      - ARROW keys move the roving tabindex and automatically updated the selected state. This behaviour is - similar to a radio button group. -

                                      +
                                      +

                                      ui / makeup-tabs

                                      +

                                      Tabs is headless UI widget and does not come bundled with any CSS.

                                      -

                                      Unselected State

                                      -
                                      -
                                      - - - +

                                      Automatic Selection

                                      +

                                      + ARROW keys move the roving tabindex and automatically updated the selected state. This behaviour is + similar to a radio button group. +

                                      + +

                                      Unselected State

                                      +
                                      +
                                      + -
                                      -
                                      -
                                      -

                                      Panel 1 Title

                                      -

                                      Panel 1 Content

                                      -
                                      + + +
                                      +
                                      +
                                      +
                                      +

                                      Panel 1 Title

                                      +

                                      Panel 1 Content

                                      - + +
                                      -

                                      Selected State

                                      -
                                      -
                                      - - - +

                                      Selected State

                                      +
                                      +
                                      + + -
                                      -
                                      -
                                      -

                                      Panel 1 Title

                                      -

                                      Panel 1 Content

                                      -
                                      + +
                                      +
                                      +
                                      +
                                      +

                                      Panel 1 Title

                                      +

                                      Panel 1 Content

                                      - + +
                                      -

                                      Manual Selection

                                      -

                                      ARROW keys move the roving tabindex. SPACEBAR key is required to manually change the selected state.

                                      +
                                      -

                                      Unselected State

                                      +

                                      Manual Selection

                                      +

                                      ARROW keys move the roving tabindex. SPACEBAR key is required to manually change the selected state.

                                      -
                                      -
                                      - - - +

                                      Unselected State

                                      + +
                                      +
                                      + -
                                      -
                                      -
                                      -

                                      Panel 1 Title

                                      -

                                      Panel 1 Content

                                      -
                                      + + +
                                      +
                                      +
                                      +
                                      +

                                      Panel 1 Title

                                      +

                                      Panel 1 Content

                                      - + +
                                      -

                                      Selected State

                                      +

                                      Selected State

                                      -
                                      -
                                      - - - +
                                      +
                                      + + -
                                      -
                                      -
                                      -

                                      Panel 1 Title

                                      -

                                      Panel 1 Content

                                      -
                                      + +
                                      +
                                      +
                                      +
                                      +

                                      Panel 1 Title

                                      +

                                      Panel 1 Content

                                      - + -
                                      -
                                      + +
                                      diff --git a/docs/ui/makeup-toast-dialog/index.css b/docs/ui/makeup-toast-dialog/index.css index a5b08ed0..211b179c 100644 --- a/docs/ui/makeup-toast-dialog/index.css +++ b/docs/ui/makeup-toast-dialog/index.css @@ -1,7 +1,78 @@ -#page { +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + color: #333; + font-family: system-ui, -apple-system, sans-serif; + font-size: 1rem; + line-height: 1.5; + margin: 0; + padding: 1rem 2rem; +} + +main { margin: 0 auto; max-width: 960px; - width: 100%; +} + +h1 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +h2 { + font-size: 1rem; + margin: 1.5rem 0 0.5rem; +} + +a { + color: inherit; +} + +p { + margin: 0 0 0.75rem; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin: 1.5rem 0; +} + +code { + background: #f5f5f5; + border-radius: 3px; + font-size: 0.875em; + padding: 0.1em 0.3em; +} + +label { + margin-right: 0.25rem; +} + +button { + margin-left: 0.25rem; +} + +/* Event log — use for demos that emit events, instead of console.log */ +.demo-output { + border: 1px solid #ddd; + font-family: monospace; + font-size: 0.875rem; + list-style: none; + margin: 0.5rem 0; + max-height: 8rem; + min-height: 2rem; + overflow-y: auto; + padding: 0.5rem; +} + +.demo-output:empty::before { + color: #999; + content: "No events yet"; } :root { diff --git a/docs/ui/makeup-toast-dialog/index.css.map b/docs/ui/makeup-toast-dialog/index.css.map index 8ab12891..bf8ba87f 100644 --- a/docs/ui/makeup-toast-dialog/index.css.map +++ b/docs/ui/makeup-toast-dialog/index.css.map @@ -1 +1 @@ -{"version":3,"file":"makeup-toast-dialog/index.css","mappings":"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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/toast-dialog/toast-dialog.css"],"sourcesContent":["#page {\n margin: 0 auto;\n max-width: 960px;\n width: 100%;\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\n.toast-dialog {\n background-color: var(--color-background-accent);\n border-top-left-radius: var(--border-radius-100);\n border-top-right-radius: var(--border-radius-100);\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);\n inset: auto 0 0;\n max-height: 40vh;\n min-width: 320px;\n position: fixed;\n transform: translateY(0);\n width: 100vw;\n will-change: opacity, transform;\n z-index: 2;\n}\n.toast-dialog,\n.toast-dialog a {\n color: var(--color-foreground-on-success);\n}\n.toast-dialog a:focus {\n outline: 1px auto currentColor;\n}\n.toast-dialog--transition {\n transition:\n opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,\n transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;\n}\n.toast-dialog--hide-init,\n.toast-dialog--show {\n display: block;\n opacity: 1;\n transform: translateY(0);\n}\n.toast-dialog--hide,\n.toast-dialog--show-init {\n display: block;\n opacity: 0;\n transform: translateY(110%);\n}\n.toast-dialog__window {\n padding: var(--spacing-100) var(--spacing-200) var(--spacing-200);\n}\n.toast-dialog__header {\n align-items: center;\n display: flex;\n}\n.toast-dialog__header h2,\n.toast-dialog__title {\n margin: 0;\n}\nbutton.icon-btn.toast-dialog__close {\n align-self: flex-start;\n border: 0;\n color: var(--color-foreground-on-success);\n flex-shrink: 0;\n margin-inline-start: auto;\n overflow: hidden;\n padding: 0;\n position: relative;\n}\nbutton.icon-btn.toast-dialog__close:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn.toast-dialog__close[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn.toast-dialog__close[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn.toast-dialog__close[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.icon-btn.toast-dialog__close:focus {\n outline: 2px solid var(--color-foreground-on-success);\n}\nbutton.icon-btn.toast-dialog__close > svg {\n fill: currentColor;\n}\n.toast-dialog__footer {\n display: flex;\n justify-content: flex-end;\n}\n.toast-dialog__footer button:first-letter {\n text-decoration: underline;\n}\n.toast-dialog__footer button.btn--primary,\n.toast-dialog__footer button.btn--secondary {\n overflow: hidden;\n position: relative;\n}\n.toast-dialog__footer button.btn--primary:after,\n.toast-dialog__footer button.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.toast-dialog__footer\n button.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\n.toast-dialog__footer button.btn--primary[href]:hover:after,\n.toast-dialog__footer\n button.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\n.toast-dialog__footer button.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\n.toast-dialog__footer\n button.btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\n.toast-dialog__footer button.btn--primary[href]:focus-visible:after,\n.toast-dialog__footer\n button.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\n.toast-dialog__footer button.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\n.toast-dialog__footer\n button.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\n.toast-dialog__footer button.btn--primary[href]:active:after,\n.toast-dialog__footer\n button.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\n.toast-dialog__footer button.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\n.toast-dialog__footer button.btn--primary,\n.toast-dialog__footer button.btn--secondary {\n border-color: var(--color-foreground-on-accent);\n border-style: solid;\n border-width: 1px;\n outline-offset: 2px;\n}\n.toast-dialog__footer button.btn--primary {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-accent);\n}\n.toast-dialog__footer button.btn--secondary {\n background-color: initial;\n color: var(--color-background-primary);\n font-weight: 700;\n margin-inline-end: var(--spacing-100);\n}\n.toast-dialog__footer button.btn--primary:focus,\n.toast-dialog__footer button.btn--secondary:focus {\n outline: 2px solid var(--color-foreground-on-success);\n}\n@media (min-width: 512px) {\n .toast-dialog {\n border-radius: var(--border-radius-100);\n bottom: var(--spacing-200);\n left: var(--spacing-200);\n max-width: 480px;\n width: auto;\n }\n .toast-dialog__window {\n padding: var(--spacing-200) var(--spacing-300) var(--spacing-300);\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-toast-dialog/index.css","mappings":"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","sources":["webpack://root/./docs/docs.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css","webpack://root/./node_modules/@ebay/skin/dist/global/global.css","webpack://root/./node_modules/@ebay/skin/dist/button/button.css","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css","webpack://root/./node_modules/@ebay/skin/dist/toast-dialog/toast-dialog.css"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n color: #333;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n margin: 0;\n padding: 1rem 2rem;\n}\n\nmain {\n margin: 0 auto;\n max-width: 960px;\n}\n\nh1 {\n font-size: 1.25rem;\n margin: 0 0 0.5rem;\n}\n\nh2 {\n font-size: 1rem;\n margin: 1.5rem 0 0.5rem;\n}\n\na {\n color: inherit;\n}\n\np {\n margin: 0 0 0.75rem;\n}\n\nhr {\n border: none;\n border-top: 1px solid #ddd;\n margin: 1.5rem 0;\n}\n\ncode {\n background: #f5f5f5;\n border-radius: 3px;\n font-size: 0.875em;\n padding: 0.1em 0.3em;\n}\n\nlabel {\n margin-right: 0.25rem;\n}\n\nbutton {\n margin-left: 0.25rem;\n}\n\n/* Event log — use for demos that emit events, instead of console.log */\n.demo-output {\n border: 1px solid #ddd;\n font-family: monospace;\n font-size: 0.875rem;\n list-style: none;\n margin: 0.5rem 0;\n max-height: 8rem;\n min-height: 2rem;\n overflow-y: auto;\n padding: 0.5rem;\n}\n\n.demo-output:empty::before {\n color: #999;\n content: \"No events yet\";\n}\n",":root {\n --border-width-medium: 1px;\n --border-width-thick: 2px;\n --border-width-thin: 0.5px;\n --breakpoint-android-compact: 320px;\n --breakpoint-android-expanded: 800px;\n --breakpoint-android-medium: 600px;\n --breakpoint-extra-large-2: 1400px;\n --breakpoint-extra-large-3: 1920px;\n --breakpoint-extra-large: 1100px;\n --breakpoint-extra-small: 320px;\n --breakpoint-ios-compact: 320px;\n --breakpoint-ios-expanded: 800px;\n --breakpoint-ios-regular: 600px;\n --breakpoint-large: 800px;\n --breakpoint-medium: 600px;\n --breakpoint-small: 512px;\n --color-avocado-100: #fdfef6;\n --color-avocado-200: #f8fcde;\n --color-avocado-300: #e9f5a0;\n --color-avocado-400: #e3f13c;\n --color-avocado-500: #c1d737;\n --color-avocado-600: #68770d;\n --color-avocado-700: #4e4e0c;\n --color-avocado-800: #282306;\n --color-blue-100: #f5f9ff;\n --color-blue-200: #d4e5fe;\n --color-blue-300: #84b4fb;\n --color-blue-400: #4d93fc;\n --color-blue-500: #0968f6;\n --color-blue-600: #0049b8;\n --color-blue-650: #003aa5;\n --color-blue-700: #002a69;\n --color-blue-800: #19133a;\n --color-clear: rgba(255, 255, 255, 0);\n --color-coral-100: #fff7f5;\n --color-coral-200: #ffe1d7;\n --color-coral-300: #ffa78a;\n --color-coral-400: #ff6a38;\n --color-coral-500: #f3511b;\n --color-coral-600: #d03706;\n --color-coral-700: #5e1d08;\n --color-coral-800: #2f0e04;\n --color-dijon-100: #fffdf5;\n --color-dijon-200: #fcf9de;\n --color-dijon-300: #faef8a;\n --color-dijon-400: #f6e016;\n --color-dijon-500: #e8d20c;\n --color-dijon-600: #766f28;\n --color-dijon-700: #524500;\n --color-dijon-800: #2e2400;\n --color-green-100: #fbfef6;\n --color-green-200: #f0fce1;\n --color-green-300: #d5f6aa;\n --color-green-400: #aaed56;\n --color-green-500: #92c821;\n --color-green-600: #507d17;\n --color-green-700: #345110;\n --color-green-800: #1c2d06;\n --color-indigo-100: #f5fbff;\n --color-indigo-200: #d3effe;\n --color-indigo-300: #80d0fd;\n --color-indigo-400: #0aa7ff;\n --color-indigo-500: #0099f0;\n --color-indigo-600: #0364ab;\n --color-indigo-700: #003c66;\n --color-indigo-800: #01193d;\n --color-jade-100: #f7fdfb;\n --color-jade-200: #d8f8ee;\n --color-jade-300: #8feace;\n --color-jade-400: #1ed49e;\n --color-jade-500: #17c28f;\n --color-jade-600: #0f805e;\n --color-jade-700: #055743;\n --color-jade-800: #002b20;\n --color-kiwi-100: #f6fef6;\n --color-kiwi-200: #e0fae0;\n --color-kiwi-300: #a6f0a5;\n --color-kiwi-400: #4ce160;\n --color-kiwi-500: #3cc14e;\n --color-kiwi-600: #288034;\n --color-kiwi-700: #1b561a;\n --color-kiwi-800: #0c310d;\n --color-lilac-100: #faf5fe;\n --color-lilac-200: #efddfd;\n --color-lilac-300: #cc9ef0;\n --color-lilac-400: #b56bf0;\n --color-lilac-500: #8935cb;\n --color-lilac-600: #631f99;\n --color-lilac-700: #3e135f;\n --color-lilac-800: #2f041e;\n --color-marigold-100: #fffbf5;\n --color-marigold-200: #fff0d3;\n --color-marigold-300: #ffd480;\n --color-marigold-400: #ffa800;\n --color-marigold-500: #e99a02;\n --color-marigold-600: #a36302;\n --color-marigold-700: #562f01;\n --color-marigold-800: #2f1b04;\n --color-neutral-100: #ffffff;\n --color-neutral-200: #f7f7f7;\n --color-neutral-300: #e5e5e5;\n --color-neutral-400: #c7c7c7;\n --color-neutral-500: #8f8f8f;\n --color-neutral-600: #707070;\n --color-neutral-700: #363636;\n --color-neutral-800: #191919;\n --color-neutral-900: #000000;\n --color-orange-100: #fffaf5;\n --color-orange-200: #ffead3;\n --color-orange-300: #ffc382;\n --color-orange-400: #ff8806;\n --color-orange-500: #ec7303;\n --color-orange-600: #c15100;\n --color-orange-700: #562501;\n --color-orange-800: #2f1604;\n --color-pink-100: #fef6fa;\n --color-pink-200: #fcdcec;\n --color-pink-300: #f79cc8;\n --color-pink-400: #f155a0;\n --color-pink-500: #de458e;\n --color-pink-600: #a51359;\n --color-pink-700: #4b112d;\n --color-pink-800: #360606;\n --color-red-100: #fff5f5;\n --color-red-200: #ffdede;\n --color-red-300: #ffa0a0;\n --color-red-400: #ff5c5c;\n --color-red-500: #f02d2d;\n --color-red-600: #d50b0b;\n --color-red-700: #570303;\n --color-red-800: #2a0303;\n --color-teal-100: #f7fdfd;\n --color-teal-200: #d7f4f6;\n --color-teal-300: #8edfe5;\n --color-teal-400: #44ccd5;\n --color-teal-500: #1bbfca;\n --color-teal-600: #006f93;\n --color-teal-700: #07465a;\n --color-teal-800: #04252f;\n --color-violet-100: #f6f5fe;\n --color-violet-200: #e2ddfd;\n --color-violet-300: #ad9efa;\n --color-violet-400: #836bff;\n --color-violet-500: #583aee;\n --color-violet-600: #3b1fc6;\n --color-violet-700: #271a68;\n --color-violet-800: #20092b;\n --color-yellow-100: #fffcf5;\n --color-yellow-200: #fff8d5;\n --color-yellow-300: #ffe58a;\n --color-yellow-400: #ffbd14;\n --color-yellow-500: #eebb04;\n --color-yellow-600: #855f00;\n --color-yellow-700: #553b06;\n --color-yellow-800: #312102;\n --dimension-0: 0px;\n --dimension-1000: 80px;\n --dimension-100: 8px;\n --dimension-150: 12px;\n --dimension-200: 16px;\n --dimension-250: 20px;\n --dimension-25: 2px;\n --dimension-300: 24px;\n --dimension-400: 32px;\n --dimension-500: 40px;\n --dimension-50: 4px;\n --dimension-600: 48px;\n --dimension-75: 6px;\n --dimension-800: 64px;\n --dimension-action-height-large: 48px;\n --dimension-action-height-medium: 40px;\n --dimension-action-height-small: 32px;\n --dimension-icon-extra-large: 64px;\n --dimension-icon-extra-small: 12px;\n --dimension-icon-large: 32px;\n --dimension-icon-medium: 24px;\n --dimension-icon-small: 16px;\n --dimension-tap-target-minimum: 48px;\n --expressive-theme-avocado-dark-background: #4e4e0c;\n --expressive-theme-avocado-dark-foreground: #f8fcde;\n --expressive-theme-avocado-light-background: #e3f13c;\n --expressive-theme-avocado-light-foreground: #4e4e0c;\n --expressive-theme-avocado-medium-background: #c1d737;\n --expressive-theme-avocado-medium-foreground: #4e4e0c;\n --expressive-theme-blue-dark-background: #002a69;\n --expressive-theme-blue-dark-foreground: #d4e5fe;\n --expressive-theme-blue-light-background: #4d93fc;\n --expressive-theme-blue-light-foreground: #19133a;\n --expressive-theme-blue-medium-background: #0968f6;\n --expressive-theme-blue-medium-foreground: #f5f9ff;\n --expressive-theme-coral-dark-background: #5e1d08;\n --expressive-theme-coral-dark-foreground: #ffe1d7;\n --expressive-theme-coral-light-background: #ff6a38;\n --expressive-theme-coral-light-foreground: #2f0e04;\n --expressive-theme-coral-medium-background: #f3511b;\n --expressive-theme-coral-medium-foreground: #2f0e04;\n --expressive-theme-dijon-dark-background: #524500;\n --expressive-theme-dijon-dark-foreground: #fcf9de;\n --expressive-theme-dijon-light-background: #f6e016;\n --expressive-theme-dijon-light-foreground: #524500;\n --expressive-theme-dijon-medium-background: #e8d20c;\n --expressive-theme-dijon-medium-foreground: #524500;\n --expressive-theme-green-dark-background: #345110;\n --expressive-theme-green-dark-foreground: #f0fce1;\n --expressive-theme-green-light-background: #aaed56;\n --expressive-theme-green-light-foreground: #345110;\n --expressive-theme-green-medium-background: #92c821;\n --expressive-theme-green-medium-foreground: #345110;\n --expressive-theme-indigo-dark-background: #003c66;\n --expressive-theme-indigo-dark-foreground: #d3effe;\n --expressive-theme-indigo-light-background: #0aa7ff;\n --expressive-theme-indigo-light-foreground: #01193d;\n --expressive-theme-indigo-medium-background: #0099f0;\n --expressive-theme-indigo-medium-foreground: #01193d;\n --expressive-theme-jade-dark-background: #055743;\n --expressive-theme-jade-dark-foreground: #d8f8ee;\n --expressive-theme-jade-light-background: #1ed49e;\n --expressive-theme-jade-light-foreground: #002b20;\n --expressive-theme-jade-medium-background: #17c28f;\n --expressive-theme-jade-medium-foreground: #002b20;\n --expressive-theme-kiwi-dark-background: #1b561a;\n --expressive-theme-kiwi-dark-foreground: #e0fae0;\n --expressive-theme-kiwi-light-background: #4ce160;\n --expressive-theme-kiwi-light-foreground: #0c310d;\n --expressive-theme-kiwi-medium-background: #3cc14e;\n --expressive-theme-kiwi-medium-foreground: #0c310d;\n --expressive-theme-lilac-dark-background: #3e135f;\n --expressive-theme-lilac-dark-foreground: #efddfd;\n --expressive-theme-lilac-light-background: #b56bf0;\n --expressive-theme-lilac-light-foreground: #2f041e;\n --expressive-theme-lilac-medium-background: #8935cb;\n --expressive-theme-lilac-medium-foreground: #faf5fe;\n --expressive-theme-live-dark-background: #3b1fc6;\n --expressive-theme-live-dark-foreground: #f6f5fe;\n --expressive-theme-live-light-background: #3b1fc6;\n --expressive-theme-live-light-foreground: #f6f5fe;\n --expressive-theme-live-medium-background: #3b1fc6;\n --expressive-theme-live-medium-foreground: #f6f5fe;\n --expressive-theme-marigold-dark-background: #562f01;\n --expressive-theme-marigold-dark-foreground: #fff0d3;\n --expressive-theme-marigold-light-background: #ffa800;\n --expressive-theme-marigold-light-foreground: #562f01;\n --expressive-theme-marigold-medium-background: #e99a02;\n --expressive-theme-marigold-medium-foreground: #562f01;\n --expressive-theme-neutral-dark-background: #191919;\n --expressive-theme-neutral-dark-foreground: #ffffff;\n --expressive-theme-neutral-light-background: #f7f7f7;\n --expressive-theme-neutral-light-foreground: #191919;\n --expressive-theme-neutral-medium-background: #f7f7f7;\n --expressive-theme-neutral-medium-foreground: #191919;\n --expressive-theme-orange-dark-background: #562501;\n --expressive-theme-orange-dark-foreground: #ffead3;\n --expressive-theme-orange-light-background: #ff8806;\n --expressive-theme-orange-light-foreground: #562501;\n --expressive-theme-orange-medium-background: #ec7303;\n --expressive-theme-orange-medium-foreground: #2f1604;\n --expressive-theme-pink-dark-background: #4b112d;\n --expressive-theme-pink-dark-foreground: #fcdcec;\n --expressive-theme-pink-light-background: #f155a0;\n --expressive-theme-pink-light-foreground: #360606;\n --expressive-theme-pink-medium-background: #de458e;\n --expressive-theme-pink-medium-foreground: #360606;\n --expressive-theme-red-dark-background: #570303;\n --expressive-theme-red-dark-foreground: #ffdede;\n --expressive-theme-red-light-background: #ff5c5c;\n --expressive-theme-red-light-foreground: #570303;\n --expressive-theme-red-medium-background: #f02d2d;\n --expressive-theme-red-medium-foreground: #2a0303;\n --expressive-theme-teal-dark-background: #07465a;\n --expressive-theme-teal-dark-foreground: #d7f4f6;\n --expressive-theme-teal-light-background: #44ccd5;\n --expressive-theme-teal-light-foreground: #07465a;\n --expressive-theme-teal-medium-background: #1bbfca;\n --expressive-theme-teal-medium-foreground: #07465a;\n --expressive-theme-violet-dark-background: #271a68;\n --expressive-theme-violet-dark-foreground: #e2ddfd;\n --expressive-theme-violet-light-background: #836bff;\n --expressive-theme-violet-light-foreground: #20092b;\n --expressive-theme-violet-medium-background: #583aee;\n --expressive-theme-violet-medium-foreground: #e2ddfd;\n --expressive-theme-yellow-dark-background: #553b06;\n --expressive-theme-yellow-dark-foreground: #fff8d5;\n --expressive-theme-yellow-light-background: #ffbd14;\n --expressive-theme-yellow-light-foreground: #553b06;\n --expressive-theme-yellow-medium-background: #eebb04;\n --expressive-theme-yellow-medium-foreground: #553b06;\n --font-family-market-sans: \"Market Sans\";\n --font-letter-spacing-display-1: -0.92px;\n --font-letter-spacing-display-2: -0.72px;\n --font-letter-spacing-display-3: -0.6px;\n --font-letter-spacing-none: 0px;\n --font-letter-spacing-signal-1: 0.7px;\n --font-letter-spacing-signal-2: 0.5px;\n --font-line-height-150: 12px;\n --font-line-height-200: 16px;\n --font-line-height-250: 20px;\n --font-line-height-300: 24px;\n --font-line-height-350: 28px;\n --font-line-height-400: 32px;\n --font-line-height-500: 40px;\n --font-line-height-575: 46px;\n --font-line-height-600: 56px;\n --font-paragraph-spacing-none: 0px;\n --font-size-body: 0.875rem;\n --font-size-giant-1: 1.875rem;\n --font-size-giant-2: 2.25rem;\n --font-size-giant-3: 2.875rem;\n --font-size-large-1: 1.25rem;\n --font-size-large-2: 1.5rem;\n --font-size-medium: 1rem;\n --font-size-small: 0.75rem;\n --font-size-smallest: 0.625rem;\n --font-text-case-none: none;\n --font-text-case-uppercase: uppercase;\n --font-text-decoration-none: none;\n --font-text-decoration-underline: underline;\n --font-weight-400: 400;\n --font-weight-600: 600;\n --motion-duration-instant: 17ms;\n --motion-duration-long-1: 667ms;\n --motion-duration-long-2: 833ms;\n --motion-duration-long-3: 1000ms;\n --motion-duration-medium-1: 250ms;\n --motion-duration-medium-2: 333ms;\n --motion-duration-medium-3: 500ms;\n --motion-duration-short-1: 50ms;\n --motion-duration-short-2: 83ms;\n --motion-duration-short-3: 167ms;\n --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);\n --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);\n --motion-easing-linear: cubic-bezier(0, 0, 1, 1);\n --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);\n --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);\n --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);\n --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);\n --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);\n --opacity-state-active: 0.12;\n --opacity-state-focus: 0.04;\n --opacity-state-hover: 0.04;\n --opacity-state-press: 0.08;\n --radius-extra-large: 24px;\n --radius-form-input: 8px;\n --radius-large: 16px;\n --radius-medium: 8px;\n --radius-none: 0px;\n --radius-photo-large: 16px;\n --radius-photo-small: 8px;\n --radius-popover-container: 16px;\n --radius-small: 4px;\n --shadow-strong:\n 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);\n --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);\n --spacing-0: 0px;\n --spacing-100: 8px;\n --spacing-150: 12px;\n --spacing-200: 16px;\n --spacing-250: 20px;\n --spacing-25: 2px;\n --spacing-300: 24px;\n --spacing-400: 32px;\n --spacing-500: 40px;\n --spacing-50: 4px;\n --spacing-600: 48px;\n --spacing-75: 6px;\n --spacing-page-grid-gutter: 8px;\n --spacing-page-grid-margin: 16px;\n --typography-body-bold: 600 0.875rem/20px \"Market Sans\";\n --typography-body: 400 0.875rem/20px \"Market Sans\";\n --typography-caption-bold: 600 0.75rem/16px \"Market Sans\";\n --typography-caption: 400 0.75rem/16px \"Market Sans\";\n --typography-display-1: 600 2.875rem/56px \"Market Sans\";\n --typography-display-2: 600 2.25rem/46px \"Market Sans\";\n --typography-display-3: 600 1.875rem/40px \"Market Sans\";\n --typography-signal-1: 400 0.875rem/20px \"Market Sans\";\n --typography-signal-2: 600 0.625rem/12px \"Market Sans\";\n --typography-subtitle-1: 400 1.25rem/28px \"Market Sans\";\n --typography-subtitle-2: 400 1rem/24px \"Market Sans\";\n --typography-title-1: 600 1.5rem/32px \"Market Sans\";\n --typography-title-2: 600 1.25rem/28px \"Market Sans\";\n --typography-title-3: 600 1rem/24px \"Market Sans\";\n --border-radius-50: 8px;\n --border-radius-100: 16px;\n --border-radius-150: 24px;\n --color-neutral-100-rgb: 255, 255, 255;\n --color-neutral-200-rgb: 247, 247, 247;\n --color-neutral-800-rgb: 25, 25, 25;\n --color-neutral-900-rgb: 0, 0, 0;\n --color-ai-solid-green-subtle-dark: #112611;\n --color-ai-solid-blue-subtle-dark: #112c31;\n --color-ai-solid-purple-subtle-dark: #20172f;\n --color-ai-solid-red-subtle-dark: #321919;\n --opacity-50: 0.04;\n --opacity-100: 0.08;\n --opacity-150: 0.12;\n --opacity-200: 0.16;\n --font-size-10: var(--font-size-smallest);\n --font-size-12: var(--font-size-small);\n --font-size-14: var(--font-size-body);\n --font-size-16: var(--font-size-medium);\n --font-size-18: 1.125rem;\n --font-size-20: var(--font-size-large-1);\n --font-size-24: var(--font-size-large-2);\n --font-size-30: var(--font-size-giant-1);\n --font-size-36: var(--font-size-giant-2);\n --font-size-46: var(--font-size-giant-3);\n --font-size-64: 4rem;\n --font-size-default: var(--font-size-body);\n --font-size-giant-4: var(--font-size-64);\n --font-weight-regular: var(--font-weight-400);\n --font-weight-bold: var(--font-weight-600);\n --spacing-125: 10px;\n --spacing-450: 36px;\n --spacing-700: 56px;\n --spacing-800: 64px;\n --color-media-disabled-filter: grayscale(1) opacity(0.25);\n --font-line-height-default: 1.4286;\n}\n",":root {\n --color-ai-solid-blue-strong: #0968f6;\n --color-ai-solid-blue-subtle: #f0f6fe;\n --color-ai-solid-green-strong: #4ee04b;\n --color-ai-solid-green-subtle: #f1fdf1;\n --color-ai-solid-purple-strong: #993ee0;\n --color-ai-solid-purple-subtle: #f9f3fd;\n --color-ai-solid-red-strong: #ff4242;\n --color-ai-solid-red-subtle: #fff4f4;\n --color-ai-solid-yellow-strong: #ffd80e;\n --color-background-accent: var(--color-blue-500);\n --color-background-attention: var(--color-red-600);\n --color-background-disabled: var(--color-neutral-400);\n --color-background-education: var(--color-blue-100);\n --color-background-elevated: var(--color-neutral-100);\n --color-background-inverse: var(--color-neutral-700);\n --color-background-on-image: rgba(255, 255, 255, 0.9);\n --color-background-on-secondary: var(--color-neutral-100);\n --color-background-primary: var(--color-neutral-100);\n --color-background-secondary-on-elevated: var(--color-neutral-200);\n --color-background-secondary: var(--color-neutral-200);\n --color-background-strong: var(--color-neutral-800);\n --color-background-success: var(--color-kiwi-600);\n --color-background-tertiary: var(--color-neutral-300);\n --color-background-transparent: var(--color-clear);\n --color-border-accent: var(--color-blue-500);\n --color-border-attention: var(--color-red-600);\n --color-border-disabled: var(--color-neutral-400);\n --color-border-inverse: var(--color-neutral-100);\n --color-border-medium: var(--color-neutral-500);\n --color-border-on-accent: var(--color-neutral-100);\n --color-border-on-attention: var(--color-neutral-100);\n --color-border-on-disabled: var(--color-neutral-100);\n --color-border-on-inverse: var(--color-neutral-100);\n --color-border-on-success: var(--color-neutral-100);\n --color-border-strong: var(--color-neutral-700);\n --color-border-subtle: var(--color-neutral-300);\n --color-border-success: var(--color-kiwi-600);\n --color-brand-1: var(--color-red-500);\n --color-brand-2: var(--color-blue-500);\n --color-brand-3: var(--color-yellow-400);\n --color-brand-4: var(--color-green-500);\n --color-foreground-accent: var(--color-blue-500);\n --color-foreground-attention: var(--color-red-600);\n --color-foreground-disabled: var(--color-neutral-400);\n --color-foreground-link-legal: var(--color-blue-650);\n --color-foreground-link-primary: var(--color-foreground-primary);\n --color-foreground-link-visited: var(--color-pink-600);\n --color-foreground-on-accent: var(--color-neutral-100);\n --color-foreground-on-attention: var(--color-neutral-100);\n --color-foreground-on-disabled: var(--color-neutral-100);\n --color-foreground-on-inverse: var(--color-neutral-100);\n --color-foreground-on-strong: var(--color-neutral-100);\n --color-foreground-on-success: var(--color-neutral-100);\n --color-foreground-primary: var(--color-neutral-800);\n --color-foreground-secondary: var(--color-neutral-600);\n --color-foreground-success: var(--color-kiwi-600);\n --color-gradient-ai-blue-strong: linear-gradient(\n to right,\n var(--color-ai-solid-purple-strong),\n var(--color-ai-solid-blue-strong) 50%,\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-blue-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-purple-subtle),\n var(--color-ai-solid-blue-subtle) 50%,\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-full-color-diagonal: linear-gradient(\n 135deg,\n var(--color-ai-solid-green-strong) 10%,\n var(--color-ai-solid-blue-strong) 27%,\n var(--color-ai-solid-purple-strong) 42%,\n var(--color-ai-solid-red-strong) 56%,\n var(--color-ai-solid-yellow-strong) 78%\n );\n --color-gradient-ai-green-strong: linear-gradient(\n to right,\n var(--color-ai-solid-blue-strong),\n var(--color-ai-solid-green-strong) 100%\n );\n --color-gradient-ai-green-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-blue-subtle),\n var(--color-ai-solid-green-subtle) 100%\n );\n --color-gradient-ai-purple-strong: linear-gradient(\n to right,\n var(--color-ai-solid-red-strong),\n var(--color-ai-solid-purple-strong) 100%\n );\n --color-gradient-ai-purple-subtle: linear-gradient(\n to right,\n var(--color-ai-solid-red-subtle),\n var(--color-ai-solid-purple-subtle) 100%\n );\n --color-gradient-image-scrim: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0) 52%,\n rgba(248, 248, 248, 0.03)\n );\n --color-gradient-loading-shimmer-on-secondary: linear-gradient(\n 90deg,\n rgba(237, 237, 237, 0),\n rgba(237, 237, 237, 0.6) 25%,\n rgba(237, 237, 237, 0.85) 37%,\n rgba(237, 237, 237, 0.95) 48%,\n rgba(237, 237, 237, 0.95) 51%,\n rgba(237, 237, 237, 0.85) 61%,\n rgba(237, 237, 237, 0.6) 74%,\n rgba(237, 237, 237, 0)\n );\n --color-gradient-loading-shimmer: linear-gradient(\n 90deg,\n rgba(248, 248, 248, 0),\n rgba(248, 248, 248, 0.6) 25%,\n rgba(248, 248, 248, 0.85) 37%,\n rgba(248, 248, 248, 0.95) 48%,\n rgba(248, 248, 248, 0.95) 51%,\n rgba(248, 248, 248, 0.85) 61%,\n rgba(248, 248, 248, 0.6) 74%,\n rgba(248, 248, 248, 0)\n );\n --color-loading-fill-on-secondary: #e4e4e4;\n --color-loading-fill: #ededed;\n --color-loading-on-primary-state-1: var(--color-neutral-200);\n --color-loading-on-primary-state-2: var(--color-neutral-300);\n --color-loading-on-secondary-state-1: var(--color-neutral-300);\n --color-loading-on-secondary-state-2: var(--color-neutral-400);\n --color-scrim-background: rgba(0, 0, 0, 0.3);\n --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-focus: rgba(0, 0, 0, 0.04);\n --color-state-layer-hover-on-strong: rgba(255, 255, 255, 0.12);\n --color-state-layer-hover: rgba(0, 0, 0, 0.04);\n --color-state-layer-pressed-on-strong: rgba(255, 255, 255, 0.16);\n --color-state-layer-pressed: rgba(0, 0, 0, 0.08);\n --color-state-layer-selected-on-strong: rgba(255, 255, 255, 0.2);\n --color-state-layer-selected: rgba(0, 0, 0, 0.12);\n --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);\n --color-background-confirmation: var(--color-background-success);\n --color-background-information: var(--color-background-accent);\n --color-background-invalid: var(--color-red-200);\n --color-background-strong-rgb: var(--color-neutral-800-rgb);\n --color-foreground-confirmation: var(--color-foreground-success);\n --color-foreground-information: var(--color-foreground-accent);\n --color-foreground-visited: var(--color-foreground-link-visited);\n --color-foreground-on-primary: var(--color-foreground-primary);\n --color-foreground-on-secondary: var(--color-foreground-secondary);\n --color-foreground-on-confirmation: var(--color-foreground-on-success);\n --color-foreground-on-information: var(--color-foreground-on-success);\n --color-stroke-default: var(--color-border-medium);\n --color-stroke-accent: var(--color-border-accent);\n --color-stroke-on-accent: var(--color-border-on-accent);\n --color-stroke-attention: var(--color-border-attention);\n --color-stroke-on-attention: var(--color-border-on-attention);\n --color-stroke-confirmation: var(--color-border-success);\n --color-stroke-on-confirmation: var(--color-border-on-success);\n --color-stroke-information: var(--color-border-accent);\n --color-stroke-disabled: var(--color-border-disabled);\n --color-stroke-on-disabled: var(--color-border-on-disabled);\n --color-stroke-strong: var(--color-border-strong);\n --color-stroke-subtle: var(--color-border-subtle);\n --color-stroke-inverse: var(--color-border-on-inverse);\n --color-state-visited: var(--color-pink-600);\n --color-state-focus-stroke: #005fcc;\n --color-state-primary-hover: #f5f5f5;\n --color-state-primary-active: #ebebeb;\n --color-state-secondary-hover: #ededed;\n --color-state-secondary-hover-rgb: 237, 237, 237;\n --color-state-secondary-active: #e3e3e3;\n --color-state-secondary-active-rgb: 227, 227, 227;\n --color-state-inverse-hover: #343434;\n --color-state-inverse-active: #323232;\n --color-state-accent-hover: #2854d9;\n --color-state-hover-foreground-on-secondary: #3461e9;\n --color-state-accent-active: #254fd2;\n --color-state-active-foreground-on-secondary: #3461e9;\n --color-state-attention-hover: #d70f38;\n --color-state-attention-active: #d70f38;\n --color-state-hover-foreground-on-secondary-desctructive: #d70f38;\n --color-state-active-foreground-on-secondary-desctructive: #d70f38;\n --color-data-viz-grid: var(--color-neutral-300);\n --color-data-viz-labels: var(--color-neutral-800);\n --color-data-viz-legend: var(--color-neutral-600);\n --color-data-viz-legend-inactive: var(--color-neutral-400);\n --color-data-viz-legend-hover: var(--color-neutral-800);\n --color-data-viz-line-chart-primary: var(--color-blue-500);\n --color-data-viz-line-chart-secondary: var(--color-violet-700);\n --color-data-viz-line-chart-tertiary: var(--color-teal-600);\n --color-data-viz-line-chart-queternary: var(--color-pink-500);\n --color-data-viz-line-chart-quinary: var(--color-pink-600);\n --color-data-viz-trend-positive: var(--color-kiwi-600);\n --color-data-viz-trend-negative: var(--color-red-600);\n --color-data-viz-chart-primary: var(--color-blue-500);\n --color-data-viz-chart-secondary: var(--color-blue-700);\n --color-data-viz-chart-tertiary-background: var(--color-indigo-200);\n --color-data-viz-chart-tertiary-stroke: var(--color-blue-500);\n --color-data-viz-chart-quaternary-background: var(--color-teal-300);\n --color-data-viz-chart-quaternary-stroke: var(--color-teal-600);\n --color-data-viz-chart-quinary-background: var(--color-teal-200);\n --color-data-viz-chart-quinary-stroke: var(--color-teal-600);\n --color-data-viz-tooltip-shadow-primary: #00000026;\n --color-data-viz-tooltip-shadow-secondary: #0000002b;\n --color-scrim-image: rgba(0, 0, 0, 0.04);\n --color-marketing-lime-foreground-4: var(--color-green-700);\n --color-marketing-lime-background-4: var(--color-avocado-500);\n --color-marketing-green-foreground-3: var(--color-kiwi-700);\n --color-marketing-green-background-3: var(--color-kiwi-400);\n --color-marketing-teal-foreground-3: var(--color-teal-7);\n --color-marketing-teal-background-3: var(--color-teal-400);\n --color-marketing-teal-foreground-5: var(--color-neutral-100);\n --color-marketing-teal-background-5: var(--color-teal-600);\n --color-marketing-yellow-foreground-3: var(--color-marigold-700);\n --color-marketing-yellow-background-3: var(--color-yellow-400);\n --color-marketing-orange-foreground-3: var(--color-coral-700);\n --color-marketing-orange-background-3: var(--color-coral-400);\n --color-marketing-magenta-foreground-4: var(--color-neutral-100);\n --color-marketing-magenta-background-4: var(--color-pink-400);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);\n --state-layer-focus-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-hover-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-150)\n );\n --state-layer-pressed-on-strong: rgb(\n var(--color-neutral-100-rgb),\n var(--opacity-200)\n );\n --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));\n --color-ai-gradient-full-spectrum: var(\n --color-gradient-ai-full-color-diagonal\n );\n --color-ai-gradient-green-strong: var(--color-gradient-ai-green-strong);\n --color-ai-gradient-blue-strong: var(--color-gradient-ai-blue-strong);\n --color-ai-gradient-purple-strong: var(--color-gradient-ai-purple-strong);\n --color-ai-gradient-purple-subtle: var(--color-gradient-ai-purple-subtle);\n --color-ai-gradient-blue-subtle: var(--color-gradient-ai-blue-subtle);\n --color-ai-gradient-green-subtle: var(--color-gradient-ai-green-subtle);\n --color-loading-overlay: var(--color-neutral-100-rgb), 0.7;\n --color-loading-first: var(--color-neutral-200);\n --color-loading-second: var(--color-neutral-300);\n --color-loading-on-secondary-first: var(--color-neutral-300);\n --color-loading-on-secondary-second: var(--color-neutral-400);\n --color-loading-shimmer: linear-gradient(\n 270deg,\n var(--color-loading-fill) 0%,\n var(--color-loading-fill) 34%,\n #f8f8f8 50%,\n var(--color-loading-fill) 66%,\n var(--color-loading-fill) 100%\n );\n --color-loading-shimmer-on-secondary: linear-gradient(\n 270deg,\n var(--color-loading-fill-on-secondary) 0%,\n var(--color-loading-fill-on-secondary) 34%,\n #ededed 50%,\n var(--color-loading-fill-on-secondary) 66%,\n var(--color-loading-fill-on-secondary) 100%\n );\n --color-loading-ai-gradient-purple-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-purple-subtle) 0%,\n var(--color-ai-solid-red-subtle) 100%\n );\n --color-loading-ai-gradient-blue-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) -36%,\n var(--color-ai-solid-blue-subtle) 38.5%,\n var(--color-ai-solid-purple-subtle) 113%\n );\n --color-loading-ai-gradient-green-subtle: linear-gradient(\n 270deg,\n var(--color-ai-solid-green-subtle) 0%,\n var(--color-ai-solid-blue-subtle) 154.5%\n );\n}\n","body {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-primary);\n font-family:\n Market Sans,\n Arial,\n sans-serif;\n font-size: var(--font-size-body);\n line-height: var(--font-line-height-default);\n -webkit-text-size-adjust: 100%;\n}\nbutton {\n font-family: inherit;\n}\nfieldset {\n border: 0;\n padding: 0;\n}\nlegend {\n margin-bottom: var(--spacing-100);\n}\na {\n color: var(--color-foreground-link-primary);\n}\na:visited {\n color: var(--color-foreground-link-visited);\n}\na:hover {\n color: var(--color-foreground-secondary);\n}\na:not([href]),\na[aria-disabled=\"true\"] {\n color: var(--color-foreground-disabled);\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.fake-btn,\nbutton.btn {\n align-content: center;\n align-items: center;\n background-color: initial;\n border: 1px solid;\n border-radius: var(--btn-border-radius, 20px);\n box-sizing: border-box;\n color: inherit;\n display: inline-block;\n font-family: inherit;\n font-size: var(--font-size-body);\n margin: 0;\n min-height: 40px;\n min-width: 88px;\n padding: 0 20px;\n text-align: center;\n text-decoration: none;\n vertical-align: bottom;\n}\na.fake-btn--fixed-height,\na.fake-btn--truncated,\nbutton.btn--fixed-height,\nbutton.btn--truncated {\n height: 40px;\n}\na.fake-btn:focus-visible,\nbutton.btn:focus-visible {\n outline-offset: var(--spacing-25);\n outline-style: solid;\n outline-width: var(--spacing-25);\n}\na.fake-btn:focus:not(:focus-visible),\nbutton.btn:focus:not(:focus-visible) {\n outline: none;\n}\nbutton.btn[aria-disabled=\"true\"],\nbutton.btn[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --expand-btn-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn:not([href]),\na.fake-btn[aria-disabled=\"true\"] {\n color: var(\n --link-foreground-color-disabled,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--borderless,\nbutton.btn--borderless {\n border-color: transparent;\n min-width: auto;\n padding-left: 0;\n vertical-align: initial;\n}\na.fake-btn--borderless:focus,\na.fake-btn--borderless:hover,\nbutton.btn--borderless:focus,\nbutton.btn--borderless:hover {\n background-color: initial;\n outline: none;\n text-decoration: underline;\n}\na.fake-btn--borderless[aria-disabled=\"true\"],\na.fake-btn--borderless[disabled],\nbutton.btn--borderless[aria-disabled=\"true\"],\nbutton.btn--borderless[disabled] {\n border-color: transparent;\n}\na.fake-btn--borderless.btn--destructive,\nbutton.btn--borderless.btn--destructive {\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\na.fake-btn--slim,\nbutton.btn--slim {\n height: 40px;\n min-width: auto;\n padding-left: var(--spacing-100);\n padding-right: var(--spacing-100);\n}\na.fake-btn:hover,\na.fake-btn:visited {\n color: inherit;\n}\na.fake-btn--fluid,\nbutton.btn--fluid {\n width: 100%;\n}\n.btn__cell,\n.fake-btn__cell {\n align-items: center;\n display: flex;\n justify-content: center;\n width: 100%;\n}\n.btn__cell--fixed-height,\n.fake-btn__cell--fixed-height {\n display: inline-flex;\n}\n.btn__cell--fixed-height > svg,\n.fake-btn__cell--fixed-height > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\n.btn__cell--truncated,\n.fake-btn__cell--truncated {\n display: inline-flex;\n}\n.btn__cell--truncated > svg,\n.fake-btn__cell--truncated > svg {\n align-self: baseline;\n max-width: calc(100% - 32px);\n}\na.fake-btn--borderless .fake-btn__cell,\na.fake-btn--form .fake-btn__cell,\nbutton.btn--borderless .btn__cell,\nbutton.btn--form .btn__cell {\n justify-content: space-between;\n}\na.fake-btn svg.icon,\nbutton.btn svg.icon {\n align-self: center;\n}\na.fake-btn svg.icon:first-child,\nbutton.btn svg.icon:first-child {\n margin-inline-end: 8px;\n}\na.fake-btn svg.icon:last-child,\nbutton.btn svg.icon:last-child {\n margin-inline-start: 8px;\n}\na.fake-btn svg.icon:only-child,\nbutton.btn svg.icon:only-child {\n margin: 0;\n}\na.fake-btn__cell--fixed-height svg.icon,\nbutton.btn__cell--fixed-height svg.icon {\n align-self: center;\n height: 1rem;\n overflow: visible;\n width: 1rem;\n}\na.fake-btn--primary,\nbutton.btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n font-weight: 700;\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--primary:active,\nbutton.btn--primary:active {\n transform: scale(0.97);\n}\na.fake-btn--primary,\nbutton.btn--primary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary:after,\nbutton.btn--primary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--primary[href]:hover:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--primary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--primary[href]:focus-visible:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--primary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--primary[href]:active:after,\nbutton.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--primary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--primary {\n outline-color: var(--color-foreground-primary);\n}\na.fake-btn--primary:hover,\na.fake-btn--primary:visited {\n color: var(--color-foreground-on-accent);\n}\na.fake-btn--primary.fake-btn--destructive,\nbutton.btn--primary.btn--destructive {\n background-color: var(--color-background-attention);\n border-color: var(--color-border-attention);\n color: var(--color-foreground-on-attention);\n font-weight: 700;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--primary.fake-btn--destructive:after,\nbutton.btn--primary.btn--destructive:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\na.fake-btn--primary.fake-btn--destructive[href]:hover:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.btn--primary.btn--destructive[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--primary.fake-btn--destructive[href]:focus-visible:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--primary.btn--destructive[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--primary.fake-btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\na.fake-btn--primary.fake-btn--destructive[href]:active:after,\nbutton.btn--primary.btn--destructive:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.btn--primary.btn--destructive[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--primary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--primary.btn--destructive[disabled] {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\nbutton.btn .progress-spinner {\n height: 24px;\n margin: -4px 0;\n width: 24px;\n}\nbutton.btn--form .progress-spinner {\n margin-left: auto;\n margin-right: auto;\n}\nbutton.btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\nbutton.btn--primary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: var(--color-foreground-on-accent);\n --color-spinner-icon-foreground: #ec7089;\n}\na.fake-btn[aria-expanded=\"true\"] svg.icon--12,\nbutton.btn[aria-expanded=\"true\"] svg.icon--12 {\n transform: rotate(180deg);\n}\na.fake-btn--large svg.icon,\nbutton.btn--large svg.icon {\n max-height: 48px;\n}\na.fake-btn--small svg.icon,\nbutton.btn--small svg.icon {\n max-height: 32px;\n}\nbutton.btn--primary[aria-disabled=\"true\"],\nbutton.btn--primary[disabled] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\nbutton.btn--primary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--primary[disabled] svg.icon {\n fill: var(\n --btn-primary-disabled-foreground-color,\n var(--color-background-primary)\n );\n}\na.fake-btn--primary:not([href]),\na.fake-btn--primary[aria-disabled=\"true\"] {\n background-color: var(\n --btn-primary-disabled-background-color,\n var(--color-foreground-disabled)\n );\n border-color: var(\n --btn-primary-disabled-border-color,\n var(--color-foreground-disabled)\n );\n color: var(\n --btn-primary-foreground-color,\n var(--color-foreground-on-accent)\n );\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n background-color: var(--btn-secondary-background-color, transparent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--secondary:active,\nbutton.btn--secondary:active {\n transform: scale(0.97);\n}\na.fake-btn--secondary,\nbutton.btn--secondary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--secondary:after,\nbutton.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--secondary[href]:hover:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--secondary[href]:focus-visible:after,\nbutton.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--secondary[href]:active:after,\nbutton.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--secondary:hover,\na.fake-btn--secondary:visited {\n color: var(\n --btn-secondary-foreground-color,\n var(--color-foreground-accent)\n );\n}\na.fake-btn--secondary.fake-btn--destructive,\nbutton.btn--secondary.btn--destructive {\n background-color: var(\n --btn-secondary-destructive-background-color,\n transparent\n );\n border-color: var(\n --btn-secondary-destructive-border-color,\n var(--color-border-attention)\n );\n color: var(\n --btn-secondary-destructive-foreground-color,\n var(--color-foreground-attention)\n );\n}\nbutton.btn--secondary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #f39fb0;\n --color-spinner-icon-foreground: #e0103a;\n}\nbutton.btn--secondary[aria-disabled=\"true\"],\nbutton.btn--secondary[disabled] {\n background-color: var(\n --btn-secondary-disabled-background-color,\n var(--color-background-primary)\n );\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\nbutton.btn--secondary[aria-disabled=\"true\"] svg.icon,\nbutton.btn--secondary[disabled] svg.icon {\n fill: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\na.fake-btn--secondary:not([href]),\na.fake-btn--secondary[aria-disabled=\"true\"] {\n border-color: var(\n --btn-secondary-disabled-border-color,\n var(--color-background-disabled)\n );\n color: var(\n --btn-secondary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n border-color: var(--btn-tertiary-border-color, var(--color-border-medium));\n transition: all var(--motion-duration-short-3)\n var(--motion-easing-quick-enter);\n}\na.fake-btn--tertiary:active,\nbutton.btn--tertiary:active {\n transform: scale(0.97);\n}\na.fake-btn--tertiary,\nbutton.btn--tertiary {\n overflow: hidden;\n position: relative;\n}\na.fake-btn--tertiary:after,\nbutton.btn--tertiary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--tertiary[href]:hover:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--tertiary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.fake-btn--tertiary[href]:focus-visible:after,\nbutton.btn--tertiary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.btn--tertiary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--tertiary[href]:active:after,\nbutton.btn--tertiary:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--tertiary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.fake-btn--tertiary:not([href]),\na.fake-btn--tertiary[aria-disabled=\"true\"],\nbutton.btn--tertiary[aria-disabled=\"true\"]:not(\n [aria-live=\"polite\"][aria-disabled=\"true\"]\n ),\nbutton.btn--tertiary[disabled] {\n border-color: var(\n --expand-btn-disabled-border-color,\n var(--color-border-disabled)\n );\n color: var(\n --btn-tertiary-disabled-foreground-color,\n var(--color-background-disabled)\n );\n}\na.fake-btn--tertiary.fake-btn--destructive,\nbutton.btn--tertiary.btn--destructive {\n border-color: var(\n --btn-tertiary-destructive-foreground-color,\n var(--color-border-subtle)\n );\n}\nbutton.btn--tertiary.btn--destructive[aria-disabled=\"true\"],\nbutton.btn--tertiary.btn--destructive[disabled] {\n color: var(\n --btn-tertiary-destructive-disabled-foreground-color,\n var(--color-foreground-disabled)\n );\n}\nbutton.btn--tertiary.btn--destructive .progress-spinner {\n --color-spinner-icon-background: #ee9aab;\n --color-spinner-icon-foreground: #e0103a;\n}\na.fake-btn--large,\nbutton.btn--large {\n border-radius: var(--btn-border-radius, 24px);\n font-size: var(--font-size-medium);\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--small,\nbutton.btn--small {\n border-radius: var(--btn-border-radius, 16px);\n font-size: var(--font-size-body);\n min-height: 32px;\n padding: 0 16px;\n}\na.fake-btn--form,\nbutton.btn--form {\n border-color: inherit;\n border-radius: var(--expand-btn-border-radius, var(--border-radius-50));\n max-width: 100%;\n overflow: hidden;\n position: relative;\n}\na.fake-btn--form:after,\nbutton.btn--form:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.fake-btn--form[href]:hover:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.btn--form[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.fake-btn--form[href]:focus-visible:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.btn--form[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.fake-btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\na.fake-btn--form[href]:active:after,\nbutton.btn--form:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.btn--form[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.btn--form.btn--large {\n padding: 0 20px;\n}\nbutton.btn--form.btn--small {\n padding: 0 16px;\n}\na.fake-btn--transparent,\na.fake-btn--transparent:focus,\na.fake-btn--transparent:hover,\nbutton.btn--transparent,\nbutton.btn--transparent:focus,\nbutton.btn--transparent:hover {\n background-color: initial;\n}\na.fake-btn--large-fixed-height,\nbutton.btn--large-fixed-height {\n height: 48px;\n min-height: 48px;\n}\na.fake-btn--truncated,\na.fake-btn--truncated span,\nbutton.btn--truncated,\nbutton.btn--truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--large-truncated,\nbutton.btn--large-truncated {\n font-size: var(--font-size-medium);\n height: 48px;\n min-height: 48px;\n padding: 0 20px;\n}\na.fake-btn--large-truncated,\na.fake-btn--large-truncated span,\nbutton.btn--large-truncated,\nbutton.btn--large-truncated span {\n line-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.fake-btn--split-start,\nbutton.btn--split-start {\n border-radius: 24px 0 0 24px;\n}\na.fake-btn--split-end,\nbutton.btn--split-end {\n border-radius: 0 24px 24px 0;\n margin-left: -1px;\n min-width: 40px;\n padding-left: 8px;\n padding-right: 8px;\n}\na.fake-btn.fake-btn--primary.fake-btn--split-end,\na.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\na.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\nbutton.btn.btn--primary.btn--split-end,\nbutton.btn.btn--primary.btn--split-end:focus,\nbutton.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-split-color,\n var(--color-background-primary)\n );\n}\nbutton.btn--floating-label {\n padding-bottom: 0;\n padding-top: 0;\n}\nbutton.btn--floating-label .btn__text {\n min-height: 19px;\n padding-bottom: 2px;\n padding-top: 17px;\n}\nbutton.btn--floating-label .btn__floating-label {\n align-self: flex-start;\n display: inline-block;\n overflow: hidden;\n padding-bottom: 2px;\n padding-top: 17px;\n pointer-events: none;\n position: absolute;\n text-align: left;\n text-overflow: ellipsis;\n transform: scale(0.75) translateY(-18px);\n transform-origin: left;\n white-space: nowrap;\n width: calc(100% - 24px);\n z-index: 1;\n}\nbutton.btn--floating-label .btn__floating-label--animate {\n transition:\n transform 0.3s ease,\n bottom 0.3s ease;\n}\nbutton.btn--floating-label .btn__floating-label--inline {\n font-size: 0.875rem;\n position: unset;\n transform: translateY(-6px);\n}\n[dir=\"rtl\"] a.fake-btn--split-start,\n[dir=\"rtl\"] button.btn--split-start {\n border-radius: 0 24px 24px 0;\n}\n[dir=\"rtl\"] a.fake-btn--split-end,\n[dir=\"rtl\"] button.btn--split-end {\n border-radius: 24px 0 0 24px;\n margin-left: inherit;\n margin-right: -1px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--tertiary.fake-btn--split-end,\n[dir=\"rtl\"] button.btn.btn--tertiary.btn--split-end {\n margin-right: -2px;\n}\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:focus,\n[dir=\"rtl\"] a.fake-btn.fake-btn--primary.fake-btn--split-end:hover,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:focus,\n[dir=\"rtl\"] button.btn.btn--primary.btn--split-end:hover {\n border-left-color: var(\n --btn-primary-border-color,\n var(--color-border-accent)\n );\n border-right-color: var(\n --primary-border-split-color,\n var(--color-border-subtle)\n );\n}\n",":root {\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\na.icon-link {\n align-items: center;\n display: inline-flex;\n}\na.icon-link > svg {\n margin: 0 auto;\n}\na.icon-link,\nbutton.icon-btn {\n overflow: hidden;\n position: relative;\n}\na.icon-link:after,\nbutton.icon-btn:after {\n background-color: var(--color-state-layer-neutral);\n border-radius: 50px;\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link[href]:hover:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):hover:after,\nbutton.icon-btn[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\na.icon-link[href]:focus-visible:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):focus-visible:after,\nbutton.icon-btn[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\na.icon-link:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link[href]:active:after,\nbutton.icon-btn:not([disabled], [aria-disabled=\"true\"]):active:after,\nbutton.icon-btn[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\na.icon-link,\nbutton.icon-btn {\n align-items: center;\n background-color: var(--color-background-secondary);\n border: 2px solid transparent;\n border-radius: 50px;\n box-sizing: border-box;\n display: inline-flex;\n font-family: inherit;\n height: 40px;\n justify-content: center;\n margin: 0;\n padding: 0;\n vertical-align: text-bottom;\n width: 40px;\n}\na.icon-link > svg,\nbutton.icon-btn > svg {\n fill: var(--color-foreground-primary);\n max-width: 75%;\n position: relative;\n}\na.icon-link:not(:focus-visible),\nbutton.icon-btn:not(:focus-visible) {\n outline: none;\n}\na.icon-link.icon-link--primary,\nbutton.icon-btn.icon-btn--primary {\n background-color: var(--color-background-accent);\n border-color: var(--color-border-accent);\n color: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary > svg,\nbutton.icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--secondary > svg,\nbutton.icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--small .progress-spinner,\nbutton.icon-btn.icon-btn--small .progress-spinner {\n height: 20px;\n width: 20px;\n}\na.icon-link.icon-link--transparent > svg,\nbutton.icon-btn.icon-btn--transparent > svg {\n max-width: 100%;\n}\na.icon-link.icon-link--small,\nbutton.icon-btn.icon-btn--small {\n height: 32px;\n width: 32px;\n}\na.icon-link.icon-link--large,\nbutton.icon-btn.icon-btn--large {\n height: 48px;\n width: 48px;\n}\na.icon-link--transparent,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):active:after,\na.icon-link--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\na.icon-link--transparent:not([disabled], [aria-disabled=\"true\"]):hover:after,\na.icon-link--transparent[href]:active:after,\na.icon-link--transparent[href]:focus-visible:after,\na.icon-link--transparent[href]:hover:after,\nbutton.icon-btn--transparent,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn--transparent:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn--transparent[href]:active:after,\nbutton.icon-btn--transparent[href]:focus-visible:after,\nbutton.icon-btn--transparent[href]:hover:after {\n background-color: initial;\n}\na.icon-link:visited > svg {\n fill: var(--color-foreground-primary);\n}\na:not([href]).icon-link > svg,\na[aria-disabled=\"true\"].icon-link > svg,\nbutton[aria-disabled=\"true\"].icon-btn > svg,\nbutton[disabled].icon-btn > svg {\n background-color: initial;\n fill: var(--color-background-disabled);\n}\na:not([href]).icon-link:focus > svg,\na:not([href]).icon-link:hover > svg,\na[aria-disabled=\"true\"].icon-link:focus > svg,\na[aria-disabled=\"true\"].icon-link:hover > svg,\nbutton[aria-disabled=\"true\"].icon-btn:focus > svg,\nbutton[aria-disabled=\"true\"].icon-btn:hover > svg,\nbutton[disabled].icon-btn:focus > svg,\nbutton[disabled].icon-btn:hover > svg {\n fill: var(--color-background-disabled);\n}\na.icon-link:visited:focus > svg,\na.icon-link:visited:hover > svg {\n fill: var(--color-foreground-primary);\n}\na.icon-link.icon-link--primary:visited > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link--badged,\nbutton.icon-btn--badged {\n overflow: visible;\n position: relative;\n}\na.icon-link--badged .badge,\nbutton.icon-btn--badged .badge {\n left: 24px;\n pointer-events: none;\n position: absolute;\n top: -12px;\n z-index: 1;\n}\na.icon-link > svg.icon--confirmation-filled-16,\na.icon-link > svg.icon--confirmation-filled-16:hover,\na.icon-link > svg.icon--confirmation-filled-24,\na.icon-link > svg.icon--confirmation-filled-24:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-16,\nbutton.icon-btn > svg.icon--confirmation-filled-16:hover,\nbutton.icon-btn > svg.icon--confirmation-filled-24,\nbutton.icon-btn > svg.icon--confirmation-filled-24:hover {\n fill: var(--color-foreground-success);\n}\na.icon-link > svg.icon--attention-filled-16,\na.icon-link > svg.icon--attention-filled-16:hover,\na.icon-link > svg.icon--attention-filled-24,\na.icon-link > svg.icon--attention-filled-24:hover,\nbutton.icon-btn > svg.icon--attention-filled-16,\nbutton.icon-btn > svg.icon--attention-filled-16:hover,\nbutton.icon-btn > svg.icon--attention-filled-24,\nbutton.icon-btn > svg.icon--attention-filled-24:hover {\n fill: var(--color-foreground-attention);\n}\na.icon-link > svg.icon--information-filled-16,\na.icon-link > svg.icon--information-filled-16:hover,\na.icon-link > svg.icon--information-filled-24,\na.icon-link > svg.icon--information-filled-24:hover,\nbutton.icon-btn > svg.icon--information-filled-16,\nbutton.icon-btn > svg.icon--information-filled-16:hover,\nbutton.icon-btn > svg.icon--information-filled-24,\nbutton.icon-btn > svg.icon--information-filled-24:hover {\n fill: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary,\na.icon-link.icon-link--secondary,\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--primary,\nbutton.icon-btn.icon-btn--secondary,\nbutton.icon-btn.icon-btn--tertiary {\n border-width: 1px;\n}\na:not([href]).icon-link.icon-link--primary,\na[aria-disabled=\"true\"].icon-link.icon-link--primary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary,\nbutton[disabled].icon-btn.icon-btn--primary {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-link--primary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--primary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--primary > svg,\nbutton[disabled].icon-btn.icon-btn--primary > svg {\n fill: var(--color-foreground-on-accent);\n}\na.icon-link.icon-link--primary .progress-spinner,\nbutton.icon-btn.icon-btn--primary .progress-spinner {\n --color-spinner-icon-background: var(--color-background-primary);\n --color-spinner-icon-foreground: #8fa3f8;\n}\na.icon-link.icon-link--secondary,\nbutton.icon-btn.icon-btn--secondary {\n background-color: initial;\n border-color: var(--color-border-accent);\n color: var(--color-foreground-accent);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):focus,\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):hover,\nbutton.icon-btn.icon-btn--primary:not([disabled], [aria-disabled=\"true\"]):focus,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover {\n background-blend-mode: multiply;\n filter: brightness(96%);\n}\na.icon-link.icon-link--primary:not([disabled], [aria-disabled=\"true\"]):active,\nbutton.icon-btn.icon-btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active {\n filter: brightness(92%);\n}\na.icon-link.icon-link--secondary .progress-spinner,\na.icon-link.icon-link--tertiary .progress-spinner,\nbutton.icon-btn.icon-btn--secondary .progress-spinner,\nbutton.icon-btn.icon-btn--tertiary .progress-spinner {\n --color-spinner-icon-foreground: #3665f366;\n}\na:not([href]).icon-link.icon-link--secondary,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary,\nbutton[disabled].icon-btn.icon-btn--secondary {\n border-color: var(--color-border-disabled);\n}\na:not([href]).icon-link.icon-blinktn--secondary > svg,\na[aria-disabled=\"true\"].icon-link.icon-link--secondary > svg,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--secondary > svg,\nbutton[disabled].icon-btn.icon-btn--secondary > svg {\n fill: var(--color-foreground-disabled);\n}\na.icon-link.icon-link--tertiary,\nbutton.icon-btn.icon-btn--tertiary {\n background-color: initial;\n border-color: var(--color-border-medium);\n color: var(--color-foreground-accent);\n}\na:not([href]).icon-link.icon-link--tertiary,\na[aria-disabled=\"true\"].icon-link.icon-link--tertiary,\nbutton[aria-disabled=\"true\"].icon-btn.icon-btn--tertiary,\nbutton[disabled].icon-btn.icon-btn--tertiary {\n border-color: var(--color-border-disabled);\n}\n",":root {\n --dialog-scrim-color-hide: rgb(17 24 32 / 0);\n --dialog-scrim-color-show: rgb(17 24 32 / 0.7);\n --dialog-lightbox-max-width: 616px;\n --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);\n --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);\n}\n.toast-dialog {\n background-color: var(--color-background-accent);\n border-top-left-radius: var(--border-radius-100);\n border-top-right-radius: var(--border-radius-100);\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);\n inset: auto 0 0;\n max-height: 40vh;\n min-width: 320px;\n position: fixed;\n transform: translateY(0);\n width: 100vw;\n will-change: opacity, transform;\n z-index: 2;\n}\n.toast-dialog,\n.toast-dialog a {\n color: var(--color-foreground-on-success);\n}\n.toast-dialog a:focus {\n outline: 1px auto currentColor;\n}\n.toast-dialog--transition {\n transition:\n opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,\n transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;\n}\n.toast-dialog--hide-init,\n.toast-dialog--show {\n display: block;\n opacity: 1;\n transform: translateY(0);\n}\n.toast-dialog--hide,\n.toast-dialog--show-init {\n display: block;\n opacity: 0;\n transform: translateY(110%);\n}\n.toast-dialog__window {\n padding: var(--spacing-100) var(--spacing-200) var(--spacing-200);\n}\n.toast-dialog__header {\n align-items: center;\n display: flex;\n}\n.toast-dialog__header h2,\n.toast-dialog__title {\n margin: 0;\n}\nbutton.icon-btn.toast-dialog__close {\n align-self: flex-start;\n border: 0;\n color: var(--color-foreground-on-success);\n flex-shrink: 0;\n margin-inline-start: auto;\n overflow: hidden;\n padding: 0;\n position: relative;\n}\nbutton.icon-btn.toast-dialog__close:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):hover:after,\nbutton.icon-btn.toast-dialog__close[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\nbutton.icon-btn.toast-dialog__close[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\nbutton.icon-btn.toast-dialog__close:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):active:after,\nbutton.icon-btn.toast-dialog__close[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\nbutton.icon-btn.toast-dialog__close:focus {\n outline: 2px solid var(--color-foreground-on-success);\n}\nbutton.icon-btn.toast-dialog__close > svg {\n fill: currentColor;\n}\n.toast-dialog__footer {\n display: flex;\n justify-content: flex-end;\n}\n.toast-dialog__footer button:first-letter {\n text-decoration: underline;\n}\n.toast-dialog__footer button.btn--primary,\n.toast-dialog__footer button.btn--secondary {\n overflow: hidden;\n position: relative;\n}\n.toast-dialog__footer button.btn--primary:after,\n.toast-dialog__footer button.btn--secondary:after {\n background-color: var(--color-state-layer-neutral);\n content: \"\";\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n.toast-dialog__footer\n button.btn--primary:not([disabled], [aria-disabled=\"true\"]):hover:after,\n.toast-dialog__footer button.btn--primary[href]:hover:after,\n.toast-dialog__footer\n button.btn--secondary:not([disabled], [aria-disabled=\"true\"]):hover:after,\n.toast-dialog__footer button.btn--secondary[href]:hover:after {\n background-color: var(--color-state-layer-hover);\n}\n.toast-dialog__footer\n button.btn--primary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\n.toast-dialog__footer button.btn--primary[href]:focus-visible:after,\n.toast-dialog__footer\n button.btn--secondary:not(\n [disabled],\n [aria-disabled=\"true\"]\n ):focus-visible:after,\n.toast-dialog__footer button.btn--secondary[href]:focus-visible:after {\n background-color: var(--color-state-layer-focus);\n}\n.toast-dialog__footer\n button.btn--primary:not([disabled], [aria-disabled=\"true\"]):active:after,\n.toast-dialog__footer button.btn--primary[href]:active:after,\n.toast-dialog__footer\n button.btn--secondary:not([disabled], [aria-disabled=\"true\"]):active:after,\n.toast-dialog__footer button.btn--secondary[href]:active:after {\n background-color: var(--color-state-layer-pressed);\n}\n.toast-dialog__footer button.btn--primary,\n.toast-dialog__footer button.btn--secondary {\n border-color: var(--color-foreground-on-accent);\n border-style: solid;\n border-width: 1px;\n outline-offset: 2px;\n}\n.toast-dialog__footer button.btn--primary {\n background-color: var(--color-background-primary);\n color: var(--color-foreground-accent);\n}\n.toast-dialog__footer button.btn--secondary {\n background-color: initial;\n color: var(--color-background-primary);\n font-weight: 700;\n margin-inline-end: var(--spacing-100);\n}\n.toast-dialog__footer button.btn--primary:focus,\n.toast-dialog__footer button.btn--secondary:focus {\n outline: 2px solid var(--color-foreground-on-success);\n}\n@media (min-width: 512px) {\n .toast-dialog {\n border-radius: var(--border-radius-100);\n bottom: var(--spacing-200);\n left: var(--spacing-200);\n max-width: 480px;\n width: auto;\n }\n .toast-dialog__window {\n padding: var(--spacing-200) var(--spacing-300) var(--spacing-300);\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/docs/ui/makeup-toast-dialog/index.html b/docs/ui/makeup-toast-dialog/index.html index dc710f8f..7c0f801c 100644 --- a/docs/ui/makeup-toast-dialog/index.html +++ b/docs/ui/makeup-toast-dialog/index.html @@ -2,60 +2,53 @@ makeup-toast-dialog + + + - -
                                      -
                                      -

                                      makeup-toast-dialog

                                      -

                                      Toast-Dialog is headless UI widget and does not come bundled with any CSS.

                                      -

                                      - This example is receiving its base styles from - eBay Skin. A subset of style properties are being - customized/themed via Skin's CSS Custom Properties. -

                                      -

                                      - This page was loaded with the dialog in an "open" state. To see examples of dialogs opened by button click, - visit the makeup-dialog-button page. -

                                      -
                                      -
                                      -
                                      -
                                      + +
                                      +
                                      diff --git a/docs/ui/makeup-toast-dialog/index.min.js b/docs/ui/makeup-toast-dialog/index.min.js index 18f34c79..9214e1e4 100644 --- a/docs/ui/makeup-toast-dialog/index.min.js +++ b/docs/ui/makeup-toast-dialog/index.min.js @@ -139,9 +139,8 @@ Object.defineProperty(exports, "__esModule", ({ })); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(__webpack_require__(4490)); -var screenreaderTrap = _interopRequireWildcard(__webpack_require__(8448)); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = __webpack_require__(4490); +var _makeupScreenreaderTrap = __webpack_require__(8448); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -164,6 +163,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -172,6 +176,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -179,7 +189,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -190,7 +200,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -206,8 +216,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -220,7 +230,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -229,11 +242,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/docs/ui/makeup-toast-dialog/index.min.js.map b/docs/ui/makeup-toast-dialog/index.min.js.map index 6aac7961..9e158df4 100644 --- a/docs/ui/makeup-toast-dialog/index.min.js.map +++ b/docs/ui/makeup-toast-dialog/index.min.js.map @@ -1 +1 @@ -{"version":3,"file":"makeup-toast-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,2CAA2C,mBAAO,CAAC,IAAsB;AACzE,+CAA+C,mBAAO,CAAC,IAA0B;AACjF,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC7Ga;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;UChDA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,IAAyB;AACjC,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/toast-dialog.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/toast-dialog/toast-dialog.css?81ab","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-toast-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-toast-dialog/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/toast-dialog/toast-dialog.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar keyboardTrap = _interopRequireWildcard(require(\"makeup-keyboard-trap\"));\nvar screenreaderTrap = _interopRequireWildcard(require(\"makeup-screenreader-trap\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n keyboardTrap.untrap(modalEl);\n screenreaderTrap.untrap(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = Object.assign({}, defaultOptions, options);\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n screenreaderTrap.trap(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n keyboardTrap.trap(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultToastOptions = {\n baseClass: \"toast-dialog\",\n closeButtonSelector: \".toast-dialog__close\",\n ctaButtonSelector: \".toast-dialog__cta\",\n transitionsModifier: \"transition\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultToastOptions, selectedOptions));\n }\n _show() {\n super._show();\n }\n _observeEvents() {\n super._observeEvents();\n this._ctaEl = this._el.querySelector(this._options.ctaButtonSelector);\n if (this._ctaEl) {\n this._onCtaClickListener = _onCtaButtonClick.bind(this);\n this._ctaEl.addEventListener(\"click\", this._onCtaClickListener);\n }\n }\n _unobserveEvents() {\n super._unobserveEvents();\n if (this._ctaEl) {\n this._ctaEl.removeEventListener(\"click\", this._onCtaClickListener);\n }\n }\n cta() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cta\"));\n }\n destroy() {\n super.destroy();\n this._onCtaClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onCtaButtonClick() {\n this.cta();\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/toast-dialog\");\nvar _makeupToastDialog = _interopRequireDefault(require(\"makeup-toast-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const ToastDialog = require('makeup-toast-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".toast-dialog\").forEach(function (el, i) {\n const widget = new _makeupToastDialog.default(el);\n console.log(widget, el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"makeup-toast-dialog/index.min.js","mappings":";;;;;;AAAA,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAA0B;;;;;;;;ACAlC,mBAAO,CAAC,IAAoC;;;;;;;;ACA5C,mBAAO,CAAC,IAAsC;;;;;;;;ACA9C,mBAAO,CAAC,IAAsB;AAC9B,mBAAO,CAAC,IAAuB;;;;;;;;ACD/B,mBAAO,CAAC,IAA+B;;;;;;;;ACAvC,mBAAO,CAAC,IAAgC;;;;;;;;;;ACAxC;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;;ACAA;;;;;;;;;ACAa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,aAAa;AACb,eAAe;AACf,0BAA0B,mBAAO,CAAC,IAAsB;AACxD,8BAA8B,mBAAO,CAAC,IAA0B;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,eAAe;AACf,YAAY;AACZ,cAAc;AACd,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,qCAAqC,iCAAiC;AACtE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;;;;;;;;ACrHa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,YAAY;AACZ,cAAc;AACd,mCAAmC,mBAAO,CAAC,IAAW;AACtD,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC;;AAElC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;AC5Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,oBAAoB;AACpB,mBAAmB;AACnB,8BAA8B;AAC9B;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;AChEa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,oCAAoC,mBAAO,CAAC,IAAc;AAC1D,+CAA+C,mBAAO,CAAC,IAAmB;AAC1E,yCAAyC,mBAAO,CAAC,IAAiB;AAClE,qCAAqC,iCAAiC;AACtE,yCAAyC,4EAA4E,oDAAoD,uCAAuC,gBAAgB,+BAA+B,4EAA4E,qBAAqB,+BAA+B,eAAe,wCAAwC,2JAA2J,WAAW;AAC5lB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,wBAAwB,IAAI,kCAAkC;AACxH;AACA;AACA;AACA;AACA,8BAA8B,wBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,wBAAwB;AAC7F,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC7Ia;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,aAAa;AACxB,WAAW,QAAQ;AACnB,WAAW,UAAU;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAAW,aAAa;AACxB,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,UAAU;AACrB,YAAY,UAAU;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,IAAI;AACJ,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AC1Ha;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;;;;;;;;ACnCa;;AAEb,8CAA6C;AAC7C;AACA,CAAC,EAAC;AACF,kBAAe;AACf,2CAA2C,mBAAO,CAAC,IAAe;AAClE,qCAAqC,iCAAiC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAe;AACf;AACA;AACA;;;;;;;UChDA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D,E;;;;;;;;ACNa;;AAEb,mBAAO,CAAC,IAAgB;AACxB,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,IAAmB;AAC3B,mBAAO,CAAC,GAAmB;AAC3B,mBAAO,CAAC,IAAwB;AAChC,mBAAO,CAAC,IAAyB;AACjC,gDAAgD,mBAAO,CAAC,IAAqB;AAC7E,qCAAqC,iCAAiC;AACtE;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH,E","sources":["webpack://root/./node_modules/@ebay/skin/button.js","webpack://root/./node_modules/@ebay/skin/global.js","webpack://root/./node_modules/@ebay/skin/icon-button.js","webpack://root/./node_modules/@ebay/skin/toast-dialog.js","webpack://root/./node_modules/@ebay/skin/tokens.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-core.js","webpack://root/./node_modules/@ebay/skin/tokens/evo-light.js","webpack://root/./docs/docs.css?378e","webpack://root/./node_modules/@ebay/skin/dist/button/button.css?9a44","webpack://root/./node_modules/@ebay/skin/dist/global/global.css?e001","webpack://root/./node_modules/@ebay/skin/dist/icon-button/icon-button.css?7a74","webpack://root/./node_modules/@ebay/skin/dist/toast-dialog/toast-dialog.css?81ab","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-core.css?7a96","webpack://root/./node_modules/@ebay/skin/dist/tokens/evo-light.css?9c33","webpack://root/./packages/core/makeup-modal/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-keyboard-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/index.js","webpack://root/./packages/core/makeup-modal/node_modules/makeup-screenreader-trap/dist/cjs/util.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/index.js","webpack://root/./packages/ui/makeup-dialog/dist/cjs/transition.js","webpack://root/./packages/ui/makeup-dialog/node_modules/makeup-focusables/dist/cjs/index.js","webpack://root/./packages/ui/makeup-toast-dialog/dist/cjs/index.js","webpack://root/webpack/bootstrap","webpack://root/webpack/runtime/make namespace object","webpack://root/./docs/ui/makeup-toast-dialog/index.compiled.js"],"sourcesContent":["require('./dist/button/button.css');\n","require('./dist/global/global.css');\n","require('./dist/icon-button/icon-button.css');\n","require('./dist/toast-dialog/toast-dialog.css');\n","require('./tokens/evo-core.js');\nrequire('./tokens/evo-light.js');\n","require('./../dist/tokens/evo-core.css');\n","require('./../dist/tokens/evo-light.css');\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.modal = modal;\nexports.unmodal = unmodal;\nvar _makeupKeyboardTrap = require(\"makeup-keyboard-trap\");\nvar _makeupScreenreaderTrap = require(\"makeup-screenreader-trap\");\nconst defaultOptions = {\n hoist: false,\n useHiddenProperty: false,\n wrap: false\n};\nconst tags = {\n SCRIPT: \"script\",\n LINK: \"link\"\n};\nlet modalEl;\nlet hoistedPlaceholderEl;\nlet inertContentEl;\nlet originalPositionIndexes = [];\nfunction isRootLevel(el) {\n return el.parentNode.tagName.toLowerCase() === \"body\";\n}\nfunction unhoist() {\n if (hoistedPlaceholderEl) {\n hoistedPlaceholderEl.replaceWith(modalEl);\n hoistedPlaceholderEl = null;\n }\n}\n\n// moves the modal element to document.body when it is nested deeper in the DOM.\n// a placeholder is inserted at the original location so unhoist() can restore it.\n// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors;\n// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings.\nfunction hoist() {\n if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) {\n hoistedPlaceholderEl = document.createElement(\"div\");\n hoistedPlaceholderEl.setAttribute(\"data-makeup-modal\", \"placeholder\");\n modalEl.parentElement.insertBefore(hoistedPlaceholderEl, modalEl);\n document.body.appendChild(modalEl);\n }\n}\n\n// collects all other body children (except the modal, scripts, and link tags) into a single\n// [data-makeup-modal=\"inert\"] container. unwrap() restores them to their original positions.\n// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert)\n// can be applied to it rather than to each sibling individually. designed to be used after hoist(),\n// which ensures the modal is already a direct body child before wrap() runs.\nfunction wrap() {\n if (!inertContentEl && isRootLevel(modalEl)) {\n inertContentEl = document.createElement(\"div\");\n inertContentEl.setAttribute(\"data-makeup-modal\", \"inert\");\n [...document.body.children].forEach((child, index) => {\n // checking for the script and link tags is necessary because moving them could cause issues.\n // for example, moving a script to the top of the body could freeze the page while the script loads.\n if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n inertContentEl.appendChild(child);\n originalPositionIndexes.push(index);\n }\n });\n document.body.prepend(inertContentEl);\n }\n}\nfunction unwrap() {\n if (inertContentEl) {\n [...inertContentEl.children].forEach(child => {\n if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) {\n const index = originalPositionIndexes.shift();\n if (index > document.body.children.length) {\n document.body.appendChild(child);\n } else {\n document.body.insertBefore(child, document.body.children[index + 1]);\n }\n }\n });\n inertContentEl.remove();\n inertContentEl = null;\n originalPositionIndexes = [];\n }\n}\nfunction unmodal() {\n if (modalEl) {\n (0, _makeupKeyboardTrap.untrap)(modalEl);\n (0, _makeupScreenreaderTrap.untrap)(modalEl);\n unwrap();\n unhoist();\n document.body.removeAttribute(\"data-makeup-modal\");\n modalEl.removeAttribute(\"data-makeup-modal\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-unmodal\", {\n bubbles: false\n }));\n modalEl = null;\n }\n return modalEl;\n}\nfunction modal(el, options) {\n const _options = {\n ...defaultOptions,\n ...options\n };\n unmodal();\n modalEl = el;\n if (_options.hoist) {\n hoist();\n }\n if (_options.wrap) {\n wrap();\n }\n (0, _makeupScreenreaderTrap.trap)(modalEl, options);\n\n // no need to create keyboard traps when inert content is using hidden property\n if (!_options.useHiddenProperty) {\n (0, _makeupKeyboardTrap.trap)(modalEl);\n }\n document.body.setAttribute(\"data-makeup-modal\", \"true\");\n modalEl.setAttribute(\"data-makeup-modal\", \"widget\");\n modalEl.dispatchEvent(new CustomEvent(\"makeup-modal\", {\n bubbles: false\n }));\n return modalEl;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.refresh = refresh;\nexports.trap = trap;\nexports.untrap = untrap;\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst _observer = typeof window !== \"undefined\" ? new MutationObserver(refresh) : null;\n\n// for the element that will be trapped\nlet trappedEl;\n\n// for the trap boundary/bumper elements\nlet topTrap;\nlet outerTrapBefore;\nlet innerTrapBefore;\nlet innerTrapAfter;\nlet outerTrapAfter;\nlet botTrap;\n\n// for the first and last focusable element inside the trap\nlet firstFocusableElement;\nlet lastFocusableElement;\nfunction createTrapBoundary() {\n const trapBoundary = document.createElement(\"div\");\n trapBoundary.setAttribute(\"aria-hidden\", \"true\");\n trapBoundary.setAttribute(\"tabindex\", \"0\");\n trapBoundary.className = \"keyboard-trap-boundary\";\n return trapBoundary;\n}\nfunction setFocusToFirstFocusableElement() {\n firstFocusableElement.focus();\n}\nfunction setFocusToLastFocusableElement() {\n lastFocusableElement.focus();\n}\nfunction createTraps() {\n topTrap = createTrapBoundary();\n outerTrapBefore = topTrap.cloneNode();\n innerTrapBefore = topTrap.cloneNode();\n innerTrapAfter = topTrap.cloneNode();\n outerTrapAfter = topTrap.cloneNode();\n botTrap = topTrap.cloneNode();\n topTrap.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapBefore.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n innerTrapBefore.addEventListener(\"focus\", setFocusToLastFocusableElement);\n innerTrapAfter.addEventListener(\"focus\", setFocusToFirstFocusableElement);\n outerTrapAfter.addEventListener(\"focus\", setFocusToLastFocusableElement);\n botTrap.addEventListener(\"focus\", setFocusToLastFocusableElement);\n}\nfunction untrap() {\n if (trappedEl) {\n topTrap = safeDetach(topTrap);\n outerTrapBefore = safeDetach(outerTrapBefore);\n innerTrapBefore = safeDetach(innerTrapBefore);\n innerTrapAfter = safeDetach(innerTrapAfter);\n outerTrapAfter = safeDetach(outerTrapAfter);\n botTrap = safeDetach(botTrap);\n trappedEl.classList.remove(\"keyboard-trap--active\");\n\n // let observers know the keyboard is no longer trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n _observer?.disconnect();\n }\n return trappedEl;\n}\nfunction safeDetach(el) {\n const parent = el.parentNode;\n return parent ? parent.removeChild(el) : el;\n}\nfunction trap(el) {\n if (!topTrap) {\n createTraps();\n } else {\n untrap();\n }\n trappedEl = el;\n\n // when bundled up with isomorphic components on the server, this code is run,\n // so we must check if 'document' is defined.\n const body = typeof document === \"undefined\" ? null : document.body;\n const focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n body.insertBefore(topTrap, body.childNodes[0]);\n trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);\n trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);\n trappedEl.appendChild(innerTrapAfter);\n trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);\n body.appendChild(botTrap);\n\n // let observers know the keyboard is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"keyboardTrap\", {\n bubbles: true\n }));\n trappedEl.classList.add(\"keyboard-trap--active\");\n _observer?.observe(el, {\n childList: true,\n subtree: true\n });\n return trappedEl;\n}\nfunction refresh() {\n if (topTrap && trappedEl) {\n let focusableElements = (0, _makeupFocusables.default)(trappedEl, true);\n focusableElements = focusableElements.filter(function (el) {\n return !el.classList.contains(\"keyboard-trap-boundary\");\n });\n firstFocusableElement = focusableElements[0];\n lastFocusableElement = focusableElements[focusableElements.length - 1];\n }\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.trap = trap;\nexports.untrap = untrap;\nvar util = _interopRequireWildcard(require(\"./util.js\"));\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\n// the main landmark\nlet mainEl;\n\n// the element that will be trapped\nlet trappedEl;\n\n// collection of elements that get 'dirtied' with aria-hidden attr or hidden prop\nlet dirtyObjects;\n\n// filter function for svg elements\nconst filterSvg = item => item.tagName.toLowerCase() !== \"svg\";\nfunction showElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"false\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", false);\n }\n return preparedElement;\n}\nfunction hideElementPrep(el, useHiddenProperty) {\n let preparedElement;\n if (useHiddenProperty === false) {\n preparedElement = prepareElement(el, \"aria-hidden\", \"true\");\n } else {\n preparedElement = prepareElement(el, \"hidden\", true);\n }\n return preparedElement;\n}\nfunction prepareElement(el, attributeName, dirtyValue) {\n const isProperty = typeof dirtyValue === \"boolean\";\n return {\n el,\n attributeName,\n cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),\n dirtyValue,\n isProperty\n };\n}\nfunction dirtyElement(preparedObj) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);\n }\n}\nfunction cleanElement(preparedObj) {\n if (preparedObj.cleanValue) {\n if (preparedObj.isProperty === true) {\n preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;\n } else {\n preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);\n }\n } else {\n preparedObj.el.removeAttribute(preparedObj.attributeName);\n }\n}\nfunction untrap() {\n if (trappedEl) {\n // restore 'dirtied' elements to their original state\n dirtyObjects.forEach(item => cleanElement(item));\n dirtyObjects = [];\n\n // 're-enable' the main landmark\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"main\");\n }\n\n // let observers know the screenreader is now untrapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderUntrap\", {\n bubbles: true\n }));\n trappedEl = null;\n }\n}\nconst defaultOptions = {\n useHiddenProperty: false\n};\nfunction trap(el, selectedOptions) {\n // ensure current trap is deactivated\n untrap();\n const options = Object.assign({}, defaultOptions, selectedOptions);\n\n // update the trapped el reference\n trappedEl = el;\n\n // update the main landmark reference\n mainEl = document.querySelector('main, [role=\"main\"]');\n\n // we must remove the main landmark to avoid issues on voiceover iOS\n if (mainEl) {\n mainEl.setAttribute(\"role\", \"presentation\");\n }\n\n // cache all ancestors, siblings & siblings of ancestors for trappedEl\n const ancestors = util.getAncestors(trappedEl);\n let siblings = util.getSiblings(trappedEl);\n let siblingsOfAncestors = util.getSiblingsOfAncestors(trappedEl);\n\n // if using hidden property, filter out SVG elements as they do not support this property\n if (options.useHiddenProperty === true) {\n siblings = siblings.filter(filterSvg);\n siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);\n }\n\n // prepare elements\n dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty)));\n\n // update DOM\n dirtyObjects.forEach(item => dirtyElement(item));\n\n // let observers know the screenreader is now trapped\n trappedEl.dispatchEvent(new CustomEvent(\"screenreaderTrap\", {\n bubbles: true\n }));\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.getAncestors = getAncestors;\nexports.getSiblings = getSiblings;\nexports.getSiblingsOfAncestors = getSiblingsOfAncestors;\n// filter function for ancestor elements\nconst filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"body\" && item.tagName.toLowerCase() !== \"html\";\n\n// filter function for sibling elements\nconst filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== \"script\";\n\n// reducer to flatten arrays\nconst flattenArrays = (a, b) => a.concat(b);\n\n// recursive function to get previous sibling nodes of given element\nfunction getPreviousSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const previousSibling = el.previousSibling;\n if (!previousSibling) {\n return siblings;\n }\n siblings.push(previousSibling);\n return getPreviousSiblings(previousSibling, siblings);\n}\n\n// recursive function to get next sibling nodes of given element\nfunction getNextSiblings(el) {\n let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextSibling = el.nextSibling;\n if (!nextSibling) {\n return siblings;\n }\n siblings.push(nextSibling);\n return getNextSiblings(nextSibling, siblings);\n}\n\n// returns all sibling element nodes of given element\nfunction getSiblings(el) {\n const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));\n return allSiblings.filter(filterSibling);\n}\n\n// recursive function to get all ancestor nodes of given element\nfunction getAllAncestors(el) {\n let ancestors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n const nextAncestor = el.parentNode;\n if (!nextAncestor) {\n return ancestors;\n }\n ancestors.push(nextAncestor);\n return getAllAncestors(nextAncestor, ancestors);\n}\n\n// get ancestor nodes of given element\nfunction getAncestors(el) {\n return getAllAncestors(el).filter(filterAncestor);\n}\n\n// get siblings of ancestors (i.e. aunts and uncles) of given el\nfunction getSiblingsOfAncestors(el) {\n return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []);\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar Modal = _interopRequireWildcard(require(\"makeup-modal\"));\nvar _makeupFocusables = _interopRequireDefault(require(\"makeup-focusables\"));\nvar _transition = _interopRequireDefault(require(\"./transition.js\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nfunction _interopRequireWildcard(e, t) { if (\"function\" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || \"object\" != typeof e && \"function\" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) \"default\" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }\nconst defaultDialogOptions = {\n baseClass: \"dialog\",\n closeButtonSelector: \".dialog__close\",\n focusManagementIndex: 0,\n modal: false,\n quickDismiss: true,\n transitionsModifier: \"mask-fade\"\n};\nclass _default {\n constructor(widgetEl, selectedOptions) {\n this._options = Object.assign({}, defaultDialogOptions, selectedOptions);\n this._el = widgetEl;\n if (this._options.modal === true) {\n this._el.setAttribute(\"aria-modal\", \"true\");\n }\n this._windowEl = this._el.querySelector(this._options.windowSelector);\n this._closeButtonEl = this._el.querySelector(this._options.closeButtonSelector);\n this._hasTransitions = this._el.classList.contains(`${this._options.baseClass}--${this._options.transitionsModifier}`);\n this._onCloseButtonClickListener = _onCloseButtonClick.bind(this);\n this._onKeyDownListener = _onKeyDown.bind(this);\n this._onOpenTransitionEndCallback = _onOpenTransitionEnd.bind(this);\n this._onCloseTransitionEndCallback = _onCloseTransitionEnd.bind(this);\n this._el.classList.add(`${this._options.baseClass}--js`);\n if (!this.hidden) {\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n this._observeEvents();\n }\n }\n get focusables() {\n return (0, _makeupFocusables.default)(this._windowEl);\n }\n get modal() {\n return this._el.getAttribute(\"aria-modal\") === \"true\";\n }\n get hidden() {\n return this._el.hidden;\n }\n open() {\n this._show();\n this._el.dispatchEvent(new CustomEvent(\"dialog-open\"));\n }\n close() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-close\"));\n }\n _show() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--show`, this._onOpenTransitionEndCallback);\n } else {\n if (this.modal) {\n setTimeout(() => _doModalFocusManagement(this), 50);\n }\n this._el.hidden = false;\n }\n this._observeEvents();\n }\n _hide() {\n if (this._hasTransitions) {\n if (this._cancelTransition) {\n this._cancelTransition();\n }\n this._cancelTransition = (0, _transition.default)(this._el, `${this._options.baseClass}--hide`, this._onCloseTransitionEndCallback);\n } else {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n }\n this._autoDismissTimeout = null;\n this._unobserveEvents();\n }\n _observeEvents() {\n document.addEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n _unobserveEvents() {\n this._el.removeEventListener(\"click\", this._onCloseButtonClickListener);\n document.removeEventListener(\"keydown\", this._onKeyDownListener);\n if (this._closeButtonEl) {\n this._closeButtonEl.addEventListener(\"click\", this._onCloseButtonClickListener);\n }\n }\n destroy() {\n this._destroyed = true;\n this._unobserveEvents();\n this._onCloseButtonClickListener = null;\n this._onKeyDownListener = null;\n this._onOpenTransitionEndCallback = null;\n this._onCloseTransitionEndCallback = null;\n this._autoDismissTimeout = null;\n }\n}\nexports.default = _default;\nfunction _doModalFocusManagement(dialogWidget) {\n const autoFocusEl = dialogWidget._el.querySelector(\"[autofocus]\");\n if (autoFocusEl) {\n autoFocusEl.focus();\n } else {\n dialogWidget.focusables[dialogWidget._options.focusManagementIndex].focus();\n }\n Modal.modal(dialogWidget._el);\n}\nfunction _onOpenTransitionEnd() {\n this._el.hidden = false;\n this._cancelTransition = undefined;\n if (this.modal) {\n _doModalFocusManagement(this);\n }\n}\nfunction _onCloseTransitionEnd() {\n if (this.modal) {\n Modal.unmodal();\n }\n this._el.hidden = true;\n this._cancelTransition = undefined;\n}\nfunction _onKeyDown(e) {\n if (this._options.quickDismiss === true && e.keyCode === 27) {\n this.close();\n }\n}\nfunction _onCloseButtonClick() {\n this.close();\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = transition;\n/**\n * Author: Mr D.Piercey\n */\nconst TRANSITION_END = \"transitionend\";\nconst IMMEDIATE_TRANSITION_REG = /0m?s(?:, )?/g;\n/**\n * Applies a primer `-init` class before starting a transition\n * to make transitioning properties that are not animatable easier.\n *\n * **Order**\n * 1. Add class: \"$name-init\"\n * 2. Wait one frame.\n * 3. Remove class \"$name-init\".\n * 4. Add class \"$name\".\n * 5. Wait for animation to finish.\n * 6. Remove class \"$name\".\n *\n * @param {HTMLElement} el The root element that contains the animation.\n * @param {string} name The base className to use for the transition.\n * @param {Function} cb A callback called after the transition as ended.\n */\n\nfunction transition(el, baseClass, cb) {\n let ended;\n let pending;\n let ran = 0;\n const classList = el.classList;\n const initClass = \"\".concat(baseClass, \"-init\");\n let cancelFrame = nextFrame(function () {\n el.addEventListener(TRANSITION_END, listener, true);\n classList.add(baseClass);\n classList.remove(initClass);\n pending = getTransitionCount(el);\n cancelFrame = undefined;\n if (pending === 0) {\n cancel();\n }\n });\n classList.add(initClass);\n return cancel;\n /**\n * Cancels the current transition and resets the className.\n */\n\n function cancel() {\n if (ended) {\n return;\n }\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n if (cancelFrame) {\n cancelFrame();\n classList.remove(initClass);\n } else {\n classList.remove(baseClass);\n }\n }\n /**\n * Handles a single transition end event.\n * Once all child transitions have ended the overall animation is completed.\n */\n\n function listener() {\n if (++ran === pending) {\n ended = true;\n el.removeEventListener(TRANSITION_END, listener, true);\n classList.remove(baseClass);\n if (cb) {\n cb();\n }\n }\n }\n}\n\n/**\n * Walks the tree of an element and counts how many transitions have been applied.\n *\n * @param {HTMLElement} el\n * @return {number}\n */\n\nfunction getTransitionCount(el) {\n let count = window.getComputedStyle(el).transitionDuration.replace(IMMEDIATE_TRANSITION_REG, \"\") ? 1 : 0;\n let child = el.firstElementChild;\n while (child) {\n count += getTransitionCount(child);\n child = child.nextElementSibling;\n }\n return count;\n}\n/**\n * Runs a function during the next animation frame.\n *\n * @param {function} fn a function to run on the next animation frame.\n * @return {function} a function to cancel the callback.\n */\n\nfunction nextFrame(fn) {\n let frame;\n let cancelFrame;\n if (window.requestAnimationFrame) {\n frame = requestAnimationFrame(function () {\n frame = requestAnimationFrame(fn);\n });\n cancelFrame = cancelAnimationFrame;\n } else {\n frame = setTimeout(fn, 26); // 16ms to simulate RAF, 10ms to ensure called after the frame.\n\n cancelFrame = clearTimeout;\n }\n return function () {\n if (frame) {\n cancelFrame(frame);\n frame = undefined;\n }\n };\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = _default;\nconst focusableElList = [\"a[href]\", \"area[href]\", \"button:not([disabled])\", \"embed\", \"iframe\", \"input:not([disabled])\", \"object\", \"select:not([disabled])\", \"textarea:not([disabled])\", \"*[tabindex]\", \"*[contenteditable]\"];\nconst focusableElSelector = focusableElList.join();\nfunction _default(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let callback = arguments.length > 2 ? arguments[2] : undefined;\n if (callback) {\n const request = requestAnimationFrame(() => {\n callback(getFocusables(el, keyboardOnly));\n });\n return () => {\n cancelAnimationFrame(request);\n };\n }\n return getFocusables(el, keyboardOnly);\n}\nfunction getFocusables(el) {\n let keyboardOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));\n\n // filter out elements with display: none or nested in a display: none parent\n focusableEls = focusableEls.filter(function (focusableEl) {\n return !!(focusableEl.offsetWidth || focusableEl.offsetHeight || focusableEl.getClientRects().length);\n });\n if (keyboardOnly === true) {\n focusableEls = focusableEls.filter(function (focusableEl) {\n return focusableEl.getAttribute(\"tabindex\") !== \"-1\";\n });\n }\n return focusableEls;\n}\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _makeupDialog = _interopRequireDefault(require(\"makeup-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\nconst defaultToastOptions = {\n baseClass: \"toast-dialog\",\n closeButtonSelector: \".toast-dialog__close\",\n ctaButtonSelector: \".toast-dialog__cta\",\n transitionsModifier: \"transition\"\n};\nclass _default extends _makeupDialog.default {\n constructor(el) {\n let selectedOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n super(el, Object.assign({}, defaultToastOptions, selectedOptions));\n }\n _show() {\n super._show();\n }\n _observeEvents() {\n super._observeEvents();\n this._ctaEl = this._el.querySelector(this._options.ctaButtonSelector);\n if (this._ctaEl) {\n this._onCtaClickListener = _onCtaButtonClick.bind(this);\n this._ctaEl.addEventListener(\"click\", this._onCtaClickListener);\n }\n }\n _unobserveEvents() {\n super._unobserveEvents();\n if (this._ctaEl) {\n this._ctaEl.removeEventListener(\"click\", this._onCtaClickListener);\n }\n }\n cta() {\n this._hide();\n this._el.dispatchEvent(new CustomEvent(\"dialog-cta\"));\n }\n destroy() {\n super.destroy();\n this._onCtaClickListener = null;\n }\n}\nexports.default = _default;\nfunction _onCtaButtonClick() {\n this.cta();\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\n\nrequire(\"../../docs.css\");\nrequire(\"@ebay/skin/tokens\");\nrequire(\"@ebay/skin/global\");\nrequire(\"@ebay/skin/button\");\nrequire(\"@ebay/skin/icon-button\");\nrequire(\"@ebay/skin/toast-dialog\");\nvar _makeupToastDialog = _interopRequireDefault(require(\"makeup-toast-dialog\"));\nfunction _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }\n// REQUIRE\n// const ToastDialog = require('makeup-toast-dialog').default;\n\n// IMPORT\n\nwindow.onload = function () {\n document.querySelectorAll(\".toast-dialog\").forEach(function (el, i) {\n const widget = new _makeupToastDialog.default(el);\n console.log(widget, el);\n });\n};"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/eslint.config.mjs b/eslint.config.mjs index 6e6f57af..8ed04798 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -5,7 +5,7 @@ export default [ js.configs.recommended, { languageOptions: { - ecmaVersion: 2020, + ecmaVersion: 2022, sourceType: "module", globals: { ...globals.browser, diff --git a/package.json b/package.json index 6f70415f..e8ae7c1a 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "format": "prettier --write .", "lint": "eslint packages/*/*/src/*.js", "server": "browser-sync start --no-open -s --ss docs --index docs/index.html --files docs/**/index.html docs/**/index.min.js", - "start": "npx nx daemon --start && npm run build && run-p server watch", + "serve:playwright": "npm run build && npm run server", + "start": "npm run build && run-p server watch", "test": "npm run test:unit && npm run test:browser", "test:unit": "vitest run", "test:coverage": "vitest run --coverage", diff --git a/packages/core/makeup-active-descendant/README.md b/packages/core/makeup-active-descendant/README.md index 5cc3da97..829a8ce5 100644 --- a/packages/core/makeup-active-descendant/README.md +++ b/packages/core/makeup-active-descendant/README.md @@ -107,7 +107,7 @@ const widgetEl = document.querySelector(".widget"); const focusEl = widgetEl.querySelector("ul"); // in this scenario the container element is the same as the focusable element -const containerEl = focusEL; +const containerEl = focusEl; // create an activeDescendant widget instance on the element const activeDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li"); @@ -170,6 +170,7 @@ Use CSS to style the active descendant however you wish: - `autoScroll` : Specify true to scroll the container as activeDescendant changes (default: false) - `axis` : specify 'x' for left/right arrow keys, 'y' for up/down arrow keys, or 'both' (default: 'both') - `ignoreByDelegateSelector`: CSS selector of descendant elements that will be ignored by the navigation emitters key event delegation (i.e. these elements will _not_ operate the active descendant) (default: null) +- `wrap` : specify whether arrow keys should wrap/loop (default: false) ## Custom Events @@ -186,20 +187,19 @@ Use CSS to style the active descendant however you wish: - detail - fromIndex - toIndex +- `activeDescendantMutation` + - detail + - fromIndex + - toIndex ## Properties -- `navigableItems`: returns navigable subset of matchingItems (e.g. non-hidden & non-disabled items) -- `index`: the index position of the current active descendant. A no-op on aria-disabled or hidden items. -- `matchingItems`: returns all items that match item selector -- `nonEmittingElementSelector`: CSS selector of nested elements that will _not_ operate the navigation emitter. This is useful in a combobox + button scenario, where the nested button should not trigger navigationModelChange events (default: null) +- `items`: returns all items matching the item selector (live DOM query, includes hidden and disabled items) +- `index`: gets or sets the current active descendant index. A no-op on aria-disabled or hidden items. +- `currentItem`: returns the item element at the current index +- `wrap`: sets whether arrow keys should wrap/loop ## Methods - `destroy`: destroys all event listeners - `reset`: will force a reset to the value specified by `autoReset` - -## Dependencies - -- [makeup-navigation-emitter](https://github.com/makeup/makeup-js/tree/master/packages/core/makeup-navigation-emitter) -- [makeup-next-id](https://github.com/makeup/makeup-js/tree/master/packages/core/makeup-next-id) diff --git a/packages/core/makeup-active-descendant/dist/cjs/index.js b/packages/core/makeup-active-descendant/dist/cjs/index.js index a6dac875..e02ce363 100644 --- a/packages/core/makeup-active-descendant/dist/cjs/index.js +++ b/packages/core/makeup-active-descendant/dist/cjs/index.js @@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.createLinear = createLinear; -var NavigationEmitter = _interopRequireWildcard(require("makeup-navigation-emitter")); +var _makeupNavigationEmitter = require("makeup-navigation-emitter"); var _makeupNextId = _interopRequireDefault(require("makeup-next-id")); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } const defaultOptions = { activeDescendantClassName: "active-descendant", autoInit: "none", autoReset: "none", autoScroll: false, axis: "both", + ignoreByDelegateSelector: null, wrap: false }; function onModelInit(e) { @@ -54,7 +54,7 @@ function onModelChange(e) { function onModelReset(e) { const toIndex = e.detail.toIndex; const activeClassName = this._options.activeDescendantClassName; - this.items.forEach(function (el) { + this.items.forEach(el => { el.classList.remove(activeClassName); }); if (toIndex !== null && toIndex !== -1) { @@ -73,7 +73,7 @@ function onModelMutation(e) { toIndex } = e.detail; const activeDescendantClassName = this._options.activeDescendantClassName; - this.items.forEach(function (item, index) { + this.items.forEach((item, index) => { (0, _makeupNextId.default)(item); if (index !== toIndex) { item.classList.remove(activeDescendantClassName); @@ -107,7 +107,10 @@ class ActiveDescendant { class LinearActiveDescendant extends ActiveDescendant { constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) { super(el); - this._options = Object.assign({}, defaultOptions, selectedOptions); + this._options = { + ...defaultOptions, + ...selectedOptions + }; this._focusEl = focusEl; this._itemContainerEl = itemContainerEl; this._itemSelector = itemSelector; @@ -119,7 +122,7 @@ class LinearActiveDescendant extends ActiveDescendant { if (this._itemContainerEl !== this._focusEl) { focusEl.setAttribute("aria-owns", this._itemContainerEl.id); } - this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, { + this._navigationEmitter = (0, _makeupNavigationEmitter.createLinear)(el, itemSelector, { autoInit: this._options.autoInit, autoReset: this._options.autoReset, axis: this._options.axis, @@ -128,7 +131,7 @@ class LinearActiveDescendant extends ActiveDescendant { }); // ensure each item has an id - this.items.forEach(function (itemEl) { + this.items.forEach(itemEl => { (0, _makeupNextId.default)(itemEl); }); } diff --git a/packages/core/makeup-active-descendant/dist/mjs/index.js b/packages/core/makeup-active-descendant/dist/mjs/index.js index 78582f37..339da796 100644 --- a/packages/core/makeup-active-descendant/dist/mjs/index.js +++ b/packages/core/makeup-active-descendant/dist/mjs/index.js @@ -1,4 +1,4 @@ -import * as NavigationEmitter from "makeup-navigation-emitter"; +import { createLinear as createLinearEmitter } from "makeup-navigation-emitter"; import nextID from "makeup-next-id"; const defaultOptions = { activeDescendantClassName: "active-descendant", @@ -6,6 +6,7 @@ const defaultOptions = { autoReset: "none", autoScroll: false, axis: "both", + ignoreByDelegateSelector: null, wrap: false }; function onModelInit(e) { @@ -36,7 +37,7 @@ function onModelChange(e) { function onModelReset(e) { const toIndex = e.detail.toIndex; const activeClassName = this._options.activeDescendantClassName; - this.items.forEach(function(el) { + this.items.forEach((el) => { el.classList.remove(activeClassName); }); if (toIndex !== null && toIndex !== -1) { @@ -51,7 +52,7 @@ function onModelReset(e) { function onModelMutation(e) { const { toIndex } = e.detail; const activeDescendantClassName = this._options.activeDescendantClassName; - this.items.forEach(function(item, index) { + this.items.forEach((item, index) => { nextID(item); if (index !== toIndex) { item.classList.remove(activeDescendantClassName); @@ -83,7 +84,7 @@ class ActiveDescendant { class LinearActiveDescendant extends ActiveDescendant { constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) { super(el); - this._options = Object.assign({}, defaultOptions, selectedOptions); + this._options = { ...defaultOptions, ...selectedOptions }; this._focusEl = focusEl; this._itemContainerEl = itemContainerEl; this._itemSelector = itemSelector; @@ -91,14 +92,14 @@ class LinearActiveDescendant extends ActiveDescendant { if (this._itemContainerEl !== this._focusEl) { focusEl.setAttribute("aria-owns", this._itemContainerEl.id); } - this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, { + this._navigationEmitter = createLinearEmitter(el, itemSelector, { autoInit: this._options.autoInit, autoReset: this._options.autoReset, axis: this._options.axis, ignoreByDelegateSelector: this._options.ignoreByDelegateSelector, wrap: this._options.wrap }); - this.items.forEach(function(itemEl) { + this.items.forEach((itemEl) => { nextID(itemEl); }); } diff --git a/packages/core/makeup-active-descendant/src/index.js b/packages/core/makeup-active-descendant/src/index.js index 867962ed..50f6db51 100644 --- a/packages/core/makeup-active-descendant/src/index.js +++ b/packages/core/makeup-active-descendant/src/index.js @@ -1,6 +1,4 @@ -"use strict"; - -import * as NavigationEmitter from "makeup-navigation-emitter"; +import { createLinear as createLinearEmitter } from "makeup-navigation-emitter"; import nextID from "makeup-next-id"; const defaultOptions = { @@ -9,6 +7,7 @@ const defaultOptions = { autoReset: "none", autoScroll: false, axis: "both", + ignoreByDelegateSelector: null, wrap: false, }; @@ -49,7 +48,7 @@ function onModelReset(e) { const toIndex = e.detail.toIndex; const activeClassName = this._options.activeDescendantClassName; - this.items.forEach(function (el) { + this.items.forEach((el) => { el.classList.remove(activeClassName); }); @@ -68,7 +67,7 @@ function onModelMutation(e) { const { toIndex } = e.detail; const activeDescendantClassName = this._options.activeDescendantClassName; - this.items.forEach(function (item, index) { + this.items.forEach((item, index) => { nextID(item); if (index !== toIndex) { item.classList.remove(activeDescendantClassName); @@ -106,7 +105,7 @@ class LinearActiveDescendant extends ActiveDescendant { constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) { super(el); - this._options = Object.assign({}, defaultOptions, selectedOptions); + this._options = { ...defaultOptions, ...selectedOptions }; this._focusEl = focusEl; this._itemContainerEl = itemContainerEl; @@ -120,7 +119,7 @@ class LinearActiveDescendant extends ActiveDescendant { focusEl.setAttribute("aria-owns", this._itemContainerEl.id); } - this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, { + this._navigationEmitter = createLinearEmitter(el, itemSelector, { autoInit: this._options.autoInit, autoReset: this._options.autoReset, axis: this._options.axis, @@ -129,7 +128,7 @@ class LinearActiveDescendant extends ActiveDescendant { }); // ensure each item has an id - this.items.forEach(function (itemEl) { + this.items.forEach((itemEl) => { nextID(itemEl); }); } diff --git a/packages/core/makeup-active-descendant/test/index.js b/packages/core/makeup-active-descendant/test/index.js index 9cb6d124..b9fcc9d3 100644 --- a/packages/core/makeup-active-descendant/test/index.js +++ b/packages/core/makeup-active-descendant/test/index.js @@ -1,21 +1,18 @@ -import { describe, expect, beforeEach, afterEach, beforeAll, it } from "vitest"; -import sinon from "sinon"; -import * as ActiveDescendant from "../src/index.js"; +import { describe, expect, beforeEach, afterEach, beforeAll, it, vi } from "vitest"; +import { createLinear } from "../src/index.js"; -// const timeoutInterval = 500; +let widgetEl, focusEl, containerEl, testActiveDescendant, onActiveDescendantChange; -var widgetEl, focusEl, containerEl, testActiveDescendant, onActiveDescendantChange; - -function triggerArrowKeyPress(el, dir, num) { +const triggerArrowKeyPress = (el, dir, num) => { for (let i = 0; i < num; i++) { el.dispatchEvent(new CustomEvent(`arrow${dir}KeyDown`, { detail: { target: { tagName: "" } } })); } -} +}; /* BEGIN STATIC MODEL SIZE TESTS */ -describe("given a list of 3 visible items in programmatic relationship", function () { - beforeEach(function () { +describe("given a list of 3 visible items in programmatic relationship", () => { + beforeEach(() => { document.body.innerHTML = `
                                      @@ -28,22 +25,22 @@ describe("given a list of 3 visible items in programmatic relationship", functio `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li"); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li"); }); - it("model should have 3 items", function () { - expect(testActiveDescendant.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testActiveDescendant.items.length).toBe(3); }); }); }); -describe("given a list of 3 visible items in hierarchial relationship", function () { - beforeEach(function () { +describe("given a list of 3 visible items in hierarchial relationship", () => { + beforeEach(() => { document.body.innerHTML = `
                                        @@ -55,22 +52,22 @@ describe("given a list of 3 visible items in hierarchial relationship", function `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("ul"); containerEl = focusEl; - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li"); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li"); }); - it("model should have 3 items", function () { - expect(testActiveDescendant.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testActiveDescendant.items.length).toBe(3); }); }); }); -describe("given a list of 2 visible items, 1 hidden in programmatic relationship", function () { - beforeEach(function () { +describe("given a list of 2 visible items, 1 hidden in programmatic relationship", () => { + beforeEach(() => { document.body.innerHTML = `
                                        @@ -83,22 +80,22 @@ describe("given a list of 2 visible items, 1 hidden in programmatic relationship `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li"); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li"); }); - it("model should have 3 items", function () { - expect(testActiveDescendant.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testActiveDescendant.items.length).toBe(3); }); }); }); -describe("given a list of 2 visible items, 1 hidden in hierarchial relationship", function () { - beforeEach(function () { +describe("given a list of 2 visible items, 1 hidden in hierarchial relationship", () => { + beforeEach(() => { document.body.innerHTML = `
                                          @@ -110,22 +107,22 @@ describe("given a list of 2 visible items, 1 hidden in hierarchial relationship" `; }); - describe("when instantiated with hierarchial relationship", function () { - beforeEach(function () { + describe("when instantiated with hierarchial relationship", () => { + beforeEach(() => { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("ul"); containerEl = focusEl; - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li"); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li"); }); - it("model should have 3 items", function () { - expect(testActiveDescendant.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testActiveDescendant.items.length).toBe(3); }); }); }); -describe("given a list of 3 hidden items in programmatic relationship", function () { - beforeEach(function () { +describe("given a list of 3 hidden items in programmatic relationship", () => { + beforeEach(() => { document.body.innerHTML = `
                                          @@ -138,22 +135,22 @@ describe("given a list of 3 hidden items in programmatic relationship", function `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li"); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li"); }); - it("model should have 3 items", function () { - expect(testActiveDescendant.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testActiveDescendant.items.length).toBe(3); }); }); }); -describe("given a list of 3 hidden items in hierarchial relationship", function () { - beforeEach(function () { +describe("given a list of 3 hidden items in hierarchial relationship", () => { + beforeEach(() => { document.body.innerHTML = `
                                            @@ -165,16 +162,16 @@ describe("given a list of 3 hidden items in hierarchial relationship", function `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("ul"); containerEl = focusEl; - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li"); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li"); }); - it("model should have 3 items", function () { - expect(testActiveDescendant.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testActiveDescendant.items.length).toBe(3); }); }); }); @@ -182,8 +179,8 @@ describe("given a list of 3 hidden items in hierarchial relationship", function /* BEGIN ARROW KEY TESTS */ -describe("given 3 items with default options in programmatic relationship", function () { - function setup() { +describe("given 3 items with default options in programmatic relationship", () => { + const setup = () => { document.body.innerHTML = `
                                            @@ -198,103 +195,102 @@ describe("given 3 items with default options in programmatic relationship", func widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li"); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li"); - onActiveDescendantChange = sinon.spy(); + onActiveDescendantChange = vi.fn(); widgetEl.addEventListener("activeDescendantChange", onActiveDescendantChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow left is pressed once", function () { - beforeEach(function () { + describe("when arrow left is pressed once", () => { + beforeEach(() => { focusEl.focus(); triggerArrowKeyPress(widgetEl, "Left", 1); }); - it("should trigger 0 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); - describe("when arrow up is pressed once", function () { - beforeEach(function () { + describe("when arrow up is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Up", 1); }); - it("should trigger 0 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 1); }); - it("should trigger 1 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); - // eslint-disable-next-line max-len - expect(focusEl.getAttribute("aria-activedescendant")).to.equal(containerEl.firstElementChild.getAttribute("id")); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); + expect(focusEl.getAttribute("aria-activedescendant")).toBe(containerEl.firstElementChild.getAttribute("id")); }); }); - describe("when arrow right is pressed twice", function () { - beforeEach(function () { + describe("when arrow right is pressed twice", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 2); }); - it("should trigger 2 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(2); + it("should trigger 2 activeDescendantChange events", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed four times", function () { - beforeEach(function () { + describe("when arrow right is pressed four times", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 4); }); - it("should trigger 3 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(3); + it("should trigger 3 activeDescendantChange events", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(3); }); }); - describe("when arrow right is pressed once after activedescendant is destroyed", function () { - beforeEach(function () { + describe("when arrow right is pressed once after activedescendant is destroyed", () => { + beforeEach(() => { testActiveDescendant.destroy(); triggerArrowKeyPress(widgetEl, "Right", 1); }); - it("should trigger 0 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Down", 1); }); - it("should trigger 1 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when arrow down is pressed once after emitter is destroyed", function () { - beforeEach(function () { + describe("when arrow down is pressed once after emitter is destroyed", () => { + beforeEach(() => { testActiveDescendant.destroy(); triggerArrowKeyPress(widgetEl, "Down", 1); }); - it("should trigger 0 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); }); -describe("given 3 items with default options in hierarchial relationship", function () { - function setup() { +describe("given 3 items with default options in hierarchial relationship", () => { + const setup = () => { document.body.innerHTML = `
                                              @@ -308,97 +304,96 @@ describe("given 3 items with default options in hierarchial relationship", funct widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("ul"); containerEl = focusEl; - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li"); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li"); - onActiveDescendantChange = sinon.spy(); + onActiveDescendantChange = vi.fn(); widgetEl.addEventListener("activeDescendantChange", onActiveDescendantChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow left is pressed once", function () { - beforeEach(function () { + describe("when arrow left is pressed once", () => { + beforeEach(() => { focusEl.focus(); triggerArrowKeyPress(widgetEl, "Left", 1); }); - it("should trigger 0 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); - describe("when arrow up is pressed once", function () { - beforeEach(function () { + describe("when arrow up is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Up", 1); }); - it("should trigger 0 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 1); }); - it("should trigger 1 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); - // eslint-disable-next-line max-len - expect(focusEl.getAttribute("aria-activedescendant")).to.equal(containerEl.firstElementChild.getAttribute("id")); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); + expect(focusEl.getAttribute("aria-activedescendant")).toBe(containerEl.firstElementChild.getAttribute("id")); }); }); - describe("when arrow right is pressed twice", function () { - beforeEach(function () { + describe("when arrow right is pressed twice", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 2); }); - it("should trigger 2 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(2); + it("should trigger 2 activeDescendantChange events", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed four times", function () { - beforeEach(function () { + describe("when arrow right is pressed four times", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 4); }); - it("should trigger 3 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(3); + it("should trigger 3 activeDescendantChange events", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(3); }); }); - describe("when arrow right is pressed once after activedescendant is destroyed", function () { - beforeEach(function () { + describe("when arrow right is pressed once after activedescendant is destroyed", () => { + beforeEach(() => { testActiveDescendant.destroy(); triggerArrowKeyPress(widgetEl, "Right", 1); }); - it("should trigger 0 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Down", 1); }); - it("should trigger 1 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when arrow down is pressed once after emitter is destroyed", function () { - beforeEach(function () { + describe("when arrow down is pressed once after emitter is destroyed", () => { + beforeEach(() => { testActiveDescendant.destroy(); triggerArrowKeyPress(widgetEl, "Down", 1); }); - it("should trigger 0 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); }); @@ -407,8 +402,8 @@ describe("given 3 items with default options in hierarchial relationship", funct /* BEGIN AUTOWRAP ARROW KEY TESTS */ -describe("given 3 items with autoWrap on", function () { - function setup() { +describe("given 3 items with autoWrap on", () => { + const setup = () => { document.body.innerHTML = `
                                              @@ -423,78 +418,78 @@ describe("given 3 items with autoWrap on", function () { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li", { wrap: true }); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { wrap: true }); - onActiveDescendantChange = sinon.spy(); + onActiveDescendantChange = vi.fn(); widgetEl.addEventListener("activeDescendantChange", onActiveDescendantChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow left is pressed once", function () { - beforeEach(function () { + describe("when arrow left is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Left", 1); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when arrow up is pressed once", function () { - beforeEach(function () { + describe("when arrow up is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Up", 1); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 1); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when arrow right is pressed twice", function () { - beforeEach(function () { + describe("when arrow right is pressed twice", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 2); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(2); + it("should trigger 2 activeDescendantChange events", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed three times", function () { - beforeEach(function () { + describe("when arrow right is pressed three times", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 3); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(3); + it("should trigger 3 activeDescendantChange events", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(3); }); }); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Down", 1); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); }); -describe("given 3 items with autoWrap off", function () { - function setup() { +describe("given 3 items with autoWrap off", () => { + const setup = () => { document.body.innerHTML = `
                                              @@ -509,44 +504,42 @@ describe("given 3 items with autoWrap off", function () { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li", { wrap: false }); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { wrap: false }); - onActiveDescendantChange = sinon.spy(); + onActiveDescendantChange = vi.fn(); widgetEl.addEventListener("activeDescendantChange", onActiveDescendantChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow left is pressed once after wrap set to true", function () { - beforeEach(function () { + describe("when arrow left is pressed once after wrap set to true", () => { + beforeEach(() => { testActiveDescendant.wrap = true; triggerArrowKeyPress(widgetEl, "Left", 1); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); - it("should have currentItem set to Button 3", function () { - let currentItem = testActiveDescendant.currentItem; - expect(currentItem.textContent).to.equal("Button 3"); + it("should have currentItem set to Button 3", () => { + expect(testActiveDescendant.currentItem.textContent).toBe("Button 3"); }); }); - describe("when arrow up is pressed once", function () { - beforeEach(function () { + describe("when arrow up is pressed once after wrap set to true", () => { + beforeEach(() => { testActiveDescendant.wrap = true; triggerArrowKeyPress(widgetEl, "Up", 1); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); - it("should have currentItem set to Button 3", function () { - let currentItem = testActiveDescendant.currentItem; - expect(currentItem.textContent).to.equal("Button 3"); + it("should have currentItem set to Button 3", () => { + expect(testActiveDescendant.currentItem.textContent).toBe("Button 3"); }); }); }); @@ -555,8 +548,8 @@ describe("given 3 items with autoWrap off", function () { /* BEGIN INDEX SETTER TESTS */ -describe("given 3 items with default options", function () { - function setup() { +describe("given 3 items with default options", () => { + const setup = () => { document.body.innerHTML = `
                                              @@ -571,42 +564,42 @@ describe("given 3 items with default options", function () { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li", { wrap: true }); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { wrap: true }); - onActiveDescendantChange = sinon.spy(); + onActiveDescendantChange = vi.fn(); widgetEl.addEventListener("activeDescendantChange", onActiveDescendantChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when index set to current index", function () { - beforeEach(function () { + describe("when index set to current index", () => { + beforeEach(() => { testActiveDescendant.index = 0; }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when index set within bounds", function () { - beforeEach(function () { + describe("when index set within bounds", () => { + beforeEach(() => { testActiveDescendant.index = 1; }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when index set out of bounds", function () { - beforeEach(function () { + describe("when index set out of bounds", () => { + beforeEach(() => { testActiveDescendant.index = 100; }); - it("should trigger 0 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); }); @@ -615,8 +608,8 @@ describe("given 3 items with default options", function () { /* BEGIN AXIS TESTS */ -describe("given 3 items with axis set to both", function () { - function setup() { +describe("given 3 items with axis set to both", () => { + const setup = () => { document.body.innerHTML = `
                                              @@ -631,62 +624,62 @@ describe("given 3 items with axis set to both", function () { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li", { axis: "both" }); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { axis: "both" }); - onActiveDescendantChange = sinon.spy(); + onActiveDescendantChange = vi.fn(); widgetEl.addEventListener("activeDescendantChange", onActiveDescendantChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Down", 1); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when arrow up is pressed once after arrow down", function () { - beforeEach(function () { + describe("when arrow up is pressed once after arrow down", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Down", 1); }); - it("should trigger 2 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); triggerArrowKeyPress(widgetEl, "Up", 1); - expect(onActiveDescendantChange.callCount).to.equal(1); + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 1); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when arrow left is pressed once after arrow right", function () { - beforeEach(function () { + describe("when arrow left is pressed once after arrow right", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 1); }); - it("should trigger 2 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); triggerArrowKeyPress(widgetEl, "Left", 1); - expect(onActiveDescendantChange.callCount).to.equal(1); + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); }); -describe("given 3 items with axis set to x", function () { - function setup() { +describe("given 3 items with axis set to x", () => { + const setup = () => { document.body.innerHTML = `
                                              @@ -701,61 +694,61 @@ describe("given 3 items with axis set to x", function () { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li", { axis: "x" }); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { axis: "x" }); - onActiveDescendantChange = sinon.spy(); + onActiveDescendantChange = vi.fn(); widgetEl.addEventListener("activeDescendantChange", onActiveDescendantChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Down", 1); }); - it("should trigger 0 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); - describe("when arrow up is pressed once after arrow down", function () { - beforeEach(function () { + describe("when arrow up is pressed once after arrow down", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Down", 1); triggerArrowKeyPress(widgetEl, "Up", 1); }); - it("should trigger 0 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 1); }); - it("should trigger 1 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); - describe("when arrow left is pressed once after arrow right", function () { - beforeEach(function () { + describe("when arrow left is pressed once after arrow right", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 1); }); - it("should trigger 2 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); triggerArrowKeyPress(widgetEl, "Left", 1); - expect(onActiveDescendantChange.callCount).to.equal(1); + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); }); -describe("given 3 items with axis set to y", function () { - function setup() { +describe("given 3 items with axis set to y", () => { + const setup = () => { document.body.innerHTML = `
                                              @@ -770,55 +763,55 @@ describe("given 3 items with axis set to y", function () { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li", { axis: "y" }); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { axis: "y" }); - onActiveDescendantChange = sinon.spy(); + onActiveDescendantChange = vi.fn(); widgetEl.addEventListener("activeDescendantChange", onActiveDescendantChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 1); }); - it("should trigger 0 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); - describe("when arrow left is pressed once after arrow right", function () { - beforeEach(function () { + describe("when arrow left is pressed once after arrow right", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Right", 1); triggerArrowKeyPress(widgetEl, "Left", 1); }); - it("should trigger 0 activeDescendantChange event", function () { - expect(onActiveDescendantChange.callCount).to.equal(0); + it("should trigger 0 activeDescendantChange events", () => { + expect(onActiveDescendantChange).not.toHaveBeenCalled(); }); }); - describe("when arrow Down is pressed twice", function () { - beforeEach(function () { + describe("when arrow Down is pressed twice", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Down", 2); }); - it("should trigger 2 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(2); + it("should trigger 2 activeDescendantChange events", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow Up is pressed once after arrow down", function () { - beforeEach(function () { + describe("when arrow Up is pressed once after arrow Down", () => { + beforeEach(() => { triggerArrowKeyPress(widgetEl, "Down", 1); }); - it("should trigger 2 activeDescendantChange events", function () { - expect(onActiveDescendantChange.callCount).to.equal(1); + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); triggerArrowKeyPress(widgetEl, "Up", 1); - expect(onActiveDescendantChange.callCount).to.equal(1); + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); }); }); }); @@ -827,8 +820,8 @@ describe("given 3 items with axis set to y", function () { /* BEGIN AUTO INIT TESTS */ -describe("given 3 items", function () { - function setup() { +describe("given 3 items", () => { + const setup = () => { document.body.innerHTML = `
                                              @@ -843,33 +836,32 @@ describe("given 3 items", function () { widgetEl = document.querySelector(".widget"); focusEl = widgetEl.querySelector("input"); containerEl = widgetEl.querySelector("ul"); - } + }; beforeEach(setup); afterEach(setup); - describe("when autoInit is 0", function () { - beforeEach(function () { - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li", { autoInit: 0 }); // eslint-disable-line + describe("when autoInit is 0", () => { + beforeEach(() => { + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { autoInit: 0 }); }); - it("should have index value of 0", function () { - expect(testActiveDescendant.index).to.equal(0); + it("should have index value of 0", () => { + expect(testActiveDescendant.index).toBe(0); }); }); - describe("when autoInit is 2", function () { - beforeAll(function () { - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li", { autoInit: 2 }); // eslint-disable-line + describe("when autoInit is 2", () => { + beforeAll(() => { + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { autoInit: 2 }); }); - it("should have index value of 2", function () { - expect(testActiveDescendant.index).to.equal(2); + it("should have index value of 2", () => { + expect(testActiveDescendant.index).toBe(2); }); - it("should set aria-activedescendant to last element child", function () { - // eslint-disable-next-line max-len - expect(focusEl.getAttribute("aria-activedescendant")).to.equal(containerEl.lastElementChild.getAttribute("id")); + it("should set aria-activedescendant to last element child", () => { + expect(focusEl.getAttribute("aria-activedescendant")).toBe(containerEl.lastElementChild.getAttribute("id")); }); }); }); @@ -878,10 +870,10 @@ describe("given 3 items", function () { /* BEGIN AUTO RESET TESTS */ -describe("given 3 items with focus on second", function () { - var buttonEl; +describe("given 3 items with focus on second", () => { + let buttonEl; - function setup() { + const setup = () => { document.body.innerHTML = `
                                              @@ -899,22 +891,20 @@ describe("given 3 items with focus on second", function () { containerEl = widgetEl.querySelector("ul"); buttonEl = document.querySelector("button"); - testActiveDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li", { - autoReset: "interactive", - }); // eslint-disable-line + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { autoReset: "interactive" }); testActiveDescendant.index = 1; - } + }; beforeEach(setup); afterEach(setup); - describe("when autoReset is interactive", function () { - beforeEach(function () { + describe("when autoReset is interactive", () => { + beforeEach(() => { testActiveDescendant.reset(); }); - it("should have index value of 0", function () { - expect(testActiveDescendant.index).to.equal(0); + it("should have index value of 0", () => { + expect(testActiveDescendant.index).toBe(0); }); }); @@ -930,3 +920,138 @@ describe("given 3 items with focus on second", function () { }); /* END AUTO RESET TESTS */ + +/* BEGIN AUTO RESET NONE TESTS */ + +describe("given 3 items with autoReset none and active descendant on second item", () => { + const setup = () => { + document.body.innerHTML = ` +
                                              + +
                                                +
                                              • Button 1
                                                • +
                                              • Button 2
                                                • +
                                              • Button 3
                                                • +
                                              +
                                              + `; + + widgetEl = document.querySelector(".widget"); + focusEl = widgetEl.querySelector("input"); + containerEl = widgetEl.querySelector("ul"); + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { autoReset: "none" }); + testActiveDescendant.index = 1; + }; + + beforeEach(setup); + afterEach(setup); + + describe("when reset is called", () => { + beforeEach(() => { + testActiveDescendant.reset(); + }); + + it("should remove aria-activedescendant from focusEl", () => { + expect(focusEl.getAttribute("aria-activedescendant")).toBeNull(); + }); + }); +}); + +/* END AUTO RESET NONE TESTS */ + +/* BEGIN AUTO SCROLL TESTS */ + +describe("given 3 items with autoScroll enabled", () => { + const setup = () => { + document.body.innerHTML = ` +
                                              + +
                                                +
                                              • Button 1
                                                • +
                                              • Button 2
                                                • +
                                              • Button 3
                                                • +
                                              +
                                              + `; + + widgetEl = document.querySelector(".widget"); + focusEl = widgetEl.querySelector("input"); + containerEl = widgetEl.querySelector("ul"); + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li", { autoScroll: true }); + + onActiveDescendantChange = vi.fn(); + widgetEl.addEventListener("activeDescendantChange", onActiveDescendantChange); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when arrow down is pressed once", () => { + beforeEach(() => { + triggerArrowKeyPress(widgetEl, "Down", 1); + }); + + it("should trigger 1 activeDescendantChange event", () => { + expect(onActiveDescendantChange).toHaveBeenCalledTimes(1); + }); + + it("should set aria-activedescendant on focusEl", () => { + expect(focusEl.getAttribute("aria-activedescendant")).toBe(containerEl.firstElementChild.getAttribute("id")); + }); + }); +}); + +/* END AUTO SCROLL TESTS */ + +/* BEGIN MUTATION TESTS */ + +describe("given 3 items with default options in programmatic relationship", () => { + let onActiveDescendantMutation; + + const setup = () => { + document.body.innerHTML = ` +
                                              + +
                                                +
                                              • Button 1
                                                • +
                                              • Button 2
                                                • +
                                              • Button 3
                                                • +
                                              +
                                              + `; + + widgetEl = document.querySelector(".widget"); + focusEl = widgetEl.querySelector("input"); + containerEl = widgetEl.querySelector("ul"); + testActiveDescendant = createLinear(widgetEl, focusEl, containerEl, "li"); + + onActiveDescendantMutation = vi.fn(); + widgetEl.addEventListener("activeDescendantMutation", onActiveDescendantMutation); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when a new item is appended to the container", () => { + beforeEach(async () => { + const newItem = document.createElement("li"); + newItem.textContent = "Button 4"; + containerEl.appendChild(newItem); + await new Promise((resolve) => setTimeout(resolve, 1000)); + }, 5000); + + it("should have 4 items", () => { + expect(testActiveDescendant.items.length).toBe(4); + }); + + it("should dispatch activeDescendantMutation event", () => { + expect(onActiveDescendantMutation).toHaveBeenCalledTimes(1); + }); + + it("should assign an id to the new item", () => { + expect(containerEl.lastElementChild.id).not.toBe(""); + }); + }); +}); + +/* END MUTATION TESTS */ diff --git a/packages/core/makeup-exit-emitter/README.md b/packages/core/makeup-exit-emitter/README.md index 2c0f410f..d5ccf975 100644 --- a/packages/core/makeup-exit-emitter/README.md +++ b/packages/core/makeup-exit-emitter/README.md @@ -9,14 +9,14 @@ This module is still in an experimental state; until it reaches v1, all minor re ## Example ```js -import ExitEmitter from "makeup-exit-emitter"; +import * as ExitEmitter from "makeup-exit-emitter"; -const el = document.getElementById("#widget1"); +const el = document.getElementById("widget1"); ExitEmitter.addFocusExit(el); el.addEventListener("focusExit", function (e) { - console.log(this, e); // outputs (el1, 'focusExit') + console.log(this, e); // outputs (el, 'focusExit') }); ``` @@ -31,7 +31,3 @@ el.addEventListener("focusExit", function (e) { - event.detail - fromElement - toElement - -## Dependencies - -- [makeup-next-id](https://github.com/makeup/makeup-js/packages/makeup-next-id) diff --git a/packages/core/makeup-exit-emitter/dist/cjs/index.js b/packages/core/makeup-exit-emitter/dist/cjs/index.js index 2c3dad26..2f50df49 100644 --- a/packages/core/makeup-exit-emitter/dist/cjs/index.js +++ b/packages/core/makeup-exit-emitter/dist/cjs/index.js @@ -7,7 +7,7 @@ exports.addFocusExit = addFocusExit; exports.removeFocusExit = removeFocusExit; var _makeupNextId = _interopRequireDefault(require("makeup-next-id")); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } -const focusExitEmitters = {}; +const focusExitEmitters = new Map(); function doFocusExit(el, fromElement, toElement) { el.dispatchEvent(new CustomEvent("focusExit", { detail: { @@ -58,19 +58,21 @@ class FocusExitEmitter { this.el.removeEventListener("focusin", this.onWidgetFocusInListener); } } + +// TODO: rename to enableFocusExit when module is renamed to makeup-focus-exit function addFocusExit(el) { - let exitEmitter = null; (0, _makeupNextId.default)(el); - if (!focusExitEmitters[el.id]) { - exitEmitter = new FocusExitEmitter(el); - focusExitEmitters[el.id] = exitEmitter; + if (!focusExitEmitters.has(el.id)) { + focusExitEmitters.set(el.id, new FocusExitEmitter(el)); } - return exitEmitter; + return focusExitEmitters.get(el.id); } + +// TODO: rename to disableFocusExit when module is renamed to makeup-focus-exit function removeFocusExit(el) { - const exitEmitter = focusExitEmitters[el.id]; + const exitEmitter = focusExitEmitters.get(el.id); if (exitEmitter) { exitEmitter.removeEventListeners(); - delete focusExitEmitters[el.id]; + focusExitEmitters.delete(el.id); } } diff --git a/packages/core/makeup-exit-emitter/dist/mjs/index.js b/packages/core/makeup-exit-emitter/dist/mjs/index.js index febf3322..2602571a 100644 --- a/packages/core/makeup-exit-emitter/dist/mjs/index.js +++ b/packages/core/makeup-exit-emitter/dist/mjs/index.js @@ -1,5 +1,5 @@ import nextID from "makeup-next-id"; -const focusExitEmitters = {}; +const focusExitEmitters = /* @__PURE__ */ new Map(); function doFocusExit(el, fromElement, toElement) { el.dispatchEvent( new CustomEvent("focusExit", { @@ -44,19 +44,17 @@ class FocusExitEmitter { } } function addFocusExit(el) { - let exitEmitter = null; nextID(el); - if (!focusExitEmitters[el.id]) { - exitEmitter = new FocusExitEmitter(el); - focusExitEmitters[el.id] = exitEmitter; + if (!focusExitEmitters.has(el.id)) { + focusExitEmitters.set(el.id, new FocusExitEmitter(el)); } - return exitEmitter; + return focusExitEmitters.get(el.id); } function removeFocusExit(el) { - const exitEmitter = focusExitEmitters[el.id]; + const exitEmitter = focusExitEmitters.get(el.id); if (exitEmitter) { exitEmitter.removeEventListeners(); - delete focusExitEmitters[el.id]; + focusExitEmitters.delete(el.id); } } export { diff --git a/packages/core/makeup-exit-emitter/src/index.js b/packages/core/makeup-exit-emitter/src/index.js index f2638882..16279783 100644 --- a/packages/core/makeup-exit-emitter/src/index.js +++ b/packages/core/makeup-exit-emitter/src/index.js @@ -1,5 +1,6 @@ import nextID from "makeup-next-id"; -const focusExitEmitters = {}; + +const focusExitEmitters = new Map(); function doFocusExit(el, fromElement, toElement) { el.dispatchEvent( @@ -42,13 +43,10 @@ function onWidgetFocusIn() { class FocusExitEmitter { constructor(el) { this.el = el; - this.currentFocusElement = null; - this.onWidgetFocusInListener = onWidgetFocusIn.bind(this); this.onDocumentFocusInListener = onDocumentFocusIn.bind(this); this.onWindowBlurListener = onWindowBlur.bind(this); - this.el.addEventListener("focusin", this.onWidgetFocusInListener); } @@ -59,24 +57,23 @@ class FocusExitEmitter { } } +// TODO: rename to enableFocusExit when module is renamed to makeup-focus-exit export function addFocusExit(el) { - let exitEmitter = null; - nextID(el); - if (!focusExitEmitters[el.id]) { - exitEmitter = new FocusExitEmitter(el); - focusExitEmitters[el.id] = exitEmitter; + if (!focusExitEmitters.has(el.id)) { + focusExitEmitters.set(el.id, new FocusExitEmitter(el)); } - return exitEmitter; + return focusExitEmitters.get(el.id); } +// TODO: rename to disableFocusExit when module is renamed to makeup-focus-exit export function removeFocusExit(el) { - const exitEmitter = focusExitEmitters[el.id]; + const exitEmitter = focusExitEmitters.get(el.id); if (exitEmitter) { exitEmitter.removeEventListeners(); - delete focusExitEmitters[el.id]; + focusExitEmitters.delete(el.id); } } diff --git a/packages/core/makeup-exit-emitter/test/index.js b/packages/core/makeup-exit-emitter/test/index.js index 3a39bcd6..b6513308 100644 --- a/packages/core/makeup-exit-emitter/test/index.js +++ b/packages/core/makeup-exit-emitter/test/index.js @@ -1,130 +1,134 @@ -import { describe, expect, beforeEach, afterEach, it } from "vitest"; -import sinon from "sinon"; +import { describe, expect, beforeEach, afterEach, it, vi } from "vitest"; import * as ExitEmitter from "../src/index.js"; -let testEl; -let testElSibling; -let onFocusExit; +describe("given an element with focus", () => { + let testEl; + let testElSibling; + let onFocusExit; -describe("given an element with focus", function () { - function setup() { + beforeEach(() => { document.body.innerHTML = ` -
                                              - -
                                              -
                                              - -
                                              - `; - +
                                              + +
                                              +
                                              + +
                                              + `; testEl = document.querySelector("#test-element"); testElSibling = document.querySelector("#test-element-sibling"); ExitEmitter.addFocusExit(testEl); - onFocusExit = sinon.spy(); + onFocusExit = vi.fn(); testEl.addEventListener("focusExit", onFocusExit); testEl.focus(); - } + }); - beforeEach(setup); - afterEach(function () { + afterEach(() => { testEl.focus(); - onFocusExit.resetHistory(); + onFocusExit.mockClear(); }); - describe("when focus moves to sibling", function () { - beforeEach(function () { + describe("when focus moves to sibling", () => { + beforeEach(() => { testElSibling.focus(); }); - it("should trigger focusExit once", function () { - expect(onFocusExit.called).to.be.true; + it("should trigger focusExit", () => { + expect(onFocusExit).toHaveBeenCalled(); }); }); - describe("when focus moves to descendant", function () { - beforeEach(function () { + describe("when focus moves to descendant", () => { + beforeEach(() => { testEl.querySelector("button").focus(); }); - it("should not trigger focusExit", function () { - expect(onFocusExit.notCalled).to.be.true; + it("should not trigger focusExit", () => { + expect(onFocusExit).not.toHaveBeenCalled(); }); }); - // describe('when focus exits with blur', function() { - // beforeEach(function() { - // testEl.blur(); - // }); - - // it('should trigger focusExit once', async function() { - // expect(onFocusExit.calledOnce).to.be.true; - // }); - // }); - - describe("when focus moves to sibling without focusExit", function () { - beforeEach(function () { + describe("when removeFocusExit is called and focus moves to sibling", () => { + beforeEach(() => { ExitEmitter.removeFocusExit(testEl); testElSibling.focus(); }); - it("should not trigger focusExit", function () { - expect(onFocusExit.notCalled).to.be.true; + it("should not trigger focusExit", () => { + expect(onFocusExit).not.toHaveBeenCalled(); }); }); }); -describe("given an element with focus on descendant", function () { - function setup() { - document.body.innerHTML = ` -
                                              - -
                                              -
                                              - -
                                              - `; +describe("given an element with no focusExit registered", () => { + let testEl; + + beforeEach(() => { + document.body.innerHTML = `
                                              `; + testEl = document.querySelector("#test-element-unregistered"); + }); + describe("when removeFocusExit is called", () => { + it("should not throw", () => { + expect(() => ExitEmitter.removeFocusExit(testEl)).not.toThrow(); + }); + }); +}); + +describe("given an element with focus on a descendant", () => { + let testEl; + let testElSibling; + let onFocusExit; + + beforeEach(() => { + document.body.innerHTML = ` +
                                              + +
                                              +
                                              + +
                                              + `; testEl = document.querySelector("#test-element"); testElSibling = document.querySelector("#test-element-sibling"); ExitEmitter.addFocusExit(testEl); - onFocusExit = sinon.spy(); + onFocusExit = vi.fn(); testEl.addEventListener("focusExit", onFocusExit); testEl.querySelector("button").focus(); - } + }); - beforeEach(setup); - afterEach(function () { + afterEach(() => { testEl.querySelector("button").focus(); - onFocusExit.resetHistory(); + onFocusExit.mockClear(); }); - describe("when focus moves to sibling of element root", function () { - beforeEach(function () { + describe("when focus moves to sibling of element root", () => { + beforeEach(() => { testElSibling.focus(); }); - it("should trigger focusExit once", async function () { - expect(onFocusExit.called).to.be.true; + it("should trigger focusExit", () => { + expect(onFocusExit).toHaveBeenCalled(); }); }); - describe("when focus is reset on descendant", function () { - beforeEach(function () { + describe("when focus is reset on descendant", () => { + beforeEach(() => { testEl.querySelector("button").focus(); }); - it("should not trigger focusExit", function () { - expect(onFocusExit.notCalled).to.be.true; + it("should not trigger focusExit", () => { + expect(onFocusExit).not.toHaveBeenCalled(); }); }); - describe("when focus moves to element root", function () { - beforeEach(function () { + describe("when focus moves to element root", () => { + beforeEach(() => { testEl.focus(); }); - it("should not trigger focusExit", function () { - expect(onFocusExit.notCalled).to.be.true; + it("should not trigger focusExit", () => { + expect(onFocusExit).not.toHaveBeenCalled(); }); }); }); diff --git a/packages/core/makeup-expander/README.md b/packages/core/makeup-expander/README.md index 923b9325..f4f31a98 100644 --- a/packages/core/makeup-expander/README.md +++ b/packages/core/makeup-expander/README.md @@ -122,9 +122,3 @@ Set the following properties to true or false to enable or disable the behaviour - `expander-collapse` - `expander-expand` - -## Dependencies - -- [makeup-exit-emitter](https://github.com/makeup/makeup-js/tree/master/packages/core/makeup-exit-emitter) -- [makeup-focusables](https://github.com/makeup/makeup-js/tree/master/packages/core/makeup-focusables) -- [makeup-next-id](https://github.com/makeup/makeup-js/tree/master/packages/core/makeup-next-id) diff --git a/packages/core/makeup-expander/dist/cjs/index.js b/packages/core/makeup-expander/dist/cjs/index.js index abe269e4..635dce99 100644 --- a/packages/core/makeup-expander/dist/cjs/index.js +++ b/packages/core/makeup-expander/dist/cjs/index.js @@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", { }); exports.default = void 0; var _makeupNextId = _interopRequireDefault(require("makeup-next-id")); -var ExitEmitter = _interopRequireWildcard(require("makeup-exit-emitter")); +var _makeupExitEmitter = require("makeup-exit-emitter"); var _makeupFocusables = _interopRequireDefault(require("makeup-focusables")); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } const defaultOptions = { alwaysDoFocusManagement: false, @@ -28,12 +27,12 @@ const defaultOptions = { useAriaExpanded: true }; function onHostKeyDown(e) { - if (e.keyCode === 13 || e.keyCode === 32) { + if (e.key === "Enter" || e.key === " ") { this._keyboardClickFlag = true; } // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here. // careful! if host already triggers click events naturally, we end up with a "double-click". - if (e.keyCode === 32 && this.options.simulateSpacebarClick === true) { + if (e.key === " " && this.options.simulateSpacebarClick === true) { this.hostEl.click(); } } @@ -108,11 +107,14 @@ function manageFocus(focusManagement, contentEl) { } class _default { constructor(el, selectedOptions) { - this.options = Object.assign({}, defaultOptions, selectedOptions); + this.options = { + ...defaultOptions, + ...selectedOptions + }; this.el = el; this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el this.contentEl = el.querySelector(this.options.contentSelector); - ExitEmitter.addFocusExit(this.el); + (0, _makeupExitEmitter.addFocusExit)(this.el); this._hostKeyDownListener = onHostKeyDown.bind(this); this._hostMouseDownListener = onHostMouseDown.bind(this); this._documentClickListener = _onDocumentClick.bind(this); diff --git a/packages/core/makeup-expander/dist/mjs/index.js b/packages/core/makeup-expander/dist/mjs/index.js index 69e61ef5..1582794e 100644 --- a/packages/core/makeup-expander/dist/mjs/index.js +++ b/packages/core/makeup-expander/dist/mjs/index.js @@ -1,5 +1,5 @@ import nextID from "makeup-next-id"; -import * as ExitEmitter from "makeup-exit-emitter"; +import { addFocusExit } from "makeup-exit-emitter"; import focusables from "makeup-focusables"; const defaultOptions = { alwaysDoFocusManagement: false, @@ -20,10 +20,10 @@ const defaultOptions = { useAriaExpanded: true }; function onHostKeyDown(e) { - if (e.keyCode === 13 || e.keyCode === 32) { + if (e.key === "Enter" || e.key === " ") { this._keyboardClickFlag = true; } - if (e.keyCode === 32 && this.options.simulateSpacebarClick === true) { + if (e.key === " " && this.options.simulateSpacebarClick === true) { this.hostEl.click(); } } @@ -96,11 +96,11 @@ function manageFocus(focusManagement, contentEl) { } class index_default { constructor(el, selectedOptions) { - this.options = Object.assign({}, defaultOptions, selectedOptions); + this.options = { ...defaultOptions, ...selectedOptions }; this.el = el; this.hostEl = el.querySelector(this.options.hostSelector); this.contentEl = el.querySelector(this.options.contentSelector); - ExitEmitter.addFocusExit(this.el); + addFocusExit(this.el); this._hostKeyDownListener = onHostKeyDown.bind(this); this._hostMouseDownListener = onHostMouseDown.bind(this); this._documentClickListener = _onDocumentClick.bind(this); diff --git a/packages/core/makeup-expander/src/index.js b/packages/core/makeup-expander/src/index.js index ee3cc685..5d3c7bec 100644 --- a/packages/core/makeup-expander/src/index.js +++ b/packages/core/makeup-expander/src/index.js @@ -1,5 +1,5 @@ import nextID from "makeup-next-id"; -import * as ExitEmitter from "makeup-exit-emitter"; +import { addFocusExit } from "makeup-exit-emitter"; import focusables from "makeup-focusables"; const defaultOptions = { @@ -22,12 +22,12 @@ const defaultOptions = { }; function onHostKeyDown(e) { - if (e.keyCode === 13 || e.keyCode === 32) { + if (e.key === "Enter" || e.key === " ") { this._keyboardClickFlag = true; } // if host element does not naturally trigger a click event on spacebar, we can force one to trigger here. // careful! if host already triggers click events naturally, we end up with a "double-click". - if (e.keyCode === 32 && this.options.simulateSpacebarClick === true) { + if (e.key === " " && this.options.simulateSpacebarClick === true) { this.hostEl.click(); } } @@ -114,13 +114,13 @@ function manageFocus(focusManagement, contentEl) { export default class { constructor(el, selectedOptions) { - this.options = Object.assign({}, defaultOptions, selectedOptions); + this.options = { ...defaultOptions, ...selectedOptions }; this.el = el; this.hostEl = el.querySelector(this.options.hostSelector); // the keyboard focusable host el this.contentEl = el.querySelector(this.options.contentSelector); - ExitEmitter.addFocusExit(this.el); + addFocusExit(this.el); this._hostKeyDownListener = onHostKeyDown.bind(this); this._hostMouseDownListener = onHostMouseDown.bind(this); diff --git a/packages/core/makeup-expander/test/index.js b/packages/core/makeup-expander/test/index.js index 36cf25be..53dd857b 100644 --- a/packages/core/makeup-expander/test/index.js +++ b/packages/core/makeup-expander/test/index.js @@ -1,562 +1,559 @@ import { describe, expect, beforeEach, afterEach, it, vi } from "vitest"; -import sinon from "sinon"; import Expander from "../src/index.js"; -var containerEl = document.createElement("div"); +const containerEl = document.createElement("div"); containerEl.innerHTML = ` "; - focusableEls = focusable(body); - }); - - it("should only return enabled buttons", function () { - expect(focusableEls.length).to.equal(1); + describe("when focusables is called", () => { + it("should return only links with hrefs", () => { + expect(focusableEls.length).toBe(1); }); }); +}); - describe("when element contains buttons with position:fixed", function () { - let focusableEls; +describe("given an element containing buttons", () => { + let focusableEls; - beforeEach(function () { - body.innerHTML = ''; - focusableEls = focusable(body); - }); + beforeEach(() => { + document.body.innerHTML = ""; + focusableEls = focusable(document.body); + }); - it("should only return enabled buttons", function () { - expect(focusableEls.length).to.equal(2); + describe("when focusables is called", () => { + it("should return only enabled buttons", () => { + expect(focusableEls.length).toBe(1); }); }); +}); - describe("when element contains elements with tabindex", function () { - let focusableEls; +describe("given an element containing buttons with position:fixed", () => { + let focusableEls; - beforeEach(function () { - body.innerHTML = '
                                              '; - focusableEls = focusable(body); - }); + beforeEach(() => { + document.body.innerHTML = ''; + focusableEls = focusable(document.body); + }); - it("should return all elements with tabindex=0", function () { - expect(focusableEls.length).to.equal(2); + describe("when focusables is called", () => { + it("should return both buttons", () => { + expect(focusableEls.length).toBe(2); }); }); +}); - describe("when element contains elements with positive tabindex", function () { - let focusableEls; +describe("given an element containing elements with tabindex=0", () => { + let focusableEls; - beforeEach(function () { - body.innerHTML = '
                                              '; - focusableEls = focusable(body); - }); + beforeEach(() => { + document.body.innerHTML = '
                                              '; + focusableEls = focusable(document.body); + }); - it("should return all elements with positive tabindex", function () { - expect(focusableEls.length).to.equal(2); + describe("when focusables is called", () => { + it("should return all elements with tabindex", () => { + expect(focusableEls.length).toBe(2); }); }); +}); - describe("when element contains elements with negative tabindex", function () { - let focusableEls; +describe("given an element containing elements with positive tabindex", () => { + let focusableEls; - beforeEach(function () { - body.innerHTML = '
                                              '; - focusableEls = focusable(body); - }); + beforeEach(() => { + document.body.innerHTML = '
                                              '; + focusableEls = focusable(document.body); + }); - it("should return all elements with negative tabindex", function () { - expect(focusableEls.length).to.equal(2); + describe("when focusables is called", () => { + it("should return all elements with positive tabindex", () => { + expect(focusableEls.length).toBe(2); }); }); +}); - // describe("when element contains elements with tabindex, with hidden attribute", function () { - // let focusableEls; - - // beforeEach(function () { - // body.innerHTML = '
                                              '; - // focusableEls = focusable(body); - // }); - - // it("should return zero elements", function () { - // expect(focusableEls.length).to.equal(0); - // }); - // }); - - // describe("when element contains elements with tabindex, with display:none", function () { - // let focusableEls; - - // beforeEach(function () { - // body.innerHTML = - // '
                                              ' + - // "
                                              " + - // '
                                              '; - // focusableEls = focusable(body); - // }); - - // it("should return zero elements", function () { - // expect(focusableEls.length).to.equal(0); - // }); - // }); - - describe("when element contains elements with negative tabindex, with sequentialOnly set to true", function () { - let focusableEls; +describe("given an element containing elements with negative tabindex", () => { + beforeEach(() => { + document.body.innerHTML = '
                                              '; + }); - beforeEach(function () { - body.innerHTML = '
                                              '; - focusableEls = focusable(body, true); + describe("when focusables is called", () => { + it("should return all elements including those with negative tabindex", () => { + expect(focusable(document.body).length).toBe(2); }); + }); - it("should return all elements with negative tabindex", function () { - expect(focusableEls.length).to.equal(0); + describe("when focusables is called with keyboardOnly set to true", () => { + it("should return no elements", () => { + expect(focusable(document.body, true).length).toBe(0); }); }); +}); - describe("when it has a callback, should request animation frame and trigger callback", function () { - beforeEach(function () { - body.innerHTML = '
                                              '; - }); +describe("given an element with a callback", () => { + beforeEach(() => { + document.body.innerHTML = '
                                              '; + }); - it("should return all elements in callback", async function () { + describe("when focusables is called with a callback", () => { + it("should pass focusable elements to the callback via requestAnimationFrame", async () => { const focusableEls = await new Promise((resolve) => { - focusable(body, false, (focusableEl) => { - resolve(focusableEl); - }); + focusable(document.body, false, (els) => resolve(els)); }); - expect(focusableEls.length).to.equal(2); + expect(focusableEls.length).toBe(2); }); }); - // describe("when element contains nested elements with display: none", function () { - // let focusableEls; - - // beforeEach(function () { - // body.innerHTML = "" + '
                                              ' + "" + "
                                              "; - // focusableEls = focusable(body); - // }); - - // it("should return only the element not nested in element with display: none", function () { - // expect(focusableEls.length).to.equal(1); - // }); - // }); - - // describe("when element contains nested elements with hidden attribute", function () { - // let focusableEls; - - // beforeEach(function () { - // body.innerHTML = "" + ""; - // focusableEls = focusable(body); - // }); - - // it("should return only the element not nested in hidden element", function () { - // expect(focusableEls.length).to.equal(1); - // }); - // }); + describe("when the returned cancel function is called", () => { + it("should prevent the callback from being invoked", async () => { + vi.useFakeTimers(); + const callback = vi.fn(); + const cancel = focusable(document.body, false, callback); + cancel(); + vi.runAllTimers(); + expect(callback).not.toHaveBeenCalled(); + vi.useRealTimers(); + }); + }); }); + +// describe("given an element containing elements with tabindex, with hidden attribute", () => { +// describe("when focusables is called", () => { +// it("should return zero elements", () => { +// document.body.innerHTML = '
                                              '; +// expect(focusable(document.body).length).toBe(0); +// }); +// }); +// }); + +// describe("given an element containing elements with tabindex, with display:none", () => { +// describe("when focusables is called", () => { +// it("should return zero elements", () => { +// document.body.innerHTML = +// '
                                              ' + +// "
                                              " + +// '
                                              '; +// expect(focusable(document.body).length).toBe(0); +// }); +// }); +// }); + +// describe("given an element containing nested elements with display:none", () => { +// describe("when focusables is called", () => { +// it("should return only the element not nested in element with display:none", () => { +// document.body.innerHTML = "" + '
                                              ' + "" + "
                                              "; +// expect(focusable(document.body).length).toBe(1); +// }); +// }); +// }); + +// describe("given an element containing nested elements with hidden attribute", () => { +// describe("when focusables is called", () => { +// it("should return only the element not nested in hidden element", () => { +// document.body.innerHTML = "" + ""; +// expect(focusable(document.body).length).toBe(1); +// }); +// }); +// }); diff --git a/packages/core/makeup-key-emitter/README.md b/packages/core/makeup-key-emitter/README.md index 3fdde09d..8087b19f 100644 --- a/packages/core/makeup-key-emitter/README.md +++ b/packages/core/makeup-key-emitter/README.md @@ -1,6 +1,12 @@ # makeup-key-emitter -Emits custom events for common accessibility keys (arrowRightKeyDown, escKeyDown, etc). +Emits custom keyDown and keyUp events for the following accessibility keys: + +- `arrowLeft`, `arrowUp`, `arrowRight`, `arrowDown` +- `enter`, `escape`, `spacebar` +- `home`, `end`, `pageUp`, `pageDown` + +For example, pressing the right arrow key emits `arrowRightKeyDown` and `arrowRightKeyUp`. ## Experimental @@ -9,14 +15,14 @@ This module is still in an experimental state; until it reaches v1, all minor re ## Example ```js -import KeyEmitter from "makeup-key-emitter"; +import { addKeyDown } from "makeup-key-emitter"; -let el = document.getElementById("#widget1"); +const el = document.getElementById("widget1"); -KeyEmitter.addKeyDown(el); +addKeyDown(el); el.addEventListener("arrowRightKeyDown", function (e) { - console.log(this, e.type); // outputs (el1, 'arrowRightKeyDown') + console.log(this, e.type); // outputs (el, 'arrowRightKeyDown') }); ``` diff --git a/packages/core/makeup-key-emitter/dist/cjs/index.js b/packages/core/makeup-key-emitter/dist/cjs/index.js index 3146b51e..0d68e32a 100644 --- a/packages/core/makeup-key-emitter/dist/cjs/index.js +++ b/packages/core/makeup-key-emitter/dist/cjs/index.js @@ -48,22 +48,34 @@ function onKeyDown(e) { function onKeyUp(e) { onKeyDownOrUp(e, this, "Up"); } + +// TODO: rename to enableKeyDown function addKeyDown(el) { el.addEventListener("keydown", onKeyDown); } + +// TODO: rename to enableKeyUp function addKeyUp(el) { el.addEventListener("keyup", onKeyUp); } + +// TODO: rename to disableKeyDown function removeKeyDown(el) { el.removeEventListener("keydown", onKeyDown); } + +// TODO: rename to disableKeyUp function removeKeyUp(el) { el.removeEventListener("keyup", onKeyUp); } + +// TODO: rename to enableKeyDownAndUp function add(el) { addKeyDown(el); addKeyUp(el); } + +// TODO: rename to disableKeyDownAndUp function remove(el) { removeKeyDown(el); removeKeyUp(el); diff --git a/packages/core/makeup-key-emitter/src/index.js b/packages/core/makeup-key-emitter/src/index.js index 098f732c..26563535 100644 --- a/packages/core/makeup-key-emitter/src/index.js +++ b/packages/core/makeup-key-emitter/src/index.js @@ -46,27 +46,33 @@ function onKeyUp(e) { onKeyDownOrUp(e, this, "Up"); } +// TODO: rename to enableKeyDown function addKeyDown(el) { el.addEventListener("keydown", onKeyDown); } +// TODO: rename to enableKeyUp function addKeyUp(el) { el.addEventListener("keyup", onKeyUp); } +// TODO: rename to disableKeyDown function removeKeyDown(el) { el.removeEventListener("keydown", onKeyDown); } +// TODO: rename to disableKeyUp function removeKeyUp(el) { el.removeEventListener("keyup", onKeyUp); } +// TODO: rename to enableKeyDownAndUp function add(el) { addKeyDown(el); addKeyUp(el); } +// TODO: rename to disableKeyDownAndUp function remove(el) { removeKeyDown(el); removeKeyUp(el); diff --git a/packages/core/makeup-key-emitter/test/index.js b/packages/core/makeup-key-emitter/test/index.js index 34e7e148..3be8c8f4 100644 --- a/packages/core/makeup-key-emitter/test/index.js +++ b/packages/core/makeup-key-emitter/test/index.js @@ -1,170 +1,212 @@ -import { describe, expect, beforeEach, afterEach, it } from "vitest"; -import sinon from "sinon"; -import * as KeyEmitter from "../src/index.js"; +import { describe, expect, beforeEach, afterEach, it, vi } from "vitest"; +import { add, addKeyDown, addKeyUp, remove, removeKeyDown, removeKeyUp } from "../src/index.js"; -var mockCallBack; +describe("given an element with key emitter added", () => { + let el; -describe("Given a list of three items", function () { - var dom = - '
                                                ' + - "
                                                • " + - "
                                                • " + - "
                                                • " + - "
                                              "; + beforeEach(() => { + document.body.innerHTML = '
                                              '; + el = document.querySelector(".widget"); + add(el); + }); - document.body.innerHTML = dom; + afterEach(() => { + remove(el); + vi.restoreAllMocks(); + }); - var testEl = document.querySelector(".widget"); + describe("when Home key is pressed", () => { + it("should trigger homeKeyUp event", () => { + const onEvent = vi.fn(); + el.addEventListener("homeKeyUp", onEvent); + el.dispatchEvent(new KeyboardEvent("keyup", { key: "Home" })); + expect(onEvent).toHaveBeenCalledOnce(); + }); + }); - describe("when key emitter class is imported", function () { - it("KeyEmitter module should not be undefined", function () { - expect(KeyEmitter).not.to.be.undefined; + describe("when remove is called and Home key is pressed", () => { + it("should not trigger homeKeyUp event", () => { + const onEvent = vi.fn(); + el.addEventListener("homeKeyUp", onEvent); + remove(el); + el.dispatchEvent(new KeyboardEvent("keyup", { key: "Home" })); + expect(onEvent).not.toHaveBeenCalled(); }); }); +}); - describe("when key emitter is added", function () { - beforeEach(function () { - KeyEmitter.add(testEl); +describe("given an element with addKeyDown added", () => { + let el; + + beforeEach(() => { + document.body.innerHTML = '
                                              '; + el = document.querySelector(".widget"); + addKeyDown(el); + }); + + describe("when ArrowLeft key is pressed", () => { + it("should trigger arrowLeftKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("arrowLeftKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft" })); + expect(onEvent).toHaveBeenCalledOnce(); }); + }); - afterEach(function () { - mockCallBack = null; + describe("when ArrowUp key is pressed", () => { + it("should trigger arrowUpKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("arrowUpKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowUp" })); + expect(onEvent).toHaveBeenCalledOnce(); }); + }); - it("should trigger homeKeyUp event", function () { - // execute - mockCallBack = sinon.spy(); - testEl.addEventListener("homeKeyUp", mockCallBack); - var keyUpEvent = new Event("keyup"); - keyUpEvent.keyCode = 40; - keyUpEvent.key = "Home"; - testEl.dispatchEvent(keyUpEvent); - // assert - expect(mockCallBack.callCount).to.equal(1); + describe("when ArrowRight key is pressed", () => { + it("should trigger arrowRightKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("arrowRightKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight" })); + expect(onEvent).toHaveBeenCalledOnce(); }); }); - describe("when key emitter is added with Key Down", function () { - beforeEach(function () { - KeyEmitter.addKeyDown(testEl); + describe("when ArrowDown key is pressed", () => { + it("should trigger arrowDownKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("arrowDownKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" })); + expect(onEvent).toHaveBeenCalledOnce(); }); + }); +}); + +describe("given an element with addKeyUp added", () => { + let el; - afterEach(function () { - mockCallBack = null; + beforeEach(() => { + document.body.innerHTML = '
                                              '; + el = document.querySelector(".widget"); + addKeyUp(el); + }); + + describe("when Space key is pressed", () => { + it("should trigger spacebarKeyUp event", () => { + const onEvent = vi.fn(); + el.addEventListener("spacebarKeyUp", onEvent); + el.dispatchEvent(new KeyboardEvent("keyup", { key: " " })); + expect(onEvent).toHaveBeenCalledOnce(); }); + }); - it("should trigger arrowLeftKeyDown event", function () { - // execute - mockCallBack = sinon.spy(); - testEl.addEventListener("arrowLeftKeyDown", mockCallBack); - var keyDownEvent = new Event("keydown"); - keyDownEvent.keyCode = 37; - keyDownEvent.key = "ArrowLeft"; - testEl.dispatchEvent(keyDownEvent); - // assert - expect(mockCallBack.callCount).to.equal(1); + describe("when Space key is pressed with Shift", () => { + it("should not trigger spacebarKeyUp event", () => { + const onEvent = vi.fn(); + el.addEventListener("spacebarKeyUp", onEvent); + el.dispatchEvent(new KeyboardEvent("keyup", { key: " ", shiftKey: true })); + expect(onEvent).not.toHaveBeenCalled(); }); + }); - it("should trigger arrowUpKeyDown event", function () { - // execute - mockCallBack = sinon.spy(); - testEl.addEventListener("arrowUpKeyDown", mockCallBack); - var keyDownEvent = new Event("keydown"); - keyDownEvent.keyCode = 38; - keyDownEvent.key = "ArrowUp"; - testEl.dispatchEvent(keyDownEvent); - // assert - expect(mockCallBack.callCount).to.equal(1); + describe("when a non-accessibility key is pressed", () => { + it("should not trigger any custom event", () => { + const onEvent = vi.fn(); + el.addEventListener("aKeyUp", onEvent); + el.dispatchEvent(new KeyboardEvent("keyup", { key: "a" })); + expect(onEvent).not.toHaveBeenCalled(); }); + }); + + describe("when removeKeyUp is called and Space key is pressed", () => { + it("should not trigger spacebarKeyUp event", () => { + const onEvent = vi.fn(); + el.addEventListener("spacebarKeyUp", onEvent); + removeKeyUp(el); + el.dispatchEvent(new KeyboardEvent("keyup", { key: " " })); + expect(onEvent).not.toHaveBeenCalled(); + }); + }); +}); + +describe("given an element with addKeyDown added", () => { + let el; + + beforeEach(() => { + document.body.innerHTML = '
                                              '; + el = document.querySelector(".widget"); + addKeyDown(el); + }); - it("should trigger arrowRightKeyDown event", function () { - // execute - mockCallBack = sinon.spy(); - testEl.addEventListener("arrowRightKeyDown", mockCallBack); - var keyDownEvent = new Event("keydown"); - keyDownEvent.keyCode = 39; - keyDownEvent.key = "ArrowRight"; - testEl.dispatchEvent(keyDownEvent); - // assert - expect(mockCallBack.callCount).to.equal(1); + describe("when Enter key is pressed", () => { + it("should trigger enterKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("enterKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" })); + expect(onEvent).toHaveBeenCalledOnce(); }); + }); + + describe("when Escape key is pressed", () => { + it("should trigger escapeKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("escapeKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" })); + expect(onEvent).toHaveBeenCalledOnce(); + }); + }); - it("should trigger arrowDownKeyDown event", function () { - // execute - mockCallBack = sinon.spy(); - testEl.addEventListener("arrowDownKeyDown", mockCallBack); - var keyDownEvent = new Event("keydown"); - keyDownEvent.keyCode = 40; - keyDownEvent.key = "ArrowDown"; - testEl.dispatchEvent(keyDownEvent); - // assert - expect(mockCallBack.callCount).to.equal(1); + describe("when PageUp key is pressed", () => { + it("should trigger pageUpKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("pageUpKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" })); + expect(onEvent).toHaveBeenCalledOnce(); }); }); - describe("when key emitter is added with Key Up", function () { - beforeEach(function () { - KeyEmitter.addKeyUp(testEl); + describe("when PageDown key is pressed", () => { + it("should trigger pageDownKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("pageDownKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageDown" })); + expect(onEvent).toHaveBeenCalledOnce(); }); + }); - afterEach(function () { - mockCallBack = null; + describe("when End key is pressed", () => { + it("should trigger endKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("endKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "End" })); + expect(onEvent).toHaveBeenCalledOnce(); }); + }); - it("should trigger spaceKeyUp event", function () { - // execute - mockCallBack = sinon.spy(); - testEl.addEventListener("spacebarKeyUp", mockCallBack); - var keyUpEvent = new Event("keyup"); - keyUpEvent.keyCode = 32; - keyUpEvent.key = " "; - testEl.dispatchEvent(keyUpEvent); - // assert - expect(mockCallBack.callCount).to.equal(1); + describe("when Home key is pressed", () => { + it("should trigger homeKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("homeKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "Home" })); + expect(onEvent).toHaveBeenCalledOnce(); }); + }); - it("should not trigger spaceKeyUp event with shiftKey", function () { - // execute - mockCallBack = sinon.spy(); - testEl.addEventListener("spacebarKeyUp", mockCallBack); - var keyUpEvent = new Event("keyup"); - keyUpEvent.keyCode = 32; - keyUpEvent.key = " "; - keyUpEvent.shiftKey = true; - testEl.dispatchEvent(keyUpEvent); - // assert - expect(mockCallBack.callCount).to.equal(0); - }); - }); - - describe("when key emitter is added and removed", function () { - beforeEach(function () { - KeyEmitter.add(testEl); + describe("when ArrowLeft key is pressed with Shift", () => { + it("should not trigger arrowLeftKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("arrowLeftKeyDown", onEvent); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", shiftKey: true })); + expect(onEvent).not.toHaveBeenCalled(); }); + }); - afterEach(function () { - mockCallBack = null; - }); - - it("should not trigger homeKeyUp event", function () { - // execute - mockCallBack = sinon.spy(); - testEl.addEventListener("homeKeyUp", mockCallBack); - - var keyUpEvent = new Event("keyup"); - keyUpEvent.keyCode = 40; - keyUpEvent.key = "Home"; - testEl.dispatchEvent(keyUpEvent); - // assert - expect(mockCallBack.callCount).to.equal(1); - - // reset the spy - mockCallBack = sinon.spy(); - // execute - KeyEmitter.remove(testEl); - testEl.dispatchEvent(keyUpEvent); - // assert - expect(mockCallBack.callCount).to.equal(0); + describe("when removeKeyDown is called and ArrowLeft key is pressed", () => { + it("should not trigger arrowLeftKeyDown event", () => { + const onEvent = vi.fn(); + el.addEventListener("arrowLeftKeyDown", onEvent); + removeKeyDown(el); + el.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft" })); + expect(onEvent).not.toHaveBeenCalled(); }); }); }); diff --git a/packages/core/makeup-keyboard-trap/README.md b/packages/core/makeup-keyboard-trap/README.md index 89d71287..88bad935 100644 --- a/packages/core/makeup-keyboard-trap/README.md +++ b/packages/core/makeup-keyboard-trap/README.md @@ -9,13 +9,13 @@ It will ignore programmatically focusable items with a tabindex of `-1` This module is still in an experimental state, until it reaches v1 you must consider all minor releases as breaking changes. ```js -import * as keyboardTrap from "makeup-keyboard-trap"; +import { trap, untrap } from "makeup-keyboard-trap"; // trap an element -keyboardTrap.trap(document.querySelector("el")); +trap(document.querySelector("el")); // untrap the current trapped element -keyboardTrap.untrap(); +untrap(); ``` ## Install diff --git a/packages/core/makeup-keyboard-trap/dist/cjs/index.js b/packages/core/makeup-keyboard-trap/dist/cjs/index.js index c1f3b627..b66a5aa9 100644 --- a/packages/core/makeup-keyboard-trap/dist/cjs/index.js +++ b/packages/core/makeup-keyboard-trap/dist/cjs/index.js @@ -109,9 +109,7 @@ function trap(el) { function refresh() { if (topTrap && trappedEl) { let focusableElements = (0, _makeupFocusables.default)(trappedEl, true); - focusableElements = focusableElements.filter(function (el) { - return !el.classList.contains("keyboard-trap-boundary"); - }); + focusableElements = focusableElements.filter(el => !el.classList.contains("keyboard-trap-boundary")); firstFocusableElement = focusableElements[0]; lastFocusableElement = focusableElements[focusableElements.length - 1]; } diff --git a/packages/core/makeup-keyboard-trap/dist/mjs/index.js b/packages/core/makeup-keyboard-trap/dist/mjs/index.js index 673375ef..a23fb6ca 100644 --- a/packages/core/makeup-keyboard-trap/dist/mjs/index.js +++ b/packages/core/makeup-keyboard-trap/dist/mjs/index.js @@ -83,9 +83,7 @@ function trap(el) { function refresh() { if (topTrap && trappedEl) { let focusableElements = focusables(trappedEl, true); - focusableElements = focusableElements.filter(function(el) { - return !el.classList.contains("keyboard-trap-boundary"); - }); + focusableElements = focusableElements.filter((el) => !el.classList.contains("keyboard-trap-boundary")); firstFocusableElement = focusableElements[0]; lastFocusableElement = focusableElements[focusableElements.length - 1]; } diff --git a/packages/core/makeup-keyboard-trap/src/index.js b/packages/core/makeup-keyboard-trap/src/index.js index ceed47f0..0dc7d1bc 100644 --- a/packages/core/makeup-keyboard-trap/src/index.js +++ b/packages/core/makeup-keyboard-trap/src/index.js @@ -116,9 +116,7 @@ function trap(el) { function refresh() { if (topTrap && trappedEl) { let focusableElements = focusables(trappedEl, true); - focusableElements = focusableElements.filter(function (el) { - return !el.classList.contains("keyboard-trap-boundary"); - }); + focusableElements = focusableElements.filter((el) => !el.classList.contains("keyboard-trap-boundary")); firstFocusableElement = focusableElements[0]; lastFocusableElement = focusableElements[focusableElements.length - 1]; } diff --git a/packages/core/makeup-keyboard-trap/test/index.js b/packages/core/makeup-keyboard-trap/test/index.js index 745aeff6..edbc82bf 100644 --- a/packages/core/makeup-keyboard-trap/test/index.js +++ b/packages/core/makeup-keyboard-trap/test/index.js @@ -1,20 +1,19 @@ -import { describe, expect, beforeEach, afterEach, it } from "vitest"; -import sinon from "sinon"; +import { describe, expect, beforeEach, afterEach, it, vi } from "vitest"; import * as keyboardTrap from "../src/index.js"; import testData from "./data.js"; -testData.forEach(function (data) { - var trapEl; - var onTrap; - var onUntrap; +testData.forEach((data) => { + let trapEl; + let onTrap; + let onUntrap; - describe("given trap is not active,", function () { - describe("when trap method is called", function () { - beforeEach(function () { + describe("given trap is not active,", () => { + describe("when trap method is called", () => { + beforeEach(() => { document.body.innerHTML = data.html; trapEl = document.querySelector(".dialog"); - onTrap = sinon.spy(); - onUntrap = sinon.spy(); + onTrap = vi.fn(); + onUntrap = vi.fn(); trapEl.addEventListener("keyboardTrap", onTrap); trapEl.addEventListener("keyboardUntrap", onUntrap); @@ -22,85 +21,97 @@ testData.forEach(function (data) { keyboardTrap.refresh(); }); - afterEach(function () { + afterEach(() => { keyboardTrap.untrap(); - onTrap.resetHistory(); - onUntrap.resetHistory(); + onTrap.mockClear(); + onUntrap.mockClear(); }); - it("it should have class keyboard-trap--active on trap", function () { - expect(trapEl.classList.contains("keyboard-trap--active")).to.equal(true); + it("should have class keyboard-trap--active on trap", () => { + expect(trapEl.classList.contains("keyboard-trap--active")).toBe(true); }); - it("it should have six trap boundaries in body", function () { - expect(document.querySelectorAll(".keyboard-trap-boundary").length).to.equal(6); + it("should have six trap boundaries in body", () => { + expect(document.querySelectorAll(".keyboard-trap-boundary").length).toBe(6); }); - it("it should observe one trap event", function () { - expect(onTrap.callCount).to.equal(1); + it("should observe one trap event", () => { + expect(onTrap.mock.calls.length).toBe(1); }); - it("it should observe zero untrap events", function () { - expect(onUntrap.callCount).to.equal(0); + it("should observe zero untrap events", () => { + expect(onUntrap.mock.calls.length).toBe(0); }); }); }); - describe("given trap is active,", function () { - beforeEach(function () { + describe("given trap is active,", () => { + beforeEach(() => { document.body.innerHTML = data.html; trapEl = document.querySelector(".dialog"); - onTrap = sinon.spy(); - onUntrap = sinon.spy(); + onTrap = vi.fn(); + onUntrap = vi.fn(); trapEl.addEventListener("keyboardTrap", onTrap); trapEl.addEventListener("keyboardUntrap", onUntrap); keyboardTrap.trap(trapEl); keyboardTrap.refresh(); - onTrap.resetHistory(); + onTrap.mockClear(); }); - describe("when untrap method is called", function () { - beforeEach(function () { + describe("when untrap method is called", () => { + beforeEach(() => { keyboardTrap.untrap(); }); - it("it should have zero trap boundaries in body", function () { - expect(document.querySelectorAll(".keyboard-trap-boundary").length).to.equal(0); + it("should have zero trap boundaries in body", () => { + expect(document.querySelectorAll(".keyboard-trap-boundary").length).toBe(0); }); - it("it should not have class keyboard-trap--active on trap", function () { - expect(trapEl.classList.contains("keyboard-trap--active")).to.be.false; + it("should not have class keyboard-trap--active on trap", () => { + expect(trapEl.classList.contains("keyboard-trap--active")).toBe(false); }); - it("it should observe 0 trap events", function () { - expect(onTrap.callCount).to.equal(0); + it("should observe 0 trap events", () => { + expect(onTrap.mock.calls.length).toBe(0); }); - it("it should observe 1 untrap event", function () { - expect(onUntrap.callCount).to.equal(1); + it("should observe 1 untrap event", () => { + expect(onUntrap.mock.calls.length).toBe(1); }); }); }); - describe("given trap is active", function () { - beforeEach(function () { + describe("given trap is active", () => { + beforeEach(() => { document.body.innerHTML = data.html; trapEl = document.querySelector(".dialog"); - onTrap = sinon.spy(); - onUntrap = sinon.spy(); + onTrap = vi.fn(); + onUntrap = vi.fn(); trapEl.addEventListener("keyboardTrap", onTrap); trapEl.addEventListener("keyboardUntrap", onUntrap); keyboardTrap.trap(trapEl); - onTrap.resetHistory(); - onUntrap.resetHistory(); + onTrap.mockClear(); + onUntrap.mockClear(); }); - describe("when DOM is changed", function () { - beforeEach(function () { + describe("when DOM is changed", () => { + beforeEach(() => { document.querySelector(".keyboard-trap-boundary").remove(); }); - it("it should not throw an error when untrap is called", function () { - expect(keyboardTrap.untrap.bind()).not.to.throw(); + it("should not throw an error when untrap is called", () => { + expect(() => keyboardTrap.untrap()).not.toThrow(); }); }); }); }); + +describe("given trap is not active", () => { + beforeEach(() => { + keyboardTrap.untrap(); + }); + + describe("when refresh is called", () => { + it("should not throw", () => { + expect(() => keyboardTrap.refresh()).not.toThrow(); + }); + }); +}); diff --git a/packages/core/makeup-modal/README.md b/packages/core/makeup-modal/README.md index 99c5c95c..eec8a10c 100644 --- a/packages/core/makeup-modal/README.md +++ b/packages/core/makeup-modal/README.md @@ -7,13 +7,13 @@ Sets an element to a modal state using [makeup-keyboard-trap](https://github.com This module is still in an experimental state, until it reaches v1 you must consider all minor releases as breaking changes. ```js -import * as modal from "makeup-modal"; +import { modal, unmodal } from "makeup-modal"; // set an element to modal -modal.modal(document.querySelector("el")); +modal(document.querySelector("el")); // reset the element to non-modal -modal.unmodal(); +unmodal(); ``` ## Install @@ -24,9 +24,9 @@ npm install makeup-modal ## Options -- `useHiddenProperty`: use `hidden` property for inert content instead of `aria-hidden` (useful for fullscreen modals) (default: false) -- `hoist`: moves the element to the document root (default: false) -- `wrap`: if element is at document root, wraps all "inert" sibling elements into a single container (default: false) +- `useHiddenProperty`: use the `hidden` property instead of `aria-hidden` to hide the surrounding DOM tree from all users, not just screen reader users (default: false) +- `hoist`: moves the element to `document.body` if it is nested deeper in the DOM, reducing the number of siblings and ancestor-siblings the traps need to hide (default: false) +- `wrap`: when the element is a direct body child, collects all other body children into a single inert container so one attribute can hide everything at once; intended to be used together with `hoist` (default: false) ## Events diff --git a/packages/core/makeup-modal/dist/cjs/index.js b/packages/core/makeup-modal/dist/cjs/index.js index c2ce4370..112af944 100644 --- a/packages/core/makeup-modal/dist/cjs/index.js +++ b/packages/core/makeup-modal/dist/cjs/index.js @@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", { }); exports.modal = modal; exports.unmodal = unmodal; -var keyboardTrap = _interopRequireWildcard(require("makeup-keyboard-trap")); -var screenreaderTrap = _interopRequireWildcard(require("makeup-screenreader-trap")); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyboardTrap = require("makeup-keyboard-trap"); +var _makeupScreenreaderTrap = require("makeup-screenreader-trap"); const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -30,6 +29,11 @@ function unhoist() { hoistedPlaceholderEl = null; } } + +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -38,6 +42,12 @@ function hoist() { document.body.appendChild(modalEl); } } + +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -45,7 +55,7 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -56,7 +66,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach(child => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -72,8 +82,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + (0, _makeupKeyboardTrap.untrap)(modalEl); + (0, _makeupScreenreaderTrap.untrap)(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -86,7 +96,10 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { + ...defaultOptions, + ...options + }; unmodal(); modalEl = el; if (_options.hoist) { @@ -95,11 +108,11 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + (0, _makeupScreenreaderTrap.trap)(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + (0, _makeupKeyboardTrap.trap)(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/packages/core/makeup-modal/dist/mjs/index.js b/packages/core/makeup-modal/dist/mjs/index.js index 768d1ca6..65e93967 100644 --- a/packages/core/makeup-modal/dist/mjs/index.js +++ b/packages/core/makeup-modal/dist/mjs/index.js @@ -1,5 +1,5 @@ -import * as keyboardTrap from "makeup-keyboard-trap"; -import * as screenreaderTrap from "makeup-screenreader-trap"; +import { trap as keyboardTrap, untrap as keyboardUntrap } from "makeup-keyboard-trap"; +import { trap as screenreaderTrap, untrap as screenreaderUntrap } from "makeup-screenreader-trap"; const defaultOptions = { hoist: false, useHiddenProperty: false, @@ -35,7 +35,7 @@ function wrap() { inertContentEl = document.createElement("div"); inertContentEl.setAttribute("data-makeup-modal", "inert"); [...document.body.children].forEach((child, index) => { - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -46,7 +46,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach((child) => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -62,8 +62,8 @@ function unwrap() { } function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + keyboardUntrap(modalEl); + screenreaderUntrap(modalEl); unwrap(); unhoist(); document.body.removeAttribute("data-makeup-modal"); @@ -74,7 +74,7 @@ function unmodal() { return modalEl; } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { ...defaultOptions, ...options }; unmodal(); modalEl = el; if (_options.hoist) { @@ -83,9 +83,9 @@ function modal(el, options) { if (_options.wrap) { wrap(); } - screenreaderTrap.trap(modalEl, options); + screenreaderTrap(modalEl, options); if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + keyboardTrap(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); modalEl.setAttribute("data-makeup-modal", "widget"); diff --git a/packages/core/makeup-modal/src/index.js b/packages/core/makeup-modal/src/index.js index fd88cd00..fcabd11b 100644 --- a/packages/core/makeup-modal/src/index.js +++ b/packages/core/makeup-modal/src/index.js @@ -1,5 +1,5 @@ -import * as keyboardTrap from "makeup-keyboard-trap"; -import * as screenreaderTrap from "makeup-screenreader-trap"; +import { trap as keyboardTrap, untrap as keyboardUntrap } from "makeup-keyboard-trap"; +import { trap as screenreaderTrap, untrap as screenreaderUntrap } from "makeup-screenreader-trap"; const defaultOptions = { hoist: false, @@ -28,6 +28,10 @@ function unhoist() { } } +// moves the modal element to document.body when it is nested deeper in the DOM. +// a placeholder is inserted at the original location so unhoist() can restore it. +// motivation: the screenreader and keyboard traps hide all siblings and siblings-of-ancestors; +// a deeply nested element has many such ancestors. hoisting to body reduces that to one level of siblings. function hoist() { if (!hoistedPlaceholderEl && !isRootLevel(modalEl)) { hoistedPlaceholderEl = document.createElement("div"); @@ -38,6 +42,11 @@ function hoist() { } } +// collects all other body children (except the modal, scripts, and link tags) into a single +// [data-makeup-modal="inert"] container. unwrap() restores them to their original positions. +// motivation: once all inert content is in one container, a single attribute (aria-hidden, hidden, inert) +// can be applied to it rather than to each sibling individually. designed to be used after hoist(), +// which ensures the modal is already a direct body child before wrap() runs. function wrap() { if (!inertContentEl && isRootLevel(modalEl)) { inertContentEl = document.createElement("div"); @@ -46,7 +55,9 @@ function wrap() { [...document.body.children].forEach((child, index) => { // checking for the script and link tags is necessary because moving them could cause issues. // for example, moving a script to the top of the body could freeze the page while the script loads. - if (!(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if ( + !(child === modalEl || child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK) + ) { inertContentEl.appendChild(child); originalPositionIndexes.push(index); } @@ -59,7 +70,7 @@ function wrap() { function unwrap() { if (inertContentEl) { [...inertContentEl.children].forEach((child) => { - if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName === tags.LINK)) { + if (!(child.tagName.toLowerCase() === tags.SCRIPT || child.tagName.toLowerCase() === tags.LINK)) { const index = originalPositionIndexes.shift(); if (index > document.body.children.length) { document.body.appendChild(child); @@ -77,8 +88,8 @@ function unwrap() { function unmodal() { if (modalEl) { - keyboardTrap.untrap(modalEl); - screenreaderTrap.untrap(modalEl); + keyboardUntrap(modalEl); + screenreaderUntrap(modalEl); unwrap(); unhoist(); @@ -93,7 +104,7 @@ function unmodal() { } function modal(el, options) { - const _options = Object.assign({}, defaultOptions, options); + const _options = { ...defaultOptions, ...options }; unmodal(); modalEl = el; @@ -105,11 +116,11 @@ function modal(el, options) { wrap(); } - screenreaderTrap.trap(modalEl, options); + screenreaderTrap(modalEl, options); // no need to create keyboard traps when inert content is using hidden property if (!_options.useHiddenProperty) { - keyboardTrap.trap(modalEl); + keyboardTrap(modalEl); } document.body.setAttribute("data-makeup-modal", "true"); diff --git a/packages/core/makeup-modal/test/index.js b/packages/core/makeup-modal/test/index.js index 89802b6d..af096a4a 100644 --- a/packages/core/makeup-modal/test/index.js +++ b/packages/core/makeup-modal/test/index.js @@ -1,125 +1,110 @@ -import { describe, expect, beforeEach, afterEach, beforeAll, it } from "vitest"; -import sinon from "sinon"; -import * as Modal from "../src/index.js"; +import { describe, expect, beforeEach, beforeAll, it, vi } from "vitest"; +import { modal, unmodal } from "../src/index.js"; import testData from "./data.js"; -let modalEl; -let onModal; -let onUnmodal; - -let modal; -let unmodal; - -let hoistTestData = +const hoistTestData = '
                                              one
                                              two
                                              '; -let hoistExpectedResult = +const hoistExpectedResult = '
                                              two
                                              '; -let hoistEl; - -function doBeforeAll(html) { - modal = Modal.modal; - unmodal = Modal.unmodal; - document.querySelector("body").innerHTML = html; - modalEl = document.querySelector(".modal"); - onModal = sinon.spy(); - onUnmodal = sinon.spy(); +testData.forEach((data) => { + describe("makeup-modal", () => { + describe("given test data", () => { + describe("when modal is activated", () => { + let modalEl; + let onModal; + let onUnmodal; + + beforeEach(() => { + document.body.innerHTML = data.html; + modalEl = document.querySelector(".modal"); + onModal = vi.fn(); + onUnmodal = vi.fn(); + modalEl.addEventListener("makeup-modal", onModal); + modalEl.addEventListener("makeup-unmodal", onUnmodal); + }); - modalEl.addEventListener("makeup-modal", onModal); - modalEl.addEventListener("makeup-unmodal", onUnmodal); -} + it("should observe one modal event", () => { + modal(modalEl); + expect(onModal).toHaveBeenCalledOnce(); + }); -function hoistDoBeforeAll() { - document.querySelector("body").innerHTML = hoistTestData; + it("should observe zero unmodal events", () => { + modal(modalEl); + expect(onUnmodal).not.toHaveBeenCalled(); + }); - hoistEl = document.querySelector(".hoist-me"); -} + it("should apply modal attributes and events", () => { + modal(modalEl, { hoist: false, wrap: false }); -testData.forEach(function (data) { - describe("makeup-modal", function () { - describe("when modal is activated", function () { - beforeEach(function () { - doBeforeAll(data.html); - }); + expect(modalEl.getAttribute("data-makeup-modal")).toBe("widget"); + expect(document.body.getAttribute("data-makeup-modal")).toBe("true"); - afterEach(function () { - onModal.resetHistory(); - onUnmodal.resetHistory(); - }); + // Verify if the custom event is dispatched + let eventDispatched = false; + modalEl.addEventListener("makeup-modal", () => { + eventDispatched = true; + }); + modal(modalEl, { hoist: false, wrap: false }); + expect(eventDispatched).toBe(true); + }); - it("should observe one modal event", function () { - modal(modalEl); - expect(onModal.callCount).to.equal(1); - }); + it("should unmodal and remove attributes", () => { + modal(modalEl, { hoist: false, wrap: false }); + unmodal(); - it("should observe zero unmodal events", function () { - modal(modalEl); - expect(onUnmodal.callCount).to.equal(0); - }); + expect(modalEl.getAttribute("data-makeup-modal")).toBeNull(); + expect(document.body.getAttribute("data-makeup-modal")).toBeNull(); + }); - it("should apply modal attributes and events", () => { - modal(modalEl, { hoist: false, wrap: false }); + it("should wrap content", () => { + const anotherElement = document.createElement("div"); + document.body.appendChild(anotherElement); - expect(modalEl.getAttribute("data-makeup-modal")).toBe("widget"); - expect(document.body.getAttribute("data-makeup-modal")).toBe("true"); + modal(modalEl, { hoist: false, wrap: true }); - // Verify if the custom event is dispatched - let eventDispatched = false; - modalEl.addEventListener("makeup-modal", () => { - eventDispatched = true; + const inertContent = document.querySelector('[data-makeup-modal="inert"]'); + expect(inertContent).not.toBeNull(); + expect(inertContent.contains(anotherElement)).toBe(true); }); - modal(modalEl, { hoist: false, wrap: false }); - expect(eventDispatched).toBe(true); - }); - - it("should unmodal and remove attributes", () => { - modal(modalEl, { hoist: false, wrap: false }); - unmodal(); - - expect(modalEl.getAttribute("data-makeup-modal")).toBeNull(); - expect(document.body.getAttribute("data-makeup-modal")).toBeNull(); }); - it("should wrap content", () => { - const anotherElement = document.createElement("div"); - document.body.appendChild(anotherElement); + describe("when modal is activated then deactivated", () => { + let modalEl; + let onModal; + let onUnmodal; + + beforeEach(() => { + document.body.innerHTML = data.html; + modalEl = document.querySelector(".modal"); + onModal = vi.fn(); + onUnmodal = vi.fn(); + modalEl.addEventListener("makeup-modal", onModal); + modalEl.addEventListener("makeup-unmodal", onUnmodal); + modal(modalEl); + unmodal(); + }); - modal(modalEl, { hoist: false, wrap: true }); + it("should observe one modal event", () => { + expect(onModal).toHaveBeenCalledOnce(); + }); - const inertContent = document.querySelector('[data-makeup-modal="inert"]'); - expect(inertContent).not.toBeNull(); - expect(inertContent.contains(anotherElement)).toBe(true); + it("should observe one unmodal event", () => { + expect(onUnmodal).toHaveBeenCalledOnce(); + }); }); }); - describe("when modal is activated then deactivated", function () { - beforeEach(function () { - doBeforeAll(data.html); - modal(modalEl); - unmodal(); - }); - - afterEach(function () { - onModal.resetHistory(); - onUnmodal.resetHistory(); - }); + describe("hoist functionality", () => { + let hoistEl; - it("should observe one modal events", function () { - expect(onModal.callCount).to.equal(1); - }); - - it("should observe one unmodal event", function () { - expect(onUnmodal.callCount).to.equal(1); - }); - }); - - describe("hoist funcionality", function () { - describe("when hoist is called", function () { - beforeAll(function () { - hoistDoBeforeAll(hoistTestData); + describe("when hoist is called", () => { + beforeAll(() => { + document.body.innerHTML = hoistTestData; + hoistEl = document.querySelector(".hoist-me"); }); - it("should have hoisted the data", function () { + it("should have hoisted the data", () => { modal(hoistEl); expect(document.body.innerHTML).toBe(hoistExpectedResult); }); @@ -129,14 +114,16 @@ testData.forEach(function (data) { expect(hoistEl.parentNode).toBe(document.body); }); }); - describe("when hoist then unHoist are called", function () { - beforeAll(function () { - hoistDoBeforeAll(hoistTestData); + + describe("when hoist then unHoist are called", () => { + beforeAll(() => { + document.body.innerHTML = hoistTestData; + hoistEl = document.querySelector(".hoist-me"); modal(hoistEl); unmodal(); }); - it("should keep the scripts in the same place", function () { + it("should keep the scripts in the same place", () => { expect(document.querySelector("#script-1").nextElementSibling.textContent).toEqual("one"); expect(document.querySelector("#script-2").previousElementSibling.textContent).toEqual("one"); expect(document.querySelector("#script-2").nextElementSibling.textContent).toEqual("two"); @@ -146,3 +133,45 @@ testData.forEach(function (data) { }); }); }); + +describe("makeup-modal", () => { + describe("given a DOM with a modal element", () => { + describe("when modal is activated with useHiddenProperty: true", () => { + let modalEl; + + beforeEach(() => { + document.body.innerHTML = '
                                              '; + modalEl = document.querySelector(".modal"); + modal(modalEl, { useHiddenProperty: true }); + }); + + it("should not add keyboard trap boundaries", () => { + expect(document.querySelectorAll(".keyboard-trap-boundary").length).toBe(0); + }); + }); + }); + + describe("given a DOM with a link element sibling", () => { + describe("when modal is activated with wrap: true", () => { + let modalEl; + let linkEl; + + beforeEach(() => { + document.body.innerHTML = '
                                              '; + linkEl = document.createElement("link"); + document.body.appendChild(linkEl); + modalEl = document.querySelector(".modal"); + modal(modalEl, { wrap: true }); + }); + + it("should not move the link element into the inert container", () => { + const inertContent = document.querySelector('[data-makeup-modal="inert"]'); + expect(inertContent.contains(linkEl)).toBe(false); + }); + + it("should leave the link element as a direct body child", () => { + expect(linkEl.parentNode).toBe(document.body); + }); + }); + }); +}); diff --git a/packages/core/makeup-navigation-emitter/README.md b/packages/core/makeup-navigation-emitter/README.md index 41d50833..fa41680d 100644 --- a/packages/core/makeup-navigation-emitter/README.md +++ b/packages/core/makeup-navigation-emitter/README.md @@ -29,15 +29,15 @@ With keyboard focus on any list item element, arrow keys will update the underly ``` ```js -import NavigationEmitter from 'makeup-navigation-emitter'; +import * as NavigationEmitter from "makeup-navigation-emitter"; -const widgetEl = document.querySelector('.widget'); +const widgetEl = document.querySelector(".widget"); -var emitter = NavigationEmitter.createLinear(widgetEl, 'li')); +const emitter = NavigationEmitter.createLinear(widgetEl, "li"); // the navigationModelChange event will trigger when using UP/DOWN arrow keys on any element in model -widgetEl.addEventListener('navigationModelChange', function(e) { - console.log(e.detail.fromIndex, e.detail.toIndex); +widgetEl.addEventListener("navigationModelChange", (e) => { + console.log(e.detail.fromIndex, e.detail.toIndex); }); ``` @@ -60,14 +60,14 @@ Note that this module will not highlight the active item, that is the job of an ``` ```js -import NavigationEmitter from 'makeup-navigation-emitter'; +import * as NavigationEmitter from "makeup-navigation-emitter"; -const widgetEl = document.querySelector('.widget'); +const widgetEl = document.querySelector(".widget"); -var emitter = NavigationEmitter.createLinear(widgetEl, 'li')); +const emitter = NavigationEmitter.createLinear(widgetEl, "li"); -widgetEl.addEventListener('navigationModelChange', function(e) { - console.log(e.detail.fromIndex, e.detail.toIndex); +widgetEl.addEventListener("navigationModelChange", (e) => { + console.log(e.detail.fromIndex, e.detail.toIndex); }); ``` @@ -91,14 +91,14 @@ Note that this module will not highlight the active item, that is the job of an ``` ```js -import NavigationEmitter from 'makeup-navigation-emitter'; +import * as NavigationEmitter from "makeup-navigation-emitter"; -const widgetEl = document.querySelector('.widget'); +const widgetEl = document.querySelector(".widget"); -var emitter = NavigationEmitter.createLinear(widgetEl, 'li', { autoInit: 'none', autoReset: 'none' })); +const emitter = NavigationEmitter.createLinear(widgetEl, "li", { autoInit: "none", autoReset: "none" }); -widgetEl.addEventListener('navigationModelChange', function(e) { - console.log(e.detail.fromIndex, e.detail.toIndex); +widgetEl.addEventListener("navigationModelChange", (e) => { + console.log(e.detail.fromIndex, e.detail.toIndex); }); ``` @@ -129,8 +129,9 @@ widgetEl.addEventListener('navigationModelChange', function(e) { ## Properties -- `matchingItems`: returns all items that match item selector -- `navigableItems`: returns navigable subset of matchingItems (e.g. non-hidden & non aria-disabled items) +- `model.items`: returns all items matching the item selector (live DOM query, includes hidden and disabled items) +- `model.index`: gets or sets the current index position (setting triggers `navigationModelChange` if the index changes and the target is navigable) +- `model.currentItem`: returns the item element at the current index ## Events diff --git a/packages/core/makeup-navigation-emitter/dist/cjs/index.js b/packages/core/makeup-navigation-emitter/dist/cjs/index.js index 1b3e3640..92fcbf68 100644 --- a/packages/core/makeup-navigation-emitter/dist/cjs/index.js +++ b/packages/core/makeup-navigation-emitter/dist/cjs/index.js @@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.createLinear = createLinear; -var KeyEmitter = _interopRequireWildcard(require("makeup-key-emitter")); -var ExitEmitter = _interopRequireWildcard(require("makeup-exit-emitter")); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupKeyEmitter = require("makeup-key-emitter"); +var _makeupExitEmitter = require("makeup-exit-emitter"); const defaultOptions = { axis: "both", autoInit: "interactive", @@ -24,7 +23,7 @@ function findNavigableItems(items) { return items.filter(isItemNavigable); } function findFirstNavigableIndex(items) { - return items.findIndex(item => isItemNavigable(item)); + return items.findIndex(isItemNavigable); } function findLastNavigableIndex(items) { // todo: at(-1) is more performant than reverse(), but Babel is not transpiling it @@ -206,7 +205,10 @@ class NavigationModel { */ constructor(el, itemSelector, selectedOptions) { /** @member {typeof defaultOptions} */ - this.options = Object.assign({}, defaultOptions, selectedOptions); + this.options = { + ...defaultOptions, + ...selectedOptions + }; /** @member {HTMLElement} */ this._el = el; @@ -322,8 +324,8 @@ class NavigationEmitter { this._clickListener = onClick.bind(model); this._focusExitListener = onFocusExit.bind(model); this._observer = new MutationObserver(onMutation.bind(model)); - KeyEmitter.addKeyDown(this.el); - ExitEmitter.addFocusExit(this.el); + (0, _makeupKeyEmitter.addKeyDown)(this.el); + (0, _makeupExitEmitter.addFocusExit)(this.el); const axis = model.options.axis; if (axis === "both" || axis === "x") { this.el.addEventListener("arrowLeftKeyDown", this._keyPrevListener); @@ -346,8 +348,8 @@ class NavigationEmitter { }); } destroy() { - KeyEmitter.removeKeyDown(this.el); - ExitEmitter.removeFocusExit(this.el); + (0, _makeupKeyEmitter.removeKeyDown)(this.el); + (0, _makeupExitEmitter.removeFocusExit)(this.el); this.el.removeEventListener("arrowLeftKeyDown", this._keyPrevListener); this.el.removeEventListener("arrowRightKeyDown", this._keyNextListener); this.el.removeEventListener("arrowUpKeyDown", this._keyPrevListener); @@ -365,7 +367,10 @@ function createLinear(el, itemSelector, selectedOptions) { } /* +// todo: rename to createGridNavigationEmitter when implemented static createGrid(el, rowSelector, colSelector, selectedOptions) { return null; } */ + +// todo: rename createLinear to createLinearNavigationEmitter for unambiguous named import usage diff --git a/packages/core/makeup-navigation-emitter/dist/mjs/index.js b/packages/core/makeup-navigation-emitter/dist/mjs/index.js index c0bee6b7..9060774b 100644 --- a/packages/core/makeup-navigation-emitter/dist/mjs/index.js +++ b/packages/core/makeup-navigation-emitter/dist/mjs/index.js @@ -1,5 +1,5 @@ -import * as KeyEmitter from "makeup-key-emitter"; -import * as ExitEmitter from "makeup-exit-emitter"; +import { addKeyDown, removeKeyDown } from "makeup-key-emitter"; +import { addFocusExit, removeFocusExit } from "makeup-exit-emitter"; const defaultOptions = { axis: "both", autoInit: "interactive", @@ -17,7 +17,7 @@ function findNavigableItems(items) { return items.filter(isItemNavigable); } function findFirstNavigableIndex(items) { - return items.findIndex((item) => isItemNavigable(item)); + return items.findIndex(isItemNavigable); } function findLastNavigableIndex(items) { return items.indexOf(findNavigableItems(items).reverse()[0]); @@ -174,7 +174,7 @@ class NavigationModel { * @param {typeof defaultOptions} selectedOptions */ constructor(el, itemSelector, selectedOptions) { - this.options = Object.assign({}, defaultOptions, selectedOptions); + this.options = { ...defaultOptions, ...selectedOptions }; this._el = el; this._itemSelector = itemSelector; } @@ -264,8 +264,8 @@ class NavigationEmitter { this._clickListener = onClick.bind(model); this._focusExitListener = onFocusExit.bind(model); this._observer = new MutationObserver(onMutation.bind(model)); - KeyEmitter.addKeyDown(this.el); - ExitEmitter.addFocusExit(this.el); + addKeyDown(this.el); + addFocusExit(this.el); const axis = model.options.axis; if (axis === "both" || axis === "x") { this.el.addEventListener("arrowLeftKeyDown", this._keyPrevListener); @@ -288,8 +288,8 @@ class NavigationEmitter { }); } destroy() { - KeyEmitter.removeKeyDown(this.el); - ExitEmitter.removeFocusExit(this.el); + removeKeyDown(this.el); + removeFocusExit(this.el); this.el.removeEventListener("arrowLeftKeyDown", this._keyPrevListener); this.el.removeEventListener("arrowRightKeyDown", this._keyNextListener); this.el.removeEventListener("arrowUpKeyDown", this._keyPrevListener); diff --git a/packages/core/makeup-navigation-emitter/src/index.js b/packages/core/makeup-navigation-emitter/src/index.js index 4aa6e62e..9910c307 100644 --- a/packages/core/makeup-navigation-emitter/src/index.js +++ b/packages/core/makeup-navigation-emitter/src/index.js @@ -1,5 +1,5 @@ -import * as KeyEmitter from "makeup-key-emitter"; -import * as ExitEmitter from "makeup-exit-emitter"; +import { addKeyDown, removeKeyDown } from "makeup-key-emitter"; +import { addFocusExit, removeFocusExit } from "makeup-exit-emitter"; const defaultOptions = { axis: "both", @@ -22,7 +22,7 @@ function findNavigableItems(items) { } function findFirstNavigableIndex(items) { - return items.findIndex((item) => isItemNavigable(item)); + return items.findIndex(isItemNavigable); } function findLastNavigableIndex(items) { @@ -224,7 +224,7 @@ class NavigationModel { */ constructor(el, itemSelector, selectedOptions) { /** @member {typeof defaultOptions} */ - this.options = Object.assign({}, defaultOptions, selectedOptions); + this.options = { ...defaultOptions, ...selectedOptions }; /** @member {HTMLElement} */ this._el = el; @@ -352,8 +352,8 @@ class NavigationEmitter { this._focusExitListener = onFocusExit.bind(model); this._observer = new MutationObserver(onMutation.bind(model)); - KeyEmitter.addKeyDown(this.el); - ExitEmitter.addFocusExit(this.el); + addKeyDown(this.el); + addFocusExit(this.el); const axis = model.options.axis; @@ -380,8 +380,8 @@ class NavigationEmitter { } destroy() { - KeyEmitter.removeKeyDown(this.el); - ExitEmitter.removeFocusExit(this.el); + removeKeyDown(this.el); + removeFocusExit(this.el); this.el.removeEventListener("arrowLeftKeyDown", this._keyPrevListener); this.el.removeEventListener("arrowRightKeyDown", this._keyNextListener); @@ -403,9 +403,11 @@ function createLinear(el, itemSelector, selectedOptions) { } /* +// todo: rename to createGridNavigationEmitter when implemented static createGrid(el, rowSelector, colSelector, selectedOptions) { return null; } */ +// todo: rename createLinear to createLinearNavigationEmitter for unambiguous named import usage export { createLinear }; diff --git a/packages/core/makeup-navigation-emitter/test/index.js b/packages/core/makeup-navigation-emitter/test/index.js index 3df72c0b..d788c8cc 100644 --- a/packages/core/makeup-navigation-emitter/test/index.js +++ b/packages/core/makeup-navigation-emitter/test/index.js @@ -1,13 +1,12 @@ -import { describe, expect, beforeEach, afterEach, it } from "vitest"; -import sinon from "sinon"; -import * as NavigationEmitter from "../src/index.js"; +import { describe, expect, beforeEach, afterEach, it, vi } from "vitest"; +import { createLinear } from "../src/index.js"; -var testEl, - testEmitter, - onNavigationModelChange, - onNavigationModelInit, - onNavigationModelReset, - onNavigationModelMutation; +let testEl; +let testEmitter; +let onNavigationModelChange; +let onNavigationModelInit; +let onNavigationModelReset; +let onNavigationModelMutation; function triggerArrowKeyPress(el, dir, num) { for (let i = 0; i < num; i++) { @@ -21,8 +20,8 @@ function triggerKeyPress(el, keyType) { /* BEGIN STATIC MODEL SIZE TESTS */ -describe("given a list of 3 visible items", function () { - beforeEach(function () { +describe("given a list of 3 visible items", () => { + beforeEach(() => { document.body.innerHTML = `
                                              • Item 1
                                                • @@ -32,20 +31,20 @@ describe("given a list of 3 visible items", function () { `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li"); // eslint-disable-line + testEmitter = createLinear(testEl, "li"); }); - it("model should have 3 matching items", function () { - expect(testEmitter.model.items.length).to.equal(3); + it("model should have 3 matching items", () => { + expect(testEmitter.model.items.length).toBe(3); }); }); }); -describe("given a list of 3 items with 1 hidden", function () { - beforeEach(function () { +describe("given a list of 3 items with 1 hidden", () => { + beforeEach(() => { document.body.innerHTML = `
                                                • Item 1
                                                  • @@ -55,20 +54,20 @@ describe("given a list of 3 items with 1 hidden", function () { `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li"); // eslint-disable-line + testEmitter = createLinear(testEl, "li"); }); - it("model should have 3 items", function () { - expect(testEmitter.model.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testEmitter.model.items.length).toBe(3); }); }); }); -describe("given a list of 3 hidden items", function () { - beforeEach(function () { +describe("given a list of 3 hidden items", () => { + beforeEach(() => { document.body.innerHTML = `
                                                    @@ -78,20 +77,20 @@ describe("given a list of 3 hidden items", function () { `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li"); // eslint-disable-line + testEmitter = createLinear(testEl, "li"); }); - it("model should have 3 items", function () { - expect(testEmitter.model.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testEmitter.model.items.length).toBe(3); }); }); }); -describe("given a list of 3 items with 1 aria-disabled", function () { - beforeEach(function () { +describe("given a list of 3 items with 1 aria-disabled", () => { + beforeEach(() => { document.body.innerHTML = `
                                                    • Item 1
                                                      • @@ -101,20 +100,20 @@ describe("given a list of 3 items with 1 aria-disabled", function () { `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li"); // eslint-disable-line + testEmitter = createLinear(testEl, "li"); }); - it("model should have 3 items", function () { - expect(testEmitter.model.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testEmitter.model.items.length).toBe(3); }); }); }); -describe("given a list of 3 aria-disabled items", function () { - beforeEach(function () { +describe("given a list of 3 aria-disabled items", () => { + beforeEach(() => { document.body.innerHTML = `
                                                      • Item 1
                                                        • @@ -124,14 +123,14 @@ describe("given a list of 3 aria-disabled items", function () { `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li"); // eslint-disable-line + testEmitter = createLinear(testEl, "li"); }); - it("model should have 3 items", function () { - expect(testEmitter.model.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testEmitter.model.items.length).toBe(3); }); }); }); @@ -140,8 +139,8 @@ describe("given a list of 3 aria-disabled items", function () { /* BEGIN MUTATION TESTS */ -describe("given a list of 3 visible items", function () { - beforeEach(function () { +describe("given a list of 3 visible items", () => { + beforeEach(() => { document.body.innerHTML = `
                                                        • Item 1
                                                          • @@ -151,23 +150,20 @@ describe("given a list of 3 visible items", function () { `; testEl = document.querySelector(".widget"); - onNavigationModelMutation = sinon.spy(); - testEl.addEventListener("navigationModelMutation", onNavigationModelMutation.bind(this)); - testEmitter = NavigationEmitter.createLinear(testEl, "li"); // eslint-disable-line + onNavigationModelMutation = vi.fn(); + testEl.addEventListener("navigationModelMutation", onNavigationModelMutation); + testEmitter = createLinear(testEl, "li"); }); - describe("when second item is hidden", function () { - beforeEach(function (done) { + describe("when second item is hidden", () => { + beforeEach(async () => { testEmitter.model.items[1].hidden = true; // a delay is added to wait for a sec for mutation to trigger - setTimeout(function () { - done(); - }, 1000); + await new Promise((resolve) => setTimeout(resolve, 1000)); }); - it("should trigger 1 navigationModelMutation event", function () { - // eslint-disable-next-line no-unused-expressions - expect(onNavigationModelMutation.calledOnce).to.be.true; + it("should trigger 1 navigationModelMutation event", () => { + expect(onNavigationModelMutation).toHaveBeenCalledOnce(); }); }); }); @@ -176,8 +172,8 @@ describe("given a list of 3 visible items", function () { /* BEGIN ARROW KEY TESTS */ -describe("given 3 items with default options", function () { - function setup() { +describe("given 3 items with default options", () => { + const setup = () => { document.body.innerHTML = `
                                                          • Item 1
                                                            • @@ -187,101 +183,102 @@ describe("given 3 items with default options", function () { `; testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li"); // eslint-disable-line + testEmitter = createLinear(testEl, "li"); - onNavigationModelChange = sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow left is pressed once", function () { - beforeEach(function () { + describe("when arrow left is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Left", 1); }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow up is pressed once", function () { - beforeEach(function () { + describe("when arrow up is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Up", 1); }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 1 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow right is pressed twice", function () { - beforeEach(function () { + describe("when arrow right is pressed twice", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 2); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed three times", function () { - beforeEach(function () { + describe("when arrow right is pressed three times", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 3); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed once after emitter is destroyed", function () { - beforeEach(function () { + describe("when arrow right is pressed once after emitter is destroyed", () => { + beforeEach(() => { testEmitter.destroy(); triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); }); - it("should trigger 1 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow down is pressed once after emitter is destroyed", function () { - beforeEach(function () { + describe("when arrow down is pressed once after emitter is destroyed", () => { + beforeEach(() => { testEmitter.destroy(); triggerArrowKeyPress(testEl, "Down", 1); }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); }); -describe("given 3 items with default options", function () { - var secondListEl; - function setup() { +describe("given 3 items with default options", () => { + let secondListEl; + + const setup = () => { document.body.innerHTML = `
                                                            • Item 1
                                                              • @@ -292,26 +289,26 @@ describe("given 3 items with default options", function () { testEl = document.querySelector(".widget"); secondListEl = document.querySelector(".second"); - testEmitter = NavigationEmitter.createLinear(testEl, "li"); // eslint-disable-line + testEmitter = createLinear(testEl, "li"); - onNavigationModelChange = sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when second item is clicked", function () { - beforeEach(function () { + describe("when second item is clicked", () => { + beforeEach(() => { secondListEl.click(); }); - it("should trigger 1 navigationModelChange events", function () { - // eslint-disable-next-line no-unused-expressions - expect(onNavigationModelChange.calledOnce).to.be.true; + + it("should trigger 1 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); - it("should have index value of 1", function () { - expect(testEmitter.model.index).to.equal(1); + it("should have index value of 1", () => { + expect(testEmitter.model.index).toBe(1); }); }); }); @@ -320,8 +317,8 @@ describe("given 3 items with default options", function () { /* BEGIN HOME & END KEY TESTS */ -describe("given 3 items with default options", function () { - function setup() { +describe("given 3 items with default options", () => { + const setup = () => { document.body.innerHTML = `
                                                              • Item 1
                                                                • @@ -331,32 +328,32 @@ describe("given 3 items with default options", function () { `; testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li"); // eslint-disable-line + testEmitter = createLinear(testEl, "li"); - onNavigationModelChange = sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when home key is pressed once", function () { - beforeEach(function () { + describe("when home key is pressed once", () => { + beforeEach(() => { triggerKeyPress(testEl, "home"); }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when end key is pressed once", function () { - beforeEach(function () { + describe("when end key is pressed once", () => { + beforeEach(() => { triggerKeyPress(testEl, "end"); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); }); @@ -365,8 +362,8 @@ describe("given 3 items with default options", function () { /* BEGIN AUTOWRAP ARROW KEY TESTS */ -describe("given 3 items with autoWrap on", function () { - function setup() { +describe("given 3 items with autoWrap on", () => { + const setup = () => { document.body.innerHTML = `
                                                                • Item 1
                                                                  • @@ -376,72 +373,72 @@ describe("given 3 items with autoWrap on", function () { `; testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li", { wrap: true }); // eslint-disable-line + testEmitter = createLinear(testEl, "li", { wrap: true }); - onNavigationModelChange = sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow left is pressed once", function () { - beforeEach(function () { + describe("when arrow left is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Left", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow up is pressed once", function () { - beforeEach(function () { + describe("when arrow up is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Up", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow right is pressed twice", function () { - beforeEach(function () { + describe("when arrow right is pressed twice", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 2); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed three times", function () { - beforeEach(function () { + describe("when arrow right is pressed three times", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 3); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(3); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(3); }); }); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); }); @@ -450,8 +447,8 @@ describe("given 3 items with autoWrap on", function () { /* BEGIN INDEX SETTER TESTS */ -describe("given 3 items with default options", function () { - function setup() { +describe("given 3 items with default options", () => { + const setup = () => { document.body.innerHTML = `
                                                                  • Item 1
                                                                    • @@ -461,42 +458,42 @@ describe("given 3 items with default options", function () { `; testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li"); // eslint-disable-line + testEmitter = createLinear(testEl, "li"); - onNavigationModelChange = sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when index set to current index", function () { - beforeEach(function () { + describe("when index set to current index", () => { + beforeEach(() => { testEmitter.model.index = 0; }); - it("should trigger 0 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange event", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when index set within bounds", function () { - beforeEach(function () { + describe("when index set within bounds", () => { + beforeEach(() => { testEmitter.model.index = 1; }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when index set out of bounds", function () { - beforeEach(function () { + describe("when index set out of bounds", () => { + beforeEach(() => { testEmitter.model.index = 100; }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); }); @@ -505,8 +502,8 @@ describe("given 3 items with default options", function () { /* BEGIN AXIS TESTS */ -describe("given 3 items with axis set to both", function () { - function setup() { +describe("given 3 items with axis set to both", () => { + const setup = () => { document.body.innerHTML = `
                                                                    • Item 1
                                                                      • @@ -516,60 +513,60 @@ describe("given 3 items with axis set to both", function () { `; testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li", { axis: "both" }); // eslint-disable-line + testEmitter = createLinear(testEl, "li", { axis: "both" }); - onNavigationModelChange = sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow up is pressed once after arrow down", function () { - beforeEach(function () { + describe("when arrow up is pressed once after arrow down", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); triggerArrowKeyPress(testEl, "Up", 1); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow left is pressed once after arrow right", function () { - beforeEach(function () { + describe("when arrow left is pressed once after arrow right", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); triggerArrowKeyPress(testEl, "Left", 1); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); }); -describe("given 3 items with axis set to x", function () { - function setup() { +describe("given 3 items with axis set to x", () => { + const setup = () => { document.body.innerHTML = `
                                                                      • Item 1
                                                                        • @@ -579,60 +576,60 @@ describe("given 3 items with axis set to x", function () { `; testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li", { axis: "x" }); // eslint-disable-line + testEmitter = createLinear(testEl, "li", { axis: "x" }); - onNavigationModelChange = sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); }); - it("should trigger 0 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange event", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow up is pressed once after arrow down", function () { - beforeEach(function () { + describe("when arrow up is pressed once after arrow down", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); triggerArrowKeyPress(testEl, "Up", 1); }); - it("should trigger 0 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange event", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow left is pressed once after arrow right", function () { - beforeEach(function () { + describe("when arrow left is pressed once after arrow right", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); triggerArrowKeyPress(testEl, "Left", 1); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); }); -describe("given 3 items with axis set to y", function () { - function setup() { +describe("given 3 items with axis set to y", () => { + const setup = () => { document.body.innerHTML = `
                                                                        • Item 1
                                                                          • @@ -642,54 +639,54 @@ describe("given 3 items with axis set to y", function () { `; testEl = document.querySelector(".widget"); - testEmitter = NavigationEmitter.createLinear(testEl, "li", { axis: "y" }); // eslint-disable-line + testEmitter = createLinear(testEl, "li", { axis: "y" }); - onNavigationModelChange = sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 0 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange event", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow left is pressed once after arrow right", function () { - beforeEach(function () { + describe("when arrow left is pressed once after arrow right", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); triggerArrowKeyPress(testEl, "Left", 1); }); - it("should trigger 0 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange event", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow Down is pressed twice", function () { - beforeEach(function () { + describe("when arrow Down is pressed twice", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 2); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow Up is pressed once after arrow down", function () { - beforeEach(function () { + describe("when arrow Up is pressed once after arrow down", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); triggerArrowKeyPress(testEl, "Up", 1); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); }); @@ -698,8 +695,8 @@ describe("given 3 items with axis set to y", function () { /* BEGIN AUTO INIT TESTS */ -describe("given 3 items", function () { - function setup() { +describe("given 3 items", () => { + const setup = () => { document.body.innerHTML = `
                                                                          • Item 1
                                                                            • @@ -708,73 +705,73 @@ describe("given 3 items", function () {
                                                                          `; - onNavigationModelInit = sinon.spy(); + onNavigationModelInit = vi.fn(); testEl = document.querySelector(".widget"); testEl.addEventListener("navigationModelInit", onNavigationModelInit); - } + }; beforeEach(setup); afterEach(setup); - describe("when autoInit is none", function () { - beforeEach(function () { - testEmitter = NavigationEmitter.createLinear(testEl, "li", { autoInit: "none" }); // eslint-disable-line + describe("when autoInit is none", () => { + beforeEach(() => { + testEmitter = createLinear(testEl, "li", { autoInit: "none" }); }); - it("should trigger navigationModelInit event", function () { - expect(onNavigationModelInit.callCount).to.equal(1); + it("should trigger navigationModelInit event", () => { + expect(onNavigationModelInit).toHaveBeenCalledOnce(); }); - it("should have index value of null", function () { - expect(testEmitter.model.index).to.be.null; + it("should have index value of null", () => { + expect(testEmitter.model.index).toBeNull(); }); }); - describe("when autoInit is interactive", function () { - beforeEach(function () { - testEmitter = NavigationEmitter.createLinear(testEl, "li", { autoInit: "interactive" }); // eslint-disable-line + describe("when autoInit is interactive", () => { + beforeEach(() => { + testEmitter = createLinear(testEl, "li", { autoInit: "interactive" }); }); - it("should trigger navigationModelInit event once", function () { - expect(onNavigationModelInit.callCount).to.equal(1); + it("should trigger navigationModelInit event once", () => { + expect(onNavigationModelInit).toHaveBeenCalledOnce(); }); - it("should have index value of 0", function () { - expect(testEmitter.model.index).to.equal(0); + it("should have index value of 0", () => { + expect(testEmitter.model.index).toBe(0); }); }); - describe("when autoInit is ariaChecked", function () { - beforeEach(function () { - testEmitter = NavigationEmitter.createLinear(testEl, "li", { autoInit: "ariaChecked" }); // eslint-disable-line + describe("when autoInit is ariaChecked", () => { + beforeEach(() => { + testEmitter = createLinear(testEl, "li", { autoInit: "ariaChecked" }); }); - it("should trigger navigationModelInit event once", function () { - expect(onNavigationModelInit.callCount).to.equal(1); + it("should trigger navigationModelInit event once", () => { + expect(onNavigationModelInit).toHaveBeenCalledOnce(); }); - it("should have index value of 2", function () { - expect(testEmitter.model.index).to.equal(2); + it("should have index value of 2", () => { + expect(testEmitter.model.index).toBe(2); }); }); - describe("when autoInit is ariaSelected", function () { - beforeEach(function () { - testEmitter = NavigationEmitter.createLinear(testEl, "li", { autoInit: "ariaSelected" }); // eslint-disable-line + describe("when autoInit is ariaSelected", () => { + beforeEach(() => { + testEmitter = createLinear(testEl, "li", { autoInit: "ariaSelected" }); }); - it("should trigger navigationModelInit event once", function () { - expect(onNavigationModelInit.callCount).to.equal(1); + it("should trigger navigationModelInit event once", () => { + expect(onNavigationModelInit).toHaveBeenCalledOnce(); }); - it("should have index value of 1", function () { - expect(testEmitter.model.index).to.equal(1); + it("should have index value of 1", () => { + expect(testEmitter.model.index).toBe(1); }); }); }); -describe("given 3 items", function () { - function setup() { +describe("given 3 items", () => { + const setup = () => { document.body.innerHTML = `
                                                                          • Item 1
                                                                            • @@ -783,31 +780,31 @@ describe("given 3 items", function () {
                                                                          `; - onNavigationModelInit = sinon.spy(); + onNavigationModelInit = vi.fn(); testEl = document.querySelector(".widget"); testEl.addEventListener("navigationModelInit", onNavigationModelInit); - } + }; beforeEach(setup); afterEach(setup); - describe("when autoInit is ariaSelectedOrInteractive", function () { - beforeEach(function () { - testEmitter = NavigationEmitter.createLinear(testEl, "li", { autoInit: "ariaSelectedOrInteractive" }); // eslint-disable-line + describe("when autoInit is ariaSelectedOrInteractive", () => { + beforeEach(() => { + testEmitter = createLinear(testEl, "li", { autoInit: "ariaSelectedOrInteractive" }); }); - it("should trigger navigationModelInit event once", function () { - expect(onNavigationModelInit.callCount).to.equal(1); + it("should trigger navigationModelInit event once", () => { + expect(onNavigationModelInit).toHaveBeenCalledOnce(); }); - it("should pick first aria selected element", function () { - expect(testEmitter.model.index).to.equal(1); + it("should pick first aria selected element", () => { + expect(testEmitter.model.index).toBe(1); }); }); }); -describe("given 3 items", function () { - function setup() { +describe("given 3 items", () => { + const setup = () => { document.body.innerHTML = `
                                                                          • Item 1
                                                                            • @@ -816,25 +813,25 @@ describe("given 3 items", function () {
                                                                          `; - onNavigationModelInit = sinon.spy(); + onNavigationModelInit = vi.fn(); testEl = document.querySelector(".widget"); testEl.addEventListener("navigationModelInit", onNavigationModelInit); - } + }; beforeEach(setup); afterEach(setup); - describe("when autoInit is ariaSelectedOrInteractive", function () { - beforeEach(function () { - testEmitter = NavigationEmitter.createLinear(testEl, "li", { autoInit: "ariaSelectedOrInteractive" }); // eslint-disable-line + describe("when autoInit is ariaSelectedOrInteractive", () => { + beforeEach(() => { + testEmitter = createLinear(testEl, "li", { autoInit: "ariaSelectedOrInteractive" }); }); - it("should trigger navigationModelInit event once", function () { - expect(onNavigationModelInit.callCount).to.equal(1); + it("should trigger navigationModelInit event once", () => { + expect(onNavigationModelInit).toHaveBeenCalledOnce(); }); - it("should pick first interactive element", function () { - expect(testEmitter.model.index).to.equal(0); + it("should pick first interactive element", () => { + expect(testEmitter.model.index).toBe(0); }); }); }); @@ -843,10 +840,10 @@ describe("given 3 items", function () { /* BEGIN AUTO RESET TEST */ -describe("given 3 items", function () { - var buttonEl; +describe("given 3 items", () => { + let buttonEl; - function setup() { + const setup = () => { document.body.innerHTML = `
                                                                          • Item 1
                                                                            • @@ -857,38 +854,38 @@ describe("given 3 items", function () { `; testEl = document.querySelector(".widget"); - onNavigationModelReset = sinon.spy(); + onNavigationModelReset = vi.fn(); testEl.addEventListener("navigationModelReset", onNavigationModelReset); - } + }; beforeEach(setup); afterEach(setup); - describe("and autoReset is current", function () { - beforeEach(function () { - testEmitter = NavigationEmitter.createLinear(testEl, "li", { autoReset: "current" }); // eslint-disable-line + describe("and autoReset is current", () => { + beforeEach(() => { + testEmitter = createLinear(testEl, "li", { autoReset: "current" }); }); - describe("when testEmitter gets reset", function () { - beforeEach(function () { + describe("when testEmitter gets reset", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); testEmitter.model.reset(); }); - it("should trigger no onNavigationModelReset event", function () { - expect(onNavigationModelReset.callCount).to.equal(0); + it("should trigger no onNavigationModelReset event", () => { + expect(onNavigationModelReset).not.toHaveBeenCalled(); }); }); - describe("when focus exits the widget", function () { - beforeEach(function () { + describe("when focus exits the widget", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); buttonEl = document.querySelector("button"); buttonEl.click(); }); - it("should set focus to item with index 1", function () { - expect(testEmitter.model.index).to.equal(1); + it("should set focus to item with index 1", () => { + expect(testEmitter.model.index).toBe(1); }); // it('should trigger 1 onNavigationModelReset event', function() { @@ -897,26 +894,362 @@ describe("given 3 items", function () { }); }); - describe("and autoReset is interactive", function () { - beforeEach(function () { - testEmitter = NavigationEmitter.createLinear(testEl, "li", { autoReset: "interactive" }); // eslint-disable-line + describe("and autoReset is interactive", () => { + beforeEach(() => { + testEmitter = createLinear(testEl, "li", { autoReset: "interactive" }); }); - describe("when testEmitter gets reset after arrow key down", function () { - beforeEach(function () { + describe("when testEmitter gets reset after arrow key down", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); testEmitter.model.reset(); }); - it("should trigger one onNavigationModelReset event", function () { - expect(onNavigationModelReset.calledOnce).to.be.true; + it("should trigger one onNavigationModelReset event", () => { + expect(onNavigationModelReset).toHaveBeenCalledOnce(); }); - it("should set model to first interactive Item", function () { - expect(testEmitter.model.index).to.equal(0); + it("should set model to first interactive Item", () => { + expect(testEmitter.model.index).toBe(0); }); }); }); }); /* END AUTO RESET TESTS */ + +/* BEGIN IGNORE BY DELEGATE SELECTOR TESTS */ + +describe("given 3 items with ignoreByDelegateSelector set to '.ignore'", () => { + const setup = () => { + document.body.innerHTML = ` +
                                                                              +
                                                                            • Item 1
                                                                              • +
                                                                            • Item 2
                                                                              • +
                                                                            • Item 3
                                                                              • +
                                                                            + `; + + testEl = document.querySelector(".widget"); + testEmitter = createLinear(testEl, "li", { ignoreByDelegateSelector: ".ignore" }); + + onNavigationModelChange = vi.fn(); + testEl.addEventListener("navigationModelChange", onNavigationModelChange); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when arrow right is pressed with ignored item as target", () => { + beforeEach(() => { + testEl.dispatchEvent( + new CustomEvent("arrowRightKeyDown", { detail: { target: document.querySelector(".ignore") } }), + ); + }); + + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); + }); + }); + + describe("when arrow right is pressed with non-ignored item as target", () => { + beforeEach(() => { + testEl.dispatchEvent( + new CustomEvent("arrowRightKeyDown", { detail: { target: document.querySelector("li:first-child") } }), + ); + }); + + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); + }); + }); +}); + +/* END IGNORE BY DELEGATE SELECTOR TESTS */ + +/* BEGIN AUTO INIT NUMBER TESTS */ + +describe("given 3 items", () => { + const setup = () => { + document.body.innerHTML = ` +
                                                                              +
                                                                            • Item 1
                                                                              • +
                                                                            • Item 2
                                                                              • +
                                                                            • Item 3
                                                                              • +
                                                                            + `; + + testEl = document.querySelector(".widget"); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when autoInit is 2", () => { + beforeEach(() => { + testEmitter = createLinear(testEl, "li", { autoInit: 2 }); + }); + + it("should have index value of 2", () => { + expect(testEmitter.model.index).toBe(2); + }); + }); +}); + +/* END AUTO INIT NUMBER TESTS */ + +/* BEGIN CLICK NON-NAVIGABLE TESTS */ + +describe("given 3 items with aria-disabled second item", () => { + let disabledItemEl; + + const setup = () => { + document.body.innerHTML = ` +
                                                                              +
                                                                            • Item 1
                                                                              • +
                                                                            • Item 2
                                                                              • +
                                                                            • Item 3
                                                                              • +
                                                                            + `; + + testEl = document.querySelector(".widget"); + disabledItemEl = document.querySelector("[aria-disabled]"); + testEmitter = createLinear(testEl, "li"); + + onNavigationModelChange = vi.fn(); + testEl.addEventListener("navigationModelChange", onNavigationModelChange); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when aria-disabled item is clicked", () => { + beforeEach(() => { + disabledItemEl.click(); + }); + + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); + }); + }); +}); + +describe("given 3 items with hidden second item", () => { + let hiddenItemEl; + + const setup = () => { + document.body.innerHTML = ` +
                                                                              +
                                                                            • Item 1
                                                                              • + +
                                                                            • Item 3
                                                                              • +
                                                                            + `; + + testEl = document.querySelector(".widget"); + hiddenItemEl = document.querySelector("[hidden]"); + testEmitter = createLinear(testEl, "li"); + + onNavigationModelChange = vi.fn(); + testEl.addEventListener("navigationModelChange", onNavigationModelChange); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when hidden item is clicked", () => { + beforeEach(() => { + hiddenItemEl.click(); + }); + + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); + }); + }); +}); + +/* END CLICK NON-NAVIGABLE TESTS */ + +/* BEGIN NULL INDEX NAVIGATION TESTS */ + +describe("given 3 items with autoInit none", () => { + const setup = () => { + document.body.innerHTML = ` +
                                                                              +
                                                                            • Item 1
                                                                              • +
                                                                            • Item 2
                                                                              • +
                                                                            • Item 3
                                                                              • +
                                                                            + `; + + testEl = document.querySelector(".widget"); + testEmitter = createLinear(testEl, "li", { autoInit: "none" }); + + onNavigationModelChange = vi.fn(); + testEl.addEventListener("navigationModelChange", onNavigationModelChange); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when arrow right is pressed once", () => { + beforeEach(() => { + triggerArrowKeyPress(testEl, "Right", 1); + }); + + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); + }); + + it("should set index to 0", () => { + expect(testEmitter.model.index).toBe(0); + }); + }); + + describe("when arrow left is pressed once", () => { + beforeEach(() => { + triggerArrowKeyPress(testEl, "Left", 1); + }); + + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); + }); + }); +}); + +/* END NULL INDEX NAVIGATION TESTS */ + +/* BEGIN ADDITIONAL MUTATION TESTS */ + +describe("given a list of 3 visible items with current item at index 0", () => { + beforeEach(() => { + document.body.innerHTML = ` +
                                                                              +
                                                                            • Item 1
                                                                              • +
                                                                            • Item 2
                                                                              • +
                                                                            • Item 3
                                                                              • +
                                                                            + `; + + testEl = document.querySelector(".widget"); + onNavigationModelMutation = vi.fn(); + testEl.addEventListener("navigationModelMutation", onNavigationModelMutation); + testEmitter = createLinear(testEl, "li"); + }); + + describe("when current item is aria-disabled", () => { + beforeEach(async () => { + testEmitter.model.items[0].setAttribute("aria-disabled", "true"); + await new Promise((resolve) => setTimeout(resolve, 1000)); + }); + + it("should trigger 1 navigationModelMutation event", () => { + expect(onNavigationModelMutation).toHaveBeenCalledOnce(); + }); + + it("should keep index at 0", () => { + expect(testEmitter.model.index).toBe(0); + }); + }); + + describe("when current item is hidden", () => { + beforeEach(async () => { + testEmitter.model.items[0].hidden = true; + await new Promise((resolve) => setTimeout(resolve, 1000)); + }); + + it("should trigger 1 navigationModelMutation event", () => { + expect(onNavigationModelMutation).toHaveBeenCalledOnce(); + }); + + it("should move index to first navigable item", () => { + expect(testEmitter.model.index).toBe(1); + }); + }); + + describe("when a new item is appended", () => { + beforeEach(async () => { + const newItem = document.createElement("li"); + newItem.textContent = "Item 4"; + testEl.appendChild(newItem); + await new Promise((resolve) => setTimeout(resolve, 1000)); + }); + + it("should trigger 1 navigationModelMutation event", () => { + expect(onNavigationModelMutation).toHaveBeenCalledOnce(); + }); + }); +}); + +/* END ADDITIONAL MUTATION TESTS */ + +/* BEGIN AUTO RESET NULL TESTS */ + +describe("given 3 items with autoReset null", () => { + const setup = () => { + document.body.innerHTML = ` +
                                                                              +
                                                                            • Item 1
                                                                              • +
                                                                            • Item 2
                                                                              • +
                                                                            • Item 3
                                                                              • +
                                                                            + `; + + testEl = document.querySelector(".widget"); + testEmitter = createLinear(testEl, "li", { autoReset: null }); + + onNavigationModelReset = vi.fn(); + testEl.addEventListener("navigationModelReset", onNavigationModelReset); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when focus exits the widget", () => { + beforeEach(() => { + triggerArrowKeyPress(testEl, "Down", 1); + testEl.dispatchEvent(new CustomEvent("focusExit", { bubbles: false })); + }); + + it("should trigger 0 navigationModelReset events", () => { + expect(onNavigationModelReset).not.toHaveBeenCalled(); + }); + + it("should keep index at 1", () => { + expect(testEmitter.model.index).toBe(1); + }); + }); +}); + +/* END AUTO RESET NULL TESTS */ + +/* BEGIN ARIA ATTRIBUTE NAVIGABILITY TESTS */ + +describe("given 3 items where aria-selected is on a hidden item and a visible item", () => { + const setup = () => { + document.body.innerHTML = ` +
                                                                              +
                                                                            • Item 1
                                                                              • + +
                                                                            • Item 3
                                                                              • +
                                                                            + `; + + testEl = document.querySelector(".widget"); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when autoInit is ariaSelected", () => { + beforeEach(() => { + testEmitter = createLinear(testEl, "li", { autoInit: "ariaSelected" }); + }); + + it("should skip hidden item and use first visible aria-selected item", () => { + expect(testEmitter.model.index).toBe(2); + }); + }); +}); + +/* END ARIA ATTRIBUTE NAVIGABILITY TESTS */ diff --git a/packages/core/makeup-next-id/README.md b/packages/core/makeup-next-id/README.md index 71a4b186..e563e647 100644 --- a/packages/core/makeup-next-id/README.md +++ b/packages/core/makeup-next-id/README.md @@ -32,19 +32,15 @@ Markup before: Markup after: ```html -
                                                                            -
                                                                            -
                                                                            +
                                                                            +
                                                                            +
                                                                            ``` ## Custom Events - None -## Dependencies - -- [nanoid](https://www.npmjs.com/package/nanoid) - ## Polyfills - None diff --git a/packages/core/makeup-next-id/dist/cjs/index.js b/packages/core/makeup-next-id/dist/cjs/index.js index 356111de..3110749d 100644 --- a/packages/core/makeup-next-id/dist/cjs/index.js +++ b/packages/core/makeup-next-id/dist/cjs/index.js @@ -32,7 +32,7 @@ function _default(el) { const key = `${prefix}${separator}${randomPortion}`; // initialise key in sequence map if necessary - sequenceMap[key] = sequenceMap[key] || 0; + sequenceMap[key] ??= 0; if (!el.id) { el.setAttribute("id", `${key}-${sequenceMap[key]++}`); } diff --git a/packages/core/makeup-next-id/dist/mjs/index.js b/packages/core/makeup-next-id/dist/mjs/index.js index 6e8df5d3..b348aba7 100644 --- a/packages/core/makeup-next-id/dist/mjs/index.js +++ b/packages/core/makeup-next-id/dist/mjs/index.js @@ -17,7 +17,7 @@ function createRandomPortion(size) { function index_default(el, prefix = defaultPrefix) { const separator = prefix === "" ? "" : "-"; const key = `${prefix}${separator}${randomPortion}`; - sequenceMap[key] = sequenceMap[key] || 0; + sequenceMap[key] ??= 0; if (!el.id) { el.setAttribute("id", `${key}-${sequenceMap[key]++}`); } diff --git a/packages/core/makeup-next-id/src/index.js b/packages/core/makeup-next-id/src/index.js index 24c32c5f..38edb999 100644 --- a/packages/core/makeup-next-id/src/index.js +++ b/packages/core/makeup-next-id/src/index.js @@ -29,7 +29,7 @@ export default function (el, prefix = defaultPrefix) { const key = `${prefix}${separator}${randomPortion}`; // initialise key in sequence map if necessary - sequenceMap[key] = sequenceMap[key] || 0; + sequenceMap[key] ??= 0; if (!el.id) { el.setAttribute("id", `${key}-${sequenceMap[key]++}`); diff --git a/packages/core/makeup-next-id/test/index.js b/packages/core/makeup-next-id/test/index.js index 5fe4cfb9..7f05d962 100644 --- a/packages/core/makeup-next-id/test/index.js +++ b/packages/core/makeup-next-id/test/index.js @@ -1,74 +1,99 @@ -/* eslint-env jest */ - import nextId from "../src/index.js"; import { describe, expect, beforeAll, it } from "vitest"; const containerEl = document.createElement("div"); -let testEls; - -function nodeListToArray(nodeList) { - return Array.prototype.slice.call(nodeList); -} - document.body.appendChild(containerEl); describe("given three elements without an existing id", () => { describe("when nextId is called on each element in sequence", () => { + let testEls; const nids = []; beforeAll(() => { containerEl.innerHTML = "
                                                                            "; - testEls = nodeListToArray(containerEl.querySelectorAll("div")); + testEls = Array.from(containerEl.querySelectorAll("div")); + nids.push(nextId(testEls[0]), nextId(testEls[1]), nextId(testEls[2])); + }); - nids.push(nextId(testEls[0])); - nids.push(nextId(testEls[1])); - nids.push(nextId(testEls[2])); + it("should assign id to first element", () => { + expect(testEls[0].id).toBe(nids[0]); }); - it("then first el should have id={id}".replace("{id}", nids[0]), () => { - expect(testEls[0].id).to.equal(nids[0]); + it("should assign id to second element", () => { + expect(testEls[1].id).toBe(nids[1]); }); - it("then second el should have id={id}".replace("{id}", nids[1]), () => { - expect(testEls[1].id).to.equal(nids[1]); + it("should assign id to third element", () => { + expect(testEls[2].id).toBe(nids[2]); }); - it("then third el id should have id={id}".replace("{id}", nids[2]), () => { - expect(testEls[2].id).to.equal(nids[2]); + it("should assign sequential ids sharing the same prefix", () => { + const prefix = nids[0].slice(0, -1); + expect(nids[1].startsWith(prefix)).toBe(true); + expect(nids[2].startsWith(prefix)).toBe(true); }); }); describe("when nextId is called on each element in sequence using custom prefix", () => { + let testEls; const nids = []; beforeAll(() => { containerEl.innerHTML = "
                                                                            "; - testEls = nodeListToArray(containerEl.querySelectorAll("div")); + testEls = Array.from(containerEl.querySelectorAll("div")); + nids.push(nextId(testEls[0], "foo"), nextId(testEls[1], "foo"), nextId(testEls[2], "foo")); + }); + + it("should assign id to first element", () => { + expect(testEls[0].id).toBe(nids[0]); + }); + + it("should assign id to second element", () => { + expect(testEls[1].id).toBe(nids[1]); + }); + + it("should assign id to third element", () => { + expect(testEls[2].id).toBe(nids[2]); + }); + + it("should use the custom prefix", () => { + expect(nids[0].startsWith("foo-")).toBe(true); + }); + }); +}); - nids.push(nextId(testEls[0], "foo-")); - nids.push(nextId(testEls[1], "foo-")); - nids.push(nextId(testEls[2], "foo-")); +describe("given an element without an existing id", () => { + describe("when nextId is called with an empty string prefix", () => { + let el; + let nid; + + beforeAll(() => { + el = document.createElement("div"); + document.body.appendChild(el); + nid = nextId(el, ""); }); - it("then first el should have id={id}".replace("{id}", nids[0]), () => { - expect(testEls[0].id).to.equal(nids[0]); + it("should assign an id to the element", () => { + expect(el.id).toBeTruthy(); }); - it("then second el should have id={id}".replace("{id}", nids[1]), () => { - expect(testEls[1].id).to.equal(nids[1]); + it("should not start with a hyphen", () => { + expect(el.id.startsWith("-")).toBe(false); }); - it("then third el id should have id={id}".replace("{id}", nids[2]), () => { - expect(testEls[2].id).to.equal(nids[2]); + it("should return the assigned id", () => { + expect(nid).toBe(el.id); }); }); }); describe("given three elements with an existing id", () => { describe("when nextId is called on each element in sequence", () => { + let testEls; + beforeAll(() => { containerEl.innerHTML = '
                                                                            '; - testEls = nodeListToArray(containerEl.querySelectorAll("div")); + testEls = Array.from(containerEl.querySelectorAll("div")); nextId(testEls[0]); nextId(testEls[1]); @@ -76,38 +101,40 @@ describe("given three elements with an existing id", () => { }); it("should maintain id=foo-0 on first element", () => { - expect(testEls[0].id).to.equal("foo-0"); + expect(testEls[0].id).toBe("foo-0"); }); it("should maintain id=foo-1 on second element", () => { - expect(testEls[1].id).to.equal("foo-1"); + expect(testEls[1].id).toBe("foo-1"); }); it("should maintain id=foo-2 on third element", () => { - expect(testEls[2].id).to.equal("foo-2"); + expect(testEls[2].id).toBe("foo-2"); }); }); describe("when nextId is called on each element in sequence using custom prefix", () => { + let testEls; + beforeAll(() => { - containerEl.innerHTML = '
                                                                            '; - testEls = nodeListToArray(containerEl.querySelectorAll("div")); + containerEl.innerHTML = '
                                                                            '; + testEls = Array.from(containerEl.querySelectorAll("div")); - nextId(testEls[0]); - nextId(testEls[1]); - nextId(testEls[2]); + nextId(testEls[0], "custom"); + nextId(testEls[1], "custom"); + nextId(testEls[2], "custom"); }); - it("should maintain id=foo-0 on first element", () => { - expect(testEls[0].id).to.equal("foo-0"); + it("should maintain id=bar-0 on first element", () => { + expect(testEls[0].id).toBe("bar-0"); }); - it("should maintain id=foo-1 on second element", () => { - expect(testEls[1].id).to.equal("foo-1"); + it("should maintain id=bar-1 on second element", () => { + expect(testEls[1].id).toBe("bar-1"); }); - it("should maintain id=foo-2 on third element", () => { - expect(testEls[2].id).to.equal("foo-2"); + it("should maintain id=bar-2 on third element", () => { + expect(testEls[2].id).toBe("bar-2"); }); }); }); diff --git a/packages/core/makeup-prevent-scroll-keys/README.md b/packages/core/makeup-prevent-scroll-keys/README.md index 645bd74b..fdfb1e2b 100644 --- a/packages/core/makeup-prevent-scroll-keys/README.md +++ b/packages/core/makeup-prevent-scroll-keys/README.md @@ -11,12 +11,10 @@ This module is still in an experimental state, until it reaches v1 you must cons ```js import * as scrollKeyPreventer from "makeup-prevent-scroll-keys"; -// get element reference const widgetEl = document.querySelector(".widget"); -// execute -scrollKeyPreventer.add(el); +scrollKeyPreventer.add(widgetEl); // to remove -scrollKeyPreventer.remove(el); +scrollKeyPreventer.remove(widgetEl); ``` diff --git a/packages/core/makeup-prevent-scroll-keys/dist/cjs/index.js b/packages/core/makeup-prevent-scroll-keys/dist/cjs/index.js index c564396b..48a59471 100644 --- a/packages/core/makeup-prevent-scroll-keys/dist/cjs/index.js +++ b/packages/core/makeup-prevent-scroll-keys/dist/cjs/index.js @@ -3,16 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.add = add; -exports.remove = remove; -function onKeyDown(e) { - if (e.keyCode >= 32 && e.keyCode <= 40) { +exports.remove = exports.add = void 0; +const SCROLL_KEYS = new Set([" ", "PageUp", "PageDown", "End", "Home", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"]); +const onKeyDown = e => { + if (SCROLL_KEYS.has(e.key)) { e.preventDefault(); } -} -function add(el) { +}; +const add = el => { el.addEventListener("keydown", onKeyDown); -} -function remove(el) { +}; +exports.add = add; +const remove = el => { el.removeEventListener("keydown", onKeyDown); -} +}; +exports.remove = remove; diff --git a/packages/core/makeup-prevent-scroll-keys/dist/mjs/index.js b/packages/core/makeup-prevent-scroll-keys/dist/mjs/index.js index fdbbeabc..a38e6aa9 100644 --- a/packages/core/makeup-prevent-scroll-keys/dist/mjs/index.js +++ b/packages/core/makeup-prevent-scroll-keys/dist/mjs/index.js @@ -1,14 +1,25 @@ -function onKeyDown(e) { - if (e.keyCode >= 32 && e.keyCode <= 40) { +const SCROLL_KEYS = /* @__PURE__ */ new Set([ + " ", + "PageUp", + "PageDown", + "End", + "Home", + "ArrowLeft", + "ArrowUp", + "ArrowRight", + "ArrowDown" +]); +const onKeyDown = (e) => { + if (SCROLL_KEYS.has(e.key)) { e.preventDefault(); } -} -function add(el) { +}; +const add = (el) => { el.addEventListener("keydown", onKeyDown); -} -function remove(el) { +}; +const remove = (el) => { el.removeEventListener("keydown", onKeyDown); -} +}; export { add, remove diff --git a/packages/core/makeup-prevent-scroll-keys/src/index.js b/packages/core/makeup-prevent-scroll-keys/src/index.js index 41ec3a7f..b76976a2 100644 --- a/packages/core/makeup-prevent-scroll-keys/src/index.js +++ b/packages/core/makeup-prevent-scroll-keys/src/index.js @@ -1,15 +1,27 @@ -function onKeyDown(e) { - if (e.keyCode >= 32 && e.keyCode <= 40) { +const SCROLL_KEYS = new Set([ + " ", + "PageUp", + "PageDown", + "End", + "Home", + "ArrowLeft", + "ArrowUp", + "ArrowRight", + "ArrowDown", +]); + +const onKeyDown = (e) => { + if (SCROLL_KEYS.has(e.key)) { e.preventDefault(); } -} +}; -function add(el) { +const add = (el) => { el.addEventListener("keydown", onKeyDown); -} +}; -function remove(el) { +const remove = (el) => { el.removeEventListener("keydown", onKeyDown); -} +}; export { add, remove }; diff --git a/packages/core/makeup-prevent-scroll-keys/test/index.js b/packages/core/makeup-prevent-scroll-keys/test/index.js index ce390f2a..fef0be9e 100644 --- a/packages/core/makeup-prevent-scroll-keys/test/index.js +++ b/packages/core/makeup-prevent-scroll-keys/test/index.js @@ -1,8 +1,12 @@ import { describe, expect, beforeEach, afterEach, it, vi } from "vitest"; import { add, remove } from "../src/index.js"; -describe("given an element", () => { +// Keys that should have scroll prevented +const SCROLL_KEYS = [" ", "PageUp", "PageDown", "End", "Home", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"]; + +describe("given an element with prevent-scroll-keys added", () => { let element; + beforeEach(() => { element = document.createElement("div"); add(element); @@ -12,44 +16,105 @@ describe("given an element", () => { remove(element); }); - it("when module imported should not be undefined", function () { - expect(add).not.toBe(undefined); - expect(remove).not.toBe(undefined); - }); + describe("when a scroll key is pressed", () => { + it("should prevent default for Space", () => { + const event = new KeyboardEvent("keydown", { key: " " }); + const preventDefaultSpy = vi.spyOn(event, "preventDefault"); + + element.dispatchEvent(event); + + expect(preventDefaultSpy).toHaveBeenCalledOnce(); + }); + + it("should prevent default for PageUp", () => { + const event = new KeyboardEvent("keydown", { key: "PageUp" }); + const preventDefaultSpy = vi.spyOn(event, "preventDefault"); + + element.dispatchEvent(event); + + expect(preventDefaultSpy).toHaveBeenCalledOnce(); + }); + + it("should prevent default for PageDown", () => { + const event = new KeyboardEvent("keydown", { key: "PageDown" }); + const preventDefaultSpy = vi.spyOn(event, "preventDefault"); + + element.dispatchEvent(event); + + expect(preventDefaultSpy).toHaveBeenCalledOnce(); + }); + + it("should prevent default for End", () => { + const event = new KeyboardEvent("keydown", { key: "End" }); + const preventDefaultSpy = vi.spyOn(event, "preventDefault"); + + element.dispatchEvent(event); + + expect(preventDefaultSpy).toHaveBeenCalledOnce(); + }); - it("should prevent default for key codes 32 to 40", () => { - const preventDefaultMock = vi.fn(); + it("should prevent default for Home", () => { + const event = new KeyboardEvent("keydown", { key: "Home" }); + const preventDefaultSpy = vi.spyOn(event, "preventDefault"); - // Simulate keydown events for each key code from 32 to 40 - for (let keyCode = 32; keyCode <= 40; keyCode++) { - const event = new KeyboardEvent("keydown", { keyCode }); - event.preventDefault = preventDefaultMock; element.dispatchEvent(event); - expect(preventDefaultMock).toHaveBeenCalled(); - } + + expect(preventDefaultSpy).toHaveBeenCalledOnce(); + }); + + it("should prevent default for arrow keys", () => { + const arrowKeys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"]; + + arrowKeys.forEach((key) => { + const event = new KeyboardEvent("keydown", { key }); + const preventDefaultSpy = vi.spyOn(event, "preventDefault"); + + element.dispatchEvent(event); + + expect(preventDefaultSpy).toHaveBeenCalledOnce(); + }); + }); }); - it("should not prevent default for key codes outside 32 to 40", () => { - const preventDefaultMock = vi.fn(); + describe("when a non-scroll key is pressed", () => { + it("should not prevent default for letter keys", () => { + const event = new KeyboardEvent("keydown", { key: "a" }); + const preventDefaultSpy = vi.spyOn(event, "preventDefault"); + + element.dispatchEvent(event); + + expect(preventDefaultSpy).not.toHaveBeenCalled(); + }); + + it("should not prevent default for Enter", () => { + const event = new KeyboardEvent("keydown", { key: "Enter" }); + const preventDefaultSpy = vi.spyOn(event, "preventDefault"); - // Simulate keydown events for a key code outside the range - const event = new KeyboardEvent("keydown", { keyCode: 41 }); - event.preventDefault = preventDefaultMock; - element.dispatchEvent(event); - expect(preventDefaultMock).not.toHaveBeenCalled(); + element.dispatchEvent(event); + + expect(preventDefaultSpy).not.toHaveBeenCalled(); + }); + + it("should not prevent default for Tab", () => { + const event = new KeyboardEvent("keydown", { key: "Tab" }); + const preventDefaultSpy = vi.spyOn(event, "preventDefault"); + + element.dispatchEvent(event); + + expect(preventDefaultSpy).not.toHaveBeenCalled(); + }); }); - it("should remove the event listener correctly", () => { - const preventDefaultMock = vi.fn(); - const event = new KeyboardEvent("keydown", { keyCode: 32 }); - event.preventDefault = preventDefaultMock; + describe("when remove is called", () => { + it("should stop preventing scroll keys", () => { + remove(element); - // Remove the event listener - remove(element); + const event = new KeyboardEvent("keydown", { key: " " }); + const preventDefaultSpy = vi.spyOn(event, "preventDefault"); - // Dispatch the event after removing the listener - element.dispatchEvent(event); + element.dispatchEvent(event); - expect(preventDefaultMock).not.toHaveBeenCalled(); + expect(preventDefaultSpy).not.toHaveBeenCalled(); + }); }); }); diff --git a/packages/core/makeup-roving-tabindex/README.md b/packages/core/makeup-roving-tabindex/README.md index c7696cb6..5bdfd18a 100644 --- a/packages/core/makeup-roving-tabindex/README.md +++ b/packages/core/makeup-roving-tabindex/README.md @@ -11,15 +11,12 @@ This module is still in an experimental state, until it reaches v1 you must cons ```js import * as RovingTabindex from "makeup-roving-tabindex"; -// get an element reference const widgetEl = document.querySelector(".widget"); -// create a roving tabindex instance on the element const rovingTabindex = RovingTabindex.createLinear(widgetEl, "li"); -// listen for events (optional) -widgetEl.addEventListener("rovingTabindexChange", function (e) { - // console.log(e.detail); +widgetEl.addEventListener("rovingTabindexChange", (e) => { + console.log(e.detail); }); ``` @@ -68,10 +65,9 @@ Markup after: ## Properties -- `navigableItems`: returns navigable subset of matchingItems (e.g. non-hidden items) -- `index`: the index position of the roving tabindex (i.e. the element with tabindex="0"). A no-op on aria-disabled or hidden items. -- `matchingItems`: returns all items that match item selector -- `ignoreByDelegateSelector`: CSS selector of descendant elements that will be ignored by the navigation emitters key event delegation (i.e. these elements will _not_ operate the roving tabindex) (default: null) +- `items`: returns all items matching the item selector (live DOM query, includes hidden and disabled items) +- `index`: gets or sets the current index position (setting triggers `rovingTabindexChange` if the index changes and the target is navigable) +- `currentItem`: returns the item element at the current index ## Methods @@ -93,3 +89,7 @@ Markup after: - detail - fromIndex - toIndex +- `rovingTabindexMutation` + - detail + - fromIndex + - toIndex diff --git a/packages/core/makeup-roving-tabindex/dist/cjs/index.js b/packages/core/makeup-roving-tabindex/dist/cjs/index.js index 4ebbb1bd..11084c7d 100644 --- a/packages/core/makeup-roving-tabindex/dist/cjs/index.js +++ b/packages/core/makeup-roving-tabindex/dist/cjs/index.js @@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.createLinear = createLinear; -var NavigationEmitter = _interopRequireWildcard(require("makeup-navigation-emitter")); -function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } +var _makeupNavigationEmitter = require("makeup-navigation-emitter"); const defaultOptions = { autoInit: "interactive", autoReset: "current", @@ -13,7 +12,7 @@ const defaultOptions = { axis: "both" }; function refreshTabindex(items, focusIndex) { - items.forEach(function (el, i) { + items.forEach((el, i) => { el.setAttribute("tabindex", i === focusIndex ? "0" : "-1"); }); } @@ -72,11 +71,14 @@ class RovingTabindex { class LinearRovingTabindex extends RovingTabindex { constructor(el, itemSelector, selectedOptions) { super(el); - this._options = Object.assign({}, defaultOptions, selectedOptions); + this._options = { + ...defaultOptions, + ...selectedOptions + }; this._itemSelector = itemSelector; // todo: options.index is deprecated. Remove support in future release. - this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, { + this._navigationEmitter = (0, _makeupNavigationEmitter.createLinear)(el, itemSelector, { autoInit: this._options.index !== undefined ? this._options.index : this._options.autoInit, autoReset: this._options.autoReset, wrap: this._options.wrap, diff --git a/packages/core/makeup-roving-tabindex/dist/mjs/index.js b/packages/core/makeup-roving-tabindex/dist/mjs/index.js index c079e1bf..47b830b0 100644 --- a/packages/core/makeup-roving-tabindex/dist/mjs/index.js +++ b/packages/core/makeup-roving-tabindex/dist/mjs/index.js @@ -1,4 +1,4 @@ -import * as NavigationEmitter from "makeup-navigation-emitter"; +import { createLinear as createLinearEmitter } from "makeup-navigation-emitter"; const defaultOptions = { autoInit: "interactive", autoReset: "current", @@ -6,7 +6,7 @@ const defaultOptions = { axis: "both" }; function refreshTabindex(items, focusIndex) { - items.forEach(function(el, i) { + items.forEach((el, i) => { el.setAttribute("tabindex", i === focusIndex ? "0" : "-1"); }); } @@ -57,9 +57,9 @@ class RovingTabindex { class LinearRovingTabindex extends RovingTabindex { constructor(el, itemSelector, selectedOptions) { super(el); - this._options = Object.assign({}, defaultOptions, selectedOptions); + this._options = { ...defaultOptions, ...selectedOptions }; this._itemSelector = itemSelector; - this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, { + this._navigationEmitter = createLinearEmitter(el, itemSelector, { autoInit: this._options.index !== void 0 ? this._options.index : this._options.autoInit, autoReset: this._options.autoReset, wrap: this._options.wrap, diff --git a/packages/core/makeup-roving-tabindex/src/index.js b/packages/core/makeup-roving-tabindex/src/index.js index 7a12d699..fe95149e 100644 --- a/packages/core/makeup-roving-tabindex/src/index.js +++ b/packages/core/makeup-roving-tabindex/src/index.js @@ -1,6 +1,4 @@ -"use strict"; - -import * as NavigationEmitter from "makeup-navigation-emitter"; +import { createLinear as createLinearEmitter } from "makeup-navigation-emitter"; const defaultOptions = { autoInit: "interactive", @@ -10,7 +8,7 @@ const defaultOptions = { }; function refreshTabindex(items, focusIndex) { - items.forEach(function (el, i) { + items.forEach((el, i) => { el.setAttribute("tabindex", i === focusIndex ? "0" : "-1"); }); } @@ -77,12 +75,12 @@ class LinearRovingTabindex extends RovingTabindex { constructor(el, itemSelector, selectedOptions) { super(el); - this._options = Object.assign({}, defaultOptions, selectedOptions); + this._options = { ...defaultOptions, ...selectedOptions }; this._itemSelector = itemSelector; // todo: options.index is deprecated. Remove support in future release. - this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, { + this._navigationEmitter = createLinearEmitter(el, itemSelector, { autoInit: this._options.index !== undefined ? this._options.index : this._options.autoInit, autoReset: this._options.autoReset, wrap: this._options.wrap, diff --git a/packages/core/makeup-roving-tabindex/test/index.js b/packages/core/makeup-roving-tabindex/test/index.js index 67e361dd..c2fc97e5 100644 --- a/packages/core/makeup-roving-tabindex/test/index.js +++ b/packages/core/makeup-roving-tabindex/test/index.js @@ -1,10 +1,7 @@ -import { describe, expect, beforeEach, afterEach, it } from "vitest"; -import Sinon from "sinon"; -import * as RovingTabindex from "../src/index.js"; +import { describe, expect, beforeEach, afterEach, it, vi } from "vitest"; +import { createLinear } from "../src/index.js"; -const timeoutInterval = 500; - -var testEl, testRovingIndex, onNavigationModelChange; +let testEl, testRovingIndex, onNavigationModelChange; function triggerArrowKeyPress(el, dir, num) { for (let i = 0; i < num; i++) { @@ -18,8 +15,8 @@ function triggerKeyPress(el, keyType) { /* BEGIN STATIC MODEL SIZE TESTS */ -describe("given a list of 3 visible items", function () { - beforeEach(function () { +describe("given a list of 3 visible items", () => { + beforeEach(() => { document.body.innerHTML = `
                                                                            • Item 1
                                                                              • @@ -29,20 +26,20 @@ describe("given a list of 3 visible items", function () { `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { testEl = document.querySelector(".widget"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li"); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li"); }); - it("model should have 3 items", function () { - expect(testRovingIndex.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testRovingIndex.items.length).toBe(3); }); }); }); -describe("given a list of 2 visible items, 1 hidden", function () { - beforeEach(function () { +describe("given a list of 2 visible items, 1 hidden", () => { + beforeEach(() => { document.body.innerHTML = `
                                                                              • Item 1
                                                                                • @@ -52,20 +49,20 @@ describe("given a list of 2 visible items, 1 hidden", function () { `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { testEl = document.querySelector(".widget"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li"); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li"); }); - it("model should have 3 items", function () { - expect(testRovingIndex.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testRovingIndex.items.length).toBe(3); }); }); }); -describe("given a list of 3 hidden items", function () { - beforeEach(function () { +describe("given a list of 3 hidden items", () => { + beforeEach(() => { document.body.innerHTML = `
                                                                                  @@ -75,14 +72,14 @@ describe("given a list of 3 hidden items", function () { `; }); - describe("when instantiated", function () { - beforeEach(function () { + describe("when instantiated", () => { + beforeEach(() => { testEl = document.querySelector(".widget"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li"); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li"); }); - it("model should have 3 items", function () { - expect(testRovingIndex.items.length).to.equal(3); + it("model should have 3 items", () => { + expect(testRovingIndex.items.length).toBe(3); }); }); }); @@ -91,8 +88,8 @@ describe("given a list of 3 hidden items", function () { /* BEGIN ARROW KEY TESTS */ -describe("given 3 items with default options", function () { - function setup() { +describe("given 3 items with default options", () => { + const setup = () => { document.body.innerHTML = `
                                                                                  • Item 1
                                                                                    • @@ -102,100 +99,100 @@ describe("given 3 items with default options", function () { `; testEl = document.querySelector(".widget"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li"); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li"); - onNavigationModelChange = Sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow left is pressed once", function () { - beforeEach(function () { + describe("when arrow left is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Left", 1); }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow up is pressed once", function () { - beforeEach(function () { + describe("when arrow up is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Up", 1); }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 1 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(1); - expect(testEl.children[0].getAttribute("tabindex")).to.equal("-1"); - expect(testEl.children[1].getAttribute("tabindex")).to.equal("0"); - expect(testEl.children[2].getAttribute("tabindex")).to.equal("-1"); + it("should trigger 1 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); + expect(testEl.children[0].getAttribute("tabindex")).toBe("-1"); + expect(testEl.children[1].getAttribute("tabindex")).toBe("0"); + expect(testEl.children[2].getAttribute("tabindex")).toBe("-1"); }); }); - describe("when arrow right is pressed twice", function () { - beforeEach(function () { + describe("when arrow right is pressed twice", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 2); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed three times", function () { - beforeEach(function () { + describe("when arrow right is pressed three times", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 3); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed once after rovingTabIndex is destroyed", function () { - beforeEach(function () { + describe("when arrow right is pressed once after rovingTabIndex is destroyed", () => { + beforeEach(() => { testRovingIndex.destroy(); triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); }); - it("should trigger 1 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow down is pressed once after rovingTabIndex is destroyed", function () { - beforeEach(function () { + describe("when arrow down is pressed once after rovingTabIndex is destroyed", () => { + beforeEach(() => { testRovingIndex.destroy(); triggerArrowKeyPress(testEl, "Down", 1); }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); - expect(testEl.children[0].getAttribute("tabindex")).to.equal("0"); - expect(testEl.children[1].getAttribute("tabindex")).to.equal("-1"); - expect(testEl.children[2].getAttribute("tabindex")).to.equal("-1"); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); + expect(testEl.children[0].getAttribute("tabindex")).toBe("0"); + expect(testEl.children[1].getAttribute("tabindex")).toBe("-1"); + expect(testEl.children[2].getAttribute("tabindex")).toBe("-1"); }); }); }); @@ -204,8 +201,8 @@ describe("given 3 items with default options", function () { /* BEGIN HOME & END KEY TESTS */ -describe("given 3 items with default options", function () { - function setup() { +describe("given 3 items with default options", () => { + const setup = () => { document.body.innerHTML = `
                                                                                    • Item 1
                                                                                      • @@ -215,32 +212,32 @@ describe("given 3 items with default options", function () { `; testEl = document.querySelector(".widget"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li"); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li"); - onNavigationModelChange = Sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when home key is pressed once", function () { - beforeEach(function () { + describe("when home key is pressed once", () => { + beforeEach(() => { triggerKeyPress(testEl, "home"); }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when end key is pressed once", function () { - beforeEach(function () { + describe("when end key is pressed once", () => { + beforeEach(() => { triggerKeyPress(testEl, "end"); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); }); @@ -249,8 +246,8 @@ describe("given 3 items with default options", function () { /* BEGIN AUTOWRAP ARROW KEY TESTS */ -describe("given 3 items with autoWrap on", function () { - function setup() { +describe("given 3 items with autoWrap on", () => { + const setup = () => { document.body.innerHTML = `
                                                                                      • Item 1
                                                                                        • @@ -260,75 +257,75 @@ describe("given 3 items with autoWrap on", function () { `; testEl = document.querySelector(".widget"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li", { wrap: true }); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li", { wrap: true }); - onNavigationModelChange = Sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow left is pressed once", function () { - beforeEach(function () { + describe("when arrow left is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Left", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); - expect(testEl.children[0].getAttribute("tabindex")).to.equal("-1"); - expect(testEl.children[1].getAttribute("tabindex")).to.equal("-1"); - expect(testEl.children[2].getAttribute("tabindex")).to.equal("0"); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); + expect(testEl.children[0].getAttribute("tabindex")).toBe("-1"); + expect(testEl.children[1].getAttribute("tabindex")).toBe("-1"); + expect(testEl.children[2].getAttribute("tabindex")).toBe("0"); }); }); - describe("when arrow up is pressed once", function () { - beforeEach(function () { + describe("when arrow up is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Up", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow right is pressed twice", function () { - beforeEach(function () { + describe("when arrow right is pressed twice", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 2); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed three times", function () { - beforeEach(function () { + describe("when arrow right is pressed three times", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 3); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(3); + it("should trigger 3 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(3); }); }); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); }); @@ -337,8 +334,8 @@ describe("given 3 items with autoWrap on", function () { /* BEGIN INDEX SETTER TESTS */ -describe("given 3 items with default options", function () { - function setup() { +describe("given 3 items with default options", () => { + const setup = () => { document.body.innerHTML = `
                                                                                        • Item 1
                                                                                          • @@ -348,42 +345,42 @@ describe("given 3 items with default options", function () { `; testEl = document.querySelector(".widget"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li"); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li"); - onNavigationModelChange = Sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when index set to current index", function () { - beforeEach(function () { + describe("when index set to current index", () => { + beforeEach(() => { testRovingIndex.index = 0; }); - it("should trigger 0 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange event", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when index set within bounds", function () { - beforeEach(function () { + describe("when index set within bounds", () => { + beforeEach(() => { testRovingIndex.index = 1; }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when index set out of bounds", function () { - beforeEach(function () { + describe("when index set out of bounds", () => { + beforeEach(() => { testRovingIndex.index = 100; }); - it("should trigger 0 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange events", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); }); @@ -392,8 +389,8 @@ describe("given 3 items with default options", function () { /* BEGIN AXIS TESTS */ -describe("given 3 items with axis set to both", function () { - function setup() { +describe("given 3 items with axis set to both", () => { + const setup = () => { document.body.innerHTML = `
                                                                                          • Item 1
                                                                                            • @@ -403,60 +400,60 @@ describe("given 3 items with axis set to both", function () { `; testEl = document.querySelector(".widget"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li", { axis: "both" }); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li", { axis: "both" }); - onNavigationModelChange = Sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow up is pressed once after arrow down", function () { - beforeEach(function () { + describe("when arrow up is pressed once after arrow down", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); triggerArrowKeyPress(testEl, "Up", 1); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow left is pressed once after arrow right", function () { - beforeEach(function () { + describe("when arrow left is pressed once after arrow right", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); triggerArrowKeyPress(testEl, "Left", 1); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); }); -describe("given 3 items with axis set to x", function () { - function setup() { +describe("given 3 items with axis set to x", () => { + const setup = () => { document.body.innerHTML = `
                                                                                            • Item 1
                                                                                              • @@ -466,60 +463,60 @@ describe("given 3 items with axis set to x", function () { `; testEl = document.querySelector(".widget"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li", { axis: "x" }); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li", { axis: "x" }); - onNavigationModelChange = Sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow down is pressed once", function () { - beforeEach(function () { + describe("when arrow down is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); }); - it("should trigger 0 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange event", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow up is pressed once after arrow down", function () { - beforeEach(function () { + describe("when arrow up is pressed once after arrow down", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); triggerArrowKeyPress(testEl, "Up", 1); }); - it("should trigger 0 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange event", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 1 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(1); + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); }); }); - describe("when arrow left is pressed once after arrow right", function () { - beforeEach(function () { + describe("when arrow left is pressed once after arrow right", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); triggerArrowKeyPress(testEl, "Left", 1); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); }); -describe("given 3 items with axis set to y", function () { - function setup() { +describe("given 3 items with axis set to y", () => { + const setup = () => { document.body.innerHTML = `
                                                                                              • Item 1
                                                                                                • @@ -529,54 +526,54 @@ describe("given 3 items with axis set to y", function () { `; testEl = document.querySelector(".widget"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li", { axis: "y" }); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li", { axis: "y" }); - onNavigationModelChange = Sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); - } + }; beforeEach(setup); afterEach(setup); - describe("when arrow right is pressed once", function () { - beforeEach(function () { + describe("when arrow right is pressed once", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); }); - it("should trigger 0 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange event", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow left is pressed once after arrow right", function () { - beforeEach(function () { + describe("when arrow left is pressed once after arrow right", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Right", 1); triggerArrowKeyPress(testEl, "Left", 1); }); - it("should trigger 0 navigationModelChange event", function () { - expect(onNavigationModelChange.callCount).to.equal(0); + it("should trigger 0 navigationModelChange event", () => { + expect(onNavigationModelChange).not.toHaveBeenCalled(); }); }); - describe("when arrow Down is pressed twice", function () { - beforeEach(function () { + describe("when arrow Down is pressed twice", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 2); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); - describe("when arrow Up is pressed once after arrow down", function () { - beforeEach(function () { + describe("when arrow Up is pressed once after arrow down", () => { + beforeEach(() => { triggerArrowKeyPress(testEl, "Down", 1); triggerArrowKeyPress(testEl, "Up", 1); }); - it("should trigger 2 navigationModelChange events", function () { - expect(onNavigationModelChange.callCount).to.equal(2); + it("should trigger 2 navigationModelChange events", () => { + expect(onNavigationModelChange).toHaveBeenCalledTimes(2); }); }); }); @@ -585,10 +582,10 @@ describe("given 3 items with axis set to y", function () { /* BEGIN AUTO RESET TESTS */ -describe("given 3 items with focus on second", function () { - var buttonEl; +describe("given 3 items with focus on second", () => { + let buttonEl; - function setup() { + const setup = () => { document.body.innerHTML = `
                                                                                                • Item 1
                                                                                                  • @@ -600,41 +597,41 @@ describe("given 3 items with focus on second", function () { testEl = document.querySelector(".widget"); buttonEl = document.querySelector("button"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li", { autoReset: "current" }); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li", { autoReset: "current" }); - onNavigationModelChange = Sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); triggerArrowKeyPress(testEl, "Down", 1); - } + }; beforeEach(setup); afterEach(setup); - describe("when autoReset is set to current", function () { - beforeEach(function () { + describe("when autoReset is set to current", () => { + beforeEach(() => { testRovingIndex.reset(); }); - it("should have index value of 1", function () { - expect(testRovingIndex.index).to.equal(1); + it("should have index value of 1", () => { + expect(testRovingIndex.index).toBe(1); }); }); - describe("when focus exits the widget", function () { - beforeEach(function () { + describe("when focus exits the widget", () => { + beforeEach(() => { buttonEl.focus(); }); - it("should set focus to item with index 1", function () { - expect(testRovingIndex.index).to.equal(1); + it("should set focus to item with index 1", () => { + expect(testRovingIndex.index).toBe(1); }); }); }); -describe("given 3 items with focus on second", function () { - var buttonEl; +describe("given 3 items with focus on second", () => { + let buttonEl; - function setup() { + const setup = () => { document.body.innerHTML = `
                                                                                                  • Item 1
                                                                                                    • @@ -646,35 +643,220 @@ describe("given 3 items with focus on second", function () { testEl = document.querySelector(".widget"); buttonEl = document.querySelector("button"); - testRovingIndex = RovingTabindex.createLinear(testEl, "li", { autoReset: "interactive" }); // eslint-disable-line + testRovingIndex = createLinear(testEl, "li", { autoReset: "interactive" }); - onNavigationModelChange = Sinon.spy(); + onNavigationModelChange = vi.fn(); testEl.addEventListener("navigationModelChange", onNavigationModelChange); triggerArrowKeyPress(testEl, "Down", 1); - } + }; beforeEach(setup); afterEach(setup); - describe("when autoReset is set to interactive", function () { - beforeEach(function () { + describe("when autoReset is set to interactive", () => { + beforeEach(() => { testRovingIndex.reset(); }); - it("should have index value of 0", function () { - expect(testRovingIndex.index).to.equal(0); + it("should have index value of 0", () => { + expect(testRovingIndex.index).toBe(0); }); }); - describe("when focus exits the widget", function () { - beforeEach(function () { + describe("when focus exits the widget", () => { + beforeEach(() => { buttonEl.focus(); }); - it("should set focus to item with index 0", function () { - expect(testRovingIndex.index).to.equal(0); + it("should set focus to item with index 0", () => { + expect(testRovingIndex.index).toBe(0); }); }); }); /* END AUTO RESET TESTS */ + +/* BEGIN MUTATION TESTS */ + +describe("given a list of 3 visible items", () => { + let onRovingTabindexMutation; + + beforeEach(() => { + document.body.innerHTML = ` +
                                                                                                      +
                                                                                                    • Item 1
                                                                                                      • +
                                                                                                    • Item 2
                                                                                                      • +
                                                                                                    • Item 3
                                                                                                      • +
                                                                                                    + `; + + testEl = document.querySelector(".widget"); + onRovingTabindexMutation = vi.fn(); + testEl.addEventListener("rovingTabindexMutation", onRovingTabindexMutation); + testRovingIndex = createLinear(testEl, "li"); + }); + + describe("when current item is hidden", () => { + beforeEach(async () => { + testRovingIndex.items[0].hidden = true; + await new Promise((resolve) => setTimeout(resolve, 1000)); + }); + + it("should trigger 1 rovingTabindexMutation event", () => { + expect(onRovingTabindexMutation).toHaveBeenCalledOnce(); + }); + + it("should move tabindex 0 to next navigable item", () => { + expect(testEl.children[0].getAttribute("tabindex")).toBe("-1"); + expect(testEl.children[1].getAttribute("tabindex")).toBe("0"); + }); + }); +}); + +/* END MUTATION TESTS */ + +/* BEGIN WRAP SETTER TESTS */ + +describe("given 3 items with wrap initially false", () => { + const setup = () => { + document.body.innerHTML = ` +
                                                                                                      +
                                                                                                    • Item 1
                                                                                                      • +
                                                                                                    • Item 2
                                                                                                      • +
                                                                                                    • Item 3
                                                                                                      • +
                                                                                                    + `; + + testEl = document.querySelector(".widget"); + testRovingIndex = createLinear(testEl, "li"); + + onNavigationModelChange = vi.fn(); + testEl.addEventListener("navigationModelChange", onNavigationModelChange); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when wrap is set to true and arrow left is pressed once", () => { + beforeEach(() => { + testRovingIndex.wrap = true; + triggerArrowKeyPress(testEl, "Left", 1); + }); + + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); + }); + + it("should set tabindex 0 on last item", () => { + expect(testEl.children[2].getAttribute("tabindex")).toBe("0"); + }); + }); +}); + +/* END WRAP SETTER TESTS */ + +/* BEGIN CURRENT ITEM TESTS */ + +describe("given 3 items with default options", () => { + const setup = () => { + document.body.innerHTML = ` +
                                                                                                      +
                                                                                                    • Item 1
                                                                                                      • +
                                                                                                    • Item 2
                                                                                                      • +
                                                                                                    • Item 3
                                                                                                      • +
                                                                                                    + `; + + testEl = document.querySelector(".widget"); + testRovingIndex = createLinear(testEl, "li"); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when instantiated", () => { + it("should have currentItem equal to first item", () => { + expect(testRovingIndex.currentItem).toBe(testEl.children[0]); + }); + }); + + describe("when index is set to 1", () => { + beforeEach(() => { + testRovingIndex.index = 1; + }); + + it("should have currentItem equal to second item", () => { + expect(testRovingIndex.currentItem).toBe(testEl.children[1]); + }); + }); +}); + +/* END CURRENT ITEM TESTS */ + +/* BEGIN NULL INDEX NAVIGATION TESTS */ + +describe("given 3 items with autoInit none", () => { + const setup = () => { + document.body.innerHTML = ` +
                                                                                                      +
                                                                                                    • Item 1
                                                                                                      • +
                                                                                                    • Item 2
                                                                                                      • +
                                                                                                    • Item 3
                                                                                                      • +
                                                                                                    + `; + + testEl = document.querySelector(".widget"); + testRovingIndex = createLinear(testEl, "li", { autoInit: "none" }); + + onNavigationModelChange = vi.fn(); + testEl.addEventListener("navigationModelChange", onNavigationModelChange); + }; + + beforeEach(setup); + afterEach(setup); + + describe("when arrow right is pressed once", () => { + beforeEach(() => { + triggerArrowKeyPress(testEl, "Right", 1); + }); + + it("should trigger 1 navigationModelChange event", () => { + expect(onNavigationModelChange).toHaveBeenCalledOnce(); + }); + + it("should set tabindex 0 on first item", () => { + expect(testEl.children[0].getAttribute("tabindex")).toBe("0"); + }); + }); +}); + +/* END NULL INDEX NAVIGATION TESTS */ + +/* BEGIN DEPRECATED INDEX OPTION TESTS */ + +describe("given 3 items with deprecated index option set to 2", () => { + beforeEach(() => { + document.body.innerHTML = ` +
                                                                                                      +
                                                                                                    • Item 1
                                                                                                      • +
                                                                                                    • Item 2
                                                                                                      • +
                                                                                                    • Item 3
                                                                                                      • +
                                                                                                    + `; + + testEl = document.querySelector(".widget"); + testRovingIndex = createLinear(testEl, "li", { index: 2 }); + }); + + describe("when instantiated", () => { + it("should have index value of 2", () => { + expect(testRovingIndex.index).toBe(2); + }); + + it("should set tabindex 0 on third item", () => { + expect(testEl.children[2].getAttribute("tabindex")).toBe("0"); + }); + }); +}); + +/* END DEPRECATED INDEX OPTION TESTS */ diff --git a/packages/core/makeup-screenreader-trap/README.md b/packages/core/makeup-screenreader-trap/README.md index ea4642cf..1d95eb13 100644 --- a/packages/core/makeup-screenreader-trap/README.md +++ b/packages/core/makeup-screenreader-trap/README.md @@ -18,7 +18,7 @@ This module is still in an experimental state, until it reaches v1 you must cons ## Options -- `useHiddenProperty`: use `hidden` property instead of `aria-hidden` (default: false) +- `useHiddenProperty`: use `hidden` property instead of `aria-hidden` to fully hide the surrounding DOM tree for all users (useful for full-screen modal dialog) (default: false) ## Events diff --git a/packages/core/makeup-screenreader-trap/dist/cjs/index.js b/packages/core/makeup-screenreader-trap/dist/cjs/index.js index c6e85900..35d9f223 100644 --- a/packages/core/makeup-screenreader-trap/dist/cjs/index.js +++ b/packages/core/makeup-screenreader-trap/dist/cjs/index.js @@ -19,22 +19,18 @@ let dirtyObjects; // filter function for svg elements const filterSvg = item => item.tagName.toLowerCase() !== "svg"; function showElementPrep(el, useHiddenProperty) { - let preparedElement; if (useHiddenProperty === false) { - preparedElement = prepareElement(el, "aria-hidden", "false"); + return prepareElement(el, "aria-hidden", "false"); } else { - preparedElement = prepareElement(el, "hidden", false); + return prepareElement(el, "hidden", false); } - return preparedElement; } function hideElementPrep(el, useHiddenProperty) { - let preparedElement; if (useHiddenProperty === false) { - preparedElement = prepareElement(el, "aria-hidden", "true"); + return prepareElement(el, "aria-hidden", "true"); } else { - preparedElement = prepareElement(el, "hidden", true); + return prepareElement(el, "hidden", true); } - return preparedElement; } function prepareElement(el, attributeName, dirtyValue) { const isProperty = typeof dirtyValue === "boolean"; @@ -88,7 +84,10 @@ const defaultOptions = { function trap(el, selectedOptions) { // ensure current trap is deactivated untrap(); - const options = Object.assign({}, defaultOptions, selectedOptions); + const options = { + ...defaultOptions, + ...selectedOptions + }; // update the trapped el reference trappedEl = el; @@ -113,7 +112,7 @@ function trap(el, selectedOptions) { } // prepare elements - dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map(item => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map(item => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty))); + dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty), ...ancestors.map(item => showElementPrep(item, options.useHiddenProperty)), ...siblings.map(item => hideElementPrep(item, options.useHiddenProperty)), ...siblingsOfAncestors.map(item => hideElementPrep(item, options.useHiddenProperty))]; // update DOM dirtyObjects.forEach(item => dirtyElement(item)); diff --git a/packages/core/makeup-screenreader-trap/dist/cjs/util.js b/packages/core/makeup-screenreader-trap/dist/cjs/util.js index 1f698230..8e98dad1 100644 --- a/packages/core/makeup-screenreader-trap/dist/cjs/util.js +++ b/packages/core/makeup-screenreader-trap/dist/cjs/util.js @@ -12,10 +12,8 @@ const filterAncestor = item => item.nodeType === 1 && item.tagName.toLowerCase() // filter function for sibling elements const filterSibling = item => item.nodeType === 1 && item.tagName.toLowerCase() !== "script"; -// reducer to flatten arrays -const flattenArrays = (a, b) => a.concat(b); - // recursive function to get previous sibling nodes of given element +// TODO: rewrite as iterative loop to avoid stack overflow risk in large DOM trees function getPreviousSiblings(el) { let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; const previousSibling = el.previousSibling; @@ -27,6 +25,7 @@ function getPreviousSiblings(el) { } // recursive function to get next sibling nodes of given element +// TODO: rewrite as iterative loop to avoid stack overflow risk in large DOM trees function getNextSiblings(el) { let siblings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; const nextSibling = el.nextSibling; @@ -61,5 +60,5 @@ function getAncestors(el) { // get siblings of ancestors (i.e. aunts and uncles) of given el function getSiblingsOfAncestors(el) { - return getAncestors(el).map(item => getSiblings(item)).reduce(flattenArrays, []); + return getAncestors(el).map(item => getSiblings(item)).flat(); } diff --git a/packages/core/makeup-screenreader-trap/dist/mjs/index.js b/packages/core/makeup-screenreader-trap/dist/mjs/index.js index 36d948ae..9ec8421f 100644 --- a/packages/core/makeup-screenreader-trap/dist/mjs/index.js +++ b/packages/core/makeup-screenreader-trap/dist/mjs/index.js @@ -4,22 +4,18 @@ let trappedEl; let dirtyObjects; const filterSvg = (item) => item.tagName.toLowerCase() !== "svg"; function showElementPrep(el, useHiddenProperty) { - let preparedElement; if (useHiddenProperty === false) { - preparedElement = prepareElement(el, "aria-hidden", "false"); + return prepareElement(el, "aria-hidden", "false"); } else { - preparedElement = prepareElement(el, "hidden", false); + return prepareElement(el, "hidden", false); } - return preparedElement; } function hideElementPrep(el, useHiddenProperty) { - let preparedElement; if (useHiddenProperty === false) { - preparedElement = prepareElement(el, "aria-hidden", "true"); + return prepareElement(el, "aria-hidden", "true"); } else { - preparedElement = prepareElement(el, "hidden", true); + return prepareElement(el, "hidden", true); } - return preparedElement; } function prepareElement(el, attributeName, dirtyValue) { const isProperty = typeof dirtyValue === "boolean"; @@ -65,7 +61,7 @@ const defaultOptions = { }; function trap(el, selectedOptions) { untrap(); - const options = Object.assign({}, defaultOptions, selectedOptions); + const options = { ...defaultOptions, ...selectedOptions }; trappedEl = el; mainEl = document.querySelector('main, [role="main"]'); if (mainEl) { @@ -78,7 +74,12 @@ function trap(el, selectedOptions) { siblings = siblings.filter(filterSvg); siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg); } - dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)].concat(ancestors.map((item) => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map((item) => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map((item) => hideElementPrep(item, options.useHiddenProperty))); + dirtyObjects = [ + showElementPrep(trappedEl, options.useHiddenProperty), + ...ancestors.map((item) => showElementPrep(item, options.useHiddenProperty)), + ...siblings.map((item) => hideElementPrep(item, options.useHiddenProperty)), + ...siblingsOfAncestors.map((item) => hideElementPrep(item, options.useHiddenProperty)) + ]; dirtyObjects.forEach((item) => dirtyElement(item)); trappedEl.dispatchEvent(new CustomEvent("screenreaderTrap", { bubbles: true })); } diff --git a/packages/core/makeup-screenreader-trap/dist/mjs/util.js b/packages/core/makeup-screenreader-trap/dist/mjs/util.js index f9be41f0..f8c4ba77 100644 --- a/packages/core/makeup-screenreader-trap/dist/mjs/util.js +++ b/packages/core/makeup-screenreader-trap/dist/mjs/util.js @@ -1,6 +1,5 @@ const filterAncestor = (item) => item.nodeType === 1 && item.tagName.toLowerCase() !== "body" && item.tagName.toLowerCase() !== "html"; const filterSibling = (item) => item.nodeType === 1 && item.tagName.toLowerCase() !== "script"; -const flattenArrays = (a, b) => a.concat(b); function getPreviousSiblings(el, siblings = []) { const previousSibling = el.previousSibling; if (!previousSibling) { @@ -33,7 +32,7 @@ function getAncestors(el) { return getAllAncestors(el).filter(filterAncestor); } function getSiblingsOfAncestors(el) { - return getAncestors(el).map((item) => getSiblings(item)).reduce(flattenArrays, []); + return getAncestors(el).map((item) => getSiblings(item)).flat(); } export { getAncestors, diff --git a/packages/core/makeup-screenreader-trap/src/index.js b/packages/core/makeup-screenreader-trap/src/index.js index 8ab10669..ea43377e 100644 --- a/packages/core/makeup-screenreader-trap/src/index.js +++ b/packages/core/makeup-screenreader-trap/src/index.js @@ -13,27 +13,19 @@ let dirtyObjects; const filterSvg = (item) => item.tagName.toLowerCase() !== "svg"; function showElementPrep(el, useHiddenProperty) { - let preparedElement; - if (useHiddenProperty === false) { - preparedElement = prepareElement(el, "aria-hidden", "false"); + return prepareElement(el, "aria-hidden", "false"); } else { - preparedElement = prepareElement(el, "hidden", false); + return prepareElement(el, "hidden", false); } - - return preparedElement; } function hideElementPrep(el, useHiddenProperty) { - let preparedElement; - if (useHiddenProperty === false) { - preparedElement = prepareElement(el, "aria-hidden", "true"); + return prepareElement(el, "aria-hidden", "true"); } else { - preparedElement = prepareElement(el, "hidden", true); + return prepareElement(el, "hidden", true); } - - return preparedElement; } function prepareElement(el, attributeName, dirtyValue) { @@ -95,7 +87,7 @@ function trap(el, selectedOptions) { // ensure current trap is deactivated untrap(); - const options = Object.assign({}, defaultOptions, selectedOptions); + const options = { ...defaultOptions, ...selectedOptions }; // update the trapped el reference trappedEl = el; @@ -120,10 +112,12 @@ function trap(el, selectedOptions) { } // prepare elements - dirtyObjects = [showElementPrep(trappedEl, options.useHiddenProperty)] - .concat(ancestors.map((item) => showElementPrep(item, options.useHiddenProperty))) - .concat(siblings.map((item) => hideElementPrep(item, options.useHiddenProperty))) - .concat(siblingsOfAncestors.map((item) => hideElementPrep(item, options.useHiddenProperty))); + dirtyObjects = [ + showElementPrep(trappedEl, options.useHiddenProperty), + ...ancestors.map((item) => showElementPrep(item, options.useHiddenProperty)), + ...siblings.map((item) => hideElementPrep(item, options.useHiddenProperty)), + ...siblingsOfAncestors.map((item) => hideElementPrep(item, options.useHiddenProperty)), + ]; // update DOM dirtyObjects.forEach((item) => dirtyElement(item)); diff --git a/packages/core/makeup-screenreader-trap/src/util.js b/packages/core/makeup-screenreader-trap/src/util.js index 50497a82..001d8b80 100644 --- a/packages/core/makeup-screenreader-trap/src/util.js +++ b/packages/core/makeup-screenreader-trap/src/util.js @@ -5,10 +5,8 @@ const filterAncestor = (item) => // filter function for sibling elements const filterSibling = (item) => item.nodeType === 1 && item.tagName.toLowerCase() !== "script"; -// reducer to flatten arrays -const flattenArrays = (a, b) => a.concat(b); - // recursive function to get previous sibling nodes of given element +// TODO: rewrite as iterative loop to avoid stack overflow risk in large DOM trees function getPreviousSiblings(el, siblings = []) { const previousSibling = el.previousSibling; @@ -22,6 +20,7 @@ function getPreviousSiblings(el, siblings = []) { } // recursive function to get next sibling nodes of given element +// TODO: rewrite as iterative loop to avoid stack overflow risk in large DOM trees function getNextSiblings(el, siblings = []) { const nextSibling = el.nextSibling; @@ -63,7 +62,7 @@ function getAncestors(el) { function getSiblingsOfAncestors(el) { return getAncestors(el) .map((item) => getSiblings(item)) - .reduce(flattenArrays, []); + .flat(); } export { getSiblings, getAncestors, getSiblingsOfAncestors }; diff --git a/packages/core/makeup-screenreader-trap/test/index.js b/packages/core/makeup-screenreader-trap/test/index.js index 4bb9f064..0263d4b8 100644 --- a/packages/core/makeup-screenreader-trap/test/index.js +++ b/packages/core/makeup-screenreader-trap/test/index.js @@ -1,25 +1,8 @@ -import { describe, expect, beforeEach, it } from "vitest"; -import sinon from "sinon"; +import { describe, expect, beforeEach, it, vi } from "vitest"; import * as screenreaderTrap from "../src/index.js"; import * as util from "../src/util.js"; import testData from "./data.js"; -var trapEl; -var onTrap; -var onUntrap; - -function doBeforeAll(html) { - document.querySelector("body").innerHTML = html; - - trapEl = document.querySelector(".trap"); - - onTrap = sinon.spy(); - onUntrap = sinon.spy(); - - trapEl.addEventListener("screenreaderTrap", onTrap); - trapEl.addEventListener("screenreaderUntrap", onUntrap); -} - function getAriaHiddenElements() { return document.querySelectorAll("[aria-hidden]"); } @@ -32,85 +15,199 @@ function getAriaHiddenFalseElements() { return document.querySelectorAll('[aria-hidden="false"]'); } -testData.forEach(function (data) { - describe("Util", function () { - describe("given test data", function () { - describe("when DOM is rendered", function () { - beforeEach(function () { - doBeforeAll(data.html); +testData.forEach((data) => { + describe("Util", () => { + describe("given test data", () => { + describe("when DOM is rendered", () => { + let trapEl; + + beforeEach(() => { + document.body.innerHTML = data.html; + trapEl = document.querySelector(".trap"); }); - it("should find correct number of siblings", function () { - expect(util.getSiblings(trapEl).length).to.equal(data.numSiblings); + it("should find correct number of siblings", () => { + expect(util.getSiblings(trapEl).length).toBe(data.numSiblings); }); - it("should find correct number of ancestors", function () { - expect(util.getAncestors(trapEl).length).to.equal(data.numAncestors); + it("should find correct number of ancestors", () => { + expect(util.getAncestors(trapEl).length).toBe(data.numAncestors); }); - it("should find correct number of siblings of ancestors", function () { - expect(util.getSiblingsOfAncestors(trapEl).length).to.equal(data.numSiblingsOfAncestors); + it("should find correct number of siblings of ancestors", () => { + expect(util.getSiblingsOfAncestors(trapEl).length).toBe(data.numSiblingsOfAncestors); }); }); }); }); - describe("Module", function () { - describe("given test data", function () { - describe("when DOM is rendered and trap is activated", function () { - beforeEach(function () { - doBeforeAll(data.html); + describe("Module", () => { + describe("given test data", () => { + describe("when DOM is rendered and trap is activated", () => { + let trapEl; + let onTrap; + let onUntrap; + + beforeEach(() => { + document.body.innerHTML = data.html; + trapEl = document.querySelector(".trap"); + onTrap = vi.fn(); + onUntrap = vi.fn(); + trapEl.addEventListener("screenreaderTrap", onTrap); + trapEl.addEventListener("screenreaderUntrap", onUntrap); screenreaderTrap.trap(trapEl); }); - it("should add aria-hidden=false to trapped element", function () { - expect(trapEl.getAttribute("aria-hidden")).to.equal("false"); + it("should add aria-hidden=false to trapped element", () => { + expect(trapEl.getAttribute("aria-hidden")).toBe("false"); }); - it("should find correct number of elements with aria-hidden attribute", function () { - expect(getAriaHiddenElements().length).to.equal(data.numAriaHiddenAfterTrap); + it("should find correct number of elements with aria-hidden attribute", () => { + expect(getAriaHiddenElements().length).toBe(data.numAriaHiddenAfterTrap); }); - it("should find correct number of elements with aria-hidden=true attribute", function () { - expect(getAriaHiddenTrueElements().length).to.equal(data.numAriaHiddenTrueAfterTrap); + it("should find correct number of elements with aria-hidden=true attribute", () => { + expect(getAriaHiddenTrueElements().length).toBe(data.numAriaHiddenTrueAfterTrap); }); - it("should find correct number of elements with aria-hidden=false attribute", function () { - expect(getAriaHiddenFalseElements().length).to.equal(data.numAriaHiddenFalseAfterTrap); + it("should find correct number of elements with aria-hidden=false attribute", () => { + expect(getAriaHiddenFalseElements().length).toBe(data.numAriaHiddenFalseAfterTrap); }); - it("should observe one trap event", function () { - expect(onTrap.callCount).to.equal(1); + it("should observe one trap event", () => { + expect(onTrap).toHaveBeenCalledOnce(); }); - it("should not observe any untrap event", function () { - expect(onUntrap.callCount).to.equal(0); + it("should not observe any untrap event", () => { + expect(onUntrap).not.toHaveBeenCalled(); }); }); - describe("when DOM is rendered and trap is activated then deactivated", function () { - beforeEach(function () { - doBeforeAll(data.html); + describe("when DOM is rendered and trap is activated then deactivated", () => { + let trapEl; + let onUntrap; + + beforeEach(() => { + document.body.innerHTML = data.html; + trapEl = document.querySelector(".trap"); + onUntrap = vi.fn(); + trapEl.addEventListener("screenreaderUntrap", onUntrap); screenreaderTrap.trap(trapEl); screenreaderTrap.untrap(); }); - it("should find correct number of elements with aria-hidden attribute", function () { - expect(getAriaHiddenElements().length).to.equal(data.numAriaHiddenAfterUntrap); + it("should find correct number of elements with aria-hidden attribute", () => { + expect(getAriaHiddenElements().length).toBe(data.numAriaHiddenAfterUntrap); }); - it("should find correct number of elements with aria-hidden=true attribute", function () { - expect(getAriaHiddenTrueElements().length).to.equal(data.numAriaHiddenTrueAfterUntrap); + it("should find correct number of elements with aria-hidden=true attribute", () => { + expect(getAriaHiddenTrueElements().length).toBe(data.numAriaHiddenTrueAfterUntrap); }); - it("should find correct number of elements with aria-hidden=false attribute", function () { - expect(getAriaHiddenFalseElements().length).to.equal(data.numAriaHiddenFalseAfterUntrap); + it("should find correct number of elements with aria-hidden=false attribute", () => { + expect(getAriaHiddenFalseElements().length).toBe(data.numAriaHiddenFalseAfterUntrap); }); - it("should observe a single untrap event", function () { - expect(onUntrap.callCount).to.equal(1); + it("should observe a single untrap event", () => { + expect(onUntrap).toHaveBeenCalledOnce(); }); }); }); }); }); + +describe("Module", () => { + describe("given a DOM with siblings", () => { + describe("when trap is activated with useHiddenProperty: true", () => { + let trapEl; + + beforeEach(() => { + document.body.innerHTML = '
                                                                                                    '; + trapEl = document.querySelector(".trap"); + screenreaderTrap.trap(trapEl, { useHiddenProperty: true }); + }); + + it("should set hidden property to true on siblings", () => { + expect(document.querySelectorAll("[hidden]").length).toBe(2); + }); + + it("should not add aria-hidden attribute to any element", () => { + expect(document.querySelectorAll("[aria-hidden]").length).toBe(0); + }); + + it("should set hidden property to false on trapped element", () => { + expect(trapEl.hidden).toBe(false); + }); + }); + + describe("when trap is activated then deactivated with useHiddenProperty: true", () => { + let trapEl; + + beforeEach(() => { + document.body.innerHTML = '
                                                                                                    '; + trapEl = document.querySelector(".trap"); + screenreaderTrap.trap(trapEl, { useHiddenProperty: true }); + screenreaderTrap.untrap(); + }); + + it("should set hidden property to false on siblings", () => { + expect(document.querySelectorAll("[hidden]").length).toBe(0); + }); + }); + }); + + describe("given a DOM with pre-hidden siblings", () => { + describe("when trap is activated then deactivated with useHiddenProperty: true", () => { + let trapEl; + + beforeEach(() => { + document.body.innerHTML = ''; + trapEl = document.querySelector(".trap"); + screenreaderTrap.trap(trapEl, { useHiddenProperty: true }); + screenreaderTrap.untrap(); + }); + + it("should restore pre-existing hidden property on siblings", () => { + expect(document.querySelectorAll("[hidden]").length).toBe(2); + }); + }); + }); + + describe("given a DOM with a main landmark", () => { + let trapEl; + + beforeEach(() => { + document.body.innerHTML = '
                                                                                                    '; + trapEl = document.querySelector(".trap"); + }); + + describe("when trap is activated", () => { + beforeEach(() => { + screenreaderTrap.trap(trapEl); + }); + + it("should set role=presentation on main landmark", () => { + expect(document.querySelector("main").getAttribute("role")).toBe("presentation"); + }); + }); + + describe("when trap is activated then deactivated", () => { + beforeEach(() => { + screenreaderTrap.trap(trapEl); + screenreaderTrap.untrap(); + }); + + it("should set role=main on main landmark", () => { + expect(document.querySelector("main").getAttribute("role")).toBe("main"); + }); + }); + }); + + describe("given no active trap", () => { + describe("when untrap is called", () => { + it("should not throw", () => { + expect(() => screenreaderTrap.untrap()).not.toThrow(); + }); + }); + }); +}); diff --git a/packages/core/makeup-typeahead/README.md b/packages/core/makeup-typeahead/README.md index 6f8b2ab2..12232b6a 100644 --- a/packages/core/makeup-typeahead/README.md +++ b/packages/core/makeup-typeahead/README.md @@ -2,7 +2,7 @@ This module produces a function generator. The generated function produces the index of the suggested menu item to highlight / focus. It keeps track of the characters entered, adding them onto a string. -Its parameters are a list of DOM nodes, a char, and the length of a timeout. The timeout is restarted when a new char is given the function. +Its parameters are a list of DOM nodes, a char, and the length of a timeout. Each character starts a new timeout. These timeouts are stacked, not debounced — when a timeout fires it resets the accumulated string regardless of subsequent keypresses. When the timeout executes the callback, it will re-start the suggestions with an empty string. @@ -19,7 +19,7 @@ const list = document.querySelector("ul"); const selected = document.querySelector(".selected"); const TIMEOUT_LENGTH = 2000; -const getIndex = typeahead(); +const { getIndex, destroy } = typeahead(); function handleKeyDown(e) { if (e.key.length === 1) { diff --git a/packages/core/makeup-typeahead/dist/cjs/index.js b/packages/core/makeup-typeahead/dist/cjs/index.js index 93e34f30..bdab5482 100644 --- a/packages/core/makeup-typeahead/dist/cjs/index.js +++ b/packages/core/makeup-typeahead/dist/cjs/index.js @@ -5,31 +5,25 @@ Object.defineProperty(exports, "__esModule", { }); exports.default = _default; function _default() { - let timeout; // eslint-disable-line no-unassigned-vars + let timeout; let typeStr = ""; return { getIndex: function (nodeList, char, timeoutLength) { typeStr = typeStr.concat(char); - let index; if (nodeList == null) return -1; const lowerTypeStr = typeStr.toLocaleLowerCase(); - index = [...nodeList].findIndex(el => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr)); + let index = [...nodeList].findIndex(el => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr)); if (index === -1) { index = [...nodeList].findIndex(el => el.textContent.toLocaleLowerCase().includes(lowerTypeStr)); } - if (timeout) { - clearTimeout(timeout); - } - setTimeout(() => { - clearTimeout(timeout); + // intentionally stacked (not debounced) - see README for usage example + timeout = setTimeout(() => { typeStr = ""; }, timeoutLength); return index; }, destroy: function () { - if (timeout) { - clearTimeout(timeout); - } + clearTimeout(timeout); } }; } diff --git a/packages/core/makeup-typeahead/dist/mjs/index.js b/packages/core/makeup-typeahead/dist/mjs/index.js index 508bb56b..2a21da11 100644 --- a/packages/core/makeup-typeahead/dist/mjs/index.js +++ b/packages/core/makeup-typeahead/dist/mjs/index.js @@ -4,26 +4,19 @@ function index_default() { return { getIndex: function(nodeList, char, timeoutLength) { typeStr = typeStr.concat(char); - let index; if (nodeList == null) return -1; const lowerTypeStr = typeStr.toLocaleLowerCase(); - index = [...nodeList].findIndex((el) => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr)); + let index = [...nodeList].findIndex((el) => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr)); if (index === -1) { index = [...nodeList].findIndex((el) => el.textContent.toLocaleLowerCase().includes(lowerTypeStr)); } - if (timeout) { - clearTimeout(timeout); - } - setTimeout(() => { - clearTimeout(timeout); + timeout = setTimeout(() => { typeStr = ""; }, timeoutLength); return index; }, destroy: function() { - if (timeout) { - clearTimeout(timeout); - } + clearTimeout(timeout); } }; } diff --git a/packages/core/makeup-typeahead/src/index.js b/packages/core/makeup-typeahead/src/index.js index 75c47525..533d27e5 100644 --- a/packages/core/makeup-typeahead/src/index.js +++ b/packages/core/makeup-typeahead/src/index.js @@ -1,29 +1,23 @@ export default function () { - let timeout; // eslint-disable-line no-unassigned-vars + let timeout; let typeStr = ""; return { getIndex: function (nodeList, char, timeoutLength) { typeStr = typeStr.concat(char); - let index; if (nodeList == null) return -1; const lowerTypeStr = typeStr.toLocaleLowerCase(); - index = [...nodeList].findIndex((el) => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr)); + let index = [...nodeList].findIndex((el) => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr)); if (index === -1) { index = [...nodeList].findIndex((el) => el.textContent.toLocaleLowerCase().includes(lowerTypeStr)); } - if (timeout) { - clearTimeout(timeout); - } - setTimeout(() => { - clearTimeout(timeout); + // intentionally stacked (not debounced) - see README for usage example + timeout = setTimeout(() => { typeStr = ""; }, timeoutLength); return index; }, destroy: function () { - if (timeout) { - clearTimeout(timeout); - } + clearTimeout(timeout); }, }; } diff --git a/packages/core/makeup-typeahead/test/index.js b/packages/core/makeup-typeahead/test/index.js index 21a5eff2..d983840d 100644 --- a/packages/core/makeup-typeahead/test/index.js +++ b/packages/core/makeup-typeahead/test/index.js @@ -1,78 +1,91 @@ -import { describe, expect, beforeEach, afterEach, it } from "vitest"; +import { describe, expect, beforeEach, afterEach, it, vi } from "vitest"; import typeahead from "../src/index.js"; const TIMEOUT_LENGTH = 1000; -describe("typeahead", () => { +describe("given a typeahead instance", () => { let mockNodeList; - let getIndex; let th; - let destroy; beforeEach(() => { th = typeahead(); - getIndex = th.getIndex; - destroy = th.destroy; mockNodeList = [{ textContent: "Albania" }, { textContent: "India" }, { textContent: "USA" }]; }); afterEach(() => { - destroy(); - th = null; + th.destroy(); + vi.restoreAllMocks(); }); - it("should return -1 for null nodelist", async () => { - const index = getIndex(null, "a", TIMEOUT_LENGTH); - expect(index).toBe(-1); + describe("when getIndex is called with a null nodelist", () => { + it("should return -1", () => { + expect(th.getIndex(null, "a", TIMEOUT_LENGTH)).toBe(-1); + }); }); - it("should return -1 if no match is found", () => { - expect(getIndex(mockNodeList, "z", 1000)).toBe(-1); + describe("when getIndex is called with no matching character", () => { + it("should return -1", () => { + expect(th.getIndex(mockNodeList, "z", TIMEOUT_LENGTH)).toBe(-1); + }); }); - it("should find index with starting character", async () => { - const index = getIndex(mockNodeList, "i", TIMEOUT_LENGTH); - expect(index).toBe(1); - }); + describe("when getIndex is called with a matching starting character", () => { + it("should return the matching index", () => { + expect(th.getIndex(mockNodeList, "i", TIMEOUT_LENGTH)).toBe(1); + }); - it("should be case insensitive", async () => { - const index = getIndex(mockNodeList, "I", TIMEOUT_LENGTH); - expect(index).toBe(1); + it("should be case insensitive", () => { + expect(th.getIndex(mockNodeList, "I", TIMEOUT_LENGTH)).toBe(1); + }); }); - it("should match multiple characters", async () => { - const index1 = getIndex(mockNodeList, "u", TIMEOUT_LENGTH); - const index2 = getIndex(mockNodeList, "s", TIMEOUT_LENGTH); - expect(index2).toBe(2); // USA (matching 'us') + describe("when getIndex is called with multiple characters in sequence", () => { + it("should match the accumulated string", () => { + th.getIndex(mockNodeList, "u", TIMEOUT_LENGTH); + expect(th.getIndex(mockNodeList, "s", TIMEOUT_LENGTH)).toBe(2); // USA + }); }); - it("should fallback to includes match if no start match", async () => { - mockNodeList = [{ textContent: "California" }, { textContent: "York" }, { textContent: "New York" }]; - const index = getIndex(mockNodeList, "y", TIMEOUT_LENGTH); - expect(index).toBe(1); // York + describe("when the character only matches mid-string", () => { + it("should fallback to includes match", () => { + const nodes = [{ textContent: "California" }, { textContent: "York" }, { textContent: "New York" }]; + expect(th.getIndex(nodes, "y", TIMEOUT_LENGTH)).toBe(1); // York + }); }); - it("should clear typeStr after timeout", async () => { - const index1 = getIndex(mockNodeList, "a", 100); - expect(index1).toBe(0); // Albania - - setTimeout(() => { - const index2 = getIndex(mockNodeList, "u", 100); - expect(index2).toBe(2); // USA (not matching 'au') - }, 150); + describe("when getIndex is called with an empty nodelist", () => { + it("should return -1", () => { + document.body.innerHTML = "
                                                                                                      "; + const children = document.querySelectorAll("ol > *"); + expect(th.getIndex(children, "a", TIMEOUT_LENGTH)).toBe(-1); + }); }); - it("should not error when empty list given", function () { - document.body.innerHTML = "
                                                                                                        "; - const children = document.querySelectorAll("ol > *"); - const index = getIndex(children, "a", TIMEOUT_LENGTH); - expect(index).toBe(-1); + describe("when the timeout expires", () => { + it("should reset the accumulated string", () => { + vi.useFakeTimers(); + th.getIndex(mockNodeList, "a", 100); // Albania + vi.advanceTimersByTime(150); + expect(th.getIndex(mockNodeList, "u", 100)).toBe(2); // USA (not 'au') + vi.useRealTimers(); + }); + + it("should reset after the first timeout even when a second character was typed before it expired", () => { + vi.useFakeTimers(); + th.getIndex(mockNodeList, "a", 100); // timer fires at t=100ms + vi.advanceTimersByTime(50); + th.getIndex(mockNodeList, "l", 100); // timer fires at t=150ms + vi.advanceTimersByTime(60); // t=110ms: first timer has fired, typeStr is now "" + expect(th.getIndex(mockNodeList, "u", 100)).toBe(2); // USA — not searching for "alu" + vi.useRealTimers(); + }); }); - it("should cleanup timeout on destroy", async () => { - const index = getIndex(mockNodeList, "a", 5000); - destroy(); - // Verify no errors after destroy - expect(index).toBe(0); // Albania + describe("when destroy is called", () => { + it("should clear the pending timeout without error", () => { + const index = th.getIndex(mockNodeList, "a", 5000); + th.destroy(); + expect(index).toBe(0); // Albania + }); }); }); diff --git a/packages/ui/makeup-toast-dialog/test/index.spec.js b/packages/ui/makeup-toast-dialog/test/index.spec.js index 4fade307..163e68e4 100644 --- a/packages/ui/makeup-toast-dialog/test/index.spec.js +++ b/packages/ui/makeup-toast-dialog/test/index.spec.js @@ -188,7 +188,7 @@ test.describe("given a toast dialog", function () { const button = document.createElement("button"); button.id = "test-button"; button.textContent = "Test Button"; - document.querySelector("#page").append(button); + document.body.append(button); }); const testButton = page.locator("#test-button"); diff --git a/playwright.config.js b/playwright.config.js index dd1d06c8..372360f6 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -63,8 +63,8 @@ export default defineConfig({ /* Run your local dev server before starting the tests */ webServer: { - command: "npm run start", + command: "npm run serve:playwright", url: "http://127.0.0.1:3000", - reuseExistingServer: true, + reuseExistingServer: !process.env.CI, }, });