@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

package/dist/{esm/focus-visible-4b7946aa.js → components/focus-visible.js}

@@ -1,43 +1,45 @@
-//
-// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a
-// `focus-visible` class. Works at the component level so no global polyfill is necessary.
-//
-// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible
-//
-const listeners = new WeakMap();
-function observe(el) {
-  if (!el)
-    return;
-  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];
-  const is = (event) => {
-    if (keys.includes(event.key)) {
-      el.classList.add('focus-visible');
-    }
-  };
-  const isNot = () => el.classList.remove('focus-visible');
-  listeners.set(el, { is, isNot });
-  el.addEventListener('keydown', is);
-  el.addEventListener('keyup', is);
-  el.addEventListener('mousedown', isNot);
-  el.addEventListener('mousedown', isNot);
-}
-function unobserve(el) {
-  if (!el)
-    return;
-  const listener = listeners.get(el);
-  if (!listener) {
-    return;
-  }
-  const { is, isNot } = listener;
-  el.classList.remove('focus-visible');
-  el.removeEventListener('keydown', is);
-  el.removeEventListener('keyup', is);
-  el.removeEventListener('mousedown', isNot);
-  el.removeEventListener('mousedown', isNot);
-}
-const focusVisible = {
-  observe,
-  unobserve,
+//
+// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a
+// `focus-visible` class. Works at the component level so no global polyfill is necessary.
+//
+// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible
+//
+const listeners = new WeakMap();
+function observe(el) {
+  if (!el)
+    return;
+  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];
+  const is = (event) => {
+    if (keys.includes(event.key)) {
+      el.classList.add('focus-visible');
+    }
+  };
+  const isNot = () => el.classList.remove('focus-visible');
+  listeners.set(el, { is, isNot });
+  el.addEventListener('keydown', is);
+  el.addEventListener('keyup', is);
+  el.addEventListener('mousedown', isNot);
+  el.addEventListener('mousedown', isNot);
+}
+function unobserve(el) {
+  if (!el)
+    return;
+  const listener = listeners.get(el);
+  if (!listener) {
+    return;
+  }
+  const { is, isNot } = listener;
+  el.classList.remove('focus-visible');
+  el.removeEventListener('keydown', is);
+  el.removeEventListener('keyup', is);
+  el.removeEventListener('mousedown', isNot);
+  el.removeEventListener('mousedown', isNot);
+}
+const focusVisible = {
+  observe,
+  unobserve,
 };
 
 export { focusVisible as f };
+
+//# sourceMappingURL=focus-visible.js.map

package/dist/components/focus-visible.js.map

@@ -0,0 +1 @@
+{"file":"focus-visible.js","mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,SAAS,GAAG,IAAI,OAAO,EAAE,CAAC;SAEhB,OAAO,CAAC,EAAe;EACrC,IAAI,CAAC,EAAE;IAAE,OAAO;EAEhB,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;EAC7G,MAAM,EAAE,GAAG,CAAC,KAAoB;IAC9B,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;MAC5B,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;KACnC;GACF,CAAC;EACF,MAAM,KAAK,GAAG,MAAM,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;EACzD,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;EAEjC,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EACnC,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;EACjC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;EACxC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;SAEe,SAAS,CAAC,EAAe;EACvC,IAAI,CAAC,EAAE;IAAE,OAAO;EAEhB,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;EAEnC,IAAI,CAAC,QAAQ,EAAE;IACb,OAAO;GACR;EAED,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;EAE/B,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;EACrC,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EACtC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;EACpC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;EAC3C,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC7C,CAAC;MAEY,YAAY,GAAG;EAC1B,OAAO;EACP,SAAS;;;;;","names":[],"sources":["./src/utils/focus-visible.ts"],"sourcesContent":["//\n// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a\n// `focus-visible` class. Works at the component level so no global polyfill is necessary.\n//\n// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible\n//\nconst listeners = new WeakMap();\n\nexport function observe(el: HTMLElement) {\n  if (!el) return;\n\n  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];\n  const is = (event: KeyboardEvent) => {\n    if (keys.includes(event.key)) {\n      el.classList.add('focus-visible');\n    }\n  };\n  const isNot = () => el.classList.remove('focus-visible');\n  listeners.set(el, { is, isNot });\n\n  el.addEventListener('keydown', is);\n  el.addEventListener('keyup', is);\n  el.addEventListener('mousedown', isNot);\n  el.addEventListener('mousedown', isNot);\n}\n\nexport function unobserve(el: HTMLElement) {\n  if (!el) return;\n\n  const listener = listeners.get(el);\n\n  if (!listener) {\n    return;\n  }\n\n  const { is, isNot } = listener;\n\n  el.classList.remove('focus-visible');\n  el.removeEventListener('keydown', is);\n  el.removeEventListener('keyup', is);\n  el.removeEventListener('mousedown', isNot);\n  el.removeEventListener('mousedown', isNot);\n}\n\nexport const focusVisible = {\n  observe,\n  unobserve,\n};\n"],"version":3}

package/dist/components/form-control.js

@@ -0,0 +1,32 @@
+import { h } from '@stencil/core/internal/client';
+
+const FormControl = (props, children) => {
+  const hasLabel = props.label ? true : props.hasLabelSlot;
+  const hasHelpText = props.helpText ? true : props.hasHelpTextSlot;
+  /** ErrorTextAttribute has precedence if non empty value is provided or if slot is not set */
+  const useErrorTextAttribute = (props.errorText && props.errorText !== '') || !props.hasErrorTextSlot;
+  return (h("div", { part: "form-control", class: {
+      'form-control': true,
+      'form-control--small': props.size === 'small',
+      'form-control--medium': props.size === 'medium',
+      'form-control--large': props.size === 'large',
+      'form-control--has-label': hasLabel,
+      'form-control--has-help-text': hasHelpText,
+      'form-control--has-error-text': props.displayError,
+      'form-control--disabled': props.disabled,
+      'form-control--invalid': props.displayError && !props.disabled,
+    } },
+    h("label", { part: "label", id: props.labelId, class: {
+        'form-control__label': true,
+        'form-control__label__required': props.required,
+      }, htmlFor: props.inputId, "aria-hidden": hasLabel ? 'false' : 'true', onClick: props.onLabelClick },
+      h("slot", { name: "label" }, props.label)),
+    h("div", { class: "form-control__input" }, children),
+    h("div", { part: "error-text", id: props.errorTextId, class: "form-control__error-text", "aria-hidden": props.displayError ? 'false' : 'true' }, useErrorTextAttribute ? props.errorText : h("slot", { name: "error-text" })),
+    h("div", { part: "help-text", id: props.helpTextId, class: "form-control__help-text", "aria-hidden": hasHelpText ? 'false' : 'true' },
+      h("slot", { name: "help-text" }, props.helpText))));
+};
+
+export { FormControl as F };
+
+//# sourceMappingURL=form-control.js.map

package/dist/components/form-control.js.map

@@ -0,0 +1 @@
+{"file":"form-control.js","mappings":";;MAiDM,WAAW,GAAG,CAAC,KAAuB,EAAE,QAAQ;EACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC;EACzD,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC,eAAe,CAAC;;EAElE,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC;EAErG,QACE,WACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE;MACL,cAAc,EAAE,IAAI;MACpB,qBAAqB,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;MAC7C,sBAAsB,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ;MAC/C,qBAAqB,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;MAC7C,yBAAyB,EAAE,QAAQ;MACnC,6BAA6B,EAAE,WAAW;MAC1C,8BAA8B,EAAE,KAAK,CAAC,YAAY;MAClD,wBAAwB,EAAE,KAAK,CAAC,QAAQ;MACxC,uBAAuB,EAAE,KAAK,CAAC,YAAY,IAAI,CAAC,KAAK,CAAC,QAAQ;KAC/D;IAED,aACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,KAAK,CAAC,OAAO,EACjB,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI;QAC3B,+BAA+B,EAAE,KAAK,CAAC,QAAQ;OAChD,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,iBACT,QAAQ,GAAG,OAAO,GAAG,MAAM,EACxC,OAAO,EAAE,KAAK,CAAC,YAAY;MAE3B,YAAM,IAAI,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CACjC;IAER,WAAK,KAAK,EAAC,qBAAqB,IAAE,QAAQ,CAAO;IAEjD,WACE,IAAI,EAAC,YAAY,EACjB,EAAE,EAAE,KAAK,CAAC,WAAW,EACrB,KAAK,EAAC,0BAA0B,iBACnB,KAAK,CAAC,YAAY,GAAG,OAAO,GAAG,MAAM,IAEjD,qBAAqB,GAAG,KAAK,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,YAAY,GAAG,CACjE;IAEN,WACE,IAAI,EAAC,WAAW,EAChB,EAAE,EAAE,KAAK,CAAC,UAAU,EACpB,KAAK,EAAC,yBAAyB,iBAClB,WAAW,GAAG,OAAO,GAAG,MAAM;MAE3C,YAAM,IAAI,EAAC,WAAW,IAAE,KAAK,CAAC,QAAQ,CAAQ,CAC1C,CACF,EACN;AACJ;;;;","names":[],"sources":["./src/functional-components/form-control/form-control.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport interface FormControlProps {\n  /** The input id, used to map the input to the label */\n  inputId: string;\n\n  /** The size of the form control */\n  size: 'small' | 'medium' | 'large';\n\n  /** The label id, used to map the label to the input */\n  labelId?: string;\n\n  /** The label text (if the label slot isn't used) */\n  label?: string;\n\n  /** Whether or not a label slot has been provided. */\n  hasLabelSlot?: boolean;\n\n  /** The help text id, used to map the input to the help text */\n  helpTextId?: string;\n\n  /** The help text (if the help-text slot isn't used) */\n  helpText?: string;\n\n  /** Whether or not a help text slot has been provided. */\n  hasHelpTextSlot?: boolean;\n\n  /** The error text id, used to map the input to the help text */\n  errorTextId?: string;\n\n  /** The error text (if the error-text slot isn't used) */\n  errorText?: string;\n\n  /** Whether or not a error text slot has been provided. */\n  hasErrorTextSlot?: boolean;\n\n  /** Set to true to disable the input. */\n  disabled?: boolean;\n\n  /** Set if the value is required. */\n  required?: boolean;\n\n  /** Set if the error text is displayed. */\n  displayError?: boolean;\n\n  /** A function that gets called when the label is clicked. */\n  onLabelClick?: (event: MouseEvent) => void;\n}\n\nconst FormControl = (props: FormControlProps, children) => {\n  const hasLabel = props.label ? true : props.hasLabelSlot;\n  const hasHelpText = props.helpText ? true : props.hasHelpTextSlot;\n  /** ErrorTextAttribute has precedence if non empty value is provided or if slot is not set */\n  const useErrorTextAttribute = (props.errorText && props.errorText !== '') || !props.hasErrorTextSlot;\n\n  return (\n    <div\n      part=\"form-control\"\n      class={{\n        'form-control': true,\n        'form-control--small': props.size === 'small',\n        'form-control--medium': props.size === 'medium',\n        'form-control--large': props.size === 'large',\n        'form-control--has-label': hasLabel,\n        'form-control--has-help-text': hasHelpText,\n        'form-control--has-error-text': props.displayError,\n        'form-control--disabled': props.disabled,\n        'form-control--invalid': props.displayError && !props.disabled,\n      }}\n    >\n      <label\n        part=\"label\"\n        id={props.labelId}\n        class={{\n          'form-control__label': true,\n          'form-control__label__required': props.required,\n        }}\n        htmlFor={props.inputId}\n        aria-hidden={hasLabel ? 'false' : 'true'}\n        onClick={props.onLabelClick}\n      >\n        <slot name=\"label\">{props.label}</slot>\n      </label>\n\n      <div class=\"form-control__input\">{children}</div>\n\n      <div\n        part=\"error-text\"\n        id={props.errorTextId}\n        class=\"form-control__error-text\"\n        aria-hidden={props.displayError ? 'false' : 'true'}\n      >\n        {useErrorTextAttribute ? props.errorText : <slot name=\"error-text\" />}\n      </div>\n\n      <div\n        part=\"help-text\"\n        id={props.helpTextId}\n        class=\"form-control__help-text\"\n        aria-hidden={hasHelpText ? 'false' : 'true'}\n      >\n        <slot name=\"help-text\">{props.helpText}</slot>\n      </div>\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"version":3}

package/dist/components/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+/**
+ * Utility to define all custom elements within this package using the tag name provided in the component's source.
+ * When defining each custom element, it will also check it's safe to define by:
+ *
+ * 1. Ensuring the "customElements" registry is available in the global context (window).
+ * 2. Ensuring that the component tag name is not already defined.
+ *
+ * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
+ * method instead to define custom elements individually, or to provide a different tag name.
+ */
+export declare const defineCustomElements: (opts?: any) => void;

package/dist/components/index.js

@@ -0,0 +1,132 @@
+import { SetAttributes } from './set-attributes.js';
+import { SixAlert } from './six-alert.js';
+import { SixAvatar } from './six-avatar.js';
+import { SixBadge } from './six-badge.js';
+import { SixButton } from './six-button.js';
+import { SixCard } from './six-card.js';
+import { SixCheckbox } from './six-checkbox.js';
+import { SixDatepicker } from './six-datepicker.js';
+import { SixDetails } from './six-details.js';
+import { SixDialog } from './six-dialog.js';
+import { SixDrawer } from './six-drawer.js';
+import { SixDropdown } from './six-dropdown.js';
+import { SixErrorPage } from './six-error-page.js';
+import { SixFileList } from './six-file-list.js';
+import { SixFileListItem } from './six-file-list-item.js';
+import { SixFileUpload } from './six-file-upload.js';
+import { SixFooter } from './six-footer.js';
+import { SixForm } from './six-form.js';
+import { SixGroupLabel } from './six-group-label.js';
+import { SixHeader } from './six-header.js';
+import { SixIcon } from './six-icon.js';
+import { SixIconButton } from './six-icon-button.js';
+import { SixInput } from './six-input.js';
+import { SixItemPicker } from './six-item-picker.js';
+import { SixLanguageSwitcher } from './six-language-switcher.js';
+import { SixLayoutGrid } from './six-layout-grid.js';
+import { SixMainContainer } from './six-main-container.js';
+import { SixMenu } from './six-menu.js';
+import { SixMenuDivider } from './six-menu-divider.js';
+import { SixMenuItem } from './six-menu-item.js';
+import { SixMenuLabel } from './six-menu-label.js';
+import { SixPicto } from './six-picto.js';
+import { SixProgressBar } from './six-progress-bar.js';
+import { SixProgressRing } from './six-progress-ring.js';
+import { SixRadio } from './six-radio.js';
+import { SixRange } from './six-range.js';
+import { SixRoot } from './six-root.js';
+import { SixSearchField } from './six-search-field.js';
+import { SixSelect } from './six-select.js';
+import { SixSidebar } from './six-sidebar.js';
+import { SixSidebarItem } from './six-sidebar-item.js';
+import { SixSidebarItemGroup } from './six-sidebar-item-group.js';
+import { SixSpinner } from './six-spinner.js';
+import { SixStageIndicator } from './six-stage-indicator.js';
+import { SixSwitch } from './six-switch.js';
+import { SixTab } from './six-tab.js';
+import { SixTabGroup } from './six-tab-group.js';
+import { SixTabPanel } from './six-tab-panel.js';
+import { SixTable } from './six-table.js';
+import { SixTableCell } from './six-table-cell.js';
+import { SixTableHeader } from './six-table-header.js';
+import { SixTableHeaderCell } from './six-table-header-cell.js';
+import { SixTableRow } from './six-table-row.js';
+import { SixTag } from './six-tag.js';
+import { SixTextarea } from './six-textarea.js';
+import { SixTile } from './six-tile.js';
+import { SixTimepicker } from './six-timepicker.js';
+import { SixTooltip } from './six-tooltip.js';
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+
+const defineCustomElements = (opts) => {
+  if (typeof customElements !== 'undefined') {
+    [
+      SetAttributes,
+      SixAlert,
+      SixAvatar,
+      SixBadge,
+      SixButton,
+      SixCard,
+      SixCheckbox,
+      SixDatepicker,
+      SixDetails,
+      SixDialog,
+      SixDrawer,
+      SixDropdown,
+      SixErrorPage,
+      SixFileList,
+      SixFileListItem,
+      SixFileUpload,
+      SixFooter,
+      SixForm,
+      SixGroupLabel,
+      SixHeader,
+      SixIcon,
+      SixIconButton,
+      SixInput,
+      SixItemPicker,
+      SixLanguageSwitcher,
+      SixLayoutGrid,
+      SixMainContainer,
+      SixMenu,
+      SixMenuDivider,
+      SixMenuItem,
+      SixMenuLabel,
+      SixPicto,
+      SixProgressBar,
+      SixProgressRing,
+      SixRadio,
+      SixRange,
+      SixRoot,
+      SixSearchField,
+      SixSelect,
+      SixSidebar,
+      SixSidebarItem,
+      SixSidebarItemGroup,
+      SixSpinner,
+      SixStageIndicator,
+      SixSwitch,
+      SixTab,
+      SixTabGroup,
+      SixTabPanel,
+      SixTable,
+      SixTableCell,
+      SixTableHeader,
+      SixTableHeaderCell,
+      SixTableRow,
+      SixTag,
+      SixTextarea,
+      SixTile,
+      SixTimepicker,
+      SixTooltip,
+    ].forEach(cmp => {
+      if (!customElements.get(cmp.is)) {
+        customElements.define(cmp.is, cmp, opts);
+      }
+    });
+  }
+};
+
+export { defineCustomElements };
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/{esm/modal-e5709f6b.js → components/modal.js}

@@ -1,46 +1,48 @@
-//
-// Determines if the browser supports focus({ preventScroll })
-//
-const isPreventScrollSupported = () => {
-  let supported = false;
-  const element = document.createElement('div');
-  element.focus &&
-    element.focus({
-      get preventScroll() {
-        supported = true;
-        return false;
-      },
-    });
-  return supported;
+//
+// Determines if the browser supports focus({ preventScroll })
+//
+const isPreventScrollSupported = () => {
+  let supported = false;
+  const element = document.createElement('div');
+  element.focus &&
+    element.focus({
+      get preventScroll() {
+        supported = true;
+        return false;
+      },
+    });
+  return supported;
 };
 
-let activeModals = [];
-class Modal {
-  constructor(element, options) {
-    this.element = element;
-    this.options = options;
-    this.handleFocusIn = this.handleFocusIn.bind(this);
-  }
-  activate() {
-    activeModals.push(this.element);
-    document.addEventListener('focusin', this.handleFocusIn);
-  }
-  deactivate() {
-    activeModals = activeModals.filter((modal) => modal !== this.element);
-    document.removeEventListener('focusin', this.handleFocusIn);
-  }
-  isActive() {
-    // The "active" modal is always the most recent one shown
-    return activeModals[activeModals.length - 1] === this.element;
-  }
-  handleFocusIn(event) {
-    const target = event.target;
-    const tagName = this.element.tagName.toLowerCase();
-    // If focus is lost while the modal is active, run the onFocusOut callback
-    if (this.isActive() && target.closest(tagName) !== this.element && typeof this.options.onFocusOut === 'function') {
-      this.options.onFocusOut(event);
-    }
-  }
+let activeModals = [];
+class Modal {
+  constructor(element, options) {
+    this.element = element;
+    this.options = options;
+    this.handleFocusIn = this.handleFocusIn.bind(this);
+  }
+  activate() {
+    activeModals.push(this.element);
+    document.addEventListener('focusin', this.handleFocusIn);
+  }
+  deactivate() {
+    activeModals = activeModals.filter((modal) => modal !== this.element);
+    document.removeEventListener('focusin', this.handleFocusIn);
+  }
+  isActive() {
+    // The "active" modal is always the most recent one shown
+    return activeModals[activeModals.length - 1] === this.element;
+  }
+  handleFocusIn(event) {
+    const target = event.target;
+    const tagName = this.element.tagName.toLowerCase();
+    // If focus is lost while the modal is active, run the onFocusOut callback
+    if (this.isActive() && target.closest(tagName) !== this.element && typeof this.options.onFocusOut === 'function') {
+      this.options.onFocusOut(event);
+    }
+  }
 }
 
 export { Modal as M, isPreventScrollSupported as i };
+
+//# sourceMappingURL=modal.js.map

package/dist/components/modal.js.map

@@ -0,0 +1 @@
+{"file":"modal.js","mappings":"AAAA;AACA;AACA;MACa,wBAAwB,GAAG;EACtC,IAAI,SAAS,GAAG,KAAK,CAAC;EAEtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAC9C,OAAO,CAAC,KAAK;IACX,OAAO,CAAC,KAAK,CAAC;MACZ,IAAI,aAAa;QACf,SAAS,GAAG,IAAI,CAAC;QACjB,OAAO,KAAK,CAAC;OACd;KACF,CAAC,CAAC;EAEL,OAAO,SAAS,CAAC;AACnB;;ACZA,IAAI,YAAY,GAAkB,EAAE,CAAC;MAEhB,KAAK;EAIxB,YAAY,OAAoB,EAAE,OAAsB;IACtD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpD;EAED,QAAQ;IACN,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;GAC1D;EAED,UAAU;IACR,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IACtE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;GAC7D;EAED,QAAQ;;IAEN,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;GAC/D;EAED,aAAa,CAAC,KAAY;IACxB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;IAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;;IAGnD,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,OAAO,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,KAAK,UAAU,EAAE;MAChH,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAChC;GACF;;;;;","names":[],"sources":["./src/utils/support.ts","./src/utils/modal.ts"],"sourcesContent":["//\n// Determines if the browser supports focus({ preventScroll })\n//\nexport const isPreventScrollSupported = () => {\n  let supported = false;\n\n  const element = document.createElement('div');\n  element.focus &&\n    element.focus({\n      get preventScroll() {\n        supported = true;\n        return false;\n      },\n    });\n\n  return supported;\n};\n","interface ModalOptions {\n  onFocusOut?: (event: Event) => any;\n}\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  options: ModalOptions;\n\n  constructor(element: HTMLElement, options?: ModalOptions) {\n    this.element = element;\n    this.options = options;\n    this.handleFocusIn = this.handleFocusIn.bind(this);\n  }\n\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n  }\n\n  deactivate() {\n    activeModals = activeModals.filter((modal) => modal !== this.element);\n    document.removeEventListener('focusin', this.handleFocusIn);\n  }\n\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  handleFocusIn(event: Event) {\n    const target = event.target as HTMLElement;\n    const tagName = this.element.tagName.toLowerCase();\n\n    // If focus is lost while the modal is active, run the onFocusOut callback\n    if (this.isActive() && target.closest(tagName) !== this.element && typeof this.options.onFocusOut === 'function') {\n      this.options.onFocusOut(event);\n    }\n  }\n}\n"],"version":3}

package/dist/{esm/popover-5a51f84d.js → components/popover.js}

@@ -161,7 +161,7 @@ var round = Math.round;
 function getUAString() {
   var uaData = navigator.userAgentData;
 
-  if (uaData != null && uaData.brands) {
+  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
     return uaData.brands.map(function (item) {
       return item.brand + "/" + item.version;
     }).join(' ');
@@ -480,10 +480,9 @@ var unsetSides = {
 // Zooming can change the DPR, but it seems to report a value that will
 // cleanly divide the values into the appropriate subpixels.
 
-function roundOffsetsByDPR(_ref) {
+function roundOffsetsByDPR(_ref, win) {
   var x = _ref.x,
       y = _ref.y;
-  var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
     x: round(x * dpr) / dpr || 0,
@@ -566,7 +565,7 @@ function mapToStyles(_ref2) {
   var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
     x: x,
     y: y
-  }) : {
+  }, getWindow(popper)) : {
     x: x,
     y: y
   };
@@ -1796,101 +1795,103 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-//
-class Popover {
-  constructor(anchor, popover, options) {
-    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-    this.anchor = anchor;
-    this.popover = popover;
-    this.options = Object.assign({
-      skidding: 0,
-      distance: 0,
-      placement: 'bottom-start',
-      strategy: 'absolute',
-      transitionElement: this.popover,
-      visibleClass: 'popover-visible',
-      onAfterShow: () => { },
-      onAfterHide: () => { },
-      onTransitionEnd: () => { },
-    }, options);
-    this.isVisible = false;
-    this.popover.hidden = true;
-    this.popover.classList.remove(this.options.visibleClass);
-    this.popover.addEventListener('transitionend', this.handleTransitionEnd);
-  }
-  handleTransitionEnd(event) {
-    const target = event.target;
-    // Make sure the transition event originates from from the correct element, and not one that has bubbled up
-    if (target === this.options.transitionElement) {
-      // This is called before the element is hidden so users can do things like reset scroll. It will fire once for
-      // every transition property. Use `event.propertyName` to determine which property has finished transitioning.
-      this.options.onTransitionEnd.call(this, event);
-      // Make sure we only do this once, since transitionend will fire for every transition
-      if (!this.isVisible && !this.popover.hidden) {
-        this.popover.hidden = true;
-        this.popover.classList.remove(this.options.visibleClass);
-        this.options.onAfterHide.call(this);
-      }
-    }
-  }
-  destroy() {
-    this.popover.removeEventListener('transitionend', this.handleTransitionEnd);
-    if (this.popper) {
-      this.popper.destroy();
-      this.popper = null;
-    }
-  }
-  show() {
-    this.isVisible = true;
-    this.popover.hidden = false;
-    requestAnimationFrame(() => this.popover.classList.add(this.options.visibleClass));
-    if (this.popper) {
-      this.popper.destroy();
-    }
-    this.popper = createPopper(this.anchor, this.popover, {
-      placement: this.options.placement,
-      strategy: this.options.strategy,
-      modifiers: [
-        {
-          name: 'flip',
-          options: {
-            boundary: 'viewport',
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [this.options.skidding, this.options.distance],
-          },
-        },
-      ],
-    });
-    this.popover.addEventListener('transitionend', () => this.options.onAfterShow.call(this), { once: true });
-    // Reposition the menu after it appears in case a modifier kicked in
-    requestAnimationFrame(() => { var _a; return (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update(); });
-  }
-  reposition() {
-    this.popper.update();
-  }
-  hide() {
-    // Apply the hidden styles and wait for the transition before hiding completely
-    this.isVisible = false;
-    this.popover.classList.remove(this.options.visibleClass);
-  }
-  setOptions(options) {
-    this.options = Object.assign(this.options, options);
-    this.isVisible
-      ? this.popover.classList.add(this.options.visibleClass)
-      : this.popover.classList.remove(this.options.visibleClass);
-    // Update popper options
-    if (this.popper) {
-      this.popper.setOptions({
-        placement: this.options.placement,
-        strategy: this.options.strategy,
-      });
-      requestAnimationFrame(() => this.popper.update());
-    }
-  }
+//
+class Popover {
+  constructor(anchor, popover, options) {
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+    this.anchor = anchor;
+    this.popover = popover;
+    this.options = Object.assign({
+      skidding: 0,
+      distance: 0,
+      placement: 'bottom-start',
+      strategy: 'absolute',
+      transitionElement: this.popover,
+      visibleClass: 'popover-visible',
+      onAfterShow: () => { },
+      onAfterHide: () => { },
+      onTransitionEnd: () => { },
+    }, options);
+    this.isVisible = false;
+    this.popover.hidden = true;
+    this.popover.classList.remove(this.options.visibleClass);
+    this.popover.addEventListener('transitionend', this.handleTransitionEnd);
+  }
+  handleTransitionEnd(event) {
+    const target = event.target;
+    // Make sure the transition event originates from from the correct element, and not one that has bubbled up
+    if (target === this.options.transitionElement) {
+      // This is called before the element is hidden so users can do things like reset scroll. It will fire once for
+      // every transition property. Use `event.propertyName` to determine which property has finished transitioning.
+      this.options.onTransitionEnd.call(this, event);
+      // Make sure we only do this once, since transitionend will fire for every transition
+      if (!this.isVisible && !this.popover.hidden) {
+        this.popover.hidden = true;
+        this.popover.classList.remove(this.options.visibleClass);
+        this.options.onAfterHide.call(this);
+      }
+    }
+  }
+  destroy() {
+    this.popover.removeEventListener('transitionend', this.handleTransitionEnd);
+    if (this.popper) {
+      this.popper.destroy();
+      this.popper = null;
+    }
+  }
+  show() {
+    this.isVisible = true;
+    this.popover.hidden = false;
+    requestAnimationFrame(() => this.popover.classList.add(this.options.visibleClass));
+    if (this.popper) {
+      this.popper.destroy();
+    }
+    this.popper = createPopper(this.anchor, this.popover, {
+      placement: this.options.placement,
+      strategy: this.options.strategy,
+      modifiers: [
+        {
+          name: 'flip',
+          options: {
+            boundary: 'viewport',
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: [this.options.skidding, this.options.distance],
+          },
+        },
+      ],
+    });
+    this.popover.addEventListener('transitionend', () => this.options.onAfterShow.call(this), { once: true });
+    // Reposition the menu after it appears in case a modifier kicked in
+    requestAnimationFrame(() => { var _a; return (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update(); });
+  }
+  reposition() {
+    this.popper.update();
+  }
+  hide() {
+    // Apply the hidden styles and wait for the transition before hiding completely
+    this.isVisible = false;
+    this.popover.classList.remove(this.options.visibleClass);
+  }
+  setOptions(options) {
+    this.options = Object.assign(this.options, options);
+    this.isVisible
+      ? this.popover.classList.add(this.options.visibleClass)
+      : this.popover.classList.remove(this.options.visibleClass);
+    // Update popper options
+    if (this.popper) {
+      this.popper.setOptions({
+        placement: this.options.placement,
+        strategy: this.options.strategy,
+      });
+      requestAnimationFrame(() => this.popper.update());
+    }
+  }
 }
 
 export { Popover as P };
+
+//# sourceMappingURL=popover.js.map