@nectary/components 0.38.0 → 0.40.0

package/toggle/index.js

@@ -1,116 +1,36 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$input, _$label, _onInput, _onCheckboxFocus, _onCheckboxBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);text-align:initial}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#checkbox{all:initial;display:block;position:absolute;left:0;top:0;width:40px;height:20px;cursor:pointer;pointer-events:initial}#checkbox:disabled{cursor:initial}#knob-container{position:relative;box-sizing:border-box;align-self:center;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);box-shadow:var(--sinch-elevation-level-1);overflow:hidden}:host([checked]:not([checked=false])) #knob-container{background-color:var(--sinch-color-tropical-500)}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);transform:translateX(0);transition:transform .1s ease-in-out}:host([checked]:not([checked=false])) #knob{transform:translateX(20px)}:host([small]:not([small=false])) #knob{width:12px;height:12px}:host([small]:not([small=false])[checked]:not([checked=false])) #knob{transform:translateX(16px)}#knob::after,#knob::before{color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}:host([disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-snow-700)}:host([checked]:not([checked=false])[disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><div id="knob-container"><div id="knob"></div><input id="checkbox" type="checkbox"></div><label for="checkbox" id="label"></label></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:32px}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#input{all:initial;display:block;position:absolute;left:0;top:6px;width:40px;height:20px;cursor:pointer;pointer-events:initial}#input:disabled{cursor:initial}:host([small]:not([small=false])) #input{width:32px;height:16px;top:8px}#input:focus-visible::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus-visible::after{border-radius:14px}@supports not selector(:focus-visible){#input:focus::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-color-aqua-400);border-radius:18px;pointer-events:none}:host([small]:not([small=false])) #input:focus::after{border-radius:14px}}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);overflow:hidden}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#input:checked~#knob-container{background-color:var(--sinch-color-tropical-500)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-1);transform:translateX(0);transition:transform .1s ease-in-out}:host([small]:not([small=false])) #knob{width:12px;height:12px}#input:checked~#knob-container>#knob{transform:translateX(20px)}:host([small]:not([small=false])) #input:checked~#knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-font-body);color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#label:empty{display:none}#input:disabled~#label{color:var(--sinch-color-stormy-200)}#input:disabled~#knob-container{background-color:var(--sinch-color-snow-700)}#input:checked:disabled~#knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><input id="input" type="checkbox"><div id="knob-container"><div id="knob"></div></div><label id="label" for="input"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), _onCheckboxFocus = new WeakMap(), _onCheckboxBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-toggle', class extends NectaryElement {
+  #$input;
+  #$label;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$input, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onInput, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        const isChecked = _classPrivateFieldGet(this, _$input).checked;
-
-        _classPrivateFieldGet(this, _$input).checked = this.checked;
-        this.dispatchEvent(new CustomEvent('change', {
-          detail: isChecked,
-          bubbles: true
-        }));
-        this.dispatchEvent(new CustomEvent('-change', {
-          detail: isChecked
-        }));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCheckboxFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCheckboxBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-focus')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-blur')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('label'));
+    this.#$input = shadowRoot.querySelector('#input');
+    this.#$label = shadowRoot.querySelector('#label');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'checkbox');
-    this.setAttribute('aria-label', 'toggle');
-
-    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onCheckboxFocus));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onCheckboxBlur));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$input.addEventListener('input', this.#onInput);
+    this.#$input.addEventListener('focus', this.#onCheckboxFocus);
+    this.#$input.addEventListener('blur', this.#onCheckboxBlur);
+    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onCheckboxFocus));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onCheckboxBlur));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$input.removeEventListener('input', this.#onInput);
+    this.#$input.removeEventListener('focus', this.#onCheckboxFocus);
+    this.#$input.removeEventListener('blur', this.#onCheckboxBlur);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   static get observedAttributes() {
@@ -162,21 +82,21 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
   }
 
   get text() {
-    return getAttribute(this, 'text', null);
+    return getAttribute(this, 'text');
   }
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
       case 'checked':
         {
           const isChecked = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$input).checked = isChecked;
+          this.#$input.checked = isChecked;
           updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
           break;
         }
@@ -184,7 +104,7 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          this.#$input.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
@@ -192,11 +112,38 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
   }
 
   focus() {
-    _classPrivateFieldGet(this, _$input).focus();
+    this.#$input.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$input).blur();
-  }
-
-}));
+    this.#$input.blur();
+  }
+
+  #onInput = e => {
+    e.stopPropagation();
+    const isChecked = this.#$input.checked;
+    this.#$input.checked = this.checked;
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: isChecked,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: isChecked
+    }));
+  };
+  #onCheckboxFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onCheckboxBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = e => {
+    getReactEventHandler(this, 'on-focus')?.(e);
+  };
+  #onBlurReactHandler = e => {
+    getReactEventHandler(this, 'on-blur')?.(e);
+  };
+});

package/toggle/types.d.ts

@@ -21,6 +21,7 @@ export declare type TSinchToggleReact = TSinchElementReact<TSinchToggleElement>
     disabled?: boolean;
     text?: string;
     'aria-label': string;
+    /** @deprecated */
     onChange?: (e: SyntheticEvent<TSinchToggleElement, CustomEvent<boolean>>) => void;
     'on-change'?: (e: CustomEvent<boolean>) => void;
 };

package/types.d.ts

@@ -12,3 +12,10 @@ export type TRect = {
   width: number,
   height: number,
 }
+
+export type TContextKeyboard = {
+  code: string,
+  preventDefault: () => void,
+}
+
+export type TContextVisibility = boolean

package/utils/colors.d.ts

@@ -0,0 +1,10 @@
+export declare const NO_COLOR: "";
+export declare type TSinchColorName = typeof NO_COLOR | 'Blue 10' | 'Blue 20' | 'Blue 30' | 'Blue 40' | 'Blue 50' | 'Green 10' | 'Green 20' | 'Green 30' | 'Yellow 20' | 'Yellow 10' | 'Orange 10' | 'Orange 30' | 'Orange 20' | 'Coral 10' | 'Pink 10' | 'Pink 20' | 'Brown 10' | 'Brown 20' | 'Gray 10' | 'Gray 20' | 'Red 10' | 'Skin tone 0' | 'Skin tone 10' | 'Skin tone 20' | 'Skin tone 30' | 'Skin tone 40' | 'Skin tone 50';
+export declare const colorNameValues: readonly TSinchColorName[];
+declare type TAssertColorName = (value: string | null) => asserts value is TSinchColorName;
+export declare const assertColorNameValue: TAssertColorName;
+export declare const colorMap: Record<TSinchColorName, {
+    value: string;
+    isInverted: boolean;
+}>;
+export {};

package/utils/colors.js

@@ -0,0 +1,121 @@
+export const NO_COLOR = '';
+export const colorNameValues = [NO_COLOR, 'Blue 10', 'Blue 20', 'Blue 30', 'Blue 40', 'Blue 50', 'Green 10', 'Green 20', 'Green 30', 'Yellow 10', 'Yellow 20', 'Orange 10', 'Orange 20', 'Orange 30', 'Pink 10', 'Pink 20', 'Brown 10', 'Brown 20', 'Gray 10', 'Gray 20', 'Coral 10', 'Red 10', 'Skin tone 0', 'Skin tone 10', 'Skin tone 20', 'Skin tone 30', 'Skin tone 40', 'Skin tone 50'];
+export const assertColorNameValue = value => {
+  if (value === null || !colorNameValues.includes(value)) {
+    throw new Error(`Invalid color name: "${value}"`);
+  }
+};
+export const colorMap = {
+  [NO_COLOR]: {
+    value: NO_COLOR,
+    isInverted: false
+  },
+  'Blue 50': {
+    value: 'night-400',
+    isInverted: true
+  },
+  'Blue 40': {
+    value: 'aqua-400',
+    isInverted: false
+  },
+  'Blue 30': {
+    value: 'aqua-200',
+    isInverted: false
+  },
+  'Blue 20': {
+    value: 'night-200',
+    isInverted: false
+  },
+  'Blue 10': {
+    value: 'informative-200',
+    isInverted: false
+  },
+  'Green 30': {
+    value: 'grass-400',
+    isInverted: false
+  },
+  'Green 20': {
+    value: 'grass-200',
+    isInverted: false
+  },
+  'Green 10': {
+    value: 'success-200',
+    isInverted: false
+  },
+  'Yellow 20': {
+    value: 'bolt-400',
+    isInverted: false
+  },
+  'Yellow 10': {
+    value: 'bolt-200',
+    isInverted: false
+  },
+  'Orange 30': {
+    value: 'orange-400',
+    isInverted: false
+  },
+  'Orange 20': {
+    value: 'orange-200',
+    isInverted: false
+  },
+  'Orange 10': {
+    value: 'warning-200',
+    isInverted: false
+  },
+  'Pink 20': {
+    value: 'candy-400',
+    isInverted: false
+  },
+  'Pink 10': {
+    value: 'candy-200',
+    isInverted: false
+  },
+  'Brown 20': {
+    value: 'mud-400',
+    isInverted: true
+  },
+  'Brown 10': {
+    value: 'mud-200',
+    isInverted: false
+  },
+  'Gray 20': {
+    value: 'dirt-400',
+    isInverted: false
+  },
+  'Gray 10': {
+    value: 'dirt-200',
+    isInverted: false
+  },
+  'Coral 10': {
+    value: 'berry-200',
+    isInverted: false
+  },
+  'Red 10': {
+    value: 'error-200',
+    isInverted: false
+  },
+  'Skin tone 0': {
+    value: 'skin-tone-10',
+    isInverted: false
+  },
+  'Skin tone 10': {
+    value: 'skin-tone-20',
+    isInverted: false
+  },
+  'Skin tone 20': {
+    value: 'skin-tone-30',
+    isInverted: false
+  },
+  'Skin tone 30': {
+    value: 'skin-tone-40',
+    isInverted: false
+  },
+  'Skin tone 40': {
+    value: 'skin-tone-50',
+    isInverted: false
+  },
+  'Skin tone 50': {
+    value: 'skin-tone-60',
+    isInverted: true
+  }
+};

package/{utils.d.ts → utils/index.d.ts}

@@ -1,4 +1,4 @@
-import type { TRect } from './types';
+import type { TRect } from '../types';
 export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
 export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
 declare global {
@@ -16,8 +16,7 @@ export declare const isAttrTrue: (attrValue: string | null) => boolean;
 export declare const getBooleanAttribute: ($element: Element, attrName: string) => boolean;
 export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
 export declare const updateAttribute: ($element: Element, attrName: string, attrValue: string | number | boolean | null | undefined) => void;
-export declare function getAttribute($element: Element, attrName: string): string | undefined;
-export declare function getAttribute($element: Element, attrName: string, defaultValue: null): string | null;
+export declare function getAttribute($element: Element, attrName: string): string | null;
 export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
 export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
 export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
@@ -25,15 +24,16 @@ export declare function getLiteralAttribute<T extends readonly string[]>($elemen
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
 export declare const clampNumber: (value: number, min: number, max: number) => number;
-declare type TRange = {
+declare type IntegerOptions = {
     min?: number;
     max?: number;
+    defaultValue?: number | null;
+    itemSizeMultiplier?: number;
+    itemSpaceBetween?: number;
 };
-export declare const attrValueToInteger: (value: string | null, range?: TRange) => number | null;
-export declare const attrValueToPixels: (value: string | null, options?: TRange & {
-    multiplier?: number;
-}) => string;
-export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, range?: TRange) => void;
+export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
+export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;
+export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, options?: IntegerOptions) => void;
 export declare function getIntegerAttribute($element: Element, attrName: string): number | undefined;
 export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: null): number | null;
 export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: number): number;
@@ -48,4 +48,13 @@ export declare const throttleAnimationFrame: (cb: (...args: any[]) => void) => {
     cancel: () => void;
 };
 export declare const getFirstSlotElement: (root: HTMLSlotElement) => HTMLElement | null;
+export declare const cloneNode: (el: Element, deep: boolean) => Element;
+export declare const isElementFocused: ($el: Element | null) => boolean;
+export declare class Context {
+    #private;
+    constructor($element: Element, name: string);
+    get elements(): Iterable<Element>;
+    subscribe(): void;
+    unsubscribe(): void;
+}
 export {};

package/{utils.js → utils/index.js}

@@ -1,5 +1,4 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import pkg from './package.json';
+import pkg from '../package.json';
 const nectaryDefinitions = new Map();
 let nectaryRegistry = null;
 export const defineCustomElement = (name, constructor) => {
@@ -29,12 +28,6 @@ export const setNectaryRegistry = registry => {
   nectaryDefinitions.clear();
 };
 export class NectaryElement extends HTMLElement {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, '__version', pkg.version);
-  }
-
   attachShadow(options) {
     return super.attachShadow({
       mode: 'closed',
@@ -44,6 +37,7 @@ export class NectaryElement extends HTMLElement {
     });
   }
 
+  __version = pkg.version;
 }
 export const getReactEventHandler = ($element, handlerName) => {
   for (const key in $element) {
@@ -81,7 +75,8 @@ export const updateAttribute = ($element, attrName, attrValue) => {
     $element.removeAttribute(attrName);
   }
 };
-export function getAttribute($element, attrName, defaultValue) {
+export function getAttribute($element, attrName) {
+  let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   return $element.getAttribute(attrName) ?? defaultValue;
 }
 export const isLiteralValue = (literals, value) => {
@@ -110,59 +105,79 @@ export function getLiteralAttribute($element, literals, attrName, defaultValue)
 export const clampNumber = (value, min, max) => {
   return Math.min(max, Math.max(min, value));
 };
+const DEFAULT_INTEGER_OPTIONS = {
+  itemSizeMultiplier: 1,
+  itemSpaceBetween: 0,
+  defaultValue: null
+};
 
-const applyRange = (value, range) => {
+const applyRange = (value, _ref) => {
+  let {
+    min,
+    max
+  } = _ref;
   let result = value;
 
-  if (typeof range.min === 'number') {
-    result = Math.max(range.min, result);
+  if (min != null) {
+    result = Math.max(min, result);
   }
 
-  if (typeof range.max === 'number') {
-    result = Math.min(range.max, result);
+  if (max != null) {
+    result = Math.min(max, result);
   }
 
   return result;
 };
 
 export const attrValueToInteger = function (value) {
-  let range = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier = 1,
+    itemSpaceBetween = 0
+  } = options;
+  let intValue = defaultValue;
 
-  if (value === null) {
-    return null;
-  }
+  if (value !== null) {
+    const int = parseInt(value);
 
-  const int = parseInt(value);
+    if (Number.isInteger(int)) {
+      intValue = applyRange(int, options);
+    }
+  }
 
-  if (!Number.isInteger(int)) {
-    return null;
+  if (intValue !== null) {
+    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween;
   }
 
-  return applyRange(int, range);
+  return null;
 };
 export const attrValueToPixels = function (value) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const int = attrValueToInteger(value, {
-    min: options.min ?? 0,
-    max: options.max
-  });
-  return int === null ? 'unset' : `${int * (options.multiplier ?? 1)}px`;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const int = attrValueToInteger(value, options);
+  return int === null ? 'unset' : `${int}px`;
 };
 export const updateIntegerAttribute = function ($element, attrName, attrValue) {
-  let range = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-
-  if (attrValue == null) {
-    $element.removeAttribute(attrName);
-    return;
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier: multiplier = 1
+  } = options;
+  let intValue = null;
+
+  if (typeof attrValue === 'string') {
+    intValue = attrValueToInteger(attrValue, options);
+  } else if (typeof attrValue === 'number') {
+    intValue = applyRange(attrValue, options) * multiplier;
+  } else {
+    intValue = defaultValue;
   }
 
-  const intValue = typeof attrValue === 'string' ? attrValueToInteger(attrValue, range) : applyRange(attrValue, range);
-
   if (intValue === null) {
-    return;
+    $element.removeAttribute(attrName);
+  } else {
+    $element.setAttribute(attrName, intValue.toFixed(0));
   }
-
-  $element.setAttribute(attrName, intValue.toFixed(0));
 };
 export function getIntegerAttribute($element, attrName, defaultValue) {
   return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
@@ -261,4 +276,68 @@ export const getFirstSlotElement = root => {
 
     slot = el;
   }
-};
+};
+export const cloneNode = (el, deep) => {
+  const root = el.getRootNode();
+
+  if (root !== document && Reflect.has(root, 'createElement')) {
+    const cloned = root.createElement(el.tagName.toLowerCase());
+
+    for (const attr of el.getAttributeNames()) {
+      cloned.setAttribute(attr, el.getAttribute(attr));
+    }
+
+    if (deep) {
+      for (let i = 0; i < el.children.length; i++) {
+        const clonedChild = cloneNode(el.children[i], deep);
+        cloned.appendChild(clonedChild);
+      }
+    }
+
+    return cloned;
+  }
+
+  return el.cloneNode(deep);
+};
+export const isElementFocused = $el => {
+  return $el !== null && $el === $el.getRootNode().activeElement;
+};
+export class Context {
+  #$root;
+  #listeners = new Set();
+  #name;
+  #isSubscribed = false;
+
+  constructor($element, name) {
+    this.#$root = $element;
+    this.#name = name;
+  }
+
+  get elements() {
+    return this.#listeners;
+  }
+
+  subscribe() {
+    if (this.#isSubscribed) {
+      return;
+    }
+
+    this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onConnect);
+    this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
+    this.#isSubscribed = true;
+  }
+
+  unsubscribe() {
+    this.#listeners.clear();
+    this.#$root.removeEventListener(`-context-connect-${this.#name}`, this.#onConnect);
+    this.#$root.removeEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
+    this.#isSubscribed = false;
+  }
+
+  #onConnect = e => {
+    this.#listeners.add(e.target);
+  };
+  #onDisconnect = e => {
+    this.#listeners.delete(e.target);
+  };
+}