@synergy-design-system/components 1.11.0 → 1.12.0

package/dist/chunks/{chunk.RRG6TAY7.js → chunk.25VU42YC.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.TWO26WWF.js";
+} from "./chunk.JT32Q3RE.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.RRG6TAY7.js.map
+//# sourceMappingURL=chunk.25VU42YC.js.map

package/dist/chunks/{chunk.EGIUUFQ4.js → chunk.2HCVVOEV.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.G5AYV6GN.js";
+} from "./chunk.5D6C4M2C.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.EGIUUFQ4.js.map
+//# sourceMappingURL=chunk.2HCVVOEV.js.map

package/dist/chunks/chunk.2KYFCKCK.js

@@ -0,0 +1,10 @@
+// src/components/dropdown/dropdown.custom.styles.ts
+import { css } from "lit";
+var dropdown_custom_styles_default = css`
+  /* Write custom CSS here */
+`;
+
+export {
+  dropdown_custom_styles_default
+};
+//# sourceMappingURL=chunk.2KYFCKCK.js.map

package/dist/chunks/chunk.2KYFCKCK.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/dropdown/dropdown.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* Write custom CSS here */\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,iCAAQ;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/chunk.2QOQY4ZG.js

@@ -0,0 +1,132 @@
+// src/internal/tabbable.ts
+var computedStyleMap = /* @__PURE__ */ new WeakMap();
+function getCachedComputedStyle(el) {
+  let computedStyle = computedStyleMap.get(el);
+  if (!computedStyle) {
+    computedStyle = window.getComputedStyle(el, null);
+    computedStyleMap.set(el, computedStyle);
+  }
+  return computedStyle;
+}
+function isVisible(el) {
+  if (typeof el.checkVisibility === "function") {
+    return el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true });
+  }
+  const computedStyle = getCachedComputedStyle(el);
+  return computedStyle.visibility !== "hidden" && computedStyle.display !== "none";
+}
+function isOverflowingAndTabbable(el) {
+  const computedStyle = getCachedComputedStyle(el);
+  const { overflowY, overflowX } = computedStyle;
+  if (overflowY === "scroll" || overflowX === "scroll") {
+    return true;
+  }
+  if (overflowY !== "auto" || overflowX !== "auto") {
+    return false;
+  }
+  const isOverflowingY = el.scrollHeight > el.clientHeight;
+  if (isOverflowingY && overflowY === "auto") {
+    return true;
+  }
+  const isOverflowingX = el.scrollWidth > el.clientWidth;
+  if (isOverflowingX && overflowX === "auto") {
+    return true;
+  }
+  return false;
+}
+function isTabbable(el) {
+  const tag = el.tagName.toLowerCase();
+  const tabindex = Number(el.getAttribute("tabindex"));
+  const hasTabindex = el.hasAttribute("tabindex");
+  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
+    return false;
+  }
+  if (el.hasAttribute("disabled")) {
+    return false;
+  }
+  if (el.closest("[inert]")) {
+    return false;
+  }
+  if (tag === "input" && el.getAttribute("type") === "radio" && !el.hasAttribute("checked")) {
+    return false;
+  }
+  if (!isVisible(el)) {
+    return false;
+  }
+  if ((tag === "audio" || tag === "video") && el.hasAttribute("controls")) {
+    return true;
+  }
+  if (el.hasAttribute("tabindex")) {
+    return true;
+  }
+  if (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false") {
+    return true;
+  }
+  const isNativelyTabbable = [
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "a",
+    "audio",
+    "video",
+    "summary",
+    "iframe"
+  ].includes(tag);
+  if (isNativelyTabbable) {
+    return true;
+  }
+  return isOverflowingAndTabbable(el);
+}
+function getTabbableBoundary(root) {
+  var _a, _b;
+  const tabbableElements = getTabbableElements(root);
+  const start = (_a = tabbableElements[0]) != null ? _a : null;
+  const end = (_b = tabbableElements[tabbableElements.length - 1]) != null ? _b : null;
+  return { start, end };
+}
+function getSlottedChildrenOutsideRootElement(slotElement, root) {
+  var _a;
+  return ((_a = slotElement.getRootNode({ composed: true })) == null ? void 0 : _a.host) !== root;
+}
+function getTabbableElements(root) {
+  const walkedEls = /* @__PURE__ */ new WeakMap();
+  const tabbableElements = [];
+  function walk(el) {
+    if (el instanceof Element) {
+      if (el.hasAttribute("inert") || el.closest("[inert]")) {
+        return;
+      }
+      if (walkedEls.has(el)) {
+        return;
+      }
+      walkedEls.set(el, true);
+      if (!tabbableElements.includes(el) && isTabbable(el)) {
+        tabbableElements.push(el);
+      }
+      if (el instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(el, root)) {
+        el.assignedElements({ flatten: true }).forEach((assignedEl) => {
+          walk(assignedEl);
+        });
+      }
+      if (el.shadowRoot !== null && el.shadowRoot.mode === "open") {
+        walk(el.shadowRoot);
+      }
+    }
+    for (const e of el.children) {
+      walk(e);
+    }
+  }
+  walk(root);
+  return tabbableElements.sort((a, b) => {
+    const aTabindex = Number(a.getAttribute("tabindex")) || 0;
+    const bTabindex = Number(b.getAttribute("tabindex")) || 0;
+    return bTabindex - aTabindex;
+  });
+}
+
+export {
+  getTabbableBoundary,
+  getTabbableElements
+};
+//# sourceMappingURL=chunk.2QOQY4ZG.js.map

package/dist/chunks/chunk.2QOQY4ZG.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/tabbable.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\n// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.\n// computedStyle calls are \"live\" so they only need to be retrieved once for an element.\nconst computedStyleMap = new WeakMap<Element, CSSStyleDeclaration>();\n\nfunction getCachedComputedStyle(el: HTMLElement): CSSStyleDeclaration {\n  let computedStyle: undefined | CSSStyleDeclaration = computedStyleMap.get(el);\n\n  if (!computedStyle) {\n    computedStyle = window.getComputedStyle(el, null);\n    computedStyleMap.set(el, computedStyle);\n  }\n\n  return computedStyle;\n}\n\nfunction isVisible(el: HTMLElement): boolean {\n  // This is the fastest check, but isn't supported in Safari.\n  if (typeof el.checkVisibility === 'function') {\n    // Opacity is focusable, visibility is not.\n    return el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true });\n  }\n\n  // Fallback \"polyfill\" for \"checkVisibility\"\n  const computedStyle = getCachedComputedStyle(el);\n\n  return computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none';\n}\n\n// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable\n// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most\n// accessible way of handling overflow areas. [Konnor]\nfunction isOverflowingAndTabbable(el: HTMLElement): boolean {\n  const computedStyle = getCachedComputedStyle(el);\n\n  const { overflowY, overflowX } = computedStyle;\n\n  if (overflowY === 'scroll' || overflowX === 'scroll') {\n    return true;\n  }\n\n  if (overflowY !== 'auto' || overflowX !== 'auto') {\n    return false;\n  }\n\n  // Always overflow === \"auto\" by this point\n  const isOverflowingY = el.scrollHeight > el.clientHeight;\n\n  if (isOverflowingY && overflowY === 'auto') {\n    return true;\n  }\n\n  const isOverflowingX = el.scrollWidth > el.clientWidth;\n\n  if (isOverflowingX && overflowX === 'auto') {\n    return true;\n  }\n\n  return false;\n}\n\n/** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */\nfunction isTabbable(el: HTMLElement) {\n  const tag = el.tagName.toLowerCase();\n\n  const tabindex = Number(el.getAttribute('tabindex'));\n  const hasTabindex = el.hasAttribute('tabindex');\n\n  // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable\n  if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {\n    return false;\n  }\n\n  // Elements with a disabled attribute are not tabbable\n  if (el.hasAttribute('disabled')) {\n    return false;\n  }\n\n  // If any parents have \"inert\", we aren't \"tabbable\"\n  if (el.closest('[inert]')) {\n    return false;\n  }\n\n  // Radios without a checked attribute are not tabbable\n  if (tag === 'input' && el.getAttribute('type') === 'radio' && !el.hasAttribute('checked')) {\n    return false;\n  }\n\n  if (!isVisible(el)) {\n    return false;\n  }\n\n  // Audio and video elements with the controls attribute are tabbable\n  if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {\n    return true;\n  }\n\n  // Elements with a tabindex other than -1 are tabbable\n  if (el.hasAttribute('tabindex')) {\n    return true;\n  }\n\n  // Elements with a contenteditable attribute are tabbable\n  if (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false') {\n    return true;\n  }\n\n  // At this point, the following elements are considered tabbable\n  const isNativelyTabbable = [\n    'button',\n    'input',\n    'select',\n    'textarea',\n    'a',\n    'audio',\n    'video',\n    'summary',\n    'iframe'\n  ].includes(tag);\n\n  if (isNativelyTabbable) {\n    return true;\n  }\n\n  // We save the overflow checks for last, because they're the most expensive\n  return isOverflowingAndTabbable(el);\n}\n\n/**\n * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single\n * element because it short-circuits after finding the first and last ones.\n */\nexport function getTabbableBoundary(root: HTMLElement | ShadowRoot) {\n  const tabbableElements = getTabbableElements(root);\n\n  // Find the first and last tabbable elements\n  const start = tabbableElements[0] ?? null;\n  const end = tabbableElements[tabbableElements.length - 1] ?? null;\n\n  return { start, end };\n}\n\n/**\n * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.\n * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.\n * This fixes that fun edge case.\n */\nfunction getSlottedChildrenOutsideRootElement(slotElement: HTMLSlotElement, root: HTMLElement | ShadowRoot) {\n  return (slotElement.getRootNode({ composed: true }) as ShadowRoot | null)?.host !== root;\n}\n\nexport function getTabbableElements(root: HTMLElement | ShadowRoot) {\n  const walkedEls = new WeakMap();\n  const tabbableElements: HTMLElement[] = [];\n\n  function walk(el: HTMLElement | ShadowRoot) {\n    if (el instanceof Element) {\n      // if the element has \"inert\" we can just no-op it.\n      if (el.hasAttribute('inert') || el.closest('[inert]')) {\n        return;\n      }\n\n      if (walkedEls.has(el)) {\n        return;\n      }\n      walkedEls.set(el, true);\n\n      if (!tabbableElements.includes(el) && isTabbable(el)) {\n        tabbableElements.push(el);\n      }\n\n      if (el instanceof HTMLSlotElement && getSlottedChildrenOutsideRootElement(el, root)) {\n        el.assignedElements({ flatten: true }).forEach((assignedEl: HTMLElement) => {\n          walk(assignedEl);\n        });\n      }\n\n      if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {\n        walk(el.shadowRoot);\n      }\n    }\n\n    for (const e of el.children) {\n      walk(e as HTMLElement);\n    }\n  }\n\n  // Collect all elements including the root\n  walk(root);\n\n  // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.\n  // So is it worth being right? Or fast?\n  return tabbableElements.sort((a, b) => {\n    // Make sure we sort by tabindex.\n    const aTabindex = Number(a.getAttribute('tabindex')) || 0;\n    const bTabindex = Number(b.getAttribute('tabindex')) || 0;\n    return bTabindex - aTabindex;\n  });\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.GTSRMEPE.js → chunk.2QYALZBT.js}

@@ -1,36 +1,3 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk.QNDC5KWA.js";
-
-// src/internal/animate.ts
-function animateTo(el, keyframes, options) {
-  return new Promise((resolve) => {
-    if ((options == null ? void 0 : options.duration) === Infinity) {
-      throw new Error("Promise-based animations must be finite.");
-    }
-    const animation = el.animate(keyframes, __spreadProps(__spreadValues({}, options), {
-      duration: prefersReducedMotion() ? 0 : options.duration
-    }));
-    animation.addEventListener("cancel", resolve, { once: true });
-    animation.addEventListener("finish", resolve, { once: true });
-  });
-}
-function prefersReducedMotion() {
-  const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-  return query.matches;
-}
-function stopAnimations(el) {
-  return Promise.all(
-    el.getAnimations().map((animation) => {
-      return new Promise((resolve) => {
-        animation.cancel();
-        requestAnimationFrame(resolve);
-      });
-    })
-  );
-}
-
 // src/internal/offset.ts
 function getOffset(element, parent) {
   return {
@@ -84,25 +51,9 @@ function scrollIntoView(element, container, direction = "vertical", behavior = "
   }
 }
 
-// src/internal/event.ts
-function waitForEvent(el, eventName) {
-  return new Promise((resolve) => {
-    function done(event) {
-      if (event.target === el) {
-        el.removeEventListener(eventName, done);
-        resolve();
-      }
-    }
-    el.addEventListener(eventName, done);
-  });
-}
-
 export {
-  animateTo,
-  stopAnimations,
   lockBodyScrolling,
   unlockBodyScrolling,
-  scrollIntoView,
-  waitForEvent
+  scrollIntoView
 };
-//# sourceMappingURL=chunk.GTSRMEPE.js.map
+//# sourceMappingURL=chunk.2QYALZBT.js.map

package/dist/chunks/chunk.2QYALZBT.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/offset.ts", "../../src/internal/scroll.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\n/**\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems\n * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  return {\n    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)\n  };\n}\n", "// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { getOffset } from './offset.js';\n\nconst locks = new Set();\n\n/** Returns the width of the document's scrollbar */\nfunction getScrollbarWidth() {\n  const documentWidth = document.documentElement.clientWidth;\n  return Math.abs(window.innerWidth - documentWidth);\n}\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n\n  // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from\n  // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.\n  if (!document.body.classList.contains('syn-scroll-lock')) {\n    const scrollbarWidth = getScrollbarWidth(); // must be measured before the `syn-scroll-lock` class is applied\n    document.body.classList.add('syn-scroll-lock');\n    document.body.style.setProperty('--syn-scroll-lock-size', `${scrollbarWidth}px`);\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('syn-scroll-lock');\n    document.body.style.removeProperty('--syn-scroll-lock-size');\n  }\n}\n\n/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n"],
+  "mappings": ";AAaO,SAAS,UAAU,SAAsB,QAAqB;AACnE,SAAO;AAAA,IACL,KAAK,KAAK,MAAM,QAAQ,sBAAsB,EAAE,MAAM,OAAO,sBAAsB,EAAE,GAAG;AAAA,IACxF,MAAM,KAAK,MAAM,QAAQ,sBAAsB,EAAE,OAAO,OAAO,sBAAsB,EAAE,IAAI;AAAA,EAC7F;AACF;;;ACVA,IAAM,QAAQ,oBAAI,IAAI;AAGtB,SAAS,oBAAoB;AAC3B,QAAM,gBAAgB,SAAS,gBAAgB;AAC/C,SAAO,KAAK,IAAI,OAAO,aAAa,aAAa;AACnD;AAMO,SAAS,kBAAkB,WAAwB;AACxD,QAAM,IAAI,SAAS;AAInB,MAAI,CAAC,SAAS,KAAK,UAAU,SAAS,iBAAiB,GAAG;AACxD,UAAM,iBAAiB,kBAAkB;AACzC,aAAS,KAAK,UAAU,IAAI,iBAAiB;AAC7C,aAAS,KAAK,MAAM,YAAY,0BAA0B,GAAG,cAAc,IAAI;AAAA,EACjF;AACF;AAKO,SAAS,oBAAoB,WAAwB;AAC1D,QAAM,OAAO,SAAS;AAEtB,MAAI,MAAM,SAAS,GAAG;AACpB,aAAS,KAAK,UAAU,OAAO,iBAAiB;AAChD,aAAS,KAAK,MAAM,eAAe,wBAAwB;AAAA,EAC7D;AACF;AAGO,SAAS,eACd,SACA,WACA,YAAgD,YAChD,WAA8B,UAC9B;AACA,QAAM,SAAS,UAAU,SAAS,SAAS;AAC3C,QAAM,YAAY,OAAO,MAAM,UAAU;AACzC,QAAM,aAAa,OAAO,OAAO,UAAU;AAC3C,QAAM,OAAO,UAAU;AACvB,QAAM,OAAO,UAAU,aAAa,UAAU;AAC9C,QAAM,OAAO,UAAU;AACvB,QAAM,OAAO,UAAU,YAAY,UAAU;AAE7C,MAAI,cAAc,gBAAgB,cAAc,QAAQ;AACtD,QAAI,aAAa,MAAM;AACrB,gBAAU,SAAS,EAAE,MAAM,YAAY,SAAS,CAAC;AAAA,IACnD,WAAW,aAAa,QAAQ,cAAc,MAAM;AAClD,gBAAU,SAAS,EAAE,MAAM,aAAa,UAAU,cAAc,QAAQ,aAAa,SAAS,CAAC;AAAA,IACjG;AAAA,EACF;AAEA,MAAI,cAAc,cAAc,cAAc,QAAQ;AACpD,QAAI,YAAY,MAAM;AACpB,gBAAU,SAAS,EAAE,KAAK,WAAW,SAAS,CAAC;AAAA,IACjD,WAAW,YAAY,QAAQ,eAAe,MAAM;AAClD,gBAAU,SAAS,EAAE,KAAK,YAAY,UAAU,eAAe,QAAQ,cAAc,SAAS,CAAC;AAAA,IACjG;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/chunks/chunk.3FOVDOJX.js

@@ -0,0 +1,26 @@
+// src/components/menu-label/menu-label.styles.ts
+import { css } from "lit";
+var menu_label_styles_default = css`
+	/* stylelint-disable */
+  :host {
+    display: block;
+  }
+
+  .menu-label {
+    display: inline-block;
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-small);
+    font-weight: var(--syn-font-weight-semibold);
+    line-height: var(--syn-line-height-normal);
+    letter-spacing: var(--syn-letter-spacing-normal);
+    color: var(--syn-color-neutral-500);
+    padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-large);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;
+
+export {
+  menu_label_styles_default
+};
+//# sourceMappingURL=chunk.3FOVDOJX.js.map

package/dist/chunks/chunk.3FOVDOJX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-label/menu-label.styles.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  .menu-label {\n    display: inline-block;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-small);\n    font-weight: var(--syn-font-weight-semibold);\n    line-height: var(--syn-line-height-normal);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    color: var(--syn-color-neutral-500);\n    padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-large);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n`;\n"],
+  "mappings": ";AAMA,SAAS,WAAW;AACpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.HSC2UWAO.js → chunk.3V2G5ZN5.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.RUEZLCM4.js";
+} from "./chunk.NOUFWET6.js";
 import {
   LocalizeController
 } from "./chunk.LAB4YJYE.js";
@@ -10,23 +10,23 @@ import {
 } from "./chunk.SZCGMXW5.js";
 import {
   HasSlotController
-} from "./chunk.XGXFE6IF.js";
+} from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.6QB26MQP.js";
+} from "./chunk.I2E3UJIK.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
-import {
-  SynergyElement,
-  component_styles_default
-} from "./chunk.WPY6PWSD.js";
 import {
   button_custom_styles_default
 } from "./chunk.K55MKNUR.js";
 import {
   button_styles_default
 } from "./chunk.SJMMPKWP.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.X3D3MBIH.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -273,4 +273,4 @@ __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.HSC2UWAO.js.map
+//# sourceMappingURL=chunk.3V2G5ZN5.js.map

package/dist/chunks/chunk.55KPESRA.js

@@ -0,0 +1,131 @@
+import {
+  menu_custom_styles_default
+} from "./chunk.ENYO4NCR.js";
+import {
+  menu_styles_default
+} from "./chunk.RSSY7KPD.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.X3D3MBIH.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/menu/menu.component.ts
+import { html } from "lit";
+import { query } from "lit/decorators.js";
+var SynMenu = class extends SynergyElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const menuItemTypes = ["menuitem", "menuitemcheckbox"];
+    const target = event.composedPath().find((el) => {
+      var _a;
+      return menuItemTypes.includes(((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) || "");
+    });
+    if (!target)
+      return;
+    const item = target;
+    if (item.type === "checkbox") {
+      item.checked = !item.checked;
+    }
+    this.emit("syn-select", { detail: { item } });
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      event.stopPropagation();
+      item == null ? void 0 : item.click();
+    } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+      if (items.length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === "ArrowDown") {
+          index++;
+        } else if (event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = items.length - 1;
+        }
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+  handleMouseDown(event) {
+    const target = event.target;
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target);
+    }
+  }
+  handleSlotChange() {
+    const items = this.getAllItems();
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+  isMenuItem(item) {
+    var _a;
+    return item.tagName.toLowerCase() === "syn-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
+  }
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
+      if (el.inert || !this.isMenuItem(el)) {
+        return false;
+      }
+      return true;
+    });
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find((i) => i.getAttribute("tabindex") === "0");
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item) {
+    const items = this.getAllItems();
+    items.forEach((i) => {
+      i.setAttribute("tabindex", i === item ? "0" : "-1");
+    });
+  }
+  render() {
+    return html`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+  }
+};
+SynMenu.styles = [component_styles_default, menu_styles_default, menu_custom_styles_default];
+__decorateClass([
+  query("slot")
+], SynMenu.prototype, "defaultSlot", 2);
+
+export {
+  SynMenu
+};
+//# sourceMappingURL=chunk.55KPESRA.js.map

package/dist/chunks/chunk.55KPESRA.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu/menu.component.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { query } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './menu.styles.js';\nimport customStyles from './menu.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynMenuItem from '../menu-item/menu-item.component.js';\n\nexport interface MenuSelectEventDetail {\n  item: SynMenuItem;\n}\n\n/**\n * @summary Menus provide a list of options for the user to choose from.\n * @documentation https://synergy.style/components/menu\n * @status stable\n * @since 2.0\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.\n */\nexport default class SynMenu extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n    const target = event.composedPath().find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));\n\n    if (!target) return;\n\n    // This isn't true. But we use it for TypeScript checks below.\n    const item = target as SynMenuItem;\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('syn-select', { detail: { item } });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Make a selection when pressing enter or space\n    if (event.key === 'Enter' || event.key === ' ') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      event.stopPropagation();\n\n      // Simulate a click to support @click handlers on menu items that also work with the keyboard\n      item?.click();\n    }\n\n    // Move the selection when pressing down or up\n    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (event.key === 'ArrowDown') {\n          index++;\n        } else if (event.key === 'ArrowUp') {\n          index--;\n        } else if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = items.length - 1;\n        }\n\n        if (index < 0) {\n          index = items.length - 1;\n        }\n        if (index > items.length - 1) {\n          index = 0;\n        }\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as SynMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'syn-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {\n      if (el.inert || !this.isMenuItem(el)) {\n        return false;\n      }\n      return true;\n    }) as SynMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: SynMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  render() {\n    return html`\n      <slot\n        @slotchange=${this.handleSlotChange}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        @mousedown=${this.handleMouseDown}\n      ></slot>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.G5AYV6GN.js → chunk.5D6C4M2C.js}

@@ -8,9 +8,6 @@ import {
   form_control_custom_styles_default,
   form_control_styles_default
 } from "./chunk.TTL762VF.js";
-import {
-  SynButtonGroup
-} from "./chunk.27H5YFFI.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -19,14 +16,17 @@ import {
 } from "./chunk.SZCGMXW5.js";
 import {
   HasSlotController
-} from "./chunk.XGXFE6IF.js";
+} from "./chunk.66WXVGAW.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
+import {
+  SynButtonGroup
+} from "./chunk.QDYPBFX4.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.WPY6PWSD.js";
+} from "./chunk.X3D3MBIH.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -356,4 +356,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.G5AYV6GN.js.map
+//# sourceMappingURL=chunk.5D6C4M2C.js.map

package/dist/chunks/{chunk.OEBVCWZK.js → chunk.5IL2WT3S.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.WJX2T5MU.js";
+} from "./chunk.SJCYCGUZ.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.OEBVCWZK.js.map
+//# sourceMappingURL=chunk.5IL2WT3S.js.map

package/dist/chunks/{chunk.XOQKLUKE.js → chunk.5UM7HWIJ.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.6QB26MQP.js";
+} from "./chunk.I2E3UJIK.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.XOQKLUKE.js.map
+//# sourceMappingURL=chunk.5UM7HWIJ.js.map

package/dist/chunks/{chunk.TIZ7TBXR.js → chunk.62EBS3GI.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.JAHRZFQ6.js";
+} from "./chunk.WWMWREE4.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.TIZ7TBXR.js.map
+//# sourceMappingURL=chunk.62EBS3GI.js.map

package/dist/chunks/{chunk.XGXFE6IF.js → chunk.66WXVGAW.js}

@@ -42,8 +42,22 @@ var HasSlotController = class {
     this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
   }
 };
+function getTextContent(slot) {
+  if (!slot) {
+    return "";
+  }
+  const nodes = slot.assignedNodes({ flatten: true });
+  let text = "";
+  [...nodes].forEach((node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent;
+    }
+  });
+  return text;
+}
 
 export {
-  HasSlotController
+  HasSlotController,
+  getTextContent
 };
-//# sourceMappingURL=chunk.XGXFE6IF.js.map
+//# sourceMappingURL=chunk.66WXVGAW.js.map

package/dist/chunks/{chunk.XGXFE6IF.js.map → chunk.66WXVGAW.js.map}

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/internal/slot.ts"],
   "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/** A reactive controller that determines when slots exist. */\nexport class HasSlotController implements ReactiveController {\n  host: ReactiveControllerHost & Element;\n  slotNames: string[] = [];\n\n  constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {\n    (this.host = host).addController(this);\n    this.slotNames = slotNames;\n  }\n\n  private hasDefaultSlot() {\n    return [...this.host.childNodes].some(node => {\n      if (node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '') {\n        return true;\n      }\n\n      if (node.nodeType === node.ELEMENT_NODE) {\n        const el = node as HTMLElement;\n        const tagName = el.tagName.toLowerCase();\n\n        // Ignore visually hidden elements since they aren't rendered\n        if (tagName === 'syn-visually-hidden') {\n          return false;\n        }\n\n        // If it doesn't have a slot attribute, it's part of the default slot\n        if (!el.hasAttribute('slot')) {\n          return true;\n        }\n      }\n\n      return false;\n    });\n  }\n\n  private hasNamedSlot(name: string) {\n    return this.host.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n  }\n\n  test(slotName: string) {\n    return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);\n  }\n\n  hostConnected() {\n    this.host.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  hostDisconnected() {\n    this.host.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n\n    if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {\n      this.host.requestUpdate();\n    }\n  };\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n */\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement | undefined | null): string {\n  if (!slot) {\n    return '';\n  }\n  const nodes = slot.assignedNodes({ flatten: true });\n  let text = '';\n\n  [...nodes].forEach(node => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n"],
-  "mappings": ";AASO,IAAM,oBAAN,MAAsD;AAAA,EAI3D,YAAY,SAA2C,WAAqB;AAF5E,qBAAsB,CAAC;AAgDvB,SAAQ,mBAAmB,CAAC,UAAiB;AAC3C,YAAM,OAAO,MAAM;AAEnB,UAAK,KAAK,UAAU,SAAS,WAAW,KAAK,CAAC,KAAK,QAAU,KAAK,QAAQ,KAAK,UAAU,SAAS,KAAK,IAAI,GAAI;AAC7G,aAAK,KAAK,cAAc;AAAA,MAC1B;AAAA,IACF;AAnDE,KAAC,KAAK,OAAO,MAAM,cAAc,IAAI;AACrC,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,iBAAiB;AACvB,WAAO,CAAC,GAAG,KAAK,KAAK,UAAU,EAAE,KAAK,UAAQ;AAC5C,UAAI,KAAK,aAAa,KAAK,aAAa,KAAK,YAAa,KAAK,MAAM,IAAI;AACvE,eAAO;AAAA,MACT;AAEA,UAAI,KAAK,aAAa,KAAK,cAAc;AACvC,cAAM,KAAK;AACX,cAAM,UAAU,GAAG,QAAQ,YAAY;AAGvC,YAAI,YAAY,uBAAuB;AACrC,iBAAO;AAAA,QACT;AAGA,YAAI,CAAC,GAAG,aAAa,MAAM,GAAG;AAC5B,iBAAO;AAAA,QACT;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAAA,EAEQ,aAAa,MAAc;AACjC,WAAO,KAAK,KAAK,cAAc,mBAAmB,IAAI,IAAI,MAAM;AAAA,EAClE;AAAA,EAEA,KAAK,UAAkB;AACrB,WAAO,aAAa,cAAc,KAAK,eAAe,IAAI,KAAK,aAAa,QAAQ;AAAA,EACtF;AAAA,EAEA,gBAAgB;AACd,SAAK,KAAK,WAAY,iBAAiB,cAAc,KAAK,gBAAgB;AAAA,EAC5E;AAAA,EAEA,mBAAmB;AACjB,SAAK,KAAK,WAAY,oBAAoB,cAAc,KAAK,gBAAgB;AAAA,EAC/E;AASF;",
+  "mappings": ";AASO,IAAM,oBAAN,MAAsD;AAAA,EAI3D,YAAY,SAA2C,WAAqB;AAF5E,qBAAsB,CAAC;AAgDvB,SAAQ,mBAAmB,CAAC,UAAiB;AAC3C,YAAM,OAAO,MAAM;AAEnB,UAAK,KAAK,UAAU,SAAS,WAAW,KAAK,CAAC,KAAK,QAAU,KAAK,QAAQ,KAAK,UAAU,SAAS,KAAK,IAAI,GAAI;AAC7G,aAAK,KAAK,cAAc;AAAA,MAC1B;AAAA,IACF;AAnDE,KAAC,KAAK,OAAO,MAAM,cAAc,IAAI;AACrC,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,iBAAiB;AACvB,WAAO,CAAC,GAAG,KAAK,KAAK,UAAU,EAAE,KAAK,UAAQ;AAC5C,UAAI,KAAK,aAAa,KAAK,aAAa,KAAK,YAAa,KAAK,MAAM,IAAI;AACvE,eAAO;AAAA,MACT;AAEA,UAAI,KAAK,aAAa,KAAK,cAAc;AACvC,cAAM,KAAK;AACX,cAAM,UAAU,GAAG,QAAQ,YAAY;AAGvC,YAAI,YAAY,uBAAuB;AACrC,iBAAO;AAAA,QACT;AAGA,YAAI,CAAC,GAAG,aAAa,MAAM,GAAG;AAC5B,iBAAO;AAAA,QACT;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAAA,EAEQ,aAAa,MAAc;AACjC,WAAO,KAAK,KAAK,cAAc,mBAAmB,IAAI,IAAI,MAAM;AAAA,EAClE;AAAA,EAEA,KAAK,UAAkB;AACrB,WAAO,aAAa,cAAc,KAAK,eAAe,IAAI,KAAK,aAAa,QAAQ;AAAA,EACtF;AAAA,EAEA,gBAAgB;AACd,SAAK,KAAK,WAAY,iBAAiB,cAAc,KAAK,gBAAgB;AAAA,EAC5E;AAAA,EAEA,mBAAmB;AACjB,SAAK,KAAK,WAAY,oBAAoB,cAAc,KAAK,gBAAgB;AAAA,EAC/E;AASF;AA2BO,SAAS,eAAe,MAAkD;AAC/E,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,QAAM,QAAQ,KAAK,cAAc,EAAE,SAAS,KAAK,CAAC;AAClD,MAAI,OAAO;AAEX,GAAC,GAAG,KAAK,EAAE,QAAQ,UAAQ;AACzB,QAAI,KAAK,aAAa,KAAK,WAAW;AACpC,cAAQ,KAAK;AAAA,IACf;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }