ember-primitives 0.27.2 → 0.28.1

package/dist/components/dialog.js

@@ -16,9 +16,9 @@ const DialogElement = setComponentTemplate(precompileTemplate("\n  <dialog ...at
     on
   })
 }), templateOnly());
-let ModalDialog = class ModalDialog extends Component {
+class ModalDialog extends Component {
   static {
-    setComponentTemplate(precompileTemplate("\n    {{yield (hash isOpen=this.isOpen open=this.open close=this.close Dialog=(component DialogElement open=@open onClose=this.handleClose register=this.register))}}\n  ", {
+    setComponentTemplate(precompileTemplate("\n    {{yield (hash isOpen=this.isOpen open=this.open close=this.close focusOnClose=this.refocus Dialog=(component DialogElement open=@open onClose=this.handleClose register=this.register))}}\n  ", {
       strictMode: true,
       scope: () => ({
         hash,
@@ -26,8 +26,9 @@ let ModalDialog = class ModalDialog extends Component {
       })
     }), this);
   }
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   static {
-    g(this.prototype, "_isOpen", [localCopy('args.open')]);
+    g(this.prototype, "_isOpen", [localCopy("args.open")]);
   }
   #_isOpen = (i(this, "_isOpen"), void 0);
   get isOpen() {
@@ -36,14 +37,22 @@ let ModalDialog = class ModalDialog extends Component {
     */
     return this._isOpen ?? false;
   }
-  set isOpen(val1) {
-    this._isOpen = val1;
+  set isOpen(val) {
+    this._isOpen = val;
   }
+  #lastIsOpen = false;
+  refocus = modifier(element => {
+    assert(`focusOnClose is only valid on a HTMLElement`, element instanceof HTMLElement);
+    if (!this.isOpen && this.#lastIsOpen) {
+      element.focus();
+    }
+    this.#lastIsOpen = this.isOpen;
+  });
   static {
     g(this.prototype, "dialogElement", [tracked]);
   }
   #dialogElement = (i(this, "dialogElement"), void 0);
-  register = modifier(element1 => {
+  register = modifier(element => {
     /**
     * This is very sad.
     *
@@ -55,20 +64,20 @@ let ModalDialog = class ModalDialog extends Component {
     * This has to be an async / delayed a bit, so that
     * the tracking frame can exit, and we don't infinite loop
     */
-    (async () => {
+    void (async () => {
       await Promise.resolve();
-      this.dialogElement = element1;
+      this.dialogElement = element;
     })();
   });
   /**
   * Closes the dialog -- this will throw an error in development if the dialog element was not rendered
   */
   close = () => {
-    assert('Cannot call `close` on <Dialog> without rendering the dialog element.', this.dialogElement);
+    assert("Cannot call `close` on <Dialog> without rendering the dialog element.", this.dialogElement);
     /**
     * If the element is already closed, don't run all this again
     */
-    if (!this.dialogElement.hasAttribute('open')) {
+    if (!this.dialogElement.hasAttribute("open")) {
       return;
     }
     /**
@@ -84,21 +93,21 @@ let ModalDialog = class ModalDialog extends Component {
   * listened to via addEventListener('close', ...);
   */
   handleClose = () => {
-    assert('Cannot call `handleDialogClose` on <Dialog> without rendering the dialog element. This is likely a bug in ember-primitives. Please open an issue <3', this.dialogElement);
+    assert("Cannot call `handleDialogClose` on <Dialog> without rendering the dialog element. This is likely a bug in ember-primitives. Please open an issue <3", this.dialogElement);
     this.isOpen = false;
     this.args.onClose?.(this.dialogElement.returnValue);
     // the return value ends up staying... which is annoying
-    this.dialogElement.returnValue = '';
+    this.dialogElement.returnValue = "";
   };
   /**
   * Opens the dialog -- this will throw an error in development if the dialog element was not rendered
   */
   open = () => {
-    assert('Cannot call `open` on <Dialog> without rendering the dialog element.', this.dialogElement);
+    assert("Cannot call `open` on <Dialog> without rendering the dialog element.", this.dialogElement);
     /**
     * If the element is already open, don't run all this again
     */
-    if (this.dialogElement.hasAttribute('open')) {
+    if (this.dialogElement.hasAttribute("open")) {
       return;
     }
     /**
@@ -107,7 +116,7 @@ let ModalDialog = class ModalDialog extends Component {
     this.dialogElement.showModal();
     this.isOpen = true;
   };
-};
+}
 const Modal = ModalDialog;
 const Dialog = ModalDialog;
 

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialog.js","sources":["../../src/components/dialog.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { assert } from \"@ember/debug\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\n// temp\n//  https://github.com/tracked-tools/tracked-toolbox/issues/38\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport { localCopy } from \"tracked-toolbox\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { ModifierLike, WithBoundArgs } from \"@glint/template\";\n\nconst DialogElement: TOC<{\n  Element: HTMLDialogElement;\n  Args: {\n    /**\n     * @internal\n     */\n    open: boolean | undefined;\n    /**\n     * @internal\n     */\n    onClose: () => void;\n\n    /**\n     * @internal\n     */\n    register: ModifierLike<{ Element: HTMLDialogElement }>;\n  };\n  Blocks: { default: [] };\n}> = <template>\n  <dialog ...attributes open={{@open}} {{on \"close\" @onClose}} {{@register}}>\n    {{yield}}\n  </dialog>\n</template>;\n\nexport interface Signature {\n  Args: {\n    /**\n     * Optionally set the open state of the `<dialog>`\n     * The state will still be managed internally,\n     * so this does not need to be a maintained value, but whenever it changes,\n     * the dialog element will reflect that change accordingly.\n     */\n    open?: boolean;\n    /**\n     * When the `<dialog>` is closed, this function will be called\n     * and the `<dialog>`'s `returnValue` will be passed.\n     *\n     * This can be used to determine which button was clicked to close the modal\n     *\n     * Note though that this value is only populated when using\n     * `<form method='dialog'>`\n     */\n    onClose?: (returnValue: string) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        /**\n         * Represents the open state of the `<dialog>` element.\n         */\n        isOpen: boolean;\n\n        /**\n         * Closes the `<dialog>` element\n         * Will throw an error if `Dialog` is not rendered.\n         */\n        close: () => void;\n\n        /**\n         * Opens the `<dialog>` element.\n         * Will throw an error if `Dialog` is not rendered.\n         */\n        open: () => void;\n\n        /**\n         * This modifier should be applied to the button that opens the Dialog so that it can be re-focused when the dialog closes.\n         *\n         * Example:\n         *\n         * ```gjs\n         * <template>\n         *   <Modal as |m|>\n         *     <button {{m.focusOnClose}} {{on \"click\" m.open}}>Open</button>\n         *\n         *     <m.Dialog>...</m.Dialog>\n         *   </Modal>\n         * </template>\n         * ```\n         */\n        focusOnClose: ModifierLike<{ Element: HTMLElement }>;\n\n        /**\n         * This is the `<dialog>` element (with some defaults pre-wired).\n         * This is required to be rendered.\n         */\n        Dialog: WithBoundArgs<typeof DialogElement, \"onClose\" | \"register\" | \"open\">;\n      },\n    ];\n  };\n}\n\nclass ModalDialog extends Component<Signature> {\n  <template>\n    {{yield\n      (hash\n        isOpen=this.isOpen\n        open=this.open\n        close=this.close\n        focusOnClose=this.refocus\n        Dialog=(component DialogElement open=@open onClose=this.handleClose register=this.register)\n      )\n    }}\n  </template>\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  @localCopy(\"args.open\") declare _isOpen: boolean;\n\n  get isOpen() {\n    /**\n     * Always fallback to false (closed)\n     */\n    return this._isOpen ?? false;\n  }\n  set isOpen(val: boolean) {\n    this._isOpen = val;\n  }\n\n  #lastIsOpen = false;\n  refocus = eModifier((element) => {\n    assert(`focusOnClose is only valid on a HTMLElement`, element instanceof HTMLElement);\n\n    if (!this.isOpen && this.#lastIsOpen) {\n      element.focus();\n    }\n\n    this.#lastIsOpen = this.isOpen;\n  });\n\n  @tracked declare dialogElement: HTMLDialogElement | undefined;\n\n  register = eModifier((element: HTMLDialogElement) => {\n    /**\n     * This is very sad.\n     *\n     * But we need the element to be 'root state'\n     * so that when we read things like \"isOpen\",\n     * when the dialog is finally rendered, all the\n     * downstream properties render.\n     *\n     * This has to be an async / delayed a bit, so that\n     * the tracking frame can exit, and we don't infinite loop\n     */\n    void (async () => {\n      await Promise.resolve();\n\n      this.dialogElement = element;\n    })();\n  });\n\n  /**\n   * Closes the dialog -- this will throw an error in development if the dialog element was not rendered\n   */\n  close = () => {\n    assert(\n      \"Cannot call `close` on <Dialog> without rendering the dialog element.\",\n      this.dialogElement,\n    );\n\n    /**\n     * If the element is already closed, don't run all this again\n     */\n    if (!this.dialogElement.hasAttribute(\"open\")) {\n      return;\n    }\n\n    /**\n     * removes the `open` attribute\n     * handleClose will be called because the dialog has bound the `close` event.\n     */\n    this.dialogElement.close();\n  };\n\n  /**\n   * @internal\n   *\n   * handles the <dialog> element's native close behavior.\n   * listened to via addEventListener('close', ...);\n   */\n  handleClose = () => {\n    assert(\n      \"Cannot call `handleDialogClose` on <Dialog> without rendering the dialog element. This is likely a bug in ember-primitives. Please open an issue <3\",\n      this.dialogElement,\n    );\n\n    this.isOpen = false;\n    this.args.onClose?.(this.dialogElement.returnValue);\n    // the return value ends up staying... which is annoying\n    this.dialogElement.returnValue = \"\";\n  };\n\n  /**\n   * Opens the dialog -- this will throw an error in development if the dialog element was not rendered\n   */\n  open = () => {\n    assert(\n      \"Cannot call `open` on <Dialog> without rendering the dialog element.\",\n      this.dialogElement,\n    );\n\n    /**\n     * If the element is already open, don't run all this again\n     */\n    if (this.dialogElement.hasAttribute(\"open\")) {\n      return;\n    }\n\n    /**\n     * adds the `open` attribute\n     */\n    this.dialogElement.showModal();\n    this.isOpen = true;\n  };\n}\n\nexport const Modal = ModalDialog;\nexport const Dialog = ModalDialog;\n\nexport default ModalDialog;\n"],"names":["DialogElement","setComponentTemplate","precompileTemplate","strictMode","scope","on","templateOnly","ModalDialog","Component","hash","g","prototype","localCopy","i","void 0","isOpen","_isOpen","val","refocus","eModifier","element","assert","HTMLElement","focus","tracked","register","Promise","resolve","dialogElement","close","hasAttribute","handleClose","args","onClose","returnValue","open","showModal","Modal","Dialog"],"mappings":"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"}

package/dist/components/external-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"external-link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"external-link.js","sources":["../../src/components/external-link.gts"],"sourcesContent":["import type { TOC } from \"@ember/component/template-only\";\n\nexport const ExternalLink: TOC<{\n  Element: HTMLAnchorElement;\n  Blocks: {\n    default: [];\n  };\n}> = <template>\n  <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"##missing##\" ...attributes>\n    {{yield}}\n  </a>\n</template>;\n\nexport default ExternalLink;\n"],"names":["ExternalLink","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;MAEaA,YAKR,GAAAC,oBAAA,CAAAC,kBAAA,CAIL,mHAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAE,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/form.js

@@ -6,13 +6,13 @@ import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
 const dataFromEvent = dataFrom;
-const handleInput = (onChange1, event1, eventType1 = 'input') => {
-  let data1 = dataFrom(event1);
-  onChange1(data1, eventType1, event1);
+const handleInput = (onChange, event, eventType = "input") => {
+  const data = dataFrom(event);
+  onChange(data, eventType, event);
 };
-const handleSubmit = (onChange1, event1) => {
-  event1.preventDefault();
-  handleInput(onChange1, event1, 'submit');
+const handleSubmit = (onChange, event) => {
+  event.preventDefault();
+  handleInput(onChange, event, "submit");
 };
 const Form = setComponentTemplate(precompileTemplate("\n  <form {{on \"input\" (fn handleInput @onChange)}} {{on \"submit\" (fn handleSubmit @onChange)}} ...attributes>\n    {{yield}}\n  </form>\n", {
   strictMode: true,

package/dist/components/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"form.js","sources":["../../src/components/form.gts"],"sourcesContent":["import { fn } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { dataFrom } from \"form-data-utils\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\ntype Data = ReturnType<typeof dataFrom>;\n\nexport const dataFromEvent = dataFrom;\n\nconst handleInput = (\n  onChange: (data: Data, eventType: \"input\" | \"submit\", event: Event) => void,\n  event: Event | SubmitEvent,\n  eventType: \"input\" | \"submit\" = \"input\",\n) => {\n  const data = dataFrom(event);\n\n  onChange(data, eventType, event);\n};\n\nconst handleSubmit = (\n  onChange: (data: Data, eventType: \"input\" | \"submit\", event: Event | SubmitEvent) => void,\n  event: SubmitEvent,\n) => {\n  event.preventDefault();\n  handleInput(onChange, event, \"submit\");\n};\n\nexport interface Signature {\n  Element: HTMLFormElement;\n  Args: {\n    /**\n     *  Any time the value of any field is changed this function will be called.\n     */\n    onChange: (\n      /**\n       * The data from the form as an Object of `{ [field name] => value }` pairs.\n       * This is generated from the native [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)\n       *\n       * Additional fields/inputs/controls can be added to this data by specifying a\n       * \"name\" attribute.\n       */\n      data: Data,\n      /**\n       * Indicates whether the `onChange` function was called from the `input` or `submit` event handlers.\n       */\n      eventType: \"input\" | \"submit\",\n      /**\n       * The raw event, if needed.\n       */\n      event: Event | SubmitEvent,\n    ) => void;\n  };\n  Blocks: {\n    /**\n     * The main content for the form. This is where inputs / fields / controls would go.\n     * Within the `<form>` content, `<button type=\"submit\">` will submit the form, which\n     * triggers the `@onChange` event.\n     */\n    default: [];\n  };\n}\n\nexport const Form: TOC<Signature> = <template>\n  <form\n    {{on \"input\" (fn handleInput @onChange)}}\n    {{on \"submit\" (fn handleSubmit @onChange)}}\n    ...attributes\n  >\n    {{yield}}\n  </form>\n</template>;\n\nexport default Form;\n"],"names":["dataFromEvent","dataFrom","handleInput","onChange","event","eventType","data","handleSubmit","preventDefault","Form","setComponentTemplate","precompileTemplate","strictMode","scope","on","fn","templateOnly"],"mappings":";;;;;;;AASO,MAAMA,gBAAgBC;AAE7B,MAAMC,cAAcA,CAClBC,QAA2E,EAC3EC,OACAC,YAAgC,OAAO,KAAA;AAEvC,EAAA,MAAMC,OAAOL,QAAS,CAAAG,KAAA,CAAA;AAEtBD,EAAAA,QAAA,CAASG,MAAMD,SAAW,EAAAD,KAAA,CAAA;AAC5B,CAAA;AAEA,MAAMG,YAAe,GAAAA,CACnBJ,QAAyF,EACzFC,KAAO,KAAA;EAEPA,KAAA,CAAMI,cAAc,EAAA;AACpBN,EAAAA,WAAA,CAAYC,UAAUC,KAAO,EAAA,QAAA,CAAA;AAC/B,CAAA;MAqCaK,IAAU,GAAAC,oBAAA,CAAaC,kBAAA,CAQpC,gJAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAb,WAAA;AAAAK,IAAAA;AAAA,GAAA;AAAU,CAAE,CAAA,EAAAS,YAAA,EAAA;;;;"}

package/dist/components/keys.js

@@ -0,0 +1,33 @@
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+const isLast = (collection, index) => index === collection.length - 1;
+const isNotLast = (collection, index) => !isLast(collection, index);
+const isMac = navigator.userAgent.indexOf("Mac OS") >= 0;
+function split(str) {
+  const keys = str.split("+").map(x => x.trim());
+  return keys;
+}
+function getKeys(keys, mac) {
+  const normalKeys = Array.isArray(keys) ? keys : split(keys);
+  if (!mac) {
+    return normalKeys;
+  }
+  const normalMac = Array.isArray(mac) ? mac : split(mac);
+  return isMac ? normalMac : normalKeys;
+}
+const KeyCombo = setComponentTemplate(precompileTemplate("\n  <span class=\"ember-primitives__key-combination\" ...attributes>\n    {{#let (getKeys @keys @mac) as |keys|}}\n      {{#each keys as |key i|}}\n        <Key>{{key}}</Key>\n        {{#if (isNotLast keys i)}}\n          <span class=\"ember-primitives__key-combination__separator\">+</span>\n        {{/if}}\n      {{/each}}\n    {{/let}}\n  </span>\n", {
+  strictMode: true,
+  scope: () => ({
+    getKeys,
+    Key,
+    isNotLast
+  })
+}), templateOnly());
+const Key = setComponentTemplate(precompileTemplate("\n  <kbd class=\"ember-primitives__key\" ...attributes>{{yield}}</kbd>\n", {
+  strictMode: true
+}), templateOnly());
+
+export { Key, KeyCombo };
+//# sourceMappingURL=keys.js.map

package/dist/components/keys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keys.js","sources":["../../src/components/keys.gts"],"sourcesContent":["import type { TOC } from \"@ember/component/template-only\";\n\nconst isLast = (collection: unknown[], index: number) => index === collection.length - 1;\nconst isNotLast = (collection: unknown[], index: number) => !isLast(collection, index);\nconst isMac = navigator.userAgent.indexOf(\"Mac OS\") >= 0;\n\nfunction split(str: string) {\n  const keys = str.split(\"+\").map((x) => x.trim());\n\n  return keys;\n}\n\nfunction getKeys(keys: string[] | string, mac?: string[] | string) {\n  const normalKeys = Array.isArray(keys) ? keys : split(keys);\n\n  if (!mac) {\n    return normalKeys;\n  }\n\n  const normalMac = Array.isArray(mac) ? mac : split(mac);\n\n  return isMac ? normalMac : normalKeys;\n}\n\nexport interface KeyComboSignature {\n  Element: HTMLElement;\n  Args: {\n    keys: string[] | string;\n    mac?: string[] | string;\n  };\n}\n\nexport const KeyCombo: TOC<KeyComboSignature> = <template>\n  <span class=\"ember-primitives__key-combination\" ...attributes>\n    {{#let (getKeys @keys @mac) as |keys|}}\n      {{#each keys as |key i|}}\n        <Key>{{key}}</Key>\n        {{#if (isNotLast keys i)}}\n          <span class=\"ember-primitives__key-combination__separator\">+</span>\n        {{/if}}\n      {{/each}}\n    {{/let}}\n  </span>\n</template>;\n\nexport interface KeySignature {\n  Element: HTMLElement;\n  Blocks: { default?: [] };\n}\n\nexport const Key: TOC<KeySignature> = <template>\n  <kbd class=\"ember-primitives__key\" ...attributes>{{yield}}</kbd>\n</template>;\n"],"names":["isLast","collection","index","length","isNotLast","isMac","navigator","userAgent","indexOf","split","str","keys","map","x","trim","getKeys","mac","normalKeys","Array","isArray","normalMac","KeyCombo","setComponentTemplate","precompileTemplate","strictMode","scope","Key","templateOnly"],"mappings":";;;;AAEA,MAAMA,MAAA,GAASA,CAACC,UAAmB,EAAIC,KAAa,KAAKA,KAAA,KAAUD,UAAW,CAAAE,MAAM,GAAG,CAAA;AACvF,MAAMC,SAAA,GAAYA,CAACH,UAAmB,EAAIC,KAAa,KAAK,CAACF,MAAA,CAAOC,UAAY,EAAAC,KAAA,CAAA;AAChF,MAAMG,QAAQC,SAAU,CAAAC,SAAS,CAACC,OAAO,CAAC,QAAa,CAAA,IAAA,CAAA;AAEvD,SAASC,KAAAA,CAAMC,GAAW,EAAA;AACxB,EAAA,MAAMC,IAAA,GAAOD,GAAI,CAAAD,KAAK,CAAC,GAAA,CAAA,CAAKG,GAAG,CAAEC,CAAM,IAAAA,CAAA,CAAEC,IAAI,EAAA,CAAA;AAE7C,EAAA,OAAOH,IAAA;AACT;AAEA,SAASI,OAAAA,CAAQJ,IAAuB,EAAEK,GAAuB,EAAA;AAC/D,EAAA,MAAMC,aAAaC,KAAM,CAAAC,OAAO,CAACR,IAAA,CAAA,GAAQA,OAAOF,KAAM,CAAAE,IAAA,CAAA;EAEtD,IAAI,CAACK,GAAK,EAAA;AACR,IAAA,OAAOC,UAAA;AACT;AAEA,EAAA,MAAMG,YAAYF,KAAM,CAAAC,OAAO,CAACH,GAAA,CAAA,GAAOA,MAAMP,KAAM,CAAAO,GAAA,CAAA;AAEnD,EAAA,OAAOX,QAAQe,SAAY,GAAAH,UAAA;AAC7B;MAUaI,QAAc,GAAAC,oBAAA,CAAqBC,kBAAA,CAWhD,kWAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAV,OAAA;IAAAW,GAAA;AAAAtB,IAAAA;AAAA,GAAA;AAAU,CAAE,CAAA,EAAAuB,YAAA,EAAA;MAOCD,GAAS,GAAAJ,oBAAA,CAAgBC,kBAAA,CAEtC,0EAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAE,CAAA,EAAAG,YAAA,EAAA;;;;"}

package/dist/components/layout/hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"hero.js","sources":["../../../src/components/layout/hero.gts"],"sourcesContent":["import \"./hero.css\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const Hero: TOC<{\n  /**\n   * The wrapper element of the whole layout.\n   */\n  Element: HTMLDivElement;\n  Blocks: {\n    default: [];\n  };\n}> = <template>\n  <div class=\"ember-primitives__hero__wrapper\" ...attributes>\n    {{yield}}\n  </div>\n</template>;\n"],"names":["Hero","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;;MAIaA,IAQR,GAAAC,oBAAA,CAAAC,kBAAA,CAIL,8FAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAE,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/layout/sticky-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-footer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"sticky-footer.js","sources":["../../../src/components/layout/sticky-footer.gts"],"sourcesContent":["import \"./sticky-footer.css\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const StickyFooter: TOC<{\n  /**\n   * The wrapper element of the whole layout.\n   * Valid parents for this element must have either a set height,\n   * or a set max-height.\n   */\n  Element: HTMLDivElement;\n  Blocks: {\n    /**\n     * This is the scrollable content, contained within a `<div>` element for positioning.\n     * If this component is used as the main layout on a page,\n     * the `<main>` element would be appropriate within here.\n     */\n    content: [];\n    /**\n     * This is the footer content, contained within a `<div>` element for positioning.\n     * A `<footer>` element would be appropriate within here.\n     *\n     * This element will be at the bottom of the page if the content does not overflow the containing element and this element will be at the bottom of the content if there is overflow.\n     */\n    footer: [];\n  };\n}> = <template>\n  <div class=\"ember-primitives__sticky-footer__wrapper\" ...attributes>\n    <div class=\"ember-primitives__sticky-footer__container\">\n      <div class=\"ember-primitives__sticky-footer__content\">\n        {{yield to=\"content\"}}\n      </div>\n      <div class=\"ember-primitives__sticky-footer__footer\">\n        {{yield to=\"footer\"}}\n      </div>\n    </div>\n  </div>\n</template>;\n\nexport default StickyFooter;\n"],"names":["StickyFooter","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;;MAIaA,YAsBR,GAAAC,oBAAA,CAAAC,kBAAA,CAWL,kYAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAE,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"link.js","sources":["../../src/components/link.gts"],"sourcesContent":["/**\n * TODO: make template-only component,\n * and use class-based modifier?\n *\n * This would require that modifiers could run pre-render\n */\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport { link } from '../helpers/link.ts';\nimport { ExternalLink } from './external-link.gts';\n\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface Signature {\n  Element: HTMLAnchorElement;\n  Args: {\n    /**\n     * the `href` string value to set on the anchor element.\n     */\n    href: string;\n    /**\n     * When calculating the \"active\" state of the link, you may decide\n     * whether or not you want to _require_ that all query params be considered (true)\n     * or specify individual query params, ignoring anything not specified.\n     *\n     * For example:\n     *\n     * ```gjs live preview\n     * import { Link } from 'ember-primitives';\n     *\n     * <template>\n     *   <Link @href=\"/\" @includeActiveQueryParams={{true}} as |a|>\n     *     ...\n     *   </Link>\n     * </template>\n     * ```\n     *\n     * the data-active state here will only be \"true\" on\n     * - `/`\n     * - `/?foo=2`\n     * - `/?foo=&bar=`\n     *\n     */\n    includeActiveQueryParams?: true | string[];\n    /**\n     * When calculating the \"active\" state of the link, you may decide\n     * whether or not you want to consider sub paths to be active when\n     * child routes/urls are active.\n     *\n     * For example:\n     *\n     * ```gjs live preview\n     * import { Link } from 'ember-primitives';\n     *\n     * <template>\n     *   <Link @href=\"/forum/1\" @activeOnSubPaths={{true}} as |a|>\n     *     ...\n     *   </Link>\n     * </template>\n     * ```\n     *\n     * the data-active state here will be \"true\" on\n     * - `/forum/1`\n     * - `/forum/1/posts`\n     * - `/forum/1/posts/comments`\n     * - `/forum/1/*etc*`\n     *\n     * if `@activeOnSubPaths` is set to false or left off\n     * the data-active state here will only be \"true\" on\n     * - `/forum/1`\n     *\n     */\n    activeOnSubPaths?: true;\n  };\n  Blocks: {\n    default: [\n      {\n        /**\n         * Indicates if the passed `href` is pointing to an external site.\n         * Useful if you want your links to have additional context for when\n         * a user is about to leave your site.\n         *\n         * For example:\n         *\n         * ```gjs live preview\n         * import { Link } from 'ember-primitives';\n         *\n         * const MyLink = <template>\n         *   <Link @href={{@href}} as |a|>\n         *     {{yield}}\n         *     {{#if a.isExternal}}\n         *       ➚\n         *     {{/if}}\n         *   </Link>\n         * </template>;\n         *\n         * <template>\n         *   <MyLink @href=\"https://developer.mozilla.org\">MDN</MyLink> &nbsp;&nbsp;\n         *   <MyLink @href=\"/\">Home</MyLink>\n         *  </template>\n         * ```\n         */\n        isExternal: boolean;\n        /**\n         * Indicates if the passed `href` is *active*, or the user is on the same basepath.\n         * This allows consumers to style their link if they wish or style their text.\n         * The active state will also be present on a `data-active` attribute on the generated anchor tag.\n         *\n         *\n         * For example\n         * ```gjs\n         * import { Link, service } from 'ember-primitives';\n         *\n         * const MyLink = <template>\n         *   <Link @href=\"...\"> as |a|>\n         *     <span class=\"{{if a.isActive 'underline'}}\">\n         *     {{yield}}\n         *     </span>\n         *   </Link>\n         * </template>\n         *\n         * <template>\n         * {{#let (service 'router') as |router|}}\n         *     <MyLink @href={{router.currentURL}}>Ths page</MyLink> &nbsp;&nbsp;\n         *     <MyLink @href=\"/\">Home</MyLink>\n         *   {{/let}}\n         *  </template>\n         * ```\n         *\n         * By default, the query params are omitted from `isActive` calculation, but you may\n         * configure the query params to be included if you wish\n         * See: `@includeActiveQueryParams`\n         *\n         * By default, only the exact route/url is considered for the `isActive` calculation,\n         * but you may configure sub routes/paths to also be considered active\n         * See: `@activeOnSubPaths`\n         *\n         * Note that external links are never active.\n         */\n        isActive: boolean;\n      },\n    ];\n  };\n}\n\n/**\n * A light wrapper around the [Anchor element][mdn-a], which will appropriately make your link an external link if the passed `@href` is not on the same domain.\n *\n *\n * [mdn-a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n */\nexport const Link: TOC<Signature> = <template>\n  {{#let (link @href includeActiveQueryParams=@includeActiveQueryParams activeOnSubPaths=@activeOnSubPaths) as |l|}}\n    {{#if l.isExternal}}\n      <ExternalLink href={{@href}} ...attributes>\n        {{yield (hash isExternal=true isActive=false)}}\n      </ExternalLink>\n    {{else}}\n      <a\n        data-active={{l.isActive}}\n        href={{if @href @href \"##missing##\"}}\n        {{on \"click\" l.handleClick}}\n        ...attributes\n      >\n        {{yield (hash isExternal=false isActive=l.isActive)}}\n      </a>\n    {{/if}}\n  {{/let}}\n</template>;\n\nexport default Link;\n"],"names":["Link","setComponentTemplate","precompileTemplate","strictMode","scope","link","ExternalLink","hash","on","templateOnly"],"mappings":";;;;;;;;AAAA;;;;;AAKC;AA6ID;;;;;AAKC;MACYA,IAAU,GAAAC,oBAAA,CAAaC,kBAAA,CAiBpC,ogBAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,IAAA;IAAAC,YAAA;IAAAC,IAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAE,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/menu.js

@@ -34,46 +34,46 @@ const Separator = setComponentTemplate(precompileTemplate("\n  <div role=\"separ
  * If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse
  * wiggles. This is to match native menu implementation.
  */
-function focusOnHover(e1) {
-  const item1 = e1.currentTarget;
-  if (item1 instanceof HTMLElement) {
-    item1?.focus();
+function focusOnHover(e) {
+  const item = e.currentTarget;
+  if (item instanceof HTMLElement) {
+    item?.focus();
   }
 }
-const Item = setComponentTemplate(precompileTemplate("\n  <button type=\"button\" role=\"menuitem\" {{!-- @glint-ignore !--}} {{(if @onSelect (modifier on \"click\" @onSelect))}} {{on \"pointermove\" focusOnHover}} ...attributes>\n    {{yield}}\n  </button>\n", {
+const Item = setComponentTemplate(precompileTemplate("\n  <button type=\"button\" role=\"menuitem\" {{!-- @glint-expect-error !--}} {{(if @onSelect (modifier on \"click\" @onSelect))}} {{on \"pointermove\" focusOnHover}} ...attributes>\n    {{yield}}\n  </button>\n", {
   strictMode: true,
   scope: () => ({
     on,
     focusOnHover
   })
 }), templateOnly());
-const installContent = modifier((element1, _1, {
-  isOpen: isOpen1,
-  triggerElement: triggerElement1
+const installContent = modifier((element, _, {
+  isOpen,
+  triggerElement
 }) => {
   // focus first focusable element on the content
-  const tabster1 = getTabster(window);
-  const firstFocusable1 = tabster1?.focusable.findFirst({
-    container: element1
+  const tabster = getTabster(window);
+  const firstFocusable = tabster?.focusable.findFirst({
+    container: element
   });
-  firstFocusable1?.focus();
+  firstFocusable?.focus();
   // listen for "outside" clicks
-  function onDocumentClick1(e1) {
-    if (isOpen1.current && e1.target && !element1.contains(e1.target) && !triggerElement1.current?.contains(e1.target)) {
-      isOpen1.current = false;
+  function onDocumentClick(e) {
+    if (isOpen.current && e.target && !element.contains(e.target) && !triggerElement.current?.contains(e.target)) {
+      isOpen.current = false;
     }
   }
   // listen for the escape key
-  function onDocumentKeydown1(e1) {
-    if (isOpen1.current && e1.key === 'Escape') {
-      isOpen1.current = false;
+  function onDocumentKeydown(e) {
+    if (isOpen.current && e.key === "Escape") {
+      isOpen.current = false;
     }
   }
-  document.addEventListener('click', onDocumentClick1);
-  document.addEventListener('keydown', onDocumentKeydown1);
+  document.addEventListener("click", onDocumentClick);
+  document.addEventListener("keydown", onDocumentKeydown);
   return () => {
-    document.removeEventListener('click', onDocumentClick1);
-    document.removeEventListener('keydown', onDocumentKeydown1);
+    document.removeEventListener("click", onDocumentClick);
+    document.removeEventListener("keydown", onDocumentKeydown);
   };
 });
 const Content = setComponentTemplate(precompileTemplate("\n  {{#if @isOpen.current}}\n    <@PopoverContent id={{@contentId}} role=\"menu\" data-tabster={{TABSTER_CONFIG_CONTENT}} tabindex=\"0\" {{installContent isOpen=@isOpen triggerElement=@triggerElement}} {{on \"click\" @isOpen.toggle}} ...attributes>\n      {{yield (hash Item=Item Separator=Separator)}}\n    </@PopoverContent>\n  {{/if}}\n", {
@@ -87,37 +87,38 @@ const Content = setComponentTemplate(precompileTemplate("\n  {{#if @isOpen.curre
     Separator
   })
 }), templateOnly());
-const trigger = modifier((element1, _1, {
-  triggerElement: triggerElement1,
-  isOpen: isOpen1,
-  contentId: contentId1,
-  setReference: setReference1,
-  stopPropagation: stopPropagation1,
-  preventDefault: preventDefault1
+const trigger = modifier((element, _, {
+  triggerElement,
+  isOpen,
+  contentId,
+  setReference,
+  stopPropagation,
+  preventDefault
 }) => {
-  element1.setAttribute('aria-haspopup', 'menu');
-  if (isOpen1.current) {
-    element1.setAttribute('aria-controls', contentId1);
-    element1.setAttribute('aria-expanded', 'true');
+  element.setAttribute("aria-haspopup", "menu");
+  if (isOpen.current) {
+    element.setAttribute("aria-controls", contentId);
+    element.setAttribute("aria-expanded", "true");
   } else {
-    element1.removeAttribute('aria-controls');
-    element1.setAttribute('aria-expanded', 'false');
+    element.removeAttribute("aria-controls");
+    element.setAttribute("aria-expanded", "false");
   }
-  setTabsterAttribute(element1, TABSTER_CONFIG_TRIGGER);
-  const onTriggerClick1 = event1 => {
-    if (stopPropagation1) {
-      event1.stopPropagation();
+  setTabsterAttribute(element, TABSTER_CONFIG_TRIGGER);
+  const onTriggerClick = event => {
+    if (stopPropagation) {
+      event.stopPropagation();
     }
-    if (preventDefault1) {
-      event1.preventDefault();
+    if (preventDefault) {
+      event.preventDefault();
     }
-    isOpen1.toggle();
+    isOpen.toggle();
   };
-  element1.addEventListener('click', onTriggerClick1);
-  triggerElement1.current = element1;
-  setReference1(element1);
+  element.addEventListener("click", onTriggerClick);
+  triggerElement.current = element;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  setReference(element);
   return () => {
-    element1.removeEventListener('click', onTriggerClick1);
+    element.removeEventListener("click", onTriggerClick);
   };
 });
 const Trigger = setComponentTemplate(precompileTemplate("\n  <button type=\"button\" {{@triggerModifier stopPropagation=@stopPropagation preventDefault=@preventDefault}} ...attributes>\n    {{yield}}\n  </button>\n", {

package/dist/components/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"menu.js","sources":["../../src/components/menu.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\nimport { guidFor } from \"@ember/object/internals\";\n\nimport { modifier as eModifier } from \"ember-modifier\";\nimport { cell } from \"ember-resources\";\nimport { getTabster, getTabsterAttribute, MoverDirections, setTabsterAttribute } from \"tabster\";\n\nimport { Popover, type Signature as PopoverSignature } from \"./popover.gts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\ntype Cell<V> = ReturnType<typeof cell<V>>;\ntype PopoverArgs = PopoverSignature[\"Args\"];\ntype PopoverBlockParams = PopoverSignature[\"Blocks\"][\"default\"][0];\n\nconst TABSTER_CONFIG_CONTENT = getTabsterAttribute(\n  {\n    mover: {\n      direction: MoverDirections.Both,\n      cyclic: true,\n    },\n    deloser: {},\n  },\n  true,\n);\n\nconst TABSTER_CONFIG_TRIGGER = {\n  deloser: {},\n};\n\nexport interface Signature {\n  Args: PopoverArgs;\n  Blocks: {\n    default: [\n      {\n        arrow: PopoverBlockParams[\"arrow\"];\n        trigger: WithBoundArgs<\n          typeof trigger,\n          \"triggerElement\" | \"contentId\" | \"isOpen\" | \"setReference\"\n        >;\n        Trigger: WithBoundArgs<typeof Trigger, \"triggerModifier\">;\n        Content: WithBoundArgs<\n          typeof Content,\n          \"triggerElement\" | \"contentId\" | \"isOpen\" | \"PopoverContent\"\n        >;\n        isOpen: boolean;\n      },\n    ];\n  };\n}\n\nexport interface SeparatorSignature {\n  Element: HTMLDivElement;\n  Blocks: { default: [] };\n}\n\nconst Separator: TOC<SeparatorSignature> = <template>\n  <div role=\"separator\" ...attributes>\n    {{yield}}\n  </div>\n</template>;\n\n/**\n * We focus items on `pointerMove` to achieve the following:\n *\n * - Mouse over an item (it focuses)\n * - Leave mouse where it is and use keyboard to focus a different item\n * - Wiggle mouse without it leaving previously focused item\n * - Previously focused item should re-focus\n *\n * If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse\n * wiggles. This is to match native menu implementation.\n */\nfunction focusOnHover(e: PointerEvent) {\n  const item = e.currentTarget;\n\n  if (item instanceof HTMLElement) {\n    item?.focus();\n  }\n}\n\nexport interface ItemSignature {\n  Element: HTMLButtonElement;\n  Args: { onSelect?: (event: Event) => void };\n  Blocks: { default: [] };\n}\n\nconst Item: TOC<ItemSignature> = <template>\n  <button\n    type=\"button\"\n    role=\"menuitem\"\n    {{! @glint-expect-error !}}\n    {{(if @onSelect (modifier on \"click\" @onSelect))}}\n    {{on \"pointermove\" focusOnHover}}\n    ...attributes\n  >\n    {{yield}}\n  </button>\n</template>;\n\nconst installContent = eModifier<{\n  Element: HTMLElement;\n  Args: {\n    Named: {\n      isOpen: Cell<boolean>;\n      triggerElement: Cell<HTMLElement>;\n    };\n  };\n}>((element, _: [], { isOpen, triggerElement }) => {\n  // focus first focusable element on the content\n  const tabster = getTabster(window);\n  const firstFocusable = tabster?.focusable.findFirst({\n    container: element,\n  });\n\n  firstFocusable?.focus();\n\n  // listen for \"outside\" clicks\n  function onDocumentClick(e: MouseEvent) {\n    if (\n      isOpen.current &&\n      e.target &&\n      !element.contains(e.target as HTMLElement) &&\n      !triggerElement.current?.contains(e.target as HTMLElement)\n    ) {\n      isOpen.current = false;\n    }\n  }\n\n  // listen for the escape key\n  function onDocumentKeydown(e: KeyboardEvent) {\n    if (isOpen.current && e.key === \"Escape\") {\n      isOpen.current = false;\n    }\n  }\n\n  document.addEventListener(\"click\", onDocumentClick);\n  document.addEventListener(\"keydown\", onDocumentKeydown);\n\n  return () => {\n    document.removeEventListener(\"click\", onDocumentClick);\n    document.removeEventListener(\"keydown\", onDocumentKeydown);\n  };\n});\n\ninterface PrivateContentSignature {\n  Element: HTMLDivElement;\n  Args: {\n    triggerElement: Cell<HTMLElement>;\n    contentId: string;\n    isOpen: Cell<boolean>;\n    PopoverContent: PopoverBlockParams[\"Content\"];\n  };\n  Blocks: { default: [{ Item: typeof Item; Separator: typeof Separator }] };\n}\n\nexport interface ContentSignature {\n  Element: PrivateContentSignature[\"Element\"];\n  Blocks: PrivateContentSignature[\"Blocks\"];\n}\n\nconst Content: TOC<PrivateContentSignature> = <template>\n  {{#if @isOpen.current}}\n    <@PopoverContent\n      id={{@contentId}}\n      role=\"menu\"\n      data-tabster={{TABSTER_CONFIG_CONTENT}}\n      tabindex=\"0\"\n      {{installContent isOpen=@isOpen triggerElement=@triggerElement}}\n      {{on \"click\" @isOpen.toggle}}\n      ...attributes\n    >\n      {{yield (hash Item=Item Separator=Separator)}}\n    </@PopoverContent>\n  {{/if}}\n</template>;\n\ninterface PrivateTriggerModifierSignature {\n  Element: HTMLElement;\n  Args: {\n    Named: {\n      triggerElement: Cell<HTMLElement>;\n      isOpen: Cell<boolean>;\n      contentId: string;\n      setReference: PopoverBlockParams[\"setReference\"];\n      stopPropagation?: boolean;\n      preventDefault?: boolean;\n    };\n  };\n}\n\nexport interface TriggerModifierSignature {\n  Element: PrivateTriggerModifierSignature[\"Element\"];\n}\n\nconst trigger = eModifier<PrivateTriggerModifierSignature>(\n  (\n    element,\n    _: [],\n    { triggerElement, isOpen, contentId, setReference, stopPropagation, preventDefault },\n  ) => {\n    element.setAttribute(\"aria-haspopup\", \"menu\");\n\n    if (isOpen.current) {\n      element.setAttribute(\"aria-controls\", contentId);\n      element.setAttribute(\"aria-expanded\", \"true\");\n    } else {\n      element.removeAttribute(\"aria-controls\");\n      element.setAttribute(\"aria-expanded\", \"false\");\n    }\n\n    setTabsterAttribute(element, TABSTER_CONFIG_TRIGGER);\n\n    const onTriggerClick = (event: MouseEvent) => {\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n\n      isOpen.toggle();\n    };\n\n    element.addEventListener(\"click\", onTriggerClick);\n\n    triggerElement.current = element;\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    setReference(element);\n\n    return () => {\n      element.removeEventListener(\"click\", onTriggerClick);\n    };\n  },\n);\n\ninterface PrivateTriggerSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    triggerModifier: WithBoundArgs<\n      typeof trigger,\n      \"triggerElement\" | \"contentId\" | \"isOpen\" | \"setReference\"\n    >;\n    stopPropagation?: boolean;\n    preventDefault?: boolean;\n  };\n  Blocks: { default: [] };\n}\n\nexport interface TriggerSignature {\n  Element: PrivateTriggerSignature[\"Element\"];\n  Blocks: PrivateTriggerSignature[\"Blocks\"];\n}\n\nconst Trigger: TOC<PrivateTriggerSignature> = <template>\n  <button\n    type=\"button\"\n    {{@triggerModifier stopPropagation=@stopPropagation preventDefault=@preventDefault}}\n    ...attributes\n  >\n    {{yield}}\n  </button>\n</template>;\n\nconst IsOpen = () => cell<boolean>(false);\nconst TriggerElement = () => cell<HTMLElement>();\n\nexport class Menu extends Component<Signature> {\n  contentId = guidFor(this);\n\n  <template>\n    {{#let (IsOpen) (TriggerElement) as |isOpen triggerEl|}}\n      <Popover\n        @flipOptions={{@flipOptions}}\n        @middleware={{@middleware}}\n        @offsetOptions={{@offsetOptions}}\n        @placement={{@placement}}\n        @shiftOptions={{@shiftOptions}}\n        @strategy={{@strategy}}\n        @inline={{@inline}}\n        as |p|\n      >\n        {{#let\n          (modifier\n            trigger\n            triggerElement=triggerEl\n            isOpen=isOpen\n            contentId=this.contentId\n            setReference=p.setReference\n          )\n          as |triggerModifier|\n        }}\n          {{yield\n            (hash\n              trigger=triggerModifier\n              Trigger=(component Trigger triggerModifier=triggerModifier)\n              Content=(component\n                Content\n                PopoverContent=p.Content\n                isOpen=isOpen\n                triggerElement=triggerEl\n                contentId=this.contentId\n              )\n              arrow=p.arrow\n              isOpen=isOpen.current\n            )\n          }}\n        {{/let}}\n      </Popover>\n    {{/let}}\n  </template>\n}\n\nexport default Menu;\n"],"names":["TABSTER_CONFIG_CONTENT","getTabsterAttribute","mover","direction","MoverDirections","Both","cyclic","deloser","TABSTER_CONFIG_TRIGGER","Separator","setComponentTemplate","precompileTemplate","strictMode","templateOnly","focusOnHover","e","item","currentTarget","HTMLElement","focus","Item","scope","on","installContent","eModifier","element","_","isOpen","triggerElement","tabster","getTabster","window","firstFocusable","focusable","findFirst","container","onDocumentClick","current","target","contains","onDocumentKeydown","key","document","addEventListener","removeEventListener","Content","hash","trigger","contentId","setReference","stopPropagation","preventDefault","setAttribute","removeAttribute","setTabsterAttribute","onTriggerClick","event","toggle","Trigger","IsOpen","cell","TriggerElement","Menu","Component","guidFor","Popover"],"mappings":"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"}

package/dist/components/one-time-password/buttons.js

@@ -4,11 +4,11 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const reset = event1 => {
-  assert('[BUG]: reset called without an event.target', event1.target instanceof HTMLElement);
-  let form1 = event1.target.closest('form');
-  assert('Form is missing. Cannot use <Reset> without being contained within a <form>', form1 instanceof HTMLFormElement);
-  form1.reset();
+const reset = event => {
+  assert("[BUG]: reset called without an event.target", event.target instanceof HTMLElement);
+  const form = event.target.closest("form");
+  assert("Form is missing. Cannot use <Reset> without being contained within a <form>", form instanceof HTMLFormElement);
+  form.reset();
 };
 const Submit = setComponentTemplate(precompileTemplate("\n  <button type=\"submit\" ...attributes>Submit</button>\n", {
   strictMode: true

package/dist/components/one-time-password/buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"buttons.js","sources":["../../../src/components/one-time-password/buttons.gts"],"sourcesContent":["import { assert } from \"@ember/debug\";\nimport { on } from \"@ember/modifier\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nconst reset = (event: Event) => {\n  assert(\"[BUG]: reset called without an event.target\", event.target instanceof HTMLElement);\n\n  const form = event.target.closest(\"form\");\n\n  assert(\n    \"Form is missing. Cannot use <Reset> without being contained within a <form>\",\n    form instanceof HTMLFormElement,\n  );\n\n  form.reset();\n};\n\nexport const Submit: TOC<{\n  Element: HTMLButtonElement;\n  Blocks: { default: [] };\n}> = <template>\n  <button type=\"submit\" ...attributes>Submit</button>\n</template>;\n\nexport const Reset: TOC<{\n  Element: HTMLButtonElement;\n  Blocks: { default: [] };\n}> = <template>\n  <button type=\"button\" {{on \"click\" reset}} ...attributes>{{yield}}</button>\n</template>;\n"],"names":["reset","event","assert","target","HTMLElement","form","closest","HTMLFormElement","Submit","setComponentTemplate","precompileTemplate","strictMode","templateOnly","Reset","scope","on"],"mappings":";;;;;;AAKA,MAAMA,KAAA,GAASC,KAAO,IAAA;EACpBC,MAAO,CAAA,6CAAA,EAA+CD,KAAM,CAAAE,MAAM,YAAYC,WAAA,CAAA;EAE9E,MAAMC,IAAO,GAAAJ,KAAA,CAAME,MAAM,CAACG,OAAO,CAAC,MAAA,CAAA;AAElCJ,EAAAA,MAAA,CACE,+EACAG,IAAgB,YAAAE,eAAA,CAAA;EAGlBF,IAAA,CAAKL,KAAK,EAAA;AACZ,CAAA;MAEaQ,MAGR,GAAAC,oBAAA,CAAAC,kBAAA,CAEL,6DAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAE,CAAA,EAAAC,YAAA,EAAA;MAECC,KAGR,GAAAJ,oBAAA,CAAAC,kBAAA,CAEL,uFAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAG,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;AAAAf,IAAAA;AAAA,GAAA;AAAU,CAAE,CAAA,EAAAY,YAAA,EAAA;;;;"}

package/dist/components/one-time-password/input.js

@@ -3,19 +3,19 @@ import { warn } from '@ember/debug';
 import { isDestroyed, isDestroying } from '@ember/destroyable';
 import { on } from '@ember/modifier';
 import { buildWaiter } from '@ember/test-waiters';
-import { selectAll, handlePaste, autoAdvance, handleNavigation, getCollectiveValue } from './utils.js';
+import { handleNavigation, autoAdvance, handlePaste, selectAll, getCollectiveValue } from './utils.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
 const DEFAULT_LENGTH = 6;
-function labelFor(inputIndex1, labelFn1) {
-  if (labelFn1) {
-    return labelFn1(inputIndex1);
+function labelFor(inputIndex, labelFn) {
+  if (labelFn) {
+    return labelFn(inputIndex);
   }
-  return `Please enter OTP character ${inputIndex1 + 1}`;
+  return `Please enter OTP character ${inputIndex + 1}`;
 }
-let waiter = buildWaiter('ember-primitives:OTPInput:handleChange');
+const waiter = buildWaiter("ember-primitives:OTPInput:handleChange");
 const Fields = setComponentTemplate(precompileTemplate("\n  {{#each @fields as |_field i|}}\n    <label>\n      <span class=\"ember-primitives__sr-only\">{{labelFor i @labelFn}}</span>\n      <input name=\"code{{i}}\" type=\"text\" inputmode=\"numeric\" autocomplete=\"off\" ...attributes {{on \"click\" selectAll}} {{on \"paste\" handlePaste}} {{on \"input\" autoAdvance}} {{on \"input\" @handleChange}} {{on \"keydown\" handleNavigation}} />\n    </label>\n  {{/each}}\n", {
   strictMode: true,
   scope: () => ({
@@ -33,7 +33,7 @@ class OTPInput extends Component {
   * but only want to emit one change event if someone pastes
   * multiple characters
   */
-  handleChange = event1 => {
+  handleChange = event => {
     if (!this.args.onChange) return;
     if (!this.#token) {
       this.#token = waiter.beginAsync();
@@ -51,17 +51,17 @@ class OTPInput extends Component {
       waiter.endAsync(this.#token);
       if (isDestroyed(this) || isDestroying(this)) return;
       if (!this.args.onChange) return;
-      let value1 = getCollectiveValue(event1.target, this.length);
-      if (value1 === undefined) {
+      const value = getCollectiveValue(event.target, this.length);
+      if (value === undefined) {
         warn(`Value could not be determined for the OTP field. was it removed from the DOM?`, {
-          id: 'ember-primitives.OTPInput.missing-value'
+          id: "ember-primitives.OTPInput.missing-value"
         });
         return;
       }
       this.args.onChange({
-        code: value1,
-        complete: value1.length === this.length
-      }, event1);
+        code: value,
+        complete: value.length === this.length
+      }, event);
     });
   };
   #token;
@@ -76,7 +76,7 @@ class OTPInput extends Component {
     return new Array(this.length);
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    <fieldset ...attributes>\n      {{#let (component Fields fields=this.fields handleChange=this.handleChange labelFn=@labelFn) as |CurriedFields|}}\n        {{#if (has-block)}}\n          {{yield CurriedFields}}\n        {{else}}\n          <CurriedFields />\n        {{/if}}\n      {{/let}}\n\n      <style>\n        .ember-primitives__sr-only { position: absolute; width: 1px; height: 1px; padding: 0;\n        margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width:\n        0; }\n      </style>\n    </fieldset>\n  ", {
+    setComponentTemplate(precompileTemplate("\n    <fieldset ...attributes>\n      {{#let (component Fields fields=this.fields handleChange=this.handleChange labelFn=@labelFn) as |CurriedFields|}}\n        {{#if (has-block)}}\n          {{yield CurriedFields}}\n        {{else}}\n          <CurriedFields />\n        {{/if}}\n      {{/let}}\n\n      <style>\n        .ember-primitives__sr-only {\n          position: absolute;\n          width: 1px;\n          height: 1px;\n          padding: 0;\n          margin: -1px;\n          overflow: hidden;\n          clip: rect(0, 0, 0, 0);\n          white-space: nowrap;\n          border-width: 0;\n        }\n      </style>\n    </fieldset>\n  ", {
       strictMode: true,
       scope: () => ({
         Fields

package/dist/components/one-time-password/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"input.js","sources":["../../../src/components/one-time-password/input.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { warn } from \"@ember/debug\";\nimport { isDestroyed, isDestroying } from \"@ember/destroyable\";\nimport { on } from \"@ember/modifier\";\nimport { buildWaiter } from \"@ember/test-waiters\";\n\nimport {\n  autoAdvance,\n  getCollectiveValue,\n  handleNavigation,\n  handlePaste,\n  selectAll,\n} from \"./utils.ts\";\n\nimport type { TOC } from \"@ember/component/template-only\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nconst DEFAULT_LENGTH = 6;\n\nfunction labelFor(inputIndex: number, labelFn: undefined | ((index: number) => string)) {\n  if (labelFn) {\n    return labelFn(inputIndex);\n  }\n\n  return `Please enter OTP character ${inputIndex + 1}`;\n}\n\nconst waiter = buildWaiter(\"ember-primitives:OTPInput:handleChange\");\n\nconst Fields: TOC<{\n  /**\n   * Any attributes passed to this component will be applied to each input.\n   */\n  Element: HTMLInputElement;\n  Args: {\n    fields: unknown[];\n    labelFn: (index: number) => string;\n    handleChange: (event: Event) => void;\n  };\n}> = <template>\n  {{#each @fields as |_field i|}}\n    <label>\n      <span class=\"ember-primitives__sr-only\">{{labelFor i @labelFn}}</span>\n      <input\n        name=\"code{{i}}\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"off\"\n        ...attributes\n        {{on \"click\" selectAll}}\n        {{on \"paste\" handlePaste}}\n        {{on \"input\" autoAdvance}}\n        {{on \"input\" @handleChange}}\n        {{on \"keydown\" handleNavigation}}\n      />\n    </label>\n  {{/each}}\n</template>;\n\nexport class OTPInput extends Component<{\n  /**\n   * The collection of individual OTP inputs are contained by a fieldset.\n   * Applying the `disabled` attribute to this fieldset will disable\n   * all of the inputs, if that's desired.\n   */\n  Element: HTMLFieldSetElement;\n  Args: {\n    /**\n     * How many characters the one-time-password field should be\n     * Defaults to 6\n     */\n    length?: number;\n\n    /**\n     * To Customize the label of the input fields, you may pass a function.\n     * By default, this is `Please enter OTP character ${index + 1}`.\n     */\n    labelFn?: (index: number) => string;\n\n    /**\n     * If passed, this function will be called when the <Input> changes.\n     * All fields are considered one input.\n     */\n    onChange?: (\n      data: {\n        /**\n         * The text from the collective `<Input>`\n         *\n         * `code` _may_ be shorter than `length`\n         * if the user has not finished typing / pasting their code\n         */\n        code: string;\n        /**\n         * will be `true` if `code`'s length matches the passed `@length` or the default of 6\n         */\n        complete: boolean;\n      },\n      /**\n       * The last input event received\n       */\n      event: Event,\n    ) => void;\n  };\n  Blocks: {\n    /**\n     * Optionally, you may control how the Fields are rendered, with proceeding text,\n     * additional attributes added, etc.\n     *\n     * This is how you can add custom validation to each input field.\n     */\n    default?: [fields: WithBoundArgs<typeof Fields, \"fields\" | \"handleChange\" | \"labelFn\">];\n  };\n}> {\n  /**\n   * This is debounced, because we bind to each input,\n   * but only want to emit one change event if someone pastes\n   * multiple characters\n   */\n  handleChange = (event: Event) => {\n    if (!this.args.onChange) return;\n\n    if (!this.#token) {\n      this.#token = waiter.beginAsync();\n    }\n\n    if (this.#frame) {\n      cancelAnimationFrame(this.#frame);\n    }\n\n    // We  use requestAnimationFrame to be friendly to rendering.\n    // We don't know if onChange is going to want to cause paints\n    // (it's also how we debounce, under the assumption that \"paste\" behavior\n    //  would be fast enough to be quicker than individual frames\n    //   (see logic in autoAdvance)\n    //  )\n    this.#frame = requestAnimationFrame(() => {\n      waiter.endAsync(this.#token);\n\n      if (isDestroyed(this) || isDestroying(this)) return;\n      if (!this.args.onChange) return;\n\n      const value = getCollectiveValue(event.target, this.length);\n\n      if (value === undefined) {\n        warn(`Value could not be determined for the OTP field. was it removed from the DOM?`, {\n          id: \"ember-primitives.OTPInput.missing-value\",\n        });\n\n        return;\n      }\n\n      this.args.onChange({ code: value, complete: value.length === this.length }, event);\n    });\n  };\n\n  #token: unknown;\n  #frame: number | undefined;\n\n  get length() {\n    return this.args.length ?? DEFAULT_LENGTH;\n  }\n\n  get fields() {\n    // We only need to iterate a number of times,\n    // so we don't care about the actual value or\n    // referential integrity here\n    return new Array<undefined>(this.length);\n  }\n\n  <template>\n    <fieldset ...attributes>\n      {{#let\n        (component Fields fields=this.fields handleChange=this.handleChange labelFn=@labelFn)\n        as |CurriedFields|\n      }}\n        {{#if (has-block)}}\n          {{yield CurriedFields}}\n        {{else}}\n          <CurriedFields />\n        {{/if}}\n      {{/let}}\n\n      <style>\n        .ember-primitives__sr-only {\n          position: absolute;\n          width: 1px;\n          height: 1px;\n          padding: 0;\n          margin: -1px;\n          overflow: hidden;\n          clip: rect(0, 0, 0, 0);\n          white-space: nowrap;\n          border-width: 0;\n        }\n      </style>\n    </fieldset>\n  </template>\n}\n"],"names":["DEFAULT_LENGTH","labelFor","inputIndex","labelFn","waiter","buildWaiter","Fields","setComponentTemplate","precompileTemplate","strictMode","scope","on","selectAll","handlePaste","autoAdvance","handleNavigation","templateOnly","OTPInput","Component","handleChange","event","args","onChange","beginAsync","cancelAnimationFrame","requestAnimationFrame","endAsync","isDestroyed","isDestroying","value","getCollectiveValue","target","length","undefined","warn","id","code","complete","fields","Array"],"mappings":";;;;;;;;;;AAiBA,MAAMA,cAAiB,GAAA,CAAA;AAEvB,SAASC,QAAAA,CAASC,UAAkB,EAAEC,OAAgD,EAAA;AACpF,EAAA,IAAIA,OAAS,EAAA;IACX,OAAOA,OAAQ,CAAAD,UAAA,CAAA;AACjB;AAEA,EAAA,OAAO,CAA8BA,2BAAAA,EAAAA,UAAA,GAAa,EAAG,CAAA;AACvD;AAEA,MAAME,SAASC,WAAY,CAAA,wCAAA,CAAA;AAE3B,MAAMC,MAUD,GAAAC,oBAAA,CAAAC,kBAAA,CAkBL,kaAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAT,QAAA;IAAAU,EAAA;IAAAC,SAAA;IAAAC,WAAA;IAAAC,WAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAEH,MAAMC,QAAiB,SAAAC,SAAA;AAsD5B;;;;;EAKAC,YAAA,GAAgBC,KAAO,IAAA;AACrB,IAAA,IAAI,CAAC,IAAI,CAACC,IAAI,CAACC,QAAQ,EAAE;AAEzB,IAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAChB,IAAI,CAAC,MAAM,GAAGlB,OAAOmB,UAAU,EAAA;AACjC;AAEA,IAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACfC,MAAAA,oBAAqB,CAAA,IAAI,CAAC,MAAM,CAAA;AAClC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,IAAI,CAAC,MAAM,GAAGC,qBAAsB,CAAA,MAAA;AAClCrB,MAAAA,MAAA,CAAOsB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAA;MAE3B,IAAIC,WAAY,CAAA,IAAI,CAAK,IAAAC,YAAA,CAAa,IAAI,CAAG,EAAA;AAC7C,MAAA,IAAI,CAAC,IAAI,CAACP,IAAI,CAACC,QAAQ,EAAE;MAEzB,MAAMO,QAAQC,kBAAmB,CAAAV,KAAA,CAAMW,MAAM,EAAE,IAAI,CAACC,MAAM,CAAA;MAE1D,IAAIH,UAAUI,SAAW,EAAA;QACvBC,IAAK,CAAA,+EAA+E,EAAE;AACpFC,UAAAA,EAAI,EAAA;AACN,SAAA,CAAA;AAEA,QAAA;AACF;AAEA,MAAA,IAAI,CAACd,IAAI,CAACC,QAAQ,CAAC;AAAEc,QAAAA,IAAM,EAAAP,KAAA;AAAOQ,QAAAA,QAAA,EAAUR,KAAM,CAAAG,MAAM,KAAK,IAAI,CAACA;OAAU,EAAAZ,KAAA,CAAA;AAC9E,KAAA,CAAA;GACA;AAEF,EAAA,MAAM;AACN,EAAA,MAAM;EAEN,IAAIY,MAASA,GAAA;AACX,IAAA,OAAO,IAAI,CAACX,IAAI,CAACW,MAAM,IAAIhC,cAAA;AAC7B;EAEA,IAAIsC,MAASA,GAAA;AACX;AACA;AACA;AACA,IAAA,OAAO,IAAIC,KAAM,CAAW,IAAI,CAACP,MAAM,CAAA;AACzC;AAEA,EAAA;IAAAzB,oBAAA,CAAAC,kBAAA,CA2BA,0oBAAA,EAAA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAJ,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/components/one-time-password/otp.js

@@ -1,42 +1,43 @@
 import { assert } from '@ember/debug';
-import { fn, hash } from '@ember/helper';
+import { hash, fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { buildWaiter } from '@ember/test-waiters';
-import { Submit, Reset } from './buttons.js';
+import { Reset, Submit } from './buttons.js';
 import { OTPInput } from './input.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-let waiter = buildWaiter('ember-primitives:OTP:handleAutoSubmitAttempt');
-const handleFormSubmit = (submit1, event1) => {
-  event1.preventDefault();
-  assert('[BUG]: handleFormSubmit was not attached to a form. Please open an issue.', event1.currentTarget instanceof HTMLFormElement);
-  let formData1 = new FormData(event1.currentTarget);
-  let code1 = '';
-  for (let [key1, value1] of formData1.entries()) {
-    if (key1.startsWith('code')) {
-      code1 += value1;
+const waiter = buildWaiter("ember-primitives:OTP:handleAutoSubmitAttempt");
+const handleFormSubmit = (submit, event) => {
+  event.preventDefault();
+  assert("[BUG]: handleFormSubmit was not attached to a form. Please open an issue.", event.currentTarget instanceof HTMLFormElement);
+  const formData = new FormData(event.currentTarget);
+  let code = "";
+  for (const [key, value] of formData.entries()) {
+    if (key.startsWith("code")) {
+      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-base-to-string
+      code += value;
     }
   }
-  submit1({
-    code: code1
+  submit({
+    code
   });
 };
-function handleChange(autoSubmit1, data1, event1) {
-  if (!autoSubmit1) return;
-  if (!data1.complete) return;
-  assert('[BUG]: event target is not a known element type', event1.target instanceof HTMLElement || event1.target instanceof SVGElement);
-  const form1 = event1.target.closest('form');
-  assert('[BUG]: Cannot handle event when <OTP> Inputs are not rendered within their <form>', form1);
-  const token1 = waiter.beginAsync();
-  let finished1 = () => {
-    waiter.endAsync(token1);
-    form1.removeEventListener('submit', finished1);
+function handleChange(autoSubmit, data, event) {
+  if (!autoSubmit) return;
+  if (!data.complete) return;
+  assert("[BUG]: event target is not a known element type", event.target instanceof HTMLElement || event.target instanceof SVGElement);
+  const form = event.target.closest("form");
+  assert("[BUG]: Cannot handle event when <OTP> Inputs are not rendered within their <form>", form);
+  const token = waiter.beginAsync();
+  const finished = () => {
+    waiter.endAsync(token);
+    form.removeEventListener("submit", finished);
   };
-  form1.addEventListener('submit', finished1);
+  form.addEventListener("submit", finished);
   // NOTE: when calling .submit() the submit event handlers are not run
-  form1.requestSubmit();
+  form.requestSubmit();
 }
 const OTP = setComponentTemplate(precompileTemplate("\n  <form {{on \"submit\" (fn handleFormSubmit @onSubmit)}} ...attributes>\n    {{yield (hash Input=(component OTPInput length=@length onChange=(if @autoSubmit (fn handleChange @autoSubmit))) Submit=Submit Reset=Reset)}}\n  </form>\n", {
   strictMode: true,