@hokulea/ember 0.7.1 → 0.8.0

package/dist/components/app-header.js

@@ -49,6 +49,8 @@ const PopoverNavItem = setComponentTemplate(precompileTemplate("\n  {{#if (has-b
     PopoverNavItem
   })
 }), templateOnly());
+const CloseIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="currentColor" d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></svg>';
+const ListIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="currentColor" d="M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8M40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16m176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16"/></svg>';
 class AppHeader extends Component {
   static {
     g(this.prototype, "topNavShown", [tracked], function () {
@@ -106,7 +108,7 @@ class AppHeader extends Component {
     };
   });
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#let (uniqueId) as |brandId|}}\n      <header class={{styles.appHeader}} data-test-app-header ...attributes>\n        <div class={{styles.appHeaderContent}} data-sensing={{this.sensing}} {{this.flipflop}}>\n          {{#if (has-block \"brand\")}}\n            <CommandElement @command={{@home}} part=\"brand\" id={{brandId}}>\n              {{yield to=\"brand\"}}\n            </CommandElement>\n          {{/if}}\n\n          {{#if (or this.topNavShown this.sensing)}}\n            <nav data-position={{if @position @position}} aria-labelledby={{brandId}}>\n              {{yield (hash Item=NavItem) to=\"nav\"}}\n            </nav>\n\n            {{#if (has-block \"aux\")}}\n              <span part=\"aux\">\n                {{yield (hash Item=NavItem) to=\"aux\"}}\n              </span>\n            {{/if}}\n          {{/if}}\n\n          {{#if (not this.topNavShown)}}\n            <span part=\"menu\">\n              {{#let (popover) as |p|}}\n                <IconButton @importance=\"plain\" @icon={{if p.opened \"x\" \"list\"}} {{p.trigger}} data-test-toggle @label=\"toggle\" />\n\n                <div popover {{p.target}} {{this.closeWhenLink}}>\n                  <div data-menu-header>\n                    {{#if (has-block \"brand\")}}\n                      <span part=\"brand\">\n                        {{yield to=\"brand\"}}\n                      </span>\n                    {{/if}}\n                  </div>\n\n                  <div data-menu-content>\n                    {{!-- template-lint-disable no-duplicate-landmark-elements --}}\n                    <nav aria-labelledby={{brandId}}>\n                      {{yield (hash Item=PopoverNavItem) to=\"nav\"}}\n                    </nav>\n                    {{!-- template-lint-enable no-duplicate-landmark-elements --}}\n\n                    {{#if (has-block \"aux\")}}\n                      <span part=\"aux\">\n                        {{yield (hash Item=PopoverNavItem) to=\"aux\"}}\n                      </span>\n                    {{/if}}\n                  </div>\n                </div>\n              {{/let}}\n            </span>\n          {{/if}}\n        </div>\n      </header>\n    {{/let}}\n  ", {
+    setComponentTemplate(precompileTemplate("\n    {{#let (uniqueId) as |brandId|}}\n      <header class={{styles.appHeader}} data-test-app-header ...attributes>\n        <div class={{styles.appHeaderContent}} data-sensing={{this.sensing}} {{this.flipflop}}>\n          {{#if (has-block \"brand\")}}\n            <CommandElement @command={{@home}} part=\"brand\" id={{brandId}}>\n              {{yield to=\"brand\"}}\n            </CommandElement>\n          {{/if}}\n\n          {{#if (or this.topNavShown this.sensing)}}\n            <nav data-position={{if @position @position}} aria-labelledby={{brandId}}>\n              {{yield (hash Item=NavItem) to=\"nav\"}}\n            </nav>\n\n            {{#if (has-block \"aux\")}}\n              <span part=\"aux\">\n                {{yield (hash Item=NavItem) to=\"aux\"}}\n              </span>\n            {{/if}}\n          {{/if}}\n\n          {{#if (not this.topNavShown)}}\n            <span part=\"menu\">\n              {{#let (popover) as |p|}}\n                <IconButton @importance=\"plain\" @icon={{if p.opened CloseIcon ListIcon}} {{p.trigger}} data-test-toggle @label=\"toggle\" />\n\n                <div popover {{p.target}} {{this.closeWhenLink}}>\n                  <div data-menu-header>\n                    {{#if (has-block \"brand\")}}\n                      <span part=\"brand\">\n                        {{yield to=\"brand\"}}\n                      </span>\n                    {{/if}}\n                  </div>\n\n                  <div data-menu-content>\n                    {{!-- template-lint-disable no-duplicate-landmark-elements --}}\n                    <nav aria-labelledby={{brandId}}>\n                      {{yield (hash Item=PopoverNavItem) to=\"nav\"}}\n                    </nav>\n                    {{!-- template-lint-enable no-duplicate-landmark-elements --}}\n\n                    {{#if (has-block \"aux\")}}\n                      <span part=\"aux\">\n                        {{yield (hash Item=PopoverNavItem) to=\"aux\"}}\n                      </span>\n                    {{/if}}\n                  </div>\n                </div>\n              {{/let}}\n            </span>\n          {{/if}}\n        </div>\n      </header>\n    {{/let}}\n  ", {
       strictMode: true,
       scope: () => ({
         uniqueId,
@@ -118,6 +120,8 @@ class AppHeader extends Component {
         not,
         popover,
         IconButton,
+        CloseIcon,
+        ListIcon,
         PopoverNavItem
       })
     }), this);

package/dist/components/app-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-header.js","sources":["../../src/components/app-header.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { hash, uniqueId } from '@ember/helper';\n\nimport { type CommandAction, CommandElement } from 'ember-command';\nimport { keepLatestTask, timeout } from 'ember-concurrency';\nimport { Link } from 'ember-link';\nimport { modifier } from 'ember-modifier';\n\nimport styles from '@hokulea/core/navigation.module.css';\n\nimport { and, not, or } from '../-private/helpers.ts';\nimport popover from '../helpers/popover.ts';\nimport IconButton from './icon-button.gts';\nimport Menu from './menu.gts';\n\nimport type { MenuItemArgs, MenuItemBlocks, MenuItemSignature } from './-menu';\nimport type { TOC } from '@ember/component/template-only';\n\nconst asLink = (value: unknown): Link => {\n  return value as Link;\n};\n\nconst isActive = (commandable: CommandAction) => {\n  return commandable instanceof Link && commandable.isActive;\n};\n\ninterface NavItemSignature extends MenuItemSignature {}\n\nconst NavLink: TOC<{\n  Args: MenuItemArgs;\n  Blocks: MenuItemBlocks;\n}> = <template>\n  {{#if @push}}\n    <CommandElement @command={{@push}} aria-current=\"{{if (isActive @push) 'page'}}\" part=\"item\">\n      <span>{{yield}}</span>\n    </CommandElement>\n  {{else}}\n    <span part=\"item\">{{yield}}</span>\n  {{/if}}\n</template>;\n\nconst NavItem: TOC<NavItemSignature> = <template>\n  {{#if (has-block)}}\n    <NavLink @push={{asLink @push}}>{{yield}}</NavLink>\n  {{else if (and (has-block \"menu\") (has-block \"label\"))}}\n    {{#let (popover position=\"bottom-start\") as |p|}}\n      <button type=\"button\" aria-haspopup=\"menu\" part=\"item\" {{p.trigger}}>\n        <span>{{yield to=\"label\"}}</span>\n      </button>\n\n      <Menu {{p.target}} as |m|>\n        {{yield m to=\"menu\"}}\n      </Menu>\n    {{/let}}\n  {{/if}}\n</template>;\n\nconst PopoverNavItem: TOC<NavItemSignature> = <template>\n  {{#if (has-block)}}\n    <NavLink @push={{asLink @push}}>{{yield}}</NavLink>\n  {{else if (and (has-block \"menu\") (has-block \"label\"))}}\n    <details>\n      <summary part=\"item\">{{yield to=\"label\"}}</summary>\n\n      <div>\n        {{yield (hash Item=PopoverNavItem) to=\"menu\"}}\n      </div>\n    </details>\n  {{/if}}\n</template>;\n\ninterface AppHeaderSignature {\n  Element: HTMLElement;\n  Args: {\n    /**\n     * Position of the navbar\n     *\n     * @default start\n     */\n    position?: 'start' | 'center' | 'end';\n\n    home?: CommandAction;\n  };\n  Blocks: {\n    brand?: [];\n    nav?: [{ Item: typeof NavItem }];\n    aux?: [{ Item: typeof NavItem }];\n  };\n}\n\nexport default class AppHeader extends Component<AppHeaderSignature> {\n  @tracked topNavShown = true;\n  @tracked sensing = false;\n\n  detectOverflow = keepLatestTask(async (element: HTMLElement) => {\n    await timeout(30);\n\n    this.sensing = true;\n\n    // wait till sensing is flushed to the browser and made elements visible\n    await timeout(0);\n\n    const relevantChildren = [...element.children].filter(\n      (elem) => elem.tagName.toLowerCase() === 'nav' || elem.getAttribute('part') === 'aux'\n    );\n\n    if (relevantChildren.length === 0) {\n      this.sensing = false;\n\n      return;\n    }\n\n    let headerWidth = [...element.children]\n      .filter((elem) => elem.getAttribute('part') !== 'menu')\n      .map((e) => Math.floor(e.scrollWidth))\n      .reduce((sum, elemWidth) => sum + elemWidth, 0);\n\n    // + padding\n    headerWidth +=\n      Number.parseInt(getComputedStyle(element).getPropertyValue('padding-inline'), 10) * 2;\n\n    // + gap\n    headerWidth +=\n      Number.parseInt(getComputedStyle(element).getPropertyValue('gap'), 10) *\n      (element.childElementCount - 1);\n\n    this.topNavShown = element.clientWidth >= headerWidth;\n    this.sensing = false;\n  });\n\n  flipflop = modifier((element: HTMLElement) => {\n    const sensor = () => this.detectOverflow.perform(element);\n\n    void sensor();\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    window.addEventListener('resize', sensor);\n\n    return () => {\n      // eslint-disable-next-line @typescript-eslint/no-misused-promises\n      window.removeEventListener('resize', sensor);\n    };\n  });\n\n  closeWhenLink = modifier((element: HTMLElement) => {\n    const checkForClose = (event: Event) => {\n      const hitALink = event\n        .composedPath()\n        .some(\n          (target: EventTarget) =>\n            (target as HTMLElement | null)?.tagName &&\n            ['a', 'button'].includes((target as HTMLElement).tagName.toLowerCase())\n        );\n\n      if (hitALink) {\n        element.hidePopover();\n      }\n    };\n\n    element.addEventListener('click', checkForClose);\n\n    return () => {\n      element.removeEventListener('click', checkForClose);\n    };\n  });\n\n  <template>\n    {{#let (uniqueId) as |brandId|}}\n      <header class={{styles.appHeader}} data-test-app-header ...attributes>\n        <div class={{styles.appHeaderContent}} data-sensing={{this.sensing}} {{this.flipflop}}>\n          {{#if (has-block \"brand\")}}\n            <CommandElement @command={{@home}} part=\"brand\" id={{brandId}}>\n              {{yield to=\"brand\"}}\n            </CommandElement>\n          {{/if}}\n\n          {{#if (or this.topNavShown this.sensing)}}\n            <nav data-position={{if @position @position}} aria-labelledby={{brandId}}>\n              {{yield (hash Item=NavItem) to=\"nav\"}}\n            </nav>\n\n            {{#if (has-block \"aux\")}}\n              <span part=\"aux\">\n                {{yield (hash Item=NavItem) to=\"aux\"}}\n              </span>\n            {{/if}}\n          {{/if}}\n\n          {{#if (not this.topNavShown)}}\n            <span part=\"menu\">\n              {{#let (popover) as |p|}}\n                <IconButton\n                  @importance=\"plain\"\n                  @icon={{if p.opened \"x\" \"list\"}}\n                  {{p.trigger}}\n                  data-test-toggle\n                  @label=\"toggle\"\n                />\n\n                <div popover {{p.target}} {{this.closeWhenLink}}>\n                  <div data-menu-header>\n                    {{#if (has-block \"brand\")}}\n                      <span part=\"brand\">\n                        {{yield to=\"brand\"}}\n                      </span>\n                    {{/if}}\n                  </div>\n\n                  <div data-menu-content>\n                    {{! template-lint-disable no-duplicate-landmark-elements }}\n                    <nav aria-labelledby={{brandId}}>\n                      {{yield (hash Item=PopoverNavItem) to=\"nav\"}}\n                    </nav>\n                    {{! template-lint-enable no-duplicate-landmark-elements }}\n\n                    {{#if (has-block \"aux\")}}\n                      <span part=\"aux\">\n                        {{yield (hash Item=PopoverNavItem) to=\"aux\"}}\n                      </span>\n                    {{/if}}\n                  </div>\n                </div>\n              {{/let}}\n            </span>\n          {{/if}}\n        </div>\n      </header>\n    {{/let}}\n  </template>\n}\n"],"names":["asLink","value","isActive","commandable","Link","NavLink","setComponentTemplate","precompileTemplate","strictMode","scope","CommandElement","templateOnly","NavItem","and","popover","Menu","PopoverNavItem","hash","AppHeader","Component","g","prototype","tracked","i","void 0","detectOverflow","_buildTask","context","generator","element","timeout","sensing","relevantChildren","children","filter","elem","tagName","toLowerCase","getAttribute","length","headerWidth","map","e","Math","floor","scrollWidth","reduce","sum","elemWidth","Number","parseInt","getComputedStyle","getPropertyValue","childElementCount","topNavShown","clientWidth","flipflop","modifier","sensor","perform","window","addEventListener","removeEventListener","closeWhenLink","checkForClose","event","hitALink","composedPath","some","target","includes","hidePopover","uniqueId","styles","or","not","IconButton"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAMA,MAAA,GAAUC,KAAc,IAAG;AAC/B,EAAA,OAAOA,KAAA;AACT,CAAA;AAEA,MAAMC,QAAA,GAAYC,WAAa,IAAA;AAC7B,EAAA,OAAOA,WAAA,YAAuBC,IAAA,IAAQD,WAAA,CAAYD,QAAQ;AAC5D,CAAA;AAIA,MAAMG,OAGD,GAAAC,oBAAA,CAAAC,kBAAA,CAAA,oPAAA,EAQL;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,cAAA;AAAAR,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAS,YAAA,EAAA,CAAA;AAEV,MAAMC,OAAa,GAAAN,oBAAA,CAAoBC,kBAAA,CAAA,2cAAA,EAcvC;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAJ,OAAA;IAAAL,MAAA;IAAAa,GAAA;IAAAC,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAJ,YAAA,EAAA,CAAA;AAEV,MAAMK,cAAoB,GAAAV,oBAAA,CAAoBC,kBAAA,CAAA,oVAAA,EAY9C;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAJ,OAAA;IAAAL,MAAA;IAAAa,GAAA;IAAAI,IAAA;AAAAD,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAL,YAAA,EAAA,CAAA;AAqBK,MAAMO,kBAAkBC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,aAAA,EAAA,CAC9CC,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAsB,IAAA;AAAA,IAAA,CAAA,CAAA;AAAA;AAAA,EAAA,YAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,aAAA,CAAA,EAAAC,MAAA;AAAA,EAAA;IAAAJ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACtBC,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAkB,KAAA;AAAA,IAAA,CAAA,CAAA;AAAA;AAAA,EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAAC,MAAA;AAEnBC,EAAAA,cAAA,GAAAC,SAAA,CAAA,OAAA;IAAAC,OAAA,EAAA,IAAA;IAAAC,SAAA,EAAA,WAAuCC,OAAS,EAAA;MAC9C,MAAMC,OAAA,CAAQ,EAAA,CAAA;MAEd,IAAI,CAACC,OAAO,GAAG,IAAA;AAEf;MACA,MAAMD,OAAA,CAAQ,CAAA,CAAA;AAEd,MAAA,MAAME,gBAAA,GAAmB,CAAI,GAAAH,OAAA,CAAQI,QAAQ,CAAC,CAACC,MAAM,CAClDC,IAAA,IAASA,IAAA,CAAKC,OAAO,CAACC,WAAW,EAAA,KAAO,KAAA,IAASF,IAAA,CAAKG,YAAY,CAAC,MAAA,CAAA,KAAY,KAAA,CAAA;AAGlF,MAAA,IAAIN,gBAAA,CAAiBO,MAAM,KAAK,CAAA,EAAG;QACjC,IAAI,CAACR,OAAO,GAAG,KAAA;AAEf,QAAA;AACF,MAAA;MAEA,IAAIS,WAAA,GAAc,CAAI,GAAAX,OAAA,CAAQI,QAAQ,CAAC,CACpCC,MAAM,CAAEC,IAAA,IAASA,IAAA,CAAKG,YAAY,CAAC,MAAA,CAAA,KAAY,MAAA,CAAA,CAC/CG,GAAG,CAAEC,KAAMC,IAAA,CAAKC,KAAK,CAACF,CAAA,CAAEG,WAAW,CAAA,CAAA,CACnCC,MAAM,CAAC,CAACC,GAAA,EAAKC,SAAA,KAAcD,GAAA,GAAMC,SAAA,EAAW,CAAA,CAAA;AAE/C;AACAR,MAAAA,WAAA,IACES,MAAA,CAAOC,QAAQ,CAACC,gBAAA,CAAiBtB,SAASuB,gBAAgB,CAAC,mBAAmB,EAAA,CAAA,GAAM,CAAA;AAEtF;MACAZ,WAAA,IACES,MAAA,CAAOC,QAAQ,CAACC,gBAAA,CAAiBtB,OAAA,CAAA,CAASuB,gBAAgB,CAAC,KAAA,CAAA,EAAQ,EAAA,CAAA,IAClEvB,OAAA,CAAQwB,iBAAiB,GAAG,CAAC,CAAA;AAEhC,MAAA,IAAI,CAACC,WAAW,GAAGzB,OAAA,CAAQ0B,WAAW,IAAIf,WAAA;MAC1C,IAAI,CAACT,OAAO,GAAG,KAAA;AACjB,IAAA;AAAA,GAAA,CAAA,EAAA,IAAA,EAAA,gBAAA,EAAA,YAAA,CAAA;AAEAyB,EAAAA,QAAA,GAAWC,QAAA,CAAU5B,OAAS,IAAA;IAC5B,MAAM6B,SAASA,MAAM,IAAI,CAACjC,cAAc,CAACkC,OAAO,CAAC9B,OAAA,CAAA;IAEjD,KAAK6B,MAAA,EAAA;AACL;AACAE,IAAAA,MAAA,CAAOC,gBAAgB,CAAC,QAAA,EAAUH,MAAA,CAAA;AAElC,IAAA,OAAO,MAAA;AACL;AACAE,MAAAA,MAAA,CAAOE,mBAAmB,CAAC,QAAA,EAAUJ,MAAA,CAAA;IACvC,CAAA;AACF,EAAA,CAAA,CAAA;AAEAK,EAAAA,aAAA,GAAgBN,QAAA,CAAU5B,OAAS,IAAA;IACjC,MAAMmC,aAAA,GAAiBC,KAAO,IAAA;AAC5B,MAAA,MAAMC,QAAA,GAAWD,KAAA,CACdE,YAAY,EAAA,CACZC,IAAI,CACFC,MAAQ,IACNA,MAAA,EAA+BjC,OAAA,IAChC,CAAC,GAAA,EAAK,QAAA,CAAS,CAACkC,QAAQ,CAAED,MAAA,CAAuBjC,OAAO,CAACC,WAAW,EAAA,CAAA,CAAA;AAG1E,MAAA,IAAI6B,QAAA,EAAU;QACZrC,OAAA,CAAQ0C,WAAW,EAAA;AACrB,MAAA;IACF,CAAA;AAEA1C,IAAAA,OAAA,CAAQgC,gBAAgB,CAAC,OAAA,EAASG,aAAA,CAAA;AAElC,IAAA,OAAO,MAAA;AACLnC,MAAAA,OAAA,CAAQiC,mBAAmB,CAAC,OAAA,EAASE,aAAA,CAAA;IACvC,CAAA;AACF,EAAA,CAAA,CAAA;AAEA,EAAA;IAAA1D,oBAAA,CAAAC,kBAAA,CAAA,0pEAAA,EA8DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAA+D,QAAA;QAAAC,MAAA;QAAA/D,cAAA;QAAAgE,EAAA;QAAAzD,IAAA;QAAAL,OAAA;QAAA+D,GAAA;QAAA7D,OAAA;QAAA8D,UAAA;AAAA5D,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"app-header.js","sources":["../../src/components/app-header.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { hash, uniqueId } from '@ember/helper';\n\nimport { type CommandAction, CommandElement } from 'ember-command';\nimport { keepLatestTask, timeout } from 'ember-concurrency';\nimport { Link } from 'ember-link';\nimport { modifier } from 'ember-modifier';\n\nimport styles from '@hokulea/core/navigation.module.css';\n\nimport { and, not, or } from '../-private/helpers.ts';\nimport popover from '../helpers/popover.ts';\nimport IconButton from './icon-button.gts';\nimport Menu from './menu.gts';\n\nimport type { MenuItemArgs, MenuItemBlocks, MenuItemSignature } from './-menu';\nimport type { TOC } from '@ember/component/template-only';\n\nconst asLink = (value: unknown): Link => {\n  return value as Link;\n};\n\nconst isActive = (commandable: CommandAction) => {\n  return commandable instanceof Link && commandable.isActive;\n};\n\ninterface NavItemSignature extends MenuItemSignature {}\n\nconst NavLink: TOC<{\n  Args: MenuItemArgs;\n  Blocks: MenuItemBlocks;\n}> = <template>\n  {{#if @push}}\n    <CommandElement @command={{@push}} aria-current=\"{{if (isActive @push) 'page'}}\" part=\"item\">\n      <span>{{yield}}</span>\n    </CommandElement>\n  {{else}}\n    <span part=\"item\">{{yield}}</span>\n  {{/if}}\n</template>;\n\nconst NavItem: TOC<NavItemSignature> = <template>\n  {{#if (has-block)}}\n    <NavLink @push={{asLink @push}}>{{yield}}</NavLink>\n  {{else if (and (has-block \"menu\") (has-block \"label\"))}}\n    {{#let (popover position=\"bottom-start\") as |p|}}\n      <button type=\"button\" aria-haspopup=\"menu\" part=\"item\" {{p.trigger}}>\n        <span>{{yield to=\"label\"}}</span>\n      </button>\n\n      <Menu {{p.target}} as |m|>\n        {{yield m to=\"menu\"}}\n      </Menu>\n    {{/let}}\n  {{/if}}\n</template>;\n\nconst PopoverNavItem: TOC<NavItemSignature> = <template>\n  {{#if (has-block)}}\n    <NavLink @push={{asLink @push}}>{{yield}}</NavLink>\n  {{else if (and (has-block \"menu\") (has-block \"label\"))}}\n    <details>\n      <summary part=\"item\">{{yield to=\"label\"}}</summary>\n\n      <div>\n        {{yield (hash Item=PopoverNavItem) to=\"menu\"}}\n      </div>\n    </details>\n  {{/if}}\n</template>;\n\nconst CloseIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"256\" height=\"256\" viewBox=\"0 0 256 256\"><path fill=\"currentColor\" d=\"M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z\"/></svg>';\nconst ListIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"256\" height=\"256\" viewBox=\"0 0 256 256\"><path fill=\"currentColor\" d=\"M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8M40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16m176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16\"/></svg>';\n\ninterface AppHeaderSignature {\n  Element: HTMLElement;\n  Args: {\n    /**\n     * Position of the navbar\n     *\n     * @default start\n     */\n    position?: 'start' | 'center' | 'end';\n\n    home?: CommandAction;\n  };\n  Blocks: {\n    brand?: [];\n    nav?: [{ Item: typeof NavItem }];\n    aux?: [{ Item: typeof NavItem }];\n  };\n}\n\nexport default class AppHeader extends Component<AppHeaderSignature> {\n  @tracked topNavShown = true;\n  @tracked sensing = false;\n\n  detectOverflow = keepLatestTask(async (element: HTMLElement) => {\n    await timeout(30);\n\n    this.sensing = true;\n\n    // wait till sensing is flushed to the browser and made elements visible\n    await timeout(0);\n\n    const relevantChildren = [...element.children].filter(\n      (elem) => elem.tagName.toLowerCase() === 'nav' || elem.getAttribute('part') === 'aux'\n    );\n\n    if (relevantChildren.length === 0) {\n      this.sensing = false;\n\n      return;\n    }\n\n    let headerWidth = [...element.children]\n      .filter((elem) => elem.getAttribute('part') !== 'menu')\n      .map((e) => Math.floor(e.scrollWidth))\n      .reduce((sum, elemWidth) => sum + elemWidth, 0);\n\n    // + padding\n    headerWidth +=\n      Number.parseInt(getComputedStyle(element).getPropertyValue('padding-inline'), 10) * 2;\n\n    // + gap\n    headerWidth +=\n      Number.parseInt(getComputedStyle(element).getPropertyValue('gap'), 10) *\n      (element.childElementCount - 1);\n\n    this.topNavShown = element.clientWidth >= headerWidth;\n    this.sensing = false;\n  });\n\n  flipflop = modifier((element: HTMLElement) => {\n    const sensor = () => this.detectOverflow.perform(element);\n\n    void sensor();\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    window.addEventListener('resize', sensor);\n\n    return () => {\n      // eslint-disable-next-line @typescript-eslint/no-misused-promises\n      window.removeEventListener('resize', sensor);\n    };\n  });\n\n  closeWhenLink = modifier((element: HTMLElement) => {\n    const checkForClose = (event: Event) => {\n      const hitALink = event\n        .composedPath()\n        .some(\n          (target: EventTarget) =>\n            (target as HTMLElement | null)?.tagName &&\n            ['a', 'button'].includes((target as HTMLElement).tagName.toLowerCase())\n        );\n\n      if (hitALink) {\n        element.hidePopover();\n      }\n    };\n\n    element.addEventListener('click', checkForClose);\n\n    return () => {\n      element.removeEventListener('click', checkForClose);\n    };\n  });\n\n  <template>\n    {{#let (uniqueId) as |brandId|}}\n      <header class={{styles.appHeader}} data-test-app-header ...attributes>\n        <div class={{styles.appHeaderContent}} data-sensing={{this.sensing}} {{this.flipflop}}>\n          {{#if (has-block \"brand\")}}\n            <CommandElement @command={{@home}} part=\"brand\" id={{brandId}}>\n              {{yield to=\"brand\"}}\n            </CommandElement>\n          {{/if}}\n\n          {{#if (or this.topNavShown this.sensing)}}\n            <nav data-position={{if @position @position}} aria-labelledby={{brandId}}>\n              {{yield (hash Item=NavItem) to=\"nav\"}}\n            </nav>\n\n            {{#if (has-block \"aux\")}}\n              <span part=\"aux\">\n                {{yield (hash Item=NavItem) to=\"aux\"}}\n              </span>\n            {{/if}}\n          {{/if}}\n\n          {{#if (not this.topNavShown)}}\n            <span part=\"menu\">\n              {{#let (popover) as |p|}}\n                <IconButton\n                  @importance=\"plain\"\n                  @icon={{if p.opened CloseIcon ListIcon}}\n                  {{p.trigger}}\n                  data-test-toggle\n                  @label=\"toggle\"\n                />\n\n                <div popover {{p.target}} {{this.closeWhenLink}}>\n                  <div data-menu-header>\n                    {{#if (has-block \"brand\")}}\n                      <span part=\"brand\">\n                        {{yield to=\"brand\"}}\n                      </span>\n                    {{/if}}\n                  </div>\n\n                  <div data-menu-content>\n                    {{! template-lint-disable no-duplicate-landmark-elements }}\n                    <nav aria-labelledby={{brandId}}>\n                      {{yield (hash Item=PopoverNavItem) to=\"nav\"}}\n                    </nav>\n                    {{! template-lint-enable no-duplicate-landmark-elements }}\n\n                    {{#if (has-block \"aux\")}}\n                      <span part=\"aux\">\n                        {{yield (hash Item=PopoverNavItem) to=\"aux\"}}\n                      </span>\n                    {{/if}}\n                  </div>\n                </div>\n              {{/let}}\n            </span>\n          {{/if}}\n        </div>\n      </header>\n    {{/let}}\n  </template>\n}\n"],"names":["asLink","value","isActive","commandable","Link","NavLink","setComponentTemplate","precompileTemplate","strictMode","scope","CommandElement","templateOnly","NavItem","and","popover","Menu","PopoverNavItem","hash","CloseIcon","ListIcon","AppHeader","Component","g","prototype","tracked","i","void 0","detectOverflow","_buildTask","context","generator","element","timeout","sensing","relevantChildren","children","filter","elem","tagName","toLowerCase","getAttribute","length","headerWidth","map","e","Math","floor","scrollWidth","reduce","sum","elemWidth","Number","parseInt","getComputedStyle","getPropertyValue","childElementCount","topNavShown","clientWidth","flipflop","modifier","sensor","perform","window","addEventListener","removeEventListener","closeWhenLink","checkForClose","event","hitALink","composedPath","some","target","includes","hidePopover","uniqueId","styles","or","not","IconButton"],"mappings":"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"}

package/dist/components/checkbox.js

@@ -5,7 +5,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const Checkbox = setComponentTemplate(precompileTemplate("\n  <input class={{styles.choice}} type=\"checkbox\" checked={{@value}} disabled={{@disabled}} data-test-choice ...attributes {{on \"input\" (pick \"target.checked\" @update)}} />\n", {
+const Checkbox = setComponentTemplate(precompileTemplate("\n  <input class={{styles.choice}} type=\"checkbox\" checked={{@value}} disabled={{@disabled}} data-test-choice {{on \"input\" (pick \"target.checked\" @update) capture=true}} ...attributes />\n", {
   strictMode: true,
   scope: () => ({
     styles,

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport styles from '@hokulea/core/controls.module.css';\n\nimport { pick } from '../-private/helpers.ts';\n\nimport type { InputArgs } from './-input.ts';\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface CheckboxSignature {\n  Element: HTMLInputElement;\n  Args: InputArgs<boolean>;\n}\n\nconst Checkbox: TOC<CheckboxSignature> = <template>\n  <input\n    class={{styles.choice}}\n    type=\"checkbox\"\n    checked={{@value}}\n    disabled={{@disabled}}\n    data-test-choice\n    ...attributes\n    {{on \"input\" (pick \"target.checked\" @update)}}\n  />\n</template>;\n\nexport default Checkbox;\n"],"names":["Checkbox","setComponentTemplate","precompileTemplate","strictMode","scope","styles","on","pick","templateOnly"],"mappings":";;;;;;;AAcA,MAAMA,QAAc,GAAAC,oBAAA,CAAqBC,kBAAA,CAAA,uLAAA,EAUzC;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,MAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"checkbox.js","sources":["../../src/components/checkbox.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport styles from '@hokulea/core/controls.module.css';\n\nimport { pick } from '../-private/helpers.ts';\n\nimport type { InputArgs } from './-input.ts';\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface CheckboxSignature {\n  Element: HTMLInputElement;\n  Args: InputArgs<boolean>;\n}\n\nconst Checkbox: TOC<CheckboxSignature> = <template>\n  <input\n    class={{styles.choice}}\n    type=\"checkbox\"\n    checked={{@value}}\n    disabled={{@disabled}}\n    data-test-choice\n    {{on \"input\" (pick \"target.checked\" @update) capture=true}}\n    ...attributes\n  />\n</template>;\n\nexport default Checkbox;\n"],"names":["Checkbox","setComponentTemplate","precompileTemplate","strictMode","scope","styles","on","pick","templateOnly"],"mappings":";;;;;;;AAcA,MAAMA,QAAc,GAAAC,oBAAA,CAAqBC,kBAAA,CAAA,oMAAA,EAUzC;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,MAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/currency-input.js

@@ -7,7 +7,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const CurrencyInput = setComponentTemplate(precompileTemplate("\n  <InputBuilder @disabled={{@disabled}} as |b|>\n    <input class=\"{{styles.input}} {{styles.currency}}\" type=\"text\" inputmode=\"decimal\" value={{@value}} disabled={{@disabled}} data-test-input ...attributes {{on \"input\" (pick \"target.value\" (pickAsNumber @update))}} />\n    <b.Affix>\u20AC</b.Affix>\n  </InputBuilder>\n", {
+const CurrencyInput = setComponentTemplate(precompileTemplate("\n  <InputBuilder @disabled={{@disabled}} as |b|>\n    <input class=\"{{styles.input}} {{styles.currency}}\" type=\"text\" inputmode=\"decimal\" value={{@value}} disabled={{@disabled}} data-test-input {{on \"input\" (pick \"target.value\" (pickAsNumber @update)) capture=true}} ...attributes />\n    <b.Affix>\u20AC</b.Affix>\n  </InputBuilder>\n", {
   strictMode: true,
   scope: () => ({
     InputBuilder: TextInput,

package/dist/components/currency-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"currency-input.js","sources":["../../src/components/currency-input.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport styles from '@hokulea/core/controls.module.css';\n\nimport { pick } from '../-private/helpers.ts';\nimport { pickAsNumber } from './-input.ts';\nimport InputBuilder from './input-builder.gts';\n\nimport type { InputArgs } from './-input.ts';\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface CurrencyInputSignature {\n  Element: HTMLInputElement;\n  Args: InputArgs<number>;\n}\n\nconst CurrencyInput: TOC<CurrencyInputSignature> = <template>\n  <InputBuilder @disabled={{@disabled}} as |b|>\n    <input\n      class=\"{{styles.input}} {{styles.currency}}\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      value={{@value}}\n      disabled={{@disabled}}\n      data-test-input\n      ...attributes\n      {{on \"input\" (pick \"target.value\" (pickAsNumber @update))}}\n    />\n    <b.Affix>€</b.Affix>\n  </InputBuilder>\n</template>;\n\nexport default CurrencyInput;\n"],"names":["CurrencyInput","setComponentTemplate","precompileTemplate","strictMode","scope","InputBuilder","styles","on","pick","pickAsNumber","templateOnly"],"mappings":";;;;;;;;;AAgBA,MAAMA,aAAmB,GAAAC,oBAAA,CAA0BC,kBAAA,CAAA,+UAAA,EAcnD;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;kBAAAC,SAAA;IAAAC,MAAA;IAAAC,EAAA;IAAAC,IAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"currency-input.js","sources":["../../src/components/currency-input.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport styles from '@hokulea/core/controls.module.css';\n\nimport { pick } from '../-private/helpers.ts';\nimport { pickAsNumber } from './-input.ts';\nimport InputBuilder from './input-builder.gts';\n\nimport type { InputArgs } from './-input.ts';\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface CurrencyInputSignature {\n  Element: HTMLInputElement;\n  Args: InputArgs<number>;\n}\n\nconst CurrencyInput: TOC<CurrencyInputSignature> = <template>\n  <InputBuilder @disabled={{@disabled}} as |b|>\n    <input\n      class=\"{{styles.input}} {{styles.currency}}\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      value={{@value}}\n      disabled={{@disabled}}\n      data-test-input\n      {{on \"input\" (pick \"target.value\" (pickAsNumber @update)) capture=true}}\n      ...attributes\n    />\n    <b.Affix>€</b.Affix>\n  </InputBuilder>\n</template>;\n\nexport default CurrencyInput;\n"],"names":["CurrencyInput","setComponentTemplate","precompileTemplate","strictMode","scope","InputBuilder","styles","on","pick","pickAsNumber","templateOnly"],"mappings":";;;;;;;;;AAgBA,MAAMA,aAAmB,GAAAC,oBAAA,CAA0BC,kBAAA,CAAA,4VAAA,EAcnD;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;kBAAAC,SAAA;IAAAC,MAAA;IAAAC,EAAA;IAAAC,IAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/date-input.js

@@ -5,7 +5,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const DateInput = setComponentTemplate(precompileTemplate("\n  <input class={{styles.input}} type=\"date\" value={{@value}} disabled={{@disabled}} data-test-input ...attributes {{on \"input\" (pick \"target.value\" @update)}} />\n", {
+const DateInput = setComponentTemplate(precompileTemplate("\n  <input class={{styles.input}} type=\"date\" value={{@value}} disabled={{@disabled}} data-test-input {{on \"input\" (pick \"target.value\" @update) capture=true}} ...attributes />\n", {
   strictMode: true,
   scope: () => ({
     styles,

package/dist/components/date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.js","sources":["../../src/components/date-input.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport styles from '@hokulea/core/controls.module.css';\n\nimport { pick } from '../-private/helpers.ts';\n\nimport type { InputArgs } from './-input.ts';\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface DateInputSignature {\n  Element: HTMLInputElement;\n  Args: InputArgs<string>;\n}\n\nconst DateInput: TOC<DateInputSignature> = <template>\n  <input\n    class={{styles.input}}\n    type=\"date\"\n    value={{@value}}\n    disabled={{@disabled}}\n    data-test-input\n    ...attributes\n    {{on \"input\" (pick \"target.value\" @update)}}\n  />\n</template>;\n\nexport default DateInput;\n"],"names":["DateInput","setComponentTemplate","precompileTemplate","strictMode","scope","styles","on","pick","templateOnly"],"mappings":";;;;;;;AAcA,MAAMA,SAAe,GAAAC,oBAAA,CAAsBC,kBAAA,CAAA,6KAAA,EAU3C;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,MAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"date-input.js","sources":["../../src/components/date-input.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport styles from '@hokulea/core/controls.module.css';\n\nimport { pick } from '../-private/helpers.ts';\n\nimport type { InputArgs } from './-input.ts';\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface DateInputSignature {\n  Element: HTMLInputElement;\n  Args: InputArgs<string>;\n}\n\nconst DateInput: TOC<DateInputSignature> = <template>\n  <input\n    class={{styles.input}}\n    type=\"date\"\n    value={{@value}}\n    disabled={{@disabled}}\n    data-test-input\n    {{on \"input\" (pick \"target.value\" @update) capture=true}}\n    ...attributes\n  />\n</template>;\n\nexport default DateInput;\n"],"names":["DateInput","setComponentTemplate","precompileTemplate","strictMode","scope","styles","on","pick","templateOnly"],"mappings":";;;;;;;AAcA,MAAMA,SAAe,GAAAC,oBAAA,CAAsBC,kBAAA,CAAA,0LAAA,EAU3C;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,MAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/email-input.js

@@ -5,7 +5,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EmailInput = setComponentTemplate(precompileTemplate("\n  <input class={{styles.input}} type=\"email\" value={{@value}} disabled={{@disabled}} data-test-input ...attributes {{on \"input\" (pick \"target.value\" @update)}} />\n", {
+const EmailInput = setComponentTemplate(precompileTemplate("\n  <input class={{styles.input}} type=\"email\" value={{@value}} disabled={{@disabled}} data-test-input {{on \"input\" (pick \"target.value\" @update) capture=true}} ...attributes />\n", {
   strictMode: true,
   scope: () => ({
     styles,

package/dist/components/email-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"email-input.js","sources":["../../src/components/email-input.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport styles from '@hokulea/core/controls.module.css';\n\nimport { pick } from '../-private/helpers.ts';\n\nimport type { InputArgs } from './-input.ts';\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface EmailInputSignature {\n  Element: HTMLInputElement;\n  Args: InputArgs<string>;\n}\n\nconst EmailInput: TOC<EmailInputSignature> = <template>\n  <input\n    class={{styles.input}}\n    type=\"email\"\n    value={{@value}}\n    disabled={{@disabled}}\n    data-test-input\n    ...attributes\n    {{on \"input\" (pick \"target.value\" @update)}}\n  />\n</template>;\n\nexport default EmailInput;\n"],"names":["EmailInput","setComponentTemplate","precompileTemplate","strictMode","scope","styles","on","pick","templateOnly"],"mappings":";;;;;;;AAcA,MAAMA,UAAgB,GAAAC,oBAAA,CAAuBC,kBAAA,CAAA,8KAAA,EAU7C;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,MAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"email-input.js","sources":["../../src/components/email-input.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport styles from '@hokulea/core/controls.module.css';\n\nimport { pick } from '../-private/helpers.ts';\n\nimport type { InputArgs } from './-input.ts';\nimport type { TOC } from '@ember/component/template-only';\n\nexport interface EmailInputSignature {\n  Element: HTMLInputElement;\n  Args: InputArgs<string>;\n}\n\nconst EmailInput: TOC<EmailInputSignature> = <template>\n  <input\n    class={{styles.input}}\n    type=\"email\"\n    value={{@value}}\n    disabled={{@disabled}}\n    data-test-input\n    {{on \"input\" (pick \"target.value\" @update) capture=true}}\n    ...attributes\n  />\n</template>;\n\nexport default EmailInput;\n"],"names":["EmailInput","setComponentTemplate","precompileTemplate","strictMode","scope","styles","on","pick","templateOnly"],"mappings":";;;;;;;AAcA,MAAMA,UAAgB,GAAAC,oBAAA,CAAuBC,kBAAA,CAAA,2LAAA,EAU7C;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,MAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}