@abgov/react-components 4.15.0-alpha.3 → 4.15.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.15.0-alpha.3",
+  "version": "4.15.0-alpha.4",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -244,7 +244,7 @@ $$invalidate(29,_activeDescendantId=_filteredOptions[_highlightedIndex]?_filtere
 }};return [value,name,arialabel,arialabelledby,leadingicon,maxheight,placeholder,width,disabled,relative,mt,mr,mb,ml,id,_options,_inputValue,_highlightedIndex,_el,_filterable,_filteredOptions,_native,_isMenuVisible,_computedWidth,_menuEl,_selectEl,_popOverEl,_inputEl,_disabled,_activeDescendantId,_error,showMenu,closeMenu,onSelect,onInputKeyDown,onNativeSelect,onClick,onClear,filterable,error,multiselect,native,select_binding,input_binding,input_input_handler,keydown_handler,click_handler,ul_binding,goa_popover_binding,div_binding];}class Dropdown extends SvelteElement{constructor(options){super();const style=document.createElement('style');style.textContent=`:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{cursor:pointer;display:inline-block;width:var(--width, 100%)}.dropdown-input-group{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;background-color:var(--goa-color-greyscale-white);cursor:pointer;width:100%}.dropdown-input-group:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.dropdown-input-group:focus,.dropdown-input-group:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}@media(min-width: 640px){.dropdown-input-group{width:var(--width)}}.dropdown-input-group.error,.dropdown-input-group.error:hover{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.dropdown-input-group.error:focus-within,.dropdown-input-group.error:focus{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.dropdown-icon--arrow,.dropdown-icon--clear{margin-right:var(--goa-space-s)}.dropdown-icon--clear:focus:not(.disabled),.dropdown-icon--clear:active:not(.disabled){color:var(--goa-color-interactive-focus);outline:none}.dropdown-input--leading-icon{margin-left:0.75rem}.dropdown-input--leading-icon+input{padding-left:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);padding-left:var(--goa-space-s);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}input,input:focus,input:hover,input:active{outline:none;border:none}input[aria-disabled="true"]{color:var(--goa-color-text-secondary)}.dropdown-input-group--disabled,.dropdown-input-group--disabled:hover,.dropdown-input-group--disabled:active,.dropdown-input-group--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}ul[role="listbox"]{border-radius:var(--goa-border-radius-m)}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover,.dropdown-item--highlighted{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item[aria-selected="true"]{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item[aria-selected="true"]:hover,.dropdown-item[aria-selected="true"].dropdown-item--highlighted{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{position:relative;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white);transition:box-shadow 0.1s ease-in}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}.dropdown-native:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}select{border:none;font:var(--goa-font-family-sans);background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 1px);padding-left:var(--goa-space-s);padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}`;this.shadowRoot.appendChild(style);init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$E,create_fragment$H,safe_not_equal,{name:1,arialabel:2,arialabelledby:3,value:0,filterable:38,leadingicon:4,maxheight:5,placeholder:6,width:7,disabled:8,error:39,multiselect:40,native:41,relative:9,mt:10,mr:11,mb:12,ml:13,id:14},null,[-1,-1,-1]);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["name","arialabel","arialabelledby","value","filterable","leadingicon","maxheight","placeholder","width","disabled","error","multiselect","native","relative","mt","mr","mb","ml","id"];}get name(){return this.$$.ctx[1];}set name(name){this.$$set({name});flush();}get arialabel(){return this.$$.ctx[2];}set arialabel(arialabel){this.$$set({arialabel});flush();}get arialabelledby(){return this.$$.ctx[3];}set arialabelledby(arialabelledby){this.$$set({arialabelledby});flush();}get value(){return this.$$.ctx[0];}set value(value){this.$$set({value});flush();}get filterable(){return this.$$.ctx[38];}set filterable(filterable){this.$$set({filterable});flush();}get leadingicon(){return this.$$.ctx[4];}set leadingicon(leadingicon){this.$$set({leadingicon});flush();}get maxheight(){return this.$$.ctx[5];}set maxheight(maxheight){this.$$set({maxheight});flush();}get placeholder(){return this.$$.ctx[6];}set placeholder(placeholder){this.$$set({placeholder});flush();}get width(){return this.$$.ctx[7];}set width(width){this.$$set({width});flush();}get disabled(){return this.$$.ctx[8];}set disabled(disabled){this.$$set({disabled});flush();}get error(){return this.$$.ctx[39];}set error(error){this.$$set({error});flush();}get multiselect(){return this.$$.ctx[40];}set multiselect(multiselect){this.$$set({multiselect});flush();}get native(){return this.$$.ctx[41];}set native(native){this.$$set({native});flush();}get relative(){return this.$$.ctx[9];}set relative(relative){this.$$set({relative});flush();}get mt(){return this.$$.ctx[10];}set mt(mt){this.$$set({mt});flush();}get mr(){return this.$$.ctx[11];}set mr(mr){this.$$set({mr});flush();}get mb(){return this.$$.ctx[12];}set mb(mb){this.$$set({mb});flush();}get ml(){return this.$$.ctx[13];}set ml(ml){this.$$set({ml});flush();}get id(){return this.$$.ctx[14];}set id(id){this.$$set({id});flush();}}customElements.define("goa-dropdown",Dropdown);/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.59.2 */function create_fragment$G(ctx){return {c(){this.c=noop;},m:noop,p:noop,i:noop,o:noop,d:noop};}function instance$D($$self,$$props,$$invalidate){let{filter=""}=$$props;let{label=""}=$$props;let{value=""}=$$props;$$self.$$set=$$props=>{if('filter'in $$props)$$invalidate(0,filter=$$props.filter);if('label'in $$props)$$invalidate(1,label=$$props.label);if('value'in $$props)$$invalidate(2,value=$$props.value);};return [filter,label,value];}class DropdownItem extends SvelteElement{constructor(options){super();init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$D,create_fragment$G,safe_not_equal,{filter:0,label:1,value:2},null);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["filter","label","value"];}get filter(){return this.$$.ctx[0];}set filter(filter){this.$$set({filter});flush();}get label(){return this.$$.ctx[1];}set label(label){this.$$set({label});flush();}get value(){return this.$$.ctx[2];}set value(value){this.$$set({value});flush();}}customElements.define("goa-dropdown-item",DropdownItem);/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.59.2 */function create_fragment$F(ctx){let div;return {c(){div=element("div");div.innerHTML=`<span data-tab-boundry="start" tabindex="0"></span> 
   <slot></slot> 
   
-  <span data-tab-boundry="end" tabindex="0"></span>`;this.c=noop;},m(target,anchor){insert(target,div,anchor);/*div_binding*/ctx[1](div);},p:noop,i:noop,o:noop,d(detaching){if(detaching)detach(div);/*div_binding*/ctx[1](null);}};}function isFocusable(node){const element=node;const isTabbable=element.tabIndex>0||element.tabIndex===0&&element.getAttribute('tabIndex')!==null;if(isTabbable)return node;if(element["disabled"])return null;switch(element.nodeName){case'A':{const el=element;if(!!el.href&&el.rel!=='ignore')return node;}case'INPUT':{const el=element;if(el.type!=='hidden'&&el.type!=='file')return node;}case'BUTTON':case'SELECT':case'TEXTAREA':return node;default:return null;}}function instance$C($$self,$$props,$$invalidate){let rootEl;let boundryStartEl;let boundryEndEl;let isShiftPressed;// Hooks
+  <span data-tab-boundry="end" tabindex="0"></span>`;this.c=noop;},m(target,anchor){insert(target,div,anchor);/*div_binding*/ctx[1](div);},p:noop,i:noop,o:noop,d(detaching){if(detaching)detach(div);/*div_binding*/ctx[1](null);}};}function isFocusable(node){var _a;const element=node;const isTabbable=element.tabIndex>0||element.tabIndex===0&&element.getAttribute('tabIndex')!==null;if(isTabbable)return node;if(element["disabled"])return null;if(element.tabIndex<0||((_a=element.getAttribute)===null||_a===void 0?void 0:_a.call(element,"tabindex"))==="-1")return null;switch(element.nodeName){case'A':{const el=element;if(!!el.href&&el.rel!=='ignore')return node;}case'INPUT':{const el=element;if(el.type!=='hidden'&&el.type!=='file')return node;}case'BUTTON':case'SELECT':case'TEXTAREA':return node;default:return null;}}function instance$C($$self,$$props,$$invalidate){let rootEl;let boundryStartEl;let boundryEndEl;let isShiftPressed;// Hooks
 onMount(async()=>{await tick();// event is attached to the rootEl, eliminating the need to remove the listener since it 
 // will be removed when the associated element is removed.
 rootEl.addEventListener("focus",onFocus,true);rootEl.addEventListener("keydown",onKeydown,true);rootEl.addEventListener("keyup",onKeyup,true);boundryStartEl=rootEl.querySelector("[data-tab-boundry=start]");boundryEndEl=rootEl.querySelector("[data-tab-boundry=end]");});function onKeydown(e){if(e.shiftKey)isShiftPressed=true;}function onKeyup(e){if(e.shiftKey)isShiftPressed=false;}// Focus event handler  

package/react-components.umd.js

@@ -246,7 +246,7 @@
 	}};return [value,name,arialabel,arialabelledby,leadingicon,maxheight,placeholder,width,disabled,relative,mt,mr,mb,ml,id,_options,_inputValue,_highlightedIndex,_el,_filterable,_filteredOptions,_native,_isMenuVisible,_computedWidth,_menuEl,_selectEl,_popOverEl,_inputEl,_disabled,_activeDescendantId,_error,showMenu,closeMenu,onSelect,onInputKeyDown,onNativeSelect,onClick,onClear,filterable,error,multiselect,native,select_binding,input_binding,input_input_handler,keydown_handler,click_handler,ul_binding,goa_popover_binding,div_binding];}class Dropdown extends SvelteElement{constructor(options){super();const style=document.createElement('style');style.textContent=`:host{box-sizing:border-box;font-family:var(--goa-font-family-sans)}.dropdown{cursor:pointer;display:inline-block;width:var(--width, 100%)}.dropdown-input-group{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);display:inline-flex;align-items:stretch;vertical-align:middle;background-color:var(--goa-color-greyscale-white);cursor:pointer;width:100%}.dropdown-input-group:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}.dropdown-input-group:focus,.dropdown-input-group:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}@media(min-width: 640px){.dropdown-input-group{width:var(--width)}}.dropdown-input-group.error,.dropdown-input-group.error:hover{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 1px var(--goa-color-interactive-error)}.dropdown-input-group.error:focus-within,.dropdown-input-group.error:focus{border:2px solid var(--goa-color-interactive-error);box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.dropdown-icon--arrow,.dropdown-icon--clear{margin-right:var(--goa-space-s)}.dropdown-icon--clear:focus:not(.disabled),.dropdown-icon--clear:active:not(.disabled){color:var(--goa-color-interactive-focus);outline:none}.dropdown-input--leading-icon{margin-left:0.75rem}.dropdown-input--leading-icon+input{padding-left:0.5rem}input{display:inline-block;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);padding:var(--goa-space-xs);padding-left:var(--goa-space-s);line-height:calc(40px - calc(var(--goa-space-xs) * 2));background-color:transparent;width:100%;flex:1 1 auto;font-family:var(--goa-font-family-sans);z-index:1}input,input:focus,input:hover,input:active{outline:none;border:none}input[aria-disabled="true"]{color:var(--goa-color-text-secondary)}.dropdown-input-group--disabled,.dropdown-input-group--disabled:hover,.dropdown-input-group--disabled:active,.dropdown-input-group--disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200) !important;cursor:default;box-shadow:none !important}ul[role="listbox"]{border-radius:var(--goa-border-radius-m)}.dropdown-item{margin:0;padding:0.5rem;cursor:pointer;color:var(--goa-color-greyscale-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover,.dropdown-item--highlighted{background:var(--goa-color-greyscale-100);color:var(--goa-color-interactive-hover)}.dropdown-item[aria-selected="true"]{background:var(--goa-color-interactive-default);color:var(--goa-color-greyscale-white)}.dropdown-item[aria-selected="true"]:hover,.dropdown-item[aria-selected="true"].dropdown-item--highlighted{background:var(--goa-color-interactive-hover);color:var(--goa-color-greyscale-white)}.dropdown-native{position:relative;border:1px solid var(--goa-color-greyscale-700);border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-white);transition:box-shadow 0.1s ease-in}.dropdown-native:has(select:disabled){background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);box-shadow:none;color:var(--goa-color-text-secondary);cursor:default}.dropdown-native:has(select.error){border:2px solid var(--goa-color-interactive-error)}.dropdown-native:hover{border-color:var(--goa-color-interactive-hover);box-shadow:0 0 0 var(--goa-border-width-m) var(--goa-color-interactive-hover)}select{border:none;font:var(--goa-font-family-sans);background-color:transparent;color:var(--goa-color-text-default);font-size:var(--goa-font-size-4);appearance:none;padding:calc(var(--goa-space-xs) + 1px);padding-left:var(--goa-space-s);padding-right:3rem;outline:none;width:100%}.dropdown-native::after{content:"";position:absolute;right:0.6rem;top:0.6rem;pointer-events:none;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' /%3E%3C/svg%3E");background-repeat:none}.dropdown-native:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}`;this.shadowRoot.appendChild(style);init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$E,create_fragment$H,safe_not_equal,{name:1,arialabel:2,arialabelledby:3,value:0,filterable:38,leadingicon:4,maxheight:5,placeholder:6,width:7,disabled:8,error:39,multiselect:40,native:41,relative:9,mt:10,mr:11,mb:12,ml:13,id:14},null,[-1,-1,-1]);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["name","arialabel","arialabelledby","value","filterable","leadingicon","maxheight","placeholder","width","disabled","error","multiselect","native","relative","mt","mr","mb","ml","id"];}get name(){return this.$$.ctx[1];}set name(name){this.$$set({name});flush();}get arialabel(){return this.$$.ctx[2];}set arialabel(arialabel){this.$$set({arialabel});flush();}get arialabelledby(){return this.$$.ctx[3];}set arialabelledby(arialabelledby){this.$$set({arialabelledby});flush();}get value(){return this.$$.ctx[0];}set value(value){this.$$set({value});flush();}get filterable(){return this.$$.ctx[38];}set filterable(filterable){this.$$set({filterable});flush();}get leadingicon(){return this.$$.ctx[4];}set leadingicon(leadingicon){this.$$set({leadingicon});flush();}get maxheight(){return this.$$.ctx[5];}set maxheight(maxheight){this.$$set({maxheight});flush();}get placeholder(){return this.$$.ctx[6];}set placeholder(placeholder){this.$$set({placeholder});flush();}get width(){return this.$$.ctx[7];}set width(width){this.$$set({width});flush();}get disabled(){return this.$$.ctx[8];}set disabled(disabled){this.$$set({disabled});flush();}get error(){return this.$$.ctx[39];}set error(error){this.$$set({error});flush();}get multiselect(){return this.$$.ctx[40];}set multiselect(multiselect){this.$$set({multiselect});flush();}get native(){return this.$$.ctx[41];}set native(native){this.$$set({native});flush();}get relative(){return this.$$.ctx[9];}set relative(relative){this.$$set({relative});flush();}get mt(){return this.$$.ctx[10];}set mt(mt){this.$$set({mt});flush();}get mr(){return this.$$.ctx[11];}set mr(mr){this.$$set({mr});flush();}get mb(){return this.$$.ctx[12];}set mb(mb){this.$$set({mb});flush();}get ml(){return this.$$.ctx[13];}set ml(ml){this.$$set({ml});flush();}get id(){return this.$$.ctx[14];}set id(id){this.$$set({id});flush();}}customElements.define("goa-dropdown",Dropdown);/* libs/web-components/src/components/dropdown/DropdownItem.svelte generated by Svelte v3.59.2 */function create_fragment$G(ctx){return {c(){this.c=noop;},m:noop,p:noop,i:noop,o:noop,d:noop};}function instance$D($$self,$$props,$$invalidate){let{filter=""}=$$props;let{label=""}=$$props;let{value=""}=$$props;$$self.$$set=$$props=>{if('filter'in $$props)$$invalidate(0,filter=$$props.filter);if('label'in $$props)$$invalidate(1,label=$$props.label);if('value'in $$props)$$invalidate(2,value=$$props.value);};return [filter,label,value];}class DropdownItem extends SvelteElement{constructor(options){super();init(this,{target:this.shadowRoot,props:attribute_to_object(this.attributes),customElement:true},instance$D,create_fragment$G,safe_not_equal,{filter:0,label:1,value:2},null);if(options){if(options.target){insert(options.target,this,options.anchor);}if(options.props){this.$set(options.props);flush();}}}static get observedAttributes(){return ["filter","label","value"];}get filter(){return this.$$.ctx[0];}set filter(filter){this.$$set({filter});flush();}get label(){return this.$$.ctx[1];}set label(label){this.$$set({label});flush();}get value(){return this.$$.ctx[2];}set value(value){this.$$set({value});flush();}}customElements.define("goa-dropdown-item",DropdownItem);/* libs/web-components/src/components/focus-trap/FocusTrap.svelte generated by Svelte v3.59.2 */function create_fragment$F(ctx){let div;return {c(){div=element("div");div.innerHTML=`<span data-tab-boundry="start" tabindex="0"></span> 
   <slot></slot> 
   
-  <span data-tab-boundry="end" tabindex="0"></span>`;this.c=noop;},m(target,anchor){insert(target,div,anchor);/*div_binding*/ctx[1](div);},p:noop,i:noop,o:noop,d(detaching){if(detaching)detach(div);/*div_binding*/ctx[1](null);}};}function isFocusable(node){const element=node;const isTabbable=element.tabIndex>0||element.tabIndex===0&&element.getAttribute('tabIndex')!==null;if(isTabbable)return node;if(element["disabled"])return null;switch(element.nodeName){case'A':{const el=element;if(!!el.href&&el.rel!=='ignore')return node;}case'INPUT':{const el=element;if(el.type!=='hidden'&&el.type!=='file')return node;}case'BUTTON':case'SELECT':case'TEXTAREA':return node;default:return null;}}function instance$C($$self,$$props,$$invalidate){let rootEl;let boundryStartEl;let boundryEndEl;let isShiftPressed;// Hooks
+  <span data-tab-boundry="end" tabindex="0"></span>`;this.c=noop;},m(target,anchor){insert(target,div,anchor);/*div_binding*/ctx[1](div);},p:noop,i:noop,o:noop,d(detaching){if(detaching)detach(div);/*div_binding*/ctx[1](null);}};}function isFocusable(node){var _a;const element=node;const isTabbable=element.tabIndex>0||element.tabIndex===0&&element.getAttribute('tabIndex')!==null;if(isTabbable)return node;if(element["disabled"])return null;if(element.tabIndex<0||((_a=element.getAttribute)===null||_a===void 0?void 0:_a.call(element,"tabindex"))==="-1")return null;switch(element.nodeName){case'A':{const el=element;if(!!el.href&&el.rel!=='ignore')return node;}case'INPUT':{const el=element;if(el.type!=='hidden'&&el.type!=='file')return node;}case'BUTTON':case'SELECT':case'TEXTAREA':return node;default:return null;}}function instance$C($$self,$$props,$$invalidate){let rootEl;let boundryStartEl;let boundryEndEl;let isShiftPressed;// Hooks
 	onMount(function(){return _call(tick,function(){// event is attached to the rootEl, eliminating the need to remove the listener since it 
 	// will be removed when the associated element is removed.
 	rootEl.addEventListener("focus",onFocus,true);rootEl.addEventListener("keydown",onKeydown,true);rootEl.addEventListener("keyup",onKeyup,true);boundryStartEl=rootEl.querySelector("[data-tab-boundry=start]");boundryEndEl=rootEl.querySelector("[data-tab-boundry=end]");});});function onKeydown(e){if(e.shiftKey)isShiftPressed=true;}function onKeyup(e){if(e.shiftKey)isShiftPressed=false;}// Focus event handler