@lu-development/ux-mylu-patterns - npm Package Compare versions

Comparing version 0.3.0-dev.201906202003.d2a0437 to 0.3.0-dev.201906252309.b36a2f9

dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
 const defineCustomElements = (win, options) => {
   return __chunk_1.patchEsm().then(() => {
-    __chunk_1.bootstrapLazy([["mylu-avatar.cjs",[[0,"mylu-avatar",{"showAction":[4,"show-action"],"actionIcon":[1,"action-icon"],"actionBackgroundColor":[1,"action-background-color"],"imgUrl":[1,"img-url"],"imgLoaded":[32]}]]],["lu-card-image.cjs",[[1,"lu-card-image",{"altText":[1,"alt-text"],"iconColor":[1,"icon-color"],"iconName":[1,"icon-name"],"iconSize":[1,"icon-size"],"isIcon":[4,"is-icon"],"src":[1]}]]],["lu-fab-button.cjs",[[1,"lu-fab-button",{"color":[1],"activated":[4],"disabled":[4],"href":[1],"isExternallyManaged":[4,"is-externally-managed"],"show":[1028],"selected":[1028],"toggleButton":[4,"toggle-button"],"translucent":[4],"type":[1],"size":[1],"value":[8],"keyFocus":[32]}]]],["lu-form-group.cjs",[[1,"lu-form-group",{"clearErrorStateOnClearInput":[4,"clear-error-state-on-clear-input"],"clearInput":[4,"clear-input"],"color":[1],"clearOnEdit":[1028,"clear-on-edit"],"errorMessage":[1025,"error-message"],"externallyDeemedValid":[1028,"externally-deemed-valid"],"externallyDeemedInvalid":[1028,"externally-deemed-invalid"],"forId":[1025,"for-id"],"helperText":[1,"helper-text"],"id":[1537],"isExternallyValidated":[4,"is-externally-validated"],"isValidatedOnSubmission":[4,"is-validated-on-submission"],"labelText":[1,"label-text"],"updateTrigger":[1,"update-trigger"],"value":[32],"isCheckboxGroup":[32],"isValid":[32],"isInvalid":[32],"isSelect":[32],"isRadioGroup":[32],"isRequired":[32],"needsEmailValidation":[32],"needsPatternValidation":[32],"needsPasswordValidation":[32],"pattern":[32],"isInput":[32],"getValidationValues":[64]}]]],["lu-input.cjs",[[1,"lu-input",{"accept":[1],"autocomplete":[1],"autocapitalize":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[1028,"clear-on-edit"],"capture":[1],"checked":[4],"color":[1],"debounce":[2],"disabled":[4],"form":[1],"id":[1537],"inputmode":[1],"invalid":[4],"list":[1],"max":[8],"min":[8],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"prefixIcon":[1,"prefix-icon"],"prefixIconClickable":[4,"prefix-icon-clickable"],"suffixIcon":[1025,"suffix-icon"],"suffixIconClickable":[1028,"suffix-icon-clickable"],"readOnly":[4,"read-only"],"required":[4],"size":[2],"spellcheck":[4],"step":[8],"tabIndex":[2,"tab-index"],"type":[1],"valid":[4],"value":[1025],"hasFocus":[32],"setFocus":[64]}]]],["lu-side-menu.cjs",[[1,"lu-side-menu",{"color":[1],"isVisible":[1028,"is-visible"],"isCollapsible":[1540,"is-collapsible"],"isCollapsed":[1540,"is-collapsed"],"hasBoxShadow":[4,"has-box-shadow"],"externallyManaged":[4,"externally-managed"],"makeVisible":[64],"isHidden":[64],"collapsedHandler":[64]},[[0,"keydown","handleEscape"]]]]],["lu-toggle.cjs",[[1,"lu-toggle",{"startSelected":[1028,"start-selected"],"startText":[1,"start-text"],"startValue":[8,"start-value"],"endText":[1,"end-text"],"endValue":[8,"end-value"],"value":[1032]}]]],["lu-button.cjs",[[1,"lu-button",{"color":[1],"buttonType":[1025,"button-type"],"disabled":[516],"expand":[513],"fill":[1537],"href":[1],"shape":[513],"size":[513],"strong":[4],"type":[1],"keyFocus":[32]}]]],["lu-card.cjs",[[1,"lu-card",{"color":[1]}]]],["lu-card-buttons.cjs",[[1,"lu-card-buttons"]]],["lu-card-content.cjs",[[0,"lu-card-content"]]],["lu-card-footer.cjs",[[1,"lu-card-footer",{"color":[1],"translucent":[4]}]]],["lu-card-header.cjs",[[1,"lu-card-header",{"color":[1],"translucent":[4]}]]],["lu-card-title.cjs",[[1,"lu-card-title",{"color":[1]}]]],["lu-checkbox.cjs",[[1,"lu-checkbox",{"color":[1],"name":[1],"labeledById":[1,"labeled-by-id"],"checked":[1028],"disabled":[4],"isExternallyManaged":[4,"is-externally-managed"],"value":[8],"keyFocus":[32],"hasFocus":[32]}]]],["lu-checkbox-group.cjs",[[4,"lu-checkbox-group",{"direction":[1],"id":[1537],"name":[1],"required":[4],"value":[1040],"setFocus":[64],"getValues":[64]},[[0,"luCheckboxDidLoad","onCheckboxDidLoad"],[0,"luCheckboxDidUnload","onCheckboxDidUnload"]]]]],["lu-col.cjs",[[1,"lu-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["lu-fab.cjs",[[1,"lu-fab",{"horizontal":[1],"vertical":[1],"edge":[4],"activated":[1028],"close":[64]},[[0,"click","onClick"]]]]],["lu-fab-list.cjs",[[1,"lu-fab-list",{"activated":[4],"side":[1]}]]],["lu-form-validation.cjs",[[0,"lu-form-validation",{"value":[1040],"isValid":[1540,"is-valid"],"isInvalid":[1540,"is-invalid"],"formGroups":[32]},[[0,"luFormGroupDidLoad","onFormGroupDidLoad"],[0,"luFormGroupDidUnload","onFormGroupDidUnload"]]]]],["lu-grid.cjs",[[1,"lu-grid",{"fixed":[4]}]]],["lu-header.cjs",[[1,"lu-header",{"color":[1],"preHeader":[4,"pre-header"]}]]],["lu-radio.cjs",[[1,"lu-radio",{"color":[1],"labeledById":[1,"labeled-by-id"],"name":[1],"disabled":[4],"checked":[1028],"value":[1032],"hasFocus":[32]},[[0,"click","onClick"]]]]],["lu-radio-group.cjs",[[0,"lu-radio-group",{"allowEmptySelection":[4,"allow-empty-selection"],"direction":[1],"id":[1537],"name":[1],"required":[4],"value":[1032],"setFocus":[64]},[[0,"luRadioDidLoad","onRadioDidLoad"],[0,"luRadioDidUnload","onRadioDidUnload"],[0,"luSelect","onRadioSelect"],[0,"luDeselect","onRadioDeselect"]]]]],["lu-row.cjs",[[1,"lu-row"]]],["lu-select.cjs",[[1,"lu-select",{"id":[1537],"color":[1],"invalid":[4],"name":[1],"ariaLabel":[1,"aria-label"],"disabled":[4],"placeholder":[1],"helpText":[1,"help-text"],"selectedValue":[1025,"selected-value"],"showPlaceholderOption":[4,"show-placeholder-option"],"required":[4],"options":[1040],"valid":[4],"isValid":[32],"setFocus":[64]}]]],["lu-skeleton-text.cjs",[[1,"lu-skeleton-text",{"width":[1]}]]],["lu-spinner.cjs",[[1,"lu-spinner",{"dataColor":[1,"data-color"],"dataScale":[2,"data-scale"],"dataDuration":[2,"data-duration"],"dataPaused":[4,"data-paused"],"dataHidden":[4,"data-hidden"],"dataMessage":[1,"data-message"]}]]],["lu-tab.cjs",[[1,"lu-tab",{"active":[1028],"labeledById":[1025,"labeled-by-id"],"name":[8],"noSlide":[4,"no-slide"]},[[0,"click","onClick"]]]]],["lu-tabs.cjs",[[1,"lu-tabs",{"value":[1025],"noSlide":[4,"no-slide"],"tabs":[32],"tabIncrement":[32],"pos":[32],"left":[32],"width":[32],"elementResized":[64]},[[0,"luTabDidLoad","onTabDidLoad"],[0,"luTabDidUnload","onTabDidUnload"],[0,"luTabSelect","onTabSelect"]]]]],["lu-img.cjs",[[1,"lu-img",{"alt":[1],"src":[1],"loadSrc":[32]}]]],["lu-label.cjs",[[6,"lu-label",{"color":[1],"labelText":[1,"label-text"],"required":[4],"optional":[4],"forId":[513,"for-id"],"id":[1537],"invalid":[4],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"]}]]],["lu-icon_7.cjs",[[0,"mylu-set-menu",{"sets":[16],"activeSetId":[2,"active-set-id"],"canReorder":[4,"can-reorder"],"spaceTop":[2,"space-top"],"orderedSets":[32]},[[0,"luSelectedSetUpdated","onLuSelectedSet"],[0,"luReorderSet","onLuReorderSet"]]],[1,"mylu-breakpoints",{"sm":[2],"md":[2],"lg":[2],"xl":[2],"currentBreakpoint":[32],"currentWidth":[32],"currentHeight":[32]},[[9,"resize","onResize"]]],[1,"mylu-set",{"canReorder":[4,"can-reorder"],"setId":[2,"set-id"],"isActive":[1028,"is-active"],"showActiveBar":[4,"show-active-bar"],"setTitle":[1,"set-title"],"order":[2],"isReordering":[4,"is-reordering"],"translationTracker":[2,"translation-tracker"]},[[0,"click","onClick"]]],[1,"mylu-set-menu-bar",{"color":[1],"spaceTop":[2,"space-top"],"selectedSet":[1026,"selected-set"],"sets":[32],"cloneSets":[32],"circleDragging":[32],"selectedItemHeight":[32]},[[0,"luSetDidLoad","onSetDidLoad"],[0,"luSetDidUnload","onSetDidUnload"],[2,"myluCircleDrag","onMyluCircleDrag"],[0,"myluCircleDragEnd","onMyluCircleDragEnd"],[0,"luSelect","onSetSelection"],[1,"drag","onMouseMove"]]],[1,"mylu-circle",{"backgroundColor":[1,"background-color"],"isDraggable":[4,"is-draggable"],"isPresentational":[4,"is-presentational"],"setId":[2,"set-id"],"isImage":[4,"is-image"],"outline":[4],"isDragging":[32]},[[3,"dragstart","onDragStart"],[0,"dragend","onDragEnd"]]],[1,"mylu-dot",{"backgroundColor":[1,"background-color"],"isPresentational":[4,"is-presentational"]}],[1,"lu-icon",{"color":[1],"mode":[1],"ariaLabel":[1537,"aria-label"],"ios":[1],"md":[1],"flipRtl":[4,"flip-rtl"],"name":[1],"src":[1],"icon":[1],"size":[1],"svgContent":[32],"isVisible":[32]}]]]], options);
+    __chunk_1.bootstrapLazy([["mylu-avatar.cjs",[[0,"mylu-avatar",{"showNotification":[4,"show-notification"],"showAction":[4,"show-action"],"actionIcon":[1,"action-icon"],"circleBackgroundColor":[1,"circle-background-color"],"notificationBackgroundColor":[1,"notification-background-color"],"actionBackgroundColor":[1,"action-background-color"],"imgUrl":[1,"img-url"],"isActionable":[4,"is-actionable"],"imgLoaded":[32]}]]],["lu-card-image.cjs",[[1,"lu-card-image",{"altText":[1,"alt-text"],"iconColor":[1,"icon-color"],"iconName":[1,"icon-name"],"iconSize":[1,"icon-size"],"isIcon":[4,"is-icon"],"src":[1]}]]],["lu-fab-button.cjs",[[1,"lu-fab-button",{"color":[1],"activated":[4],"disabled":[4],"href":[1],"isExternallyManaged":[4,"is-externally-managed"],"show":[1028],"selected":[1028],"toggleButton":[4,"toggle-button"],"translucent":[4],"type":[1],"size":[1],"value":[8],"keyFocus":[32]}]]],["lu-form-group.cjs",[[1,"lu-form-group",{"clearErrorStateOnClearInput":[4,"clear-error-state-on-clear-input"],"clearInput":[4,"clear-input"],"color":[1],"clearOnEdit":[1028,"clear-on-edit"],"errorMessage":[1025,"error-message"],"externallyDeemedValid":[1028,"externally-deemed-valid"],"externallyDeemedInvalid":[1028,"externally-deemed-invalid"],"forId":[1025,"for-id"],"helperText":[1,"helper-text"],"id":[1537],"isExternallyValidated":[4,"is-externally-validated"],"isValidatedOnSubmission":[4,"is-validated-on-submission"],"labelText":[1,"label-text"],"updateTrigger":[1,"update-trigger"],"value":[32],"isCheckboxGroup":[32],"isValid":[32],"isInvalid":[32],"isSelect":[32],"isRadioGroup":[32],"isRequired":[32],"needsEmailValidation":[32],"needsPatternValidation":[32],"needsPasswordValidation":[32],"pattern":[32],"isInput":[32],"getValidationValues":[64]}]]],["lu-input.cjs",[[1,"lu-input",{"accept":[1],"autocomplete":[1],"autocapitalize":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[1028,"clear-on-edit"],"capture":[1],"checked":[4],"color":[1],"debounce":[2],"disabled":[4],"form":[1],"id":[1537],"inputmode":[1],"invalid":[4],"list":[1],"max":[8],"min":[8],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"prefixIcon":[1,"prefix-icon"],"prefixIconClickable":[4,"prefix-icon-clickable"],"suffixIcon":[1025,"suffix-icon"],"suffixIconClickable":[1028,"suffix-icon-clickable"],"readOnly":[4,"read-only"],"required":[4],"size":[2],"spellcheck":[4],"step":[8],"tabIndex":[2,"tab-index"],"type":[1],"valid":[4],"value":[1025],"hasFocus":[32],"setFocus":[64]}]]],["lu-side-menu.cjs",[[1,"lu-side-menu",{"color":[1],"isVisible":[1028,"is-visible"],"isCollapsible":[1540,"is-collapsible"],"isCollapsed":[1540,"is-collapsed"],"hasBoxShadow":[4,"has-box-shadow"],"externallyManaged":[4,"externally-managed"],"makeVisible":[64],"isHidden":[64],"collapsedHandler":[64]},[[0,"keydown","handleEscape"]]]]],["lu-toggle.cjs",[[1,"lu-toggle",{"startSelected":[1028,"start-selected"],"startText":[1,"start-text"],"startValue":[8,"start-value"],"endText":[1,"end-text"],"endValue":[8,"end-value"],"value":[1032]}]]],["lu-button.cjs",[[1,"lu-button",{"color":[1],"buttonType":[1025,"button-type"],"disabled":[516],"expand":[513],"fill":[1537],"href":[1],"shape":[513],"size":[513],"strong":[4],"type":[1],"keyFocus":[32]}]]],["lu-card.cjs",[[1,"lu-card",{"color":[1]}]]],["lu-card-buttons.cjs",[[1,"lu-card-buttons"]]],["lu-card-content.cjs",[[0,"lu-card-content"]]],["lu-card-footer.cjs",[[1,"lu-card-footer",{"color":[1],"translucent":[4]}]]],["lu-card-header.cjs",[[1,"lu-card-header",{"color":[1],"translucent":[4]}]]],["lu-card-title.cjs",[[1,"lu-card-title",{"color":[1]}]]],["lu-checkbox.cjs",[[1,"lu-checkbox",{"color":[1],"name":[1],"labeledById":[1,"labeled-by-id"],"checked":[1028],"disabled":[4],"isExternallyManaged":[4,"is-externally-managed"],"value":[8],"keyFocus":[32],"hasFocus":[32]}]]],["lu-checkbox-group.cjs",[[4,"lu-checkbox-group",{"direction":[1],"id":[1537],"name":[1],"required":[4],"value":[1040],"setFocus":[64],"getValues":[64]},[[0,"luCheckboxDidLoad","onCheckboxDidLoad"],[0,"luCheckboxDidUnload","onCheckboxDidUnload"]]]]],["lu-col.cjs",[[1,"lu-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["lu-fab.cjs",[[1,"lu-fab",{"horizontal":[1],"vertical":[1],"edge":[4],"activated":[1028],"close":[64]},[[0,"click","onClick"]]]]],["lu-fab-list.cjs",[[1,"lu-fab-list",{"activated":[4],"side":[1]}]]],["lu-form-validation.cjs",[[0,"lu-form-validation",{"value":[1040],"isValid":[1540,"is-valid"],"isInvalid":[1540,"is-invalid"],"formGroups":[32]},[[0,"luFormGroupDidLoad","onFormGroupDidLoad"],[0,"luFormGroupDidUnload","onFormGroupDidUnload"]]]]],["lu-grid.cjs",[[1,"lu-grid",{"fixed":[4]}]]],["lu-header.cjs",[[1,"lu-header",{"color":[1],"preHeader":[4,"pre-header"]}]]],["lu-radio.cjs",[[1,"lu-radio",{"color":[1],"labeledById":[1,"labeled-by-id"],"name":[1],"disabled":[4],"checked":[1028],"value":[1032],"hasFocus":[32]},[[0,"click","onClick"]]]]],["lu-radio-group.cjs",[[0,"lu-radio-group",{"allowEmptySelection":[4,"allow-empty-selection"],"direction":[1],"id":[1537],"name":[1],"required":[4],"value":[1032],"setFocus":[64]},[[0,"luRadioDidLoad","onRadioDidLoad"],[0,"luRadioDidUnload","onRadioDidUnload"],[0,"luSelect","onRadioSelect"],[0,"luDeselect","onRadioDeselect"]]]]],["lu-row.cjs",[[1,"lu-row"]]],["lu-select.cjs",[[1,"lu-select",{"id":[1537],"color":[1],"invalid":[4],"name":[1],"ariaLabel":[1,"aria-label"],"disabled":[4],"placeholder":[1],"helpText":[1,"help-text"],"selectedValue":[1025,"selected-value"],"showPlaceholderOption":[4,"show-placeholder-option"],"required":[4],"options":[1040],"valid":[4],"isValid":[32],"setFocus":[64]}]]],["lu-skeleton-text.cjs",[[1,"lu-skeleton-text",{"width":[1]}]]],["lu-spinner.cjs",[[1,"lu-spinner",{"dataColor":[1,"data-color"],"dataScale":[2,"data-scale"],"dataDuration":[2,"data-duration"],"dataPaused":[4,"data-paused"],"dataHidden":[4,"data-hidden"],"dataMessage":[1,"data-message"]}]]],["lu-tab.cjs",[[1,"lu-tab",{"active":[1028],"labeledById":[1025,"labeled-by-id"],"name":[8],"noSlide":[4,"no-slide"]},[[0,"click","onClick"]]]]],["lu-tabs.cjs",[[1,"lu-tabs",{"value":[1025],"noSlide":[4,"no-slide"],"tabs":[32],"tabIncrement":[32],"pos":[32],"left":[32],"width":[32],"elementResized":[64]},[[0,"luTabDidLoad","onTabDidLoad"],[0,"luTabDidUnload","onTabDidUnload"],[0,"luTabSelect","onTabSelect"]]]]],["mylu-breakpoints.cjs",[[1,"mylu-breakpoints",{"sm":[2],"md":[2],"lg":[2],"xl":[2],"currentBreakpoint":[32],"currentWidth":[32],"currentHeight":[32]},[[9,"resize","onResize"]]]]],["lu-img.cjs",[[1,"lu-img",{"alt":[1],"src":[1],"loadSrc":[32]}]]],["lu-label.cjs",[[6,"lu-label",{"color":[1],"labelText":[1,"label-text"],"required":[4],"optional":[4],"forId":[513,"for-id"],"id":[1537],"invalid":[4],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"]}]]],["lu-icon_6.cjs",[[0,"mylu-set-menu",{"sets":[16],"activeSetId":[2,"active-set-id"],"canReorder":[4,"can-reorder"],"orderedSets":[32]},[[0,"luSelectedSetUpdated","onLuSelectedSet"],[0,"luReorderSet","onLuReorderSet"]]],[1,"mylu-set",{"canReorder":[4,"can-reorder"],"setId":[2,"set-id"],"isActive":[1028,"is-active"],"showActiveBar":[4,"show-active-bar"],"setTitle":[1,"set-title"],"order":[2],"isReordering":[4,"is-reordering"],"translationTracker":[2,"translation-tracker"]},[[0,"click","onClick"]]],[1,"mylu-set-menu-bar",{"color":[1],"selectedSet":[1026,"selected-set"],"sets":[32],"cloneSets":[32],"circleDragging":[32],"selectedItemHeight":[32],"isTransitioning":[32],"transitioningTimeout":[32]},[[0,"luSetDidLoad","onSetDidLoad"],[0,"luSetDidUnload","onSetDidUnload"],[2,"circleDragStart","onCircleDragStart"],[0,"circleDragEnd","onCircleDragEnd"],[0,"luSelect","onSetSelection"],[1,"drag","onMouseMove"]]],[1,"mylu-dot",{"backgroundColor":[1,"background-color"],"isActionable":[4,"is-actionable"]}],[1,"mylu-circle",{"backgroundColor":[1,"background-color"],"isActionable":[4,"is-actionable"],"isOutline":[4,"is-outline"],"isDraggable":[4,"is-draggable"],"setId":[2,"set-id"],"hideDecorators":[4,"hide-decorators"],"isDragging":[32]},[[3,"dragstart","onDragStart"],[2,"dragend","onDragEnd"]]],[1,"lu-icon",{"color":[1],"mode":[1],"ariaLabel":[1537,"aria-label"],"ios":[1],"md":[1],"flipRtl":[4,"flip-rtl"],"name":[1],"src":[1],"icon":[1],"size":[1],"svgContent":[32],"isVisible":[32]}]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/cjs/lu-button.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@ const __chunk_3 = require('./chunk-e7931fe6.js');

dist/cjs/lu-card-buttons.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class CardButtons {

dist/cjs/lu-card-content.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class CardContent {

dist/cjs/lu-card-footer.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-card-header.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-card-image.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class CardImage {

dist/cjs/lu-card-title.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-card.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-checkbox-group.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class CheckboxGroup {

dist/cjs/lu-checkbox.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class Checkbox {

dist/cjs/lu-col.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ const SIZE_TO_MEDIA = {

dist/cjs/lu-fab-button.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-fab-list.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class FabList {

dist/cjs/lu-fab.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class Fab {

dist/cjs/lu-form-group.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-form-validation.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class FormValidation {

dist/cjs/lu-grid.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class Grid {

dist/cjs/lu-header.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-img.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class Img {

dist/cjs/lu-input.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@ const __chunk_3 = require('./chunk-e7931fe6.js');

dist/cjs/lu-label.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-radio-group.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class RadioGroup {

dist/cjs/lu-radio.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-row.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class Row {

dist/cjs/lu-select.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@ const __chunk_3 = require('./chunk-e7931fe6.js');

dist/cjs/lu-side-menu.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-skeleton-text.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class SkeletonText {

dist/cjs/lu-spinner.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 const __chunk_2 = require('./chunk-e423a427.js');
@@ -8,0 +8,0 @@

dist/cjs/lu-tab.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class Tab {

dist/cjs/lu-tabs.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class Tabs {

dist/cjs/lu-toggle.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -8,0 +8,0 @@ class Toggle {

dist/cjs/mylu-avatar.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
@@ -12,25 +12,24 @@ class Avatar {
         /**
-         * Set when the lu-img component lets us know the image is loaded
+         * Reflects the lu-img component loaded state
          */
         this.imgLoaded = false;
         /**
-         * Signifies we need to show the action or the lower right dot
+         * Show the notification dot (upper right by default)
          */
-        this.showAction = false;
+        this.showNotification = false;
         /**
-         * lower right dot background color
+         * Show the action dot (bottom-right by default)
          */
-        this.actionBackgroundColor = 'mylu_primary_shade';
-        this.onClick = (ev) => {
-            ev.preventDefault();
-            this.myluAvatarClicked.emit();
-        };
-        this.myluAvatarClicked = __chunk_1.createEvent(this, "myluAvatarClicked", 7);
+        this.showAction = false;
+        /*
+          Sets the actionability of the underlying circle.
+        */
+        this.isActionable = false;
     }
     render() {
-        return (__chunk_1.h(__chunk_1.Host, null, __chunk_1.h("button", { class: "mylu-avatar-button", onClick: this.onClick }, __chunk_1.h("mylu-circle", { isPresentational: true, isImage: true, class: "mylu-avatar-mylu-circle", "background-color": "mylu_avatar_grey" }, __chunk_1.h("mylu-dot", { class: this.showAction ? 'mylu-avatar-mylu-dot mylu-visible' : 'mylu-avatar-mylu-dot', isPresentational: true, slot: "action", "background-color": this.actionBackgroundColor }, this.actionIcon ? __chunk_1.h("lu-icon", { name: this.actionIcon }) : null), __chunk_1.h("div", { class: "mylu-avatar-image-container" }, this.imgUrl ? __chunk_1.h("lu-img", { onLuImgDidLoad: () => this.imgLoaded = true, class: this.imgLoaded ? 'mylu-avatar-image-container-lu-img mylu-visible' : 'mylu-avatar-image-container-lu-img', src: this.imgUrl }) : null, !this.imgUrl ? __chunk_1.h("lu-icon", { name: "lu-baseline-person" }) : null)))));
+        return (__chunk_1.h(__chunk_1.Host, null, __chunk_1.h("mylu-circle", { "background-color": this.circleBackgroundColor || "mylu_avatar_grey", "is-actionable": this.isActionable }, __chunk_1.h("mylu-dot", { "aria-hidden": this.showNotification ? false : true, slot: "notification", "background-color": this.notificationBackgroundColor || "mylu_danger" }), __chunk_1.h("mylu-dot", { "aria-hidden": this.showAction ? false : true, slot: "action", "background-color": this.actionBackgroundColor || "mylu_primary_shade" }, __chunk_1.h("lu-icon", { name: this.actionIcon || "settings" })), __chunk_1.h("lu-icon", { name: "lu-baseline-person", color: "mylu_dark", "aria-hidden": this.imgLoaded ? true : false }), this.imgUrl && (__chunk_1.h("lu-img", { onLuImgDidLoad: () => (this.imgLoaded = true), "aria-hidden": this.imgLoaded ? false : true, src: this.imgUrl })))));
     }
-    static get style() { return ".mylu-avatar-mylu-circle{--mylu-circle-font-size:38px;--mylu-circle-diameter:36px;-webkit-box-sizing:border-box;box-sizing:border-box}.mylu-avatar-image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.mylu-avatar-image-container lu-icon{margin-bottom:-3px}.mylu-avatar-mylu-dot{-webkit-transition:opacity 1s;transition:opacity 1s;opacity:0;visibility:hidden}.mylu-avatar-mylu-dot.mylu-visible{opacity:1;visibility:visible}.mylu-avatar-image-container-lu-img{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;opacity:0}.mylu-avatar-image-container-lu-img.mylu-visible{opacity:1}.mylu-avatar-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;border:none;outline:inherit;background:none;color:inherit;font:inherit;cursor:pointer}"; }
+    static get style() { return "mylu-avatar{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}mylu-avatar mylu-circle{--mylu-circle-border-color:#fff;--mylu-circle-diameter:2.375rem;--mylu-circle-notification-right:-18%;--mylu-circle-notification-top:-3%;--mylu-circle-action-right:-18%;--mylu-circle-action-bottom:-3%;--mylu-circle-font-size:2.375rem}mylu-avatar mylu-dot{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:0}mylu-avatar mylu-dot:not([aria-hidden]){opacity:1}mylu-avatar lu-icon{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:1}mylu-avatar lu-icon[aria-hidden]{opacity:0}mylu-avatar lu-img{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:0}mylu-avatar lu-img:not([aria-hidden]){opacity:1}"; }
 }
 
 exports.mylu_avatar = Avatar;

dist/cjs/uxmylupatterns.cjs.js

 'use strict';
 
-const __chunk_1 = require('./uxmylupatterns-aa1e11b9.js');
+const __chunk_1 = require('./chunk-0e1a80e2.js');
 
 __chunk_1.patchBrowser().then(resourcesUrl => {
-  return __chunk_1.bootstrapLazy([["mylu-avatar.cjs",[[0,"mylu-avatar",{"showAction":[4,"show-action"],"actionIcon":[1,"action-icon"],"actionBackgroundColor":[1,"action-background-color"],"imgUrl":[1,"img-url"],"imgLoaded":[32]}]]],["lu-card-image.cjs",[[1,"lu-card-image",{"altText":[1,"alt-text"],"iconColor":[1,"icon-color"],"iconName":[1,"icon-name"],"iconSize":[1,"icon-size"],"isIcon":[4,"is-icon"],"src":[1]}]]],["lu-fab-button.cjs",[[1,"lu-fab-button",{"color":[1],"activated":[4],"disabled":[4],"href":[1],"isExternallyManaged":[4,"is-externally-managed"],"show":[1028],"selected":[1028],"toggleButton":[4,"toggle-button"],"translucent":[4],"type":[1],"size":[1],"value":[8],"keyFocus":[32]}]]],["lu-form-group.cjs",[[1,"lu-form-group",{"clearErrorStateOnClearInput":[4,"clear-error-state-on-clear-input"],"clearInput":[4,"clear-input"],"color":[1],"clearOnEdit":[1028,"clear-on-edit"],"errorMessage":[1025,"error-message"],"externallyDeemedValid":[1028,"externally-deemed-valid"],"externallyDeemedInvalid":[1028,"externally-deemed-invalid"],"forId":[1025,"for-id"],"helperText":[1,"helper-text"],"id":[1537],"isExternallyValidated":[4,"is-externally-validated"],"isValidatedOnSubmission":[4,"is-validated-on-submission"],"labelText":[1,"label-text"],"updateTrigger":[1,"update-trigger"],"value":[32],"isCheckboxGroup":[32],"isValid":[32],"isInvalid":[32],"isSelect":[32],"isRadioGroup":[32],"isRequired":[32],"needsEmailValidation":[32],"needsPatternValidation":[32],"needsPasswordValidation":[32],"pattern":[32],"isInput":[32],"getValidationValues":[64]}]]],["lu-input.cjs",[[1,"lu-input",{"accept":[1],"autocomplete":[1],"autocapitalize":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[1028,"clear-on-edit"],"capture":[1],"checked":[4],"color":[1],"debounce":[2],"disabled":[4],"form":[1],"id":[1537],"inputmode":[1],"invalid":[4],"list":[1],"max":[8],"min":[8],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"prefixIcon":[1,"prefix-icon"],"prefixIconClickable":[4,"prefix-icon-clickable"],"suffixIcon":[1025,"suffix-icon"],"suffixIconClickable":[1028,"suffix-icon-clickable"],"readOnly":[4,"read-only"],"required":[4],"size":[2],"spellcheck":[4],"step":[8],"tabIndex":[2,"tab-index"],"type":[1],"valid":[4],"value":[1025],"hasFocus":[32],"setFocus":[64]}]]],["lu-side-menu.cjs",[[1,"lu-side-menu",{"color":[1],"isVisible":[1028,"is-visible"],"isCollapsible":[1540,"is-collapsible"],"isCollapsed":[1540,"is-collapsed"],"hasBoxShadow":[4,"has-box-shadow"],"externallyManaged":[4,"externally-managed"],"makeVisible":[64],"isHidden":[64],"collapsedHandler":[64]},[[0,"keydown","handleEscape"]]]]],["lu-toggle.cjs",[[1,"lu-toggle",{"startSelected":[1028,"start-selected"],"startText":[1,"start-text"],"startValue":[8,"start-value"],"endText":[1,"end-text"],"endValue":[8,"end-value"],"value":[1032]}]]],["lu-button.cjs",[[1,"lu-button",{"color":[1],"buttonType":[1025,"button-type"],"disabled":[516],"expand":[513],"fill":[1537],"href":[1],"shape":[513],"size":[513],"strong":[4],"type":[1],"keyFocus":[32]}]]],["lu-card.cjs",[[1,"lu-card",{"color":[1]}]]],["lu-card-buttons.cjs",[[1,"lu-card-buttons"]]],["lu-card-content.cjs",[[0,"lu-card-content"]]],["lu-card-footer.cjs",[[1,"lu-card-footer",{"color":[1],"translucent":[4]}]]],["lu-card-header.cjs",[[1,"lu-card-header",{"color":[1],"translucent":[4]}]]],["lu-card-title.cjs",[[1,"lu-card-title",{"color":[1]}]]],["lu-checkbox.cjs",[[1,"lu-checkbox",{"color":[1],"name":[1],"labeledById":[1,"labeled-by-id"],"checked":[1028],"disabled":[4],"isExternallyManaged":[4,"is-externally-managed"],"value":[8],"keyFocus":[32],"hasFocus":[32]}]]],["lu-checkbox-group.cjs",[[4,"lu-checkbox-group",{"direction":[1],"id":[1537],"name":[1],"required":[4],"value":[1040],"setFocus":[64],"getValues":[64]},[[0,"luCheckboxDidLoad","onCheckboxDidLoad"],[0,"luCheckboxDidUnload","onCheckboxDidUnload"]]]]],["lu-col.cjs",[[1,"lu-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["lu-fab.cjs",[[1,"lu-fab",{"horizontal":[1],"vertical":[1],"edge":[4],"activated":[1028],"close":[64]},[[0,"click","onClick"]]]]],["lu-fab-list.cjs",[[1,"lu-fab-list",{"activated":[4],"side":[1]}]]],["lu-form-validation.cjs",[[0,"lu-form-validation",{"value":[1040],"isValid":[1540,"is-valid"],"isInvalid":[1540,"is-invalid"],"formGroups":[32]},[[0,"luFormGroupDidLoad","onFormGroupDidLoad"],[0,"luFormGroupDidUnload","onFormGroupDidUnload"]]]]],["lu-grid.cjs",[[1,"lu-grid",{"fixed":[4]}]]],["lu-header.cjs",[[1,"lu-header",{"color":[1],"preHeader":[4,"pre-header"]}]]],["lu-radio.cjs",[[1,"lu-radio",{"color":[1],"labeledById":[1,"labeled-by-id"],"name":[1],"disabled":[4],"checked":[1028],"value":[1032],"hasFocus":[32]},[[0,"click","onClick"]]]]],["lu-radio-group.cjs",[[0,"lu-radio-group",{"allowEmptySelection":[4,"allow-empty-selection"],"direction":[1],"id":[1537],"name":[1],"required":[4],"value":[1032],"setFocus":[64]},[[0,"luRadioDidLoad","onRadioDidLoad"],[0,"luRadioDidUnload","onRadioDidUnload"],[0,"luSelect","onRadioSelect"],[0,"luDeselect","onRadioDeselect"]]]]],["lu-row.cjs",[[1,"lu-row"]]],["lu-select.cjs",[[1,"lu-select",{"id":[1537],"color":[1],"invalid":[4],"name":[1],"ariaLabel":[1,"aria-label"],"disabled":[4],"placeholder":[1],"helpText":[1,"help-text"],"selectedValue":[1025,"selected-value"],"showPlaceholderOption":[4,"show-placeholder-option"],"required":[4],"options":[1040],"valid":[4],"isValid":[32],"setFocus":[64]}]]],["lu-skeleton-text.cjs",[[1,"lu-skeleton-text",{"width":[1]}]]],["lu-spinner.cjs",[[1,"lu-spinner",{"dataColor":[1,"data-color"],"dataScale":[2,"data-scale"],"dataDuration":[2,"data-duration"],"dataPaused":[4,"data-paused"],"dataHidden":[4,"data-hidden"],"dataMessage":[1,"data-message"]}]]],["lu-tab.cjs",[[1,"lu-tab",{"active":[1028],"labeledById":[1025,"labeled-by-id"],"name":[8],"noSlide":[4,"no-slide"]},[[0,"click","onClick"]]]]],["lu-tabs.cjs",[[1,"lu-tabs",{"value":[1025],"noSlide":[4,"no-slide"],"tabs":[32],"tabIncrement":[32],"pos":[32],"left":[32],"width":[32],"elementResized":[64]},[[0,"luTabDidLoad","onTabDidLoad"],[0,"luTabDidUnload","onTabDidUnload"],[0,"luTabSelect","onTabSelect"]]]]],["lu-img.cjs",[[1,"lu-img",{"alt":[1],"src":[1],"loadSrc":[32]}]]],["lu-label.cjs",[[6,"lu-label",{"color":[1],"labelText":[1,"label-text"],"required":[4],"optional":[4],"forId":[513,"for-id"],"id":[1537],"invalid":[4],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"]}]]],["lu-icon_7.cjs",[[0,"mylu-set-menu",{"sets":[16],"activeSetId":[2,"active-set-id"],"canReorder":[4,"can-reorder"],"spaceTop":[2,"space-top"],"orderedSets":[32]},[[0,"luSelectedSetUpdated","onLuSelectedSet"],[0,"luReorderSet","onLuReorderSet"]]],[1,"mylu-breakpoints",{"sm":[2],"md":[2],"lg":[2],"xl":[2],"currentBreakpoint":[32],"currentWidth":[32],"currentHeight":[32]},[[9,"resize","onResize"]]],[1,"mylu-set",{"canReorder":[4,"can-reorder"],"setId":[2,"set-id"],"isActive":[1028,"is-active"],"showActiveBar":[4,"show-active-bar"],"setTitle":[1,"set-title"],"order":[2],"isReordering":[4,"is-reordering"],"translationTracker":[2,"translation-tracker"]},[[0,"click","onClick"]]],[1,"mylu-set-menu-bar",{"color":[1],"spaceTop":[2,"space-top"],"selectedSet":[1026,"selected-set"],"sets":[32],"cloneSets":[32],"circleDragging":[32],"selectedItemHeight":[32]},[[0,"luSetDidLoad","onSetDidLoad"],[0,"luSetDidUnload","onSetDidUnload"],[2,"myluCircleDrag","onMyluCircleDrag"],[0,"myluCircleDragEnd","onMyluCircleDragEnd"],[0,"luSelect","onSetSelection"],[1,"drag","onMouseMove"]]],[1,"mylu-circle",{"backgroundColor":[1,"background-color"],"isDraggable":[4,"is-draggable"],"isPresentational":[4,"is-presentational"],"setId":[2,"set-id"],"isImage":[4,"is-image"],"outline":[4],"isDragging":[32]},[[3,"dragstart","onDragStart"],[0,"dragend","onDragEnd"]]],[1,"mylu-dot",{"backgroundColor":[1,"background-color"],"isPresentational":[4,"is-presentational"]}],[1,"lu-icon",{"color":[1],"mode":[1],"ariaLabel":[1537,"aria-label"],"ios":[1],"md":[1],"flipRtl":[4,"flip-rtl"],"name":[1],"src":[1],"icon":[1],"size":[1],"svgContent":[32],"isVisible":[32]}]]]], { resourcesUrl });
+  return __chunk_1.bootstrapLazy([["mylu-avatar.cjs",[[0,"mylu-avatar",{"showNotification":[4,"show-notification"],"showAction":[4,"show-action"],"actionIcon":[1,"action-icon"],"circleBackgroundColor":[1,"circle-background-color"],"notificationBackgroundColor":[1,"notification-background-color"],"actionBackgroundColor":[1,"action-background-color"],"imgUrl":[1,"img-url"],"isActionable":[4,"is-actionable"],"imgLoaded":[32]}]]],["lu-card-image.cjs",[[1,"lu-card-image",{"altText":[1,"alt-text"],"iconColor":[1,"icon-color"],"iconName":[1,"icon-name"],"iconSize":[1,"icon-size"],"isIcon":[4,"is-icon"],"src":[1]}]]],["lu-fab-button.cjs",[[1,"lu-fab-button",{"color":[1],"activated":[4],"disabled":[4],"href":[1],"isExternallyManaged":[4,"is-externally-managed"],"show":[1028],"selected":[1028],"toggleButton":[4,"toggle-button"],"translucent":[4],"type":[1],"size":[1],"value":[8],"keyFocus":[32]}]]],["lu-form-group.cjs",[[1,"lu-form-group",{"clearErrorStateOnClearInput":[4,"clear-error-state-on-clear-input"],"clearInput":[4,"clear-input"],"color":[1],"clearOnEdit":[1028,"clear-on-edit"],"errorMessage":[1025,"error-message"],"externallyDeemedValid":[1028,"externally-deemed-valid"],"externallyDeemedInvalid":[1028,"externally-deemed-invalid"],"forId":[1025,"for-id"],"helperText":[1,"helper-text"],"id":[1537],"isExternallyValidated":[4,"is-externally-validated"],"isValidatedOnSubmission":[4,"is-validated-on-submission"],"labelText":[1,"label-text"],"updateTrigger":[1,"update-trigger"],"value":[32],"isCheckboxGroup":[32],"isValid":[32],"isInvalid":[32],"isSelect":[32],"isRadioGroup":[32],"isRequired":[32],"needsEmailValidation":[32],"needsPatternValidation":[32],"needsPasswordValidation":[32],"pattern":[32],"isInput":[32],"getValidationValues":[64]}]]],["lu-input.cjs",[[1,"lu-input",{"accept":[1],"autocomplete":[1],"autocapitalize":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[1028,"clear-on-edit"],"capture":[1],"checked":[4],"color":[1],"debounce":[2],"disabled":[4],"form":[1],"id":[1537],"inputmode":[1],"invalid":[4],"list":[1],"max":[8],"min":[8],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"prefixIcon":[1,"prefix-icon"],"prefixIconClickable":[4,"prefix-icon-clickable"],"suffixIcon":[1025,"suffix-icon"],"suffixIconClickable":[1028,"suffix-icon-clickable"],"readOnly":[4,"read-only"],"required":[4],"size":[2],"spellcheck":[4],"step":[8],"tabIndex":[2,"tab-index"],"type":[1],"valid":[4],"value":[1025],"hasFocus":[32],"setFocus":[64]}]]],["lu-side-menu.cjs",[[1,"lu-side-menu",{"color":[1],"isVisible":[1028,"is-visible"],"isCollapsible":[1540,"is-collapsible"],"isCollapsed":[1540,"is-collapsed"],"hasBoxShadow":[4,"has-box-shadow"],"externallyManaged":[4,"externally-managed"],"makeVisible":[64],"isHidden":[64],"collapsedHandler":[64]},[[0,"keydown","handleEscape"]]]]],["lu-toggle.cjs",[[1,"lu-toggle",{"startSelected":[1028,"start-selected"],"startText":[1,"start-text"],"startValue":[8,"start-value"],"endText":[1,"end-text"],"endValue":[8,"end-value"],"value":[1032]}]]],["lu-button.cjs",[[1,"lu-button",{"color":[1],"buttonType":[1025,"button-type"],"disabled":[516],"expand":[513],"fill":[1537],"href":[1],"shape":[513],"size":[513],"strong":[4],"type":[1],"keyFocus":[32]}]]],["lu-card.cjs",[[1,"lu-card",{"color":[1]}]]],["lu-card-buttons.cjs",[[1,"lu-card-buttons"]]],["lu-card-content.cjs",[[0,"lu-card-content"]]],["lu-card-footer.cjs",[[1,"lu-card-footer",{"color":[1],"translucent":[4]}]]],["lu-card-header.cjs",[[1,"lu-card-header",{"color":[1],"translucent":[4]}]]],["lu-card-title.cjs",[[1,"lu-card-title",{"color":[1]}]]],["lu-checkbox.cjs",[[1,"lu-checkbox",{"color":[1],"name":[1],"labeledById":[1,"labeled-by-id"],"checked":[1028],"disabled":[4],"isExternallyManaged":[4,"is-externally-managed"],"value":[8],"keyFocus":[32],"hasFocus":[32]}]]],["lu-checkbox-group.cjs",[[4,"lu-checkbox-group",{"direction":[1],"id":[1537],"name":[1],"required":[4],"value":[1040],"setFocus":[64],"getValues":[64]},[[0,"luCheckboxDidLoad","onCheckboxDidLoad"],[0,"luCheckboxDidUnload","onCheckboxDidUnload"]]]]],["lu-col.cjs",[[1,"lu-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["lu-fab.cjs",[[1,"lu-fab",{"horizontal":[1],"vertical":[1],"edge":[4],"activated":[1028],"close":[64]},[[0,"click","onClick"]]]]],["lu-fab-list.cjs",[[1,"lu-fab-list",{"activated":[4],"side":[1]}]]],["lu-form-validation.cjs",[[0,"lu-form-validation",{"value":[1040],"isValid":[1540,"is-valid"],"isInvalid":[1540,"is-invalid"],"formGroups":[32]},[[0,"luFormGroupDidLoad","onFormGroupDidLoad"],[0,"luFormGroupDidUnload","onFormGroupDidUnload"]]]]],["lu-grid.cjs",[[1,"lu-grid",{"fixed":[4]}]]],["lu-header.cjs",[[1,"lu-header",{"color":[1],"preHeader":[4,"pre-header"]}]]],["lu-radio.cjs",[[1,"lu-radio",{"color":[1],"labeledById":[1,"labeled-by-id"],"name":[1],"disabled":[4],"checked":[1028],"value":[1032],"hasFocus":[32]},[[0,"click","onClick"]]]]],["lu-radio-group.cjs",[[0,"lu-radio-group",{"allowEmptySelection":[4,"allow-empty-selection"],"direction":[1],"id":[1537],"name":[1],"required":[4],"value":[1032],"setFocus":[64]},[[0,"luRadioDidLoad","onRadioDidLoad"],[0,"luRadioDidUnload","onRadioDidUnload"],[0,"luSelect","onRadioSelect"],[0,"luDeselect","onRadioDeselect"]]]]],["lu-row.cjs",[[1,"lu-row"]]],["lu-select.cjs",[[1,"lu-select",{"id":[1537],"color":[1],"invalid":[4],"name":[1],"ariaLabel":[1,"aria-label"],"disabled":[4],"placeholder":[1],"helpText":[1,"help-text"],"selectedValue":[1025,"selected-value"],"showPlaceholderOption":[4,"show-placeholder-option"],"required":[4],"options":[1040],"valid":[4],"isValid":[32],"setFocus":[64]}]]],["lu-skeleton-text.cjs",[[1,"lu-skeleton-text",{"width":[1]}]]],["lu-spinner.cjs",[[1,"lu-spinner",{"dataColor":[1,"data-color"],"dataScale":[2,"data-scale"],"dataDuration":[2,"data-duration"],"dataPaused":[4,"data-paused"],"dataHidden":[4,"data-hidden"],"dataMessage":[1,"data-message"]}]]],["lu-tab.cjs",[[1,"lu-tab",{"active":[1028],"labeledById":[1025,"labeled-by-id"],"name":[8],"noSlide":[4,"no-slide"]},[[0,"click","onClick"]]]]],["lu-tabs.cjs",[[1,"lu-tabs",{"value":[1025],"noSlide":[4,"no-slide"],"tabs":[32],"tabIncrement":[32],"pos":[32],"left":[32],"width":[32],"elementResized":[64]},[[0,"luTabDidLoad","onTabDidLoad"],[0,"luTabDidUnload","onTabDidUnload"],[0,"luTabSelect","onTabSelect"]]]]],["mylu-breakpoints.cjs",[[1,"mylu-breakpoints",{"sm":[2],"md":[2],"lg":[2],"xl":[2],"currentBreakpoint":[32],"currentWidth":[32],"currentHeight":[32]},[[9,"resize","onResize"]]]]],["lu-img.cjs",[[1,"lu-img",{"alt":[1],"src":[1],"loadSrc":[32]}]]],["lu-label.cjs",[[6,"lu-label",{"color":[1],"labelText":[1,"label-text"],"required":[4],"optional":[4],"forId":[513,"for-id"],"id":[1537],"invalid":[4],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"]}]]],["lu-icon_6.cjs",[[0,"mylu-set-menu",{"sets":[16],"activeSetId":[2,"active-set-id"],"canReorder":[4,"can-reorder"],"orderedSets":[32]},[[0,"luSelectedSetUpdated","onLuSelectedSet"],[0,"luReorderSet","onLuReorderSet"]]],[1,"mylu-set",{"canReorder":[4,"can-reorder"],"setId":[2,"set-id"],"isActive":[1028,"is-active"],"showActiveBar":[4,"show-active-bar"],"setTitle":[1,"set-title"],"order":[2],"isReordering":[4,"is-reordering"],"translationTracker":[2,"translation-tracker"]},[[0,"click","onClick"]]],[1,"mylu-set-menu-bar",{"color":[1],"selectedSet":[1026,"selected-set"],"sets":[32],"cloneSets":[32],"circleDragging":[32],"selectedItemHeight":[32],"isTransitioning":[32],"transitioningTimeout":[32]},[[0,"luSetDidLoad","onSetDidLoad"],[0,"luSetDidUnload","onSetDidUnload"],[2,"circleDragStart","onCircleDragStart"],[0,"circleDragEnd","onCircleDragEnd"],[0,"luSelect","onSetSelection"],[1,"drag","onMouseMove"]]],[1,"mylu-dot",{"backgroundColor":[1,"background-color"],"isActionable":[4,"is-actionable"]}],[1,"mylu-circle",{"backgroundColor":[1,"background-color"],"isActionable":[4,"is-actionable"],"isOutline":[4,"is-outline"],"isDraggable":[4,"is-draggable"],"setId":[2,"set-id"],"hideDecorators":[4,"hide-decorators"],"isDragging":[32]},[[3,"dragstart","onDragStart"],[2,"dragend","onDragEnd"]]],[1,"lu-icon",{"color":[1],"mode":[1],"ariaLabel":[1537,"aria-label"],"ios":[1],"md":[1],"flipRtl":[4,"flip-rtl"],"name":[1],"src":[1],"icon":[1],"size":[1],"svgContent":[32],"isVisible":[32]}]]]], { resourcesUrl });
 });

dist/collection/collection-manifest.json

 {
   "entries": [
+    "components/avatar/avatar.js",
     "components/breakpoints/breakpoints.js",
-    "components/avatar/avatar.js",
     "components/circle/circle.js",
+    "components/dot/dot.js",
     "components/set-menu/set-menu.js",
-    "components/dot/dot.js",
     "components/set/set.js",
@@ -13,4 +13,4 @@ "components/set-menu-bar/set-menu-bar.js"
     "name": "@stencil/core",
-    "version": "1.0.3",
-    "typescriptVersion": "3.5.1"
+    "version": "1.1.1",
+    "typescriptVersion": "3.5.2"
   },
@@ -17,0 +17,0 @@ "collections": [

dist/collection/components/avatar/avatar.js

@@ -1,29 +0,29 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class Avatar {
     constructor() {
         /**
-         * Set when the lu-img component lets us know the image is loaded
+         * Reflects the lu-img component loaded state
          */
         this.imgLoaded = false;
         /**
-         * Signifies we need to show the action or the lower right dot
+         * Show the notification dot (upper right by default)
          */
-        this.showAction = false;
+        this.showNotification = false;
         /**
-         * lower right dot background color
+         * Show the action dot (bottom-right by default)
          */
-        this.actionBackgroundColor = 'mylu_primary_shade';
-        this.onClick = (ev) => {
-            ev.preventDefault();
-            this.myluAvatarClicked.emit();
-        };
+        this.showAction = false;
+        /*
+          Sets the actionability of the underlying circle.
+        */
+        this.isActionable = false;
     }
     render() {
         return (h(Host, null,
-            h("button", { class: "mylu-avatar-button", onClick: this.onClick },
-                h("mylu-circle", { isPresentational: true, isImage: true, class: "mylu-avatar-mylu-circle", "background-color": "mylu_avatar_grey" },
-                    h("mylu-dot", { class: this.showAction ? 'mylu-avatar-mylu-dot mylu-visible' : 'mylu-avatar-mylu-dot', isPresentational: true, slot: "action", "background-color": this.actionBackgroundColor }, this.actionIcon ? h("lu-icon", { name: this.actionIcon }) : null),
-                    h("div", { class: "mylu-avatar-image-container" },
-                        this.imgUrl ? h("lu-img", { onLuImgDidLoad: () => this.imgLoaded = true, class: this.imgLoaded ? 'mylu-avatar-image-container-lu-img mylu-visible' : 'mylu-avatar-image-container-lu-img', src: this.imgUrl }) : null,
-                        !this.imgUrl ? h("lu-icon", { name: "lu-baseline-person" }) : null)))));
+            h("mylu-circle", { "background-color": this.circleBackgroundColor || "mylu_avatar_grey", "is-actionable": this.isActionable },
+                h("mylu-dot", { "aria-hidden": this.showNotification ? false : true, slot: "notification", "background-color": this.notificationBackgroundColor || "mylu_danger" }),
+                h("mylu-dot", { "aria-hidden": this.showAction ? false : true, slot: "action", "background-color": this.actionBackgroundColor || "mylu_primary_shade" },
+                    h("lu-icon", { name: this.actionIcon || "settings" })),
+                h("lu-icon", { name: "lu-baseline-person", color: "mylu_dark", "aria-hidden": this.imgLoaded ? true : false }),
+                this.imgUrl && (h("lu-img", { onLuImgDidLoad: () => (this.imgLoaded = true), "aria-hidden": this.imgLoaded ? false : true, src: this.imgUrl })))));
     }
@@ -38,2 +38,20 @@ static get is() { return "mylu-avatar"; }
     static get properties() { return {
+        "showNotification": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Show the notification dot (upper right by default)"
+            },
+            "attribute": "show-notification",
+            "reflect": false,
+            "defaultValue": "false"
+        },
         "showAction": {
@@ -51,3 +69,3 @@ "type": "boolean",
                 "tags": [],
-                "text": "Signifies we need to show the action or the lower right dot"
+                "text": "Show the action dot (bottom-right by default)"
             },
@@ -70,3 +88,3 @@ "attribute": "show-action",
                 "tags": [],
-                "text": "lower right dot icon"
+                "text": "Sets the icon for the action dot"
             },
@@ -76,2 +94,36 @@ "attribute": "action-icon",
         },
+        "circleBackgroundColor": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Sets the background color for the circle"
+            },
+            "attribute": "circle-background-color",
+            "reflect": false
+        },
+        "notificationBackgroundColor": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "Sets the background color for the notification slot icon"
+            },
+            "attribute": "notification-background-color",
+            "reflect": false
+        },
         "actionBackgroundColor": {
@@ -89,7 +141,6 @@ "type": "string",
                 "tags": [],
-                "text": "lower right dot background color"
+                "text": "Sets the background color for the action slot icon"
             },
             "attribute": "action-background-color",
-            "reflect": false,
-            "defaultValue": "'mylu_primary_shade'"
+            "reflect": false
         },
@@ -108,6 +159,24 @@ "imgUrl": {
                 "tags": [],
-                "text": "image url of the profile"
+                "text": "Sets the url of the profile image"
             },
             "attribute": "img-url",
             "reflect": false
+        },
+        "isActionable": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "is-actionable",
+            "reflect": false,
+            "defaultValue": "false"
         }
@@ -118,18 +187,2 @@ }; }
     }; }
-    static get events() { return [{
-            "method": "myluAvatarClicked",
-            "name": "myluAvatarClicked",
-            "bubbles": true,
-            "cancelable": true,
-            "composed": true,
-            "docs": {
-                "tags": [],
-                "text": "lets our host know when the button has been clicked"
-            },
-            "complexType": {
-                "original": "null",
-                "resolved": "null",
-                "references": {}
-            }
-        }]; }
 }

dist/collection/components/circle/circle.js

@@ -1,25 +0,25 @@
-import { Host, h } from '@stencil/core';
-import { createColorClasses } from '../../utils/theme';
+import { Host, h } from "@stencil/core";
+import { createColorClasses } from "../../utils/theme";
 export class Circle {
     constructor() {
         this.isDragging = false;
+        this.isActionable = false;
+        this.isOutline = false;
         this.isDraggable = false;
-        this.isPresentational = false;
-        this.isImage = false;
-        this.outline = false;
-        this.onClick = (ev) => {
-            ev.preventDefault();
-            if (!this.isPresentational) {
-                this.myluCircleClicked.emit();
-            }
+        this.hideDecorators = false;
+        this.onClick = (event) => {
+            event.preventDefault();
+            return this.isActionable && !this.isOutline
+                ? this.circleClicked.emit()
+                : null;
         };
     }
     onIsDraggingChange(newValue) {
-        this.outline = newValue;
+        this.isOutline = newValue;
     }
     onDragStart(ev) {
         // for firefox keep track of this shadow dom issue, should be fixed in firefox 68 - https://github.com/vaadin/flow/issues/5606 - https://bugzilla.mozilla.org/show_bug.cgi?id=1521471
-        ev.dataTransfer.setData('text', 'icon');
+        ev.dataTransfer.setData("text", "icon");
         this.isDragging = true;
-        this.myluCircleDrag.emit();
+        this.circleDragStart.emit();
         return false;
@@ -30,14 +30,11 @@ }
         this.isDragging = false;
-        this.myluCircleDragEnd.emit();
+        this.circleDragEnd.emit();
     }
     render() {
-        const TagType = this.isPresentational || this.outline ? 'div' : 'button';
-        return (h(Host, { class: Object.assign({}, createColorClasses(this.backgroundColor), { 'is-outline': this.outline, 'is-image': this.isImage, 'is-draggable': this.isDraggable }), draggable: this.isDraggable ? "true" : "false" },
-            h(TagType, { class: 'container', onClick: this.onClick },
-                h("div", { class: 'circle' },
-                    h("slot", null)),
-                h("div", { class: "action" },
-                    h("slot", { name: "action" })),
-                h("div", { class: "notification" },
-                    h("slot", { name: "notification" })))));
+        const TagType = this.isActionable ? "button" : "span";
+        return (h(Host, { class: Object.assign({}, createColorClasses(this.backgroundColor), { "hide-decorators": this.hideDecorators, "is-draggable": this.isDraggable, "is-outline": this.isOutline }) },
+            h(TagType, { class: "container", onClick: this.onClick },
+                h("slot", null),
+                h("slot", { name: "action" }),
+                h("slot", { name: "notification" }))));
     }
@@ -70,3 +67,3 @@ static get is() { return "mylu-circle"; }
         },
-        "isDraggable": {
+        "isActionable": {
             "type": "boolean",
@@ -85,7 +82,7 @@ "mutable": false,
             },
-            "attribute": "is-draggable",
+            "attribute": "is-actionable",
             "reflect": false,
             "defaultValue": "false"
         },
-        "isPresentational": {
+        "isOutline": {
             "type": "boolean",
@@ -104,12 +101,12 @@ "mutable": false,
             },
-            "attribute": "is-presentational",
+            "attribute": "is-outline",
             "reflect": false,
             "defaultValue": "false"
         },
-        "setId": {
-            "type": "number",
+        "isDraggable": {
+            "type": "boolean",
             "mutable": false,
             "complexType": {
-                "original": "number",
-                "resolved": "number",
+                "original": "boolean",
+                "resolved": "boolean",
                 "references": {}
@@ -123,11 +120,12 @@ },
             },
-            "attribute": "set-id",
-            "reflect": false
+            "attribute": "is-draggable",
+            "reflect": false,
+            "defaultValue": "false"
         },
-        "isImage": {
-            "type": "boolean",
+        "setId": {
+            "type": "number",
             "mutable": false,
             "complexType": {
-                "original": "boolean",
-                "resolved": "boolean",
+                "original": "number",
+                "resolved": "number",
                 "references": {}
@@ -141,7 +139,6 @@ },
             },
-            "attribute": "is-image",
-            "reflect": false,
-            "defaultValue": "false"
+            "attribute": "set-id",
+            "reflect": false
         },
-        "outline": {
+        "hideDecorators": {
             "type": "boolean",
@@ -160,3 +157,3 @@ "mutable": false,
             },
-            "attribute": "outline",
+            "attribute": "hide-decorators",
             "reflect": false,
@@ -170,4 +167,4 @@ "defaultValue": "false"
     static get events() { return [{
-            "method": "myluCircleClicked",
-            "name": "myluCircleClicked",
+            "method": "circleClicked",
+            "name": "circleClicked",
             "bubbles": true,
@@ -181,9 +178,9 @@ "cancelable": true,
             "complexType": {
-                "original": "void",
-                "resolved": "void",
+                "original": "any",
+                "resolved": "any",
                 "references": {}
             }
         }, {
-            "method": "myluCircleDrag",
-            "name": "myluCircleDrag",
+            "method": "circleDragStart",
+            "name": "circleDragStart",
             "bubbles": true,
@@ -197,9 +194,9 @@ "cancelable": true,
             "complexType": {
-                "original": "void",
-                "resolved": "void",
+                "original": "any",
+                "resolved": "any",
                 "references": {}
             }
         }, {
-            "method": "myluCircleDragEnd",
-            "name": "myluCircleDragEnd",
+            "method": "circleDragEnd",
+            "name": "circleDragEnd",
             "bubbles": true,
@@ -213,8 +210,7 @@ "cancelable": true,
             "complexType": {
-                "original": "void",
-                "resolved": "void",
+                "original": "any",
+                "resolved": "any",
                 "references": {}
             }
         }]; }
-    static get elementRef() { return "circle"; }
     static get watchers() { return [{
@@ -234,5 +230,5 @@ "propName": "isDragging",
             "target": undefined,
-            "capture": false,
+            "capture": true,
             "passive": false
         }]; }
 }

dist/collection/components/dot/dot.js

@@ -1,17 +0,20 @@
-import { Host, h } from '@stencil/core';
-import { createColorClasses } from '../../utils/theme';
+import { Host, h } from "@stencil/core";
+import { createColorClasses } from "../../utils/theme";
 export class Dot {
     constructor() {
-        this.isPresentational = false;
-        this.onClick = (ev) => {
-            ev.preventDefault();
-            this.myluDotClicked.emit();
+        /**
+         * Determines whether a button or span in rendered. This dot might be a very small click target.
+         */
+        this.isActionable = false;
+        this.handleClick = (event) => {
+            event.preventDefault();
+            return this.isActionable ? this.dotClicked.emit() : null;
         };
     }
     render() {
-        const TagType = this.isPresentational ? 'div' : 'button';
+        const TagType = this.isActionable ? "button" : "span";
         return (h(Host, { class: Object.assign({}, createColorClasses(this.backgroundColor)) },
-            h(TagType, { class: 'container', onClick: this.onClick },
-                h("div", { class: 'inner-container' },
-                    h("slot", null)))));
+            h(TagType, { class: "container", onClick: this.handleClick },
+                h("slot", null,
+                    h("lu-icon", { name: "lu-notification-dot" })))));
     }
@@ -39,3 +42,3 @@ static get is() { return "mylu-dot"; }
                 "tags": [],
-                "text": ""
+                "text": "Sets background color of the icon container."
             },
@@ -45,3 +48,3 @@ "attribute": "background-color",
         },
-        "isPresentational": {
+        "isActionable": {
             "type": "boolean",
@@ -58,5 +61,5 @@ "mutable": false,
                 "tags": [],
-                "text": ""
+                "text": "Determines whether a button or span in rendered. This dot might be a very small click target."
             },
-            "attribute": "is-presentational",
+            "attribute": "is-actionable",
             "reflect": false,
@@ -67,4 +70,4 @@ "defaultValue": "false"
     static get events() { return [{
-            "method": "myluDotClicked",
-            "name": "myluDotClicked",
+            "method": "dotClicked",
+            "name": "dotClicked",
             "bubbles": true,
@@ -75,3 +78,3 @@ "cancelable": true,
                 "tags": [],
-                "text": ""
+                "text": "If the dot is clicked, emits this custom event."
             },
@@ -78,0 +81,0 @@ "complexType": {

dist/collection/components/set-menu-bar/set-menu-bar.js

@@ -9,3 +9,3 @@ import { Host, h } from '@stencil/core';
         this.selectedItemHeight = null;
-        this.spaceTop = 0;
+        this.transitioningTimeout = null;
     }
@@ -46,7 +46,9 @@ onCircleDragging(newValue, oldValue) {
     }
-    onMyluCircleDrag(ev) {
+    onCircleDragStart(ev) {
         this.circleDragging = ev.target;
-        this.selectedItemHeight = this.sets.filter(set => set.setId === this.circleDragging.setId)[0].shadowRoot.querySelector('.container').scrollHeight;
+        this.selectedItemHeight = this.sets
+            .filter(set => set.setId === this.circleDragging.setId)[0]
+            .shadowRoot.querySelector('.container').scrollHeight;
     }
-    onMyluCircleDragEnd(ev) {
+    onCircleDragEnd(ev) {
         if (this.circleDragging && this.circleDragging.setId === ev.target.setId) {
@@ -75,45 +77,7 @@ const update = this.cloneSets.map(set => {
             if (height > 0) {
-                const targetFound = this.reorderData.filter(range => {
-                    return height <= range.bottom.end && height >= range.top.start;
-                });
-                if (targetFound.length > 0) {
-                    const targetData = targetFound[0];
-                    const newOrder = height <= targetData.top.end && height >= targetData.top.start ? {
-                        setId: targetData.setId,
-                        target: targetData.top.target,
-                        top: true
-                    } : height <= targetData.bottom.end && height >= targetFound[0].bottom.start ? {
-                        setId: targetData.setId,
-                        target: targetData.bottom.target,
-                        top: false
-                    } : null;
-                    if (newOrder) {
-                        const hoveredSet = this.cloneSets.filter((set) => set.setId === newOrder.setId)[0];
-                        const moving = this.cloneSets.filter((set) => set.setId === this.circleDragging.setId)[0];
-                        const diff = this.getOrder(this.cloneSets, hoveredSet) - this.getOrder(this.cloneSets, moving);
-                        const down = diff > 0;
-                        let targetOrder;
-                        if (down) {
-                            if (newOrder.top) {
-                                targetOrder = this.getOrder(this.cloneSets, hoveredSet);
-                            }
-                            else {
-                                targetOrder = this.getOrder(this.cloneSets, hoveredSet);
-                            }
-                        }
-                        else {
-                            if (newOrder.top) {
-                                targetOrder = this.getOrder(this.cloneSets, hoveredSet);
-                            }
-                            else {
-                                targetOrder = this.getOrder(this.cloneSets, hoveredSet) + 1;
-                            }
-                        }
-                        const absolute = Math.abs(diff);
-                        if (newOrder.setId !== moving.setId) {
-                            const needsToChange = absolute > 1 || (absolute === 1 && down ? !newOrder.top : newOrder.top);
-                            if (needsToChange) {
-                                this.reorderMove(this.getOrder(this.cloneSets, moving), targetOrder, down);
-                            }
-                        }
+                const target = this.findRelevantTarget(height);
+                if (target) {
+                    const organizedTargetData = this.organizeTargetData(target, height);
+                    if (organizedTargetData) {
+                        this.reorderIfNeeded(organizedTargetData);
                     }
@@ -124,2 +88,40 @@ }
     }
+    findRelevantTarget(height) {
+        const targetFound = this.targetOptions.filter((range) => {
+            return height <= range.bottom.end && height >= range.top.start;
+        });
+        if (targetFound.length === 1) {
+            return targetFound[0];
+        }
+        return null;
+    }
+    organizeTargetData(targetData, height) {
+        if (height <= targetData.top.end && height >= targetData.top.start) {
+            return {
+                setId: targetData.setId,
+                target: targetData.top.target,
+                top: true
+            };
+        }
+        if (height <= targetData.bottom.end && height >= targetData.bottom.start) {
+            return {
+                setId: targetData.setId,
+                target: targetData.bottom.target - 1,
+                top: false
+            };
+        }
+        return null;
+    }
+    reorderIfNeeded(organizedTargetData) {
+        const hoveredSetOrder = this.getOrder(this.cloneSets, this.cloneSets.filter((set) => set.setId === organizedTargetData.setId)[0]);
+        const moving = this.cloneSets.filter((set) => set.setId === this.circleDragging.setId)[0];
+        const movingSetOrder = this.getOrder(this.cloneSets, moving);
+        const diff = hoveredSetOrder - movingSetOrder;
+        const down = diff > 0;
+        const targetOrder = !down && !organizedTargetData.top ? hoveredSetOrder + 1 : hoveredSetOrder;
+        const absolute = Math.abs(diff);
+        if (organizedTargetData.setId !== moving.setId && (absolute > 1 || (absolute === 1 && down ? !organizedTargetData.top : organizedTargetData.top))) {
+            this.reorderMove(movingSetOrder, targetOrder, down);
+        }
+    }
     getOrder(targets, el) {
@@ -133,5 +135,5 @@ return targets.filter(set => set.setId === el.setId)[0].order;
             if (!hasSelected && set.setId === setId) {
-                // correct value for this radio
-                // but this radio isn't checked yet
-                // and we haven't found a checked yet
+                // correct value for this set
+                // but this set isn't selected yet
+                // and we haven't found a selected set yet
                 hasSelected = true;
@@ -141,4 +143,4 @@ set.isActive = true;
             else {
-                // this radio doesn't have the correct value
-                // or the radio group has been already checked
+                // this set doesn't have the correct value
+                // or the set group has been already checked
                 set.isActive = false;
@@ -148,6 +150,3 @@ }
     }
-    get reorderData() {
-        const documentHeight = this.setMenuBar.shadowRoot.querySelector('.container').scrollHeight + this.spaceTop;
-        //const documentHeight = document.body.scrollHeight
-        const containerHeight = this.setMenuBar.shadowRoot.querySelector('.container').scrollHeight;
+    get targetOptions() {
         if (!this.cloneSets || this.cloneSets.length === 0) {
@@ -157,8 +156,8 @@ const nodes = this.setMenuBar.children;
         }
-        let pileHeight = 0;
-        return this.cloneSets.map((set) => {
-            const height = set.shadowRoot.querySelector('.container').scrollHeight;
-            const tolerance = 30;
-            const start = documentHeight - containerHeight + pileHeight;
-            pileHeight = pileHeight + height;
+        return this.cloneSets.map(set => {
+            const setContainer = set.shadowRoot.querySelector('.container');
+            const boundingRect = setContainer.getBoundingClientRect();
+            const start = boundingRect.top;
+            const end = boundingRect.bottom;
+            const tolerance = 45;
             return {
@@ -168,9 +167,9 @@ order: set.order,
                 top: {
-                    start: start + set.translationTracker,
-                    end: start + tolerance + set.translationTracker,
-                    target: set.order
+                    start: start,
+                    end: start + tolerance,
+                    target: set.order // if it is in tii
                 },
                 bottom: {
-                    start: documentHeight - containerHeight + pileHeight - tolerance + set.translationTracker,
-                    end: documentHeight - containerHeight + pileHeight - 1 + set.translationTracker,
+                    start: end - tolerance,
+                    end: end,
                     target: set.order + 1
@@ -182,36 +181,58 @@ }
     reorderMove(fromOrder, toOrder, down) {
-        const itemHeight = this.selectedItemHeight;
-        this.cloneSets.forEach((set) => {
-            const style = set.style;
-            let value;
-            const affectedSet = this.cloneSets.filter(innerSet => set.setId === innerSet.setId)[0];
+        const check = this.cloneSets.map((set) => {
             if (down) {
                 if (set.order <= toOrder && set.order > fromOrder) {
-                    affectedSet.translationTracker = set.translationTracker - itemHeight;
-                    value = `translateY(${affectedSet.translationTracker}px)`;
-                    affectedSet.order = set.order - 1;
+                    return set.order - 1;
                 }
                 else if (set.order < toOrder && set.order >= fromOrder) {
-                    affectedSet.translationTracker = set.translationTracker + itemHeight;
-                    value = `translateY(${affectedSet.translationTracker}px)`;
-                    affectedSet.order = set.order + 1;
+                    return set.order + 1;
                 }
+                return set.order;
             }
             else {
                 if (set.order <= fromOrder && set.order > toOrder) {
-                    affectedSet.translationTracker = set.translationTracker - itemHeight;
-                    value = `translateY(${affectedSet.translationTracker}px)`;
-                    affectedSet.order = set.order - 1;
+                    return set.order - 1;
                 }
                 else if (set.order >= toOrder && set.order < fromOrder) {
-                    affectedSet.translationTracker = set.translationTracker + itemHeight;
-                    value = `translateY(${affectedSet.translationTracker}px)`;
-                    affectedSet.order = set.order + 1;
+                    return set.order + 1;
                 }
+                return set.order;
             }
-            if (value) {
-                style['transform'] = value;
-            }
         });
+        if (!this.hasDuplicates(check)) {
+            this.cloneSets.forEach((set) => {
+                let orderChanged = false;
+                if (down) {
+                    if (set.order <= toOrder && set.order > fromOrder) {
+                        set.translationTracker -= this.selectedItemHeight;
+                        orderChanged = true;
+                        set.order -= 1;
+                    }
+                    else if (set.order < toOrder && set.order >= fromOrder) {
+                        set.translationTracker += this.selectedItemHeight;
+                        orderChanged = true;
+                        set.order += 1;
+                    }
+                }
+                else {
+                    if (set.order <= fromOrder && set.order > toOrder) {
+                        set.translationTracker -= this.selectedItemHeight;
+                        orderChanged = true;
+                        set.order -= 1;
+                    }
+                    else if (set.order >= toOrder && set.order < fromOrder) {
+                        set.translationTracker += this.selectedItemHeight;
+                        orderChanged = true;
+                        set.order += 1;
+                    }
+                }
+                if (orderChanged) {
+                    set.style['transform'] = `translateY(${set.translationTracker}px)`;
+                }
+            });
+        }
     }
+    hasDuplicates(array) {
+        return (new Set(array)).size !== array.length;
+    }
     render() {
@@ -248,20 +269,2 @@ return (h(Host, { class: Object.assign({}, createColorClasses(this.color)) },
         },
-        "spaceTop": {
-            "type": "number",
-            "mutable": false,
-            "complexType": {
-                "original": "number",
-                "resolved": "number",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": ""
-            },
-            "attribute": "space-top",
-            "reflect": false,
-            "defaultValue": "0"
-        },
         "selectedSet": {
@@ -289,3 +292,5 @@ "type": "number",
         "circleDragging": {},
-        "selectedItemHeight": {}
+        "selectedItemHeight": {},
+        "isTransitioning": {},
+        "transitioningTimeout": {}
     }; }
@@ -323,3 +328,3 @@ static get events() { return [{
             "complexType": {
-                "original": "{ setId: number, order: number }[]",
+                "original": "{ setId: number; order: number }[]",
                 "resolved": "{ setId: number; order: number; }[]",
@@ -350,4 +355,4 @@ "references": {}
         }, {
-            "name": "myluCircleDrag",
-            "method": "onMyluCircleDrag",
+            "name": "circleDragStart",
+            "method": "onCircleDragStart",
             "target": undefined,
@@ -357,4 +362,4 @@ "capture": true,
         }, {
-            "name": "myluCircleDragEnd",
-            "method": "onMyluCircleDragEnd",
+            "name": "circleDragEnd",
+            "method": "onCircleDragEnd",
             "target": undefined,
@@ -361,0 +366,0 @@ "capture": false,

dist/collection/components/set-menu/set-menu.js

@@ -1,2 +0,2 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class SetMenu {
@@ -9,6 +9,2 @@ constructor() {
         this.canReorder = true;
-        /**
-         * How much space is on top
-         */
-        this.spaceTop = 0;
     }
@@ -27,3 +23,5 @@ setsUpdate(newValue) {
         this.orderedSets = this.orderedSets.map(set => {
-            return Object.assign({}, set, { order: set.canReorder ? update.filter(subSet => subSet.setId === set.setId)[0].order : set.order });
+            return Object.assign({}, set, { order: set.canReorder
+                    ? update.filter(subSet => subSet.setId === set.setId)[0].order
+                    : set.order });
         });
@@ -34,6 +32,8 @@ this.luSetMenuReorderedSets.emit(this.orderedSets);
         return (h(Host, null,
-            h("mylu-set-menu-bar", { color: "mylu_dark", spaceTop: this.spaceTop }, this.sets ? this.orderedSets.map((set) => (h("mylu-set", { setTitle: set.title, setId: set.setId, isActive: set.setId === this.activeSetId, order: set.order, canReorder: set.canReorder && this.canReorder },
-                h("mylu-circle", { isPresentational: true, isDraggable: set.canReorder && this.canReorder, backgroundColor: set.isTransparent ? null : 'white', setId: set.setId },
-                    set.showNotification ? (h("mylu-dot", { "is-presentational": true, slot: "notification", backgroundColor: "mylu_danger" }, set.notificationCount ? set.notificationCount : (h("lu-icon", { name: "lu-notification-dot" })))) : null,
-                    h("lu-icon", { color: set.color, name: set.icon }))))) : null)));
+            h("mylu-set-menu-bar", { color: "mylu_dark" }, this.sets
+                ? this.orderedSets.map(set => (h("mylu-set", { setTitle: set.title, setId: set.setId, isActive: set.setId === this.activeSetId, order: set.order, canReorder: set.canReorder && this.canReorder },
+                    h("mylu-circle", { isDraggable: set.canReorder && this.canReorder, backgroundColor: set.isTransparent ? null : "white", setId: set.setId },
+                        set.showNotification ? (h("mylu-dot", { slot: "notification", backgroundColor: "mylu_danger" }, set.notificationCount ? (h("span", null, set.notificationCount)) : (h("lu-icon", { name: "lu-notification-dot" })))) : null,
+                        h("lu-icon", { color: set.color, name: set.icon })))))
+                : null)));
     }
@@ -102,20 +102,2 @@ static get is() { return "mylu-set-menu"; }
             "defaultValue": "true"
-        },
-        "spaceTop": {
-            "type": "number",
-            "mutable": false,
-            "complexType": {
-                "original": "number",
-                "resolved": "number",
-                "references": {}
-            },
-            "required": false,
-            "optional": false,
-            "docs": {
-                "tags": [],
-                "text": "How much space is on top"
-            },
-            "attribute": "space-top",
-            "reflect": false,
-            "defaultValue": "0"
         }
@@ -122,0 +104,0 @@ }; }

dist/esm/legacy/lu-button.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, d as getContext, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, d as getContext, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ import { h as hasShadowDom } from './chunk-18034bcf.js';

dist/esm/legacy/lu-card-buttons.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h } from './chunk-07ac3283.js';
 var CardButtons = /** @class */ (function () {
@@ -3,0 +3,0 @@ function CardButtons(hostRef) {

dist/esm/legacy/lu-card-content.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance } from './chunk-07ac3283.js';
 var CardContent = /** @class */ (function () {
@@ -3,0 +3,0 @@ function CardContent(hostRef) {

dist/esm/legacy/lu-card-footer.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ var CardFooter = /** @class */ (function () {

dist/esm/legacy/lu-card-header.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ var CardHeader = /** @class */ (function () {

dist/esm/legacy/lu-card-image.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h } from './chunk-07ac3283.js';
 var CardImage = /** @class */ (function () {
@@ -3,0 +3,0 @@ function CardImage(hostRef) {

dist/esm/legacy/lu-card-title.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ var CardTitle = /** @class */ (function () {

dist/esm/legacy/lu-card.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ var Card = /** @class */ (function () {

dist/esm/legacy/lu-checkbox-group.entry.js

 import * as tslib_1 from "tslib";
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 var CheckboxGroup = /** @class */ (function () {
@@ -4,0 +4,0 @@ function CheckboxGroup(hostRef) {

dist/esm/legacy/lu-checkbox.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 var Checkbox = /** @class */ (function () {
@@ -3,0 +3,0 @@ function Checkbox(hostRef) {

dist/esm/legacy/lu-col.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 var SIZE_TO_MEDIA = {
@@ -3,0 +3,0 @@ 'xs': '(min-width: 0px)',

dist/esm/legacy/lu-fab-button.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { h as hostContext, c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ var FabButton = /** @class */ (function () {

dist/esm/legacy/lu-fab-list.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 var FabList = /** @class */ (function () {
@@ -3,0 +3,0 @@ function FabList(hostRef) {

dist/esm/legacy/lu-fab.entry.js

 import * as tslib_1 from "tslib";
-import { r as registerInstance, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 var Fab = /** @class */ (function () {
@@ -4,0 +4,0 @@ function Fab(hostRef) {

dist/esm/legacy/lu-form-group.entry.js

 import * as tslib_1 from "tslib";
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -4,0 +4,0 @@ var FormGroup = /** @class */ (function () {

dist/esm/legacy/lu-form-validation.entry.js

 import * as tslib_1 from "tslib";
-import { r as registerInstance, c as createEvent } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent } from './chunk-07ac3283.js';
 var FormValidation = /** @class */ (function () {
@@ -4,0 +4,0 @@ function FormValidation(hostRef) {

dist/esm/legacy/lu-grid.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 var Grid = /** @class */ (function () {
@@ -3,0 +3,0 @@ function Grid(hostRef) {

dist/esm/legacy/lu-header.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ var Header = /** @class */ (function () {

dist/esm/legacy/lu-img.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './chunk-07ac3283.js';
 var Img = /** @class */ (function () {
@@ -3,0 +3,0 @@ function Img(hostRef) {

dist/esm/legacy/lu-input.entry.js

 import * as tslib_1 from "tslib";
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -4,0 +4,0 @@ import { d as debounceEvent, a as deferEvent } from './chunk-18034bcf.js';

dist/esm/legacy/lu-label.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ var Label = /** @class */ (function () {

dist/esm/legacy/lu-radio-group.entry.js

 import * as tslib_1 from "tslib";
-import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './chunk-07ac3283.js';
 var RadioGroup = /** @class */ (function () {
@@ -4,0 +4,0 @@ function RadioGroup(hostRef) {

dist/esm/legacy/lu-radio.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses, h as hostContext } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ var Radio = /** @class */ (function () {

dist/esm/legacy/lu-row.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h } from './chunk-07ac3283.js';
 var Row = /** @class */ (function () {
@@ -3,0 +3,0 @@ function Row(hostRef) {

dist/esm/legacy/lu-select.entry.js

 import * as tslib_1 from "tslib";
-import { r as registerInstance, c as createEvent, d as getContext, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, d as getContext, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -4,0 +4,0 @@ import { f as findFormGroup } from './chunk-18034bcf.js';

dist/esm/legacy/lu-side-menu.entry.js

 import * as tslib_1 from "tslib";
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -4,0 +4,0 @@ var SideMenu = /** @class */ (function () {

dist/esm/legacy/lu-skeleton-text.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h } from './chunk-07ac3283.js';
 var SkeletonText = /** @class */ (function () {
@@ -3,0 +3,0 @@ function SkeletonText(hostRef) {

dist/esm/legacy/lu-spinner.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ var Spinner = /** @class */ (function () {

dist/esm/legacy/lu-tab.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './chunk-07ac3283.js';
 var Tab = /** @class */ (function () {
@@ -3,0 +3,0 @@ function Tab(hostRef) {

dist/esm/legacy/lu-tabs.entry.js

 import * as tslib_1 from "tslib";
-import { r as registerInstance, c as createEvent, h, g as getElement } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './chunk-07ac3283.js';
 var Tabs = /** @class */ (function () {
@@ -4,0 +4,0 @@ function Tabs(hostRef) {

dist/esm/legacy/lu-toggle.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './chunk-07ac3283.js';
 var Toggle = /** @class */ (function () {
@@ -3,0 +3,0 @@ function Toggle(hostRef) {

dist/esm/legacy/mylu-avatar.entry.js

@@ -1,30 +0,28 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 var Avatar = /** @class */ (function () {
     function Avatar(hostRef) {
-        var _this = this;
         registerInstance(this, hostRef);
         /**
-         * Set when the lu-img component lets us know the image is loaded
+         * Reflects the lu-img component loaded state
          */
         this.imgLoaded = false;
         /**
-         * Signifies we need to show the action or the lower right dot
+         * Show the notification dot (upper right by default)
          */
-        this.showAction = false;
+        this.showNotification = false;
         /**
-         * lower right dot background color
+         * Show the action dot (bottom-right by default)
          */
-        this.actionBackgroundColor = 'mylu_primary_shade';
-        this.onClick = function (ev) {
-            ev.preventDefault();
-            _this.myluAvatarClicked.emit();
-        };
-        this.myluAvatarClicked = createEvent(this, "myluAvatarClicked", 7);
+        this.showAction = false;
+        /*
+          Sets the actionability of the underlying circle.
+        */
+        this.isActionable = false;
     }
     Avatar.prototype.render = function () {
         var _this = this;
-        return (h(Host, null, h("button", { class: "mylu-avatar-button", onClick: this.onClick }, h("mylu-circle", { isPresentational: true, isImage: true, class: "mylu-avatar-mylu-circle", "background-color": "mylu_avatar_grey" }, h("mylu-dot", { class: this.showAction ? 'mylu-avatar-mylu-dot mylu-visible' : 'mylu-avatar-mylu-dot', isPresentational: true, slot: "action", "background-color": this.actionBackgroundColor }, this.actionIcon ? h("lu-icon", { name: this.actionIcon }) : null), h("div", { class: "mylu-avatar-image-container" }, this.imgUrl ? h("lu-img", { onLuImgDidLoad: function () { return _this.imgLoaded = true; }, class: this.imgLoaded ? 'mylu-avatar-image-container-lu-img mylu-visible' : 'mylu-avatar-image-container-lu-img', src: this.imgUrl }) : null, !this.imgUrl ? h("lu-icon", { name: "lu-baseline-person" }) : null)))));
+        return (h(Host, null, h("mylu-circle", { "background-color": this.circleBackgroundColor || "mylu_avatar_grey", "is-actionable": this.isActionable }, h("mylu-dot", { "aria-hidden": this.showNotification ? false : true, slot: "notification", "background-color": this.notificationBackgroundColor || "mylu_danger" }), h("mylu-dot", { "aria-hidden": this.showAction ? false : true, slot: "action", "background-color": this.actionBackgroundColor || "mylu_primary_shade" }, h("lu-icon", { name: this.actionIcon || "settings" })), h("lu-icon", { name: "lu-baseline-person", color: "mylu_dark", "aria-hidden": this.imgLoaded ? true : false }), this.imgUrl && (h("lu-img", { onLuImgDidLoad: function () { return (_this.imgLoaded = true); }, "aria-hidden": this.imgLoaded ? false : true, src: this.imgUrl })))));
     };
     Object.defineProperty(Avatar, "style", {
-        get: function () { return ".mylu-avatar-mylu-circle{--mylu-circle-font-size:38px;--mylu-circle-diameter:36px;-webkit-box-sizing:border-box;box-sizing:border-box}.mylu-avatar-image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.mylu-avatar-image-container lu-icon{margin-bottom:-3px}.mylu-avatar-mylu-dot{-webkit-transition:opacity 1s;transition:opacity 1s;opacity:0;visibility:hidden}.mylu-avatar-mylu-dot.mylu-visible{opacity:1;visibility:visible}.mylu-avatar-image-container-lu-img{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;opacity:0}.mylu-avatar-image-container-lu-img.mylu-visible{opacity:1}.mylu-avatar-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;border:none;outline:inherit;background:none;color:inherit;font:inherit;cursor:pointer}"; },
+        get: function () { return "mylu-avatar{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}mylu-avatar mylu-circle{--mylu-circle-border-color:#fff;--mylu-circle-diameter:2.375rem;--mylu-circle-notification-right:-18%;--mylu-circle-notification-top:-3%;--mylu-circle-action-right:-18%;--mylu-circle-action-bottom:-3%;--mylu-circle-font-size:2.375rem}mylu-avatar mylu-dot{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:0}mylu-avatar mylu-dot:not([aria-hidden]){opacity:1}mylu-avatar lu-icon{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:1}mylu-avatar lu-icon[aria-hidden]{opacity:0}mylu-avatar lu-img{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:0}mylu-avatar lu-img:not([aria-hidden]){opacity:1}"; },
         enumerable: true,
@@ -31,0 +29,0 @@ configurable: true

dist/esm/lu-button.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, d as getContext, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, d as getContext, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ import { h as hasShadowDom } from './chunk-18034bcf.js';

dist/esm/lu-card-buttons.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class CardButtons {

dist/esm/lu-card-content.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class CardContent {

dist/esm/lu-card-footer.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-card-header.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-card-image.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class CardImage {

dist/esm/lu-card-title.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-card.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-checkbox-group.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class CheckboxGroup {

dist/esm/lu-checkbox.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class Checkbox {

dist/esm/lu-col.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ const SIZE_TO_MEDIA = {

dist/esm/lu-fab-button.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { h as hostContext, c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-fab-list.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class FabList {

dist/esm/lu-fab.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class Fab {

dist/esm/lu-form-group.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-form-validation.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class FormValidation {

dist/esm/lu-grid.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class Grid {

dist/esm/lu-header.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-img.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class Img {

dist/esm/lu-input.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ import { d as debounceEvent, a as deferEvent } from './chunk-18034bcf.js';

dist/esm/lu-label.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-radio-group.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class RadioGroup {

dist/esm/lu-radio.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses, h as hostContext } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-row.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class Row {

dist/esm/lu-select.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, d as getContext, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, d as getContext, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@ import { f as findFormGroup } from './chunk-18034bcf.js';

dist/esm/lu-side-menu.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-skeleton-text.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class SkeletonText {

dist/esm/lu-spinner.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 import { c as createColorClasses } from './chunk-63f37a59.js';
@@ -3,0 +3,0 @@

dist/esm/lu-tab.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class Tab {

dist/esm/lu-tabs.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class Tabs {

dist/esm/lu-toggle.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './chunk-07ac3283.js';
 
@@ -3,0 +3,0 @@ class Toggle {

dist/esm/mylu-avatar.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './uxmylupatterns-2d8c98dc.js';
+import { r as registerInstance, h, H as Host } from './chunk-07ac3283.js';
 
@@ -7,25 +7,24 @@ class Avatar {
         /**
-         * Set when the lu-img component lets us know the image is loaded
+         * Reflects the lu-img component loaded state
          */
         this.imgLoaded = false;
         /**
-         * Signifies we need to show the action or the lower right dot
+         * Show the notification dot (upper right by default)
          */
-        this.showAction = false;
+        this.showNotification = false;
         /**
-         * lower right dot background color
+         * Show the action dot (bottom-right by default)
          */
-        this.actionBackgroundColor = 'mylu_primary_shade';
-        this.onClick = (ev) => {
-            ev.preventDefault();
-            this.myluAvatarClicked.emit();
-        };
-        this.myluAvatarClicked = createEvent(this, "myluAvatarClicked", 7);
+        this.showAction = false;
+        /*
+          Sets the actionability of the underlying circle.
+        */
+        this.isActionable = false;
     }
     render() {
-        return (h(Host, null, h("button", { class: "mylu-avatar-button", onClick: this.onClick }, h("mylu-circle", { isPresentational: true, isImage: true, class: "mylu-avatar-mylu-circle", "background-color": "mylu_avatar_grey" }, h("mylu-dot", { class: this.showAction ? 'mylu-avatar-mylu-dot mylu-visible' : 'mylu-avatar-mylu-dot', isPresentational: true, slot: "action", "background-color": this.actionBackgroundColor }, this.actionIcon ? h("lu-icon", { name: this.actionIcon }) : null), h("div", { class: "mylu-avatar-image-container" }, this.imgUrl ? h("lu-img", { onLuImgDidLoad: () => this.imgLoaded = true, class: this.imgLoaded ? 'mylu-avatar-image-container-lu-img mylu-visible' : 'mylu-avatar-image-container-lu-img', src: this.imgUrl }) : null, !this.imgUrl ? h("lu-icon", { name: "lu-baseline-person" }) : null)))));
+        return (h(Host, null, h("mylu-circle", { "background-color": this.circleBackgroundColor || "mylu_avatar_grey", "is-actionable": this.isActionable }, h("mylu-dot", { "aria-hidden": this.showNotification ? false : true, slot: "notification", "background-color": this.notificationBackgroundColor || "mylu_danger" }), h("mylu-dot", { "aria-hidden": this.showAction ? false : true, slot: "action", "background-color": this.actionBackgroundColor || "mylu_primary_shade" }, h("lu-icon", { name: this.actionIcon || "settings" })), h("lu-icon", { name: "lu-baseline-person", color: "mylu_dark", "aria-hidden": this.imgLoaded ? true : false }), this.imgUrl && (h("lu-img", { onLuImgDidLoad: () => (this.imgLoaded = true), "aria-hidden": this.imgLoaded ? false : true, src: this.imgUrl })))));
     }
-    static get style() { return ".mylu-avatar-mylu-circle{--mylu-circle-font-size:38px;--mylu-circle-diameter:36px;-webkit-box-sizing:border-box;box-sizing:border-box}.mylu-avatar-image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.mylu-avatar-image-container lu-icon{margin-bottom:-3px}.mylu-avatar-mylu-dot{-webkit-transition:opacity 1s;transition:opacity 1s;opacity:0;visibility:hidden}.mylu-avatar-mylu-dot.mylu-visible{opacity:1;visibility:visible}.mylu-avatar-image-container-lu-img{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;opacity:0}.mylu-avatar-image-container-lu-img.mylu-visible{opacity:1}.mylu-avatar-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;border:none;outline:inherit;background:none;color:inherit;font:inherit;cursor:pointer}"; }
+    static get style() { return "mylu-avatar{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}mylu-avatar mylu-circle{--mylu-circle-border-color:#fff;--mylu-circle-diameter:2.375rem;--mylu-circle-notification-right:-18%;--mylu-circle-notification-top:-3%;--mylu-circle-action-right:-18%;--mylu-circle-action-bottom:-3%;--mylu-circle-font-size:2.375rem}mylu-avatar mylu-dot{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:0}mylu-avatar mylu-dot:not([aria-hidden]){opacity:1}mylu-avatar lu-icon{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:1}mylu-avatar lu-icon[aria-hidden]{opacity:0}mylu-avatar lu-img{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:0}mylu-avatar lu-img:not([aria-hidden]){opacity:1}"; }
 }
 
 export { Avatar as mylu_avatar };

dist/esm/polyfills/css-shim.js

@@ -416,3 +416,3 @@ /*
 function matches(el, selector) {
-    return el.matches(selector);
+    return selector === ':root' || selector === 'html' || el.matches(selector);
 }
@@ -427,3 +427,3 @@ function parseCSS(original) {
         selectors: selectors,
-        isDynamic: template.length > 1
+        usesCssVars: template.length > 1
     };
@@ -440,3 +440,3 @@ }
     scopes.forEach(function (scope) {
-        if (scope.isDynamic) {
+        if (scope.usesCssVars) {
             scope.styleEl.innerHTML = executeTemplate(scope.template, props);
@@ -446,14 +446,14 @@ }
 }
-function reScope(scope, cssScopeId) {
+function reScope(scope, scopeId) {
     var template = scope.template.map(function (segment) {
         return (typeof segment === 'string')
-            ? replaceScope(segment, scope.cssScopeId, cssScopeId)
+            ? replaceScope(segment, scope.scopeId, scopeId)
             : segment;
     });
     var selectors = scope.selectors.map(function (sel) {
-        return Object.assign({}, sel, { selector: replaceScope(sel.selector, scope.cssScopeId, cssScopeId) });
+        return Object.assign({}, sel, { selector: replaceScope(sel.selector, scope.scopeId, scopeId) });
     });
     return Object.assign({}, scope, { template: template,
         selectors: selectors,
-        cssScopeId: cssScopeId });
+        scopeId: scopeId });
 }
@@ -468,5 +468,4 @@ function replaceScope(original, oldScopeId, newScopeId) {
 function loadDocument(doc, globalScopes) {
-    return loadDocumentLinks(doc, globalScopes).then(function () {
-        loadDocumentStyles(doc, globalScopes);
-    });
+    loadDocumentStyles(doc, globalScopes);
+    return loadDocumentLinks(doc, globalScopes);
 }
@@ -482,3 +481,3 @@ function loadDocumentLinks(doc, globalScopes) {
 function loadDocumentStyles(doc, globalScopes) {
-    var styleElms = doc.querySelectorAll('style');
+    var styleElms = doc.querySelectorAll('style:not([data-styles])');
     for (var i = 0; i < styleElms.length; i++) {
@@ -496,2 +495,3 @@ addGlobalStyle(globalScopes, styleElms[i]);
             var styleEl = doc.createElement('style');
+            styleEl.setAttribute('data-styles', '');
             styleEl.innerHTML = text;
@@ -565,30 +565,29 @@ addGlobalStyle(globalScopes, styleEl);
     };
-    CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText) {
+    CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText, isScoped) {
         if (this.hostScopeMap.has(hostEl)) {
             throw new Error('host style already created');
         }
-        var baseScope = this.registerHostTemplate(cssText, cssScopeId);
-        var isDynamicScoped = !!(baseScope.isDynamic && baseScope.cssScopeId);
-        var needStyleEl = isDynamicScoped || !baseScope.styleEl;
+        var baseScope = this.registerHostTemplate(cssText, cssScopeId, isScoped);
         var styleEl = this.doc.createElement('style');
-        if (!needStyleEl) {
+        if (!baseScope.usesCssVars) {
+            // This component does not use (read) css variables
             styleEl.innerHTML = cssText;
         }
+        else if (isScoped) {
+            // This component is dynamic: uses css var and is scoped
+            styleEl['s-sc'] = cssScopeId = baseScope.scopeId + "-" + this.count;
+            styleEl.innerHTML = '/*needs update*/';
+            this.hostStyleMap.set(hostEl, styleEl);
+            this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
+            this.count++;
+        }
         else {
-            if (isDynamicScoped) {
-                styleEl['s-sc'] = cssScopeId = baseScope.cssScopeId + "-" + this.count;
-                styleEl.innerHTML = '/*needs update*/';
-                this.hostStyleMap.set(hostEl, styleEl);
-                this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
-                this.count++;
+            // This component uses css vars, but it's no-encapsulation (global static)
+            baseScope.styleEl = styleEl;
+            if (!baseScope.usesCssVars) {
+                styleEl.innerHTML = executeTemplate(baseScope.template, {});
             }
-            else {
-                baseScope.styleEl = styleEl;
-                if (!baseScope.isDynamic) {
-                    styleEl.innerHTML = executeTemplate(baseScope.template, {});
-                }
-                this.globalScopes.push(baseScope);
-                this.updateGlobal();
-                this.hostScopeMap.set(hostEl, baseScope);
-            }
+            this.globalScopes.push(baseScope);
+            this.updateGlobal();
+            this.hostScopeMap.set(hostEl, baseScope);
         }
@@ -607,3 +606,3 @@ return styleEl;
         var scope = this.hostScopeMap.get(hostEl);
-        if (scope && scope.isDynamic && scope.cssScopeId) {
+        if (scope && scope.usesCssVars && scope.isScoped) {
             var styleEl = this.hostStyleMap.get(hostEl);
@@ -620,7 +619,8 @@ if (styleEl) {
     };
-    CustomStyle.prototype.registerHostTemplate = function (cssText, scopeId) {
+    CustomStyle.prototype.registerHostTemplate = function (cssText, scopeId, isScoped) {
         var scope = this.scopesMap.get(scopeId);
         if (!scope) {
             scope = parseCSS(cssText);
-            scope.cssScopeId = scopeId;
+            scope.scopeId = scopeId;
+            scope.isScoped = isScoped;
             this.scopesMap.set(scopeId, scope);
@@ -627,0 +627,0 @@ }

dist/loader/index.cjs.js

 
-  module.exports = require('../cjs/loader.cjs.js');
-  module.exports.applyPolyfills = function() { return Promise.resolve() };
-  
+module.exports = require('../cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

dist/types/components.d.ts

@@ -18,17 +18,30 @@ /* tslint:disable */
     /**
-    * lower right dot background color
+    * Sets the background color for the action slot icon
     */
     'actionBackgroundColor': string;
     /**
-    * lower right dot icon
+    * Sets the icon for the action dot
     */
     'actionIcon': string;
     /**
-    * image url of the profile
+    * Sets the background color for the circle
     */
+    'circleBackgroundColor': string;
+    /**
+    * Sets the url of the profile image
+    */
     'imgUrl': string;
+    'isActionable': boolean;
     /**
-    * Signifies we need to show the action or the lower right dot
+    * Sets the background color for the notification slot icon
     */
+    'notificationBackgroundColor': string;
+    /**
+    * Show the action dot (bottom-right by default)
+    */
     'showAction': boolean;
+    /**
+    * Show the notification dot (upper right by default)
+    */
+    'showNotification': boolean;
   }
@@ -43,11 +56,17 @@ interface MyluBreakpoints {
     'backgroundColor': string;
+    'hideDecorators': boolean;
+    'isActionable': boolean;
     'isDraggable': boolean;
-    'isImage': boolean;
-    'isPresentational': boolean;
-    'outline': boolean;
+    'isOutline': boolean;
     'setId': number;
   }
   interface MyluDot {
+    /**
+    * Sets background color of the icon container.
+    */
     'backgroundColor': string;
-    'isPresentational': boolean;
+    /**
+    * Determines whether a button or span in rendered. This dot might be a very small click target.
+    */
+    'isActionable': boolean;
   }
@@ -77,6 +96,2 @@ interface MyluSet {
     'sets': Set[];
-    /**
-    * How much space is on top
-    */
-    'spaceTop': number;
   }
@@ -86,3 +101,2 @@ interface MyluSetMenuBar {
     'selectedSet': number | null;
-    'spaceTop': number;
   }
@@ -149,21 +163,30 @@ }
     /**
-    * lower right dot background color
+    * Sets the background color for the action slot icon
     */
     'actionBackgroundColor'?: string;
     /**
-    * lower right dot icon
+    * Sets the icon for the action dot
     */
     'actionIcon'?: string;
     /**
-    * image url of the profile
+    * Sets the background color for the circle
     */
+    'circleBackgroundColor'?: string;
+    /**
+    * Sets the url of the profile image
+    */
     'imgUrl'?: string;
+    'isActionable'?: boolean;
     /**
-    * lets our host know when the button has been clicked
+    * Sets the background color for the notification slot icon
     */
-    'onMyluAvatarClicked'?: (event: CustomEvent<null>) => void;
+    'notificationBackgroundColor'?: string;
     /**
-    * Signifies we need to show the action or the lower right dot
+    * Show the action dot (bottom-right by default)
     */
     'showAction'?: boolean;
+    /**
+    * Show the notification dot (upper right by default)
+    */
+    'showNotification'?: boolean;
   }
@@ -179,15 +202,24 @@ interface MyluBreakpoints extends JSXBase.HTMLAttributes<HTMLMyluBreakpointsElement> {
     'backgroundColor'?: string;
+    'hideDecorators'?: boolean;
+    'isActionable'?: boolean;
     'isDraggable'?: boolean;
-    'isImage'?: boolean;
-    'isPresentational'?: boolean;
-    'onMyluCircleClicked'?: (event: CustomEvent<void>) => void;
-    'onMyluCircleDrag'?: (event: CustomEvent<void>) => void;
-    'onMyluCircleDragEnd'?: (event: CustomEvent<void>) => void;
-    'outline'?: boolean;
+    'isOutline'?: boolean;
+    'onCircleClicked'?: (event: CustomEvent<any>) => void;
+    'onCircleDragEnd'?: (event: CustomEvent<any>) => void;
+    'onCircleDragStart'?: (event: CustomEvent<any>) => void;
     'setId'?: number;
   }
   interface MyluDot extends JSXBase.HTMLAttributes<HTMLMyluDotElement> {
+    /**
+    * Sets background color of the icon container.
+    */
     'backgroundColor'?: string;
-    'isPresentational'?: boolean;
-    'onMyluDotClicked'?: (event: CustomEvent<any>) => void;
+    /**
+    * Determines whether a button or span in rendered. This dot might be a very small click target.
+    */
+    'isActionable'?: boolean;
+    /**
+    * If the dot is clicked, emits this custom event.
+    */
+    'onDotClicked'?: (event: CustomEvent<any>) => void;
   }
@@ -228,13 +260,8 @@ interface MyluSet extends JSXBase.HTMLAttributes<HTMLMyluSetElement> {
     'sets'?: Set[];
-    /**
-    * How much space is on top
-    */
-    'spaceTop'?: number;
   }
   interface MyluSetMenuBar extends JSXBase.HTMLAttributes<HTMLMyluSetMenuBarElement> {
     'color'?: string;
-    'onLuReorderSet'?: (event: CustomEvent<{ setId: number, order: number }[]>) => void;
+    'onLuReorderSet'?: (event: CustomEvent<{ setId: number; order: number }[]>) => void;
     'onLuSelectedSetUpdated'?: (event: CustomEvent<SetSelectedEvent>) => void;
     'selectedSet'?: number | null;
-    'spaceTop'?: number;
   }
@@ -241,0 +268,0 @@

dist/types/components/avatar/avatar.d.ts

@@ -1,30 +0,37 @@
-import { EventEmitter } from '../../stencil.core';
-import '@lu-development/ux-patterns';
+import "@lu-development/ux-patterns";
 export declare class Avatar {
     /**
-     * Set when the lu-img component lets us know the image is loaded
+     * Reflects the lu-img component loaded state
      */
     imgLoaded: boolean;
     /**
-     * Signifies we need to show the action or the lower right dot
+     * Show the notification dot (upper right by default)
      */
+    showNotification: boolean;
+    /**
+     * Show the action dot (bottom-right by default)
+     */
     showAction: boolean;
     /**
-     * lower right dot icon
+     * Sets the icon for the action dot
      */
     actionIcon: string;
     /**
-     * lower right dot background color
+     * Sets the background color for the circle
      */
+    circleBackgroundColor: string;
+    /**
+     * Sets the background color for the notification slot icon
+     */
+    notificationBackgroundColor: string;
+    /**
+     * Sets the background color for the action slot icon
+     */
     actionBackgroundColor: string;
     /**
-     * image url of the profile
+     * Sets the url of the profile image
      */
     imgUrl: string;
-    /**
-     * lets our host know when the button has been clicked
-     */
-    myluAvatarClicked: EventEmitter<null>;
-    onClick: (ev: any) => void;
+    isActionable: boolean;
     render(): any;
 }

dist/types/components/circle/circle.d.ts

@@ -1,19 +0,18 @@
-import { EventEmitter } from '../../stencil.core';
+import { EventEmitter } from "../../stencil.core";
 export declare class Circle {
-    circle: HTMLMyluCircleElement;
     isDragging: boolean;
     onIsDraggingChange(newValue: boolean): void;
     backgroundColor: string;
+    isActionable: boolean;
+    isOutline: boolean;
     isDraggable: boolean;
-    isPresentational: boolean;
     setId: number;
-    isImage: boolean;
-    outline: boolean;
-    myluCircleClicked: EventEmitter<void>;
-    myluCircleDrag: EventEmitter<void>;
-    myluCircleDragEnd: EventEmitter<void>;
+    hideDecorators: boolean;
+    circleClicked: EventEmitter;
+    circleDragStart: EventEmitter;
+    circleDragEnd: EventEmitter;
     onDragStart(ev: any): boolean;
     onDragEnd(ev: any): void;
-    onClick: (ev: any) => void;
+    onClick: (event: UIEvent) => CustomEvent<any>;
     render(): any;
 }

dist/types/components/dot/dot.d.ts

@@ -1,8 +0,17 @@
-import { EventEmitter } from '../../stencil.core';
+import { EventEmitter } from "../../stencil.core";
 export declare class Dot {
+    /**
+     * Sets background color of the icon container.
+     */
     backgroundColor: string;
-    isPresentational: boolean;
-    myluDotClicked: EventEmitter;
-    onClick: (ev: any) => void;
+    /**
+     * Determines whether a button or span in rendered. This dot might be a very small click target.
+     */
+    isActionable: boolean;
+    /**
+     * If the dot is clicked, emits this custom event.
+     */
+    dotClicked: EventEmitter;
+    handleClick: (event: UIEvent) => CustomEvent<any>;
     render(): any;
 }

dist/types/components/set-menu-bar/set-menu-bar.d.ts

 import { EventEmitter } from '../../stencil.core';
-import { SetSelectedEvent } from '../../interface';
+import { SetMenuOrganizedTargetData, SetMenuTargetData, SetSelectedEvent } from '../../interface';
 export declare class SetMenuBar {
@@ -9,5 +9,6 @@ setMenuBar: HTMLMyluSetMenuBarElement;
     selectedItemHeight: number | null;
+    isTransitioning: boolean;
+    transitioningTimeout: any;
     onCircleDragging(newValue: any, oldValue: any): void;
     color: string;
-    spaceTop: number;
     selectedSet: number | null;
@@ -22,24 +23,15 @@ onSelectedSetChange(newValue: number, oldValue: number | null): void;
     onSetDidUnload(ev: any): void;
-    onMyluCircleDrag(ev: any): void;
-    onMyluCircleDragEnd(ev: any): void;
+    onCircleDragStart(ev: any): void;
+    onCircleDragEnd(ev: any): void;
     onSetSelection(ev: any): void;
     onMouseMove(ev: any): void;
+    findRelevantTarget(height: number): SetMenuTargetData;
+    organizeTargetData(targetData: any, height: any): SetMenuOrganizedTargetData;
+    reorderIfNeeded(organizedTargetData: SetMenuOrganizedTargetData): void;
     getOrder(targets: any, el: any): any;
     updateSets(): void;
-    readonly reorderData: {
-        order: number;
-        setId: number;
-        top: {
-            start: number;
-            end: number;
-            target: number;
-        };
-        bottom: {
-            start: number;
-            end: number;
-            target: number;
-        };
-    }[];
-    private reorderMove;
+    readonly targetOptions: SetMenuTargetData[];
+    reorderMove(fromOrder: number, toOrder: number, down: boolean): void;
+    private hasDuplicates;
     render(): any;
 }

dist/types/components/set-menu/set-menu.d.ts

@@ -1,3 +0,3 @@
-import { EventEmitter } from '../../stencil.core';
-import { Set, SetSelectedEvent } from '../../interface';
+import { EventEmitter } from "../../stencil.core";
+import { Set, SetSelectedEvent } from "../../interface";
 export declare class SetMenu {
@@ -19,6 +19,2 @@ orderedSets: Set[];
     /**
-     * How much space is on top
-     */
-    spaceTop: number;
-    /**
      * Emits when a new set is selected
@@ -25,0 +21,0 @@ */

dist/types/types/sets.d.ts

@@ -12,1 +12,20 @@ export interface Set {
 }
+export interface SetMenuTargetData {
+    order: number;
+    setId: number;
+    top: {
+        start: number;
+        end: number;
+        target: number;
+    };
+    bottom: {
+        start: number;
+        end: number;
+        target: number;
+    };
+}
+export interface SetMenuOrganizedTargetData {
+    setId: number;
+    target: number;
+    top: boolean;
+}

dist/uxmylupatterns/uxmylupatterns.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as l}from"./p-0b3804b4.js";e().then(e=>l([["p-ckgejph8",[[0,"mylu-avatar",{showAction:[4,"show-action"],actionIcon:[1,"action-icon"],actionBackgroundColor:[1,"action-background-color"],imgUrl:[1,"img-url"],imgLoaded:[32]}]]],["p-pzpfb8tn",[[1,"lu-card-image",{altText:[1,"alt-text"],iconColor:[1,"icon-color"],iconName:[1,"icon-name"],iconSize:[1,"icon-size"],isIcon:[4,"is-icon"],src:[1]}]]],["p-u4uvqivw",[[1,"lu-fab-button",{color:[1],activated:[4],disabled:[4],href:[1],isExternallyManaged:[4,"is-externally-managed"],show:[1028],selected:[1028],toggleButton:[4,"toggle-button"],translucent:[4],type:[1],size:[1],value:[8],keyFocus:[32]}]]],["p-dozxxid0",[[1,"lu-form-group",{clearErrorStateOnClearInput:[4,"clear-error-state-on-clear-input"],clearInput:[4,"clear-input"],color:[1],clearOnEdit:[1028,"clear-on-edit"],errorMessage:[1025,"error-message"],externallyDeemedValid:[1028,"externally-deemed-valid"],externallyDeemedInvalid:[1028,"externally-deemed-invalid"],forId:[1025,"for-id"],helperText:[1,"helper-text"],id:[1537],isExternallyValidated:[4,"is-externally-validated"],isValidatedOnSubmission:[4,"is-validated-on-submission"],labelText:[1,"label-text"],updateTrigger:[1,"update-trigger"],value:[32],isCheckboxGroup:[32],isValid:[32],isInvalid:[32],isSelect:[32],isRadioGroup:[32],isRequired:[32],needsEmailValidation:[32],needsPatternValidation:[32],needsPasswordValidation:[32],pattern:[32],isInput:[32],getValidationValues:[64]}]]],["p-wva9rzg4",[[1,"lu-input",{accept:[1],autocomplete:[1],autocapitalize:[1],autocorrect:[1],autofocus:[4],clearInput:[4,"clear-input"],clearOnEdit:[1028,"clear-on-edit"],capture:[1],checked:[4],color:[1],debounce:[2],disabled:[4],form:[1],id:[1537],inputmode:[1],invalid:[4],list:[1],max:[8],min:[8],minLength:[2,"min-length"],maxLength:[2,"max-length"],multiple:[4],name:[1],pattern:[1],placeholder:[1],prefixIcon:[1,"prefix-icon"],prefixIconClickable:[4,"prefix-icon-clickable"],suffixIcon:[1025,"suffix-icon"],suffixIconClickable:[1028,"suffix-icon-clickable"],readOnly:[4,"read-only"],required:[4],size:[2],spellcheck:[4],step:[8],tabIndex:[2,"tab-index"],type:[1],valid:[4],value:[1025],hasFocus:[32],setFocus:[64]}]]],["p-20njuvmh",[[1,"lu-side-menu",{color:[1],isVisible:[1028,"is-visible"],isCollapsible:[1540,"is-collapsible"],isCollapsed:[1540,"is-collapsed"],hasBoxShadow:[4,"has-box-shadow"],externallyManaged:[4,"externally-managed"],makeVisible:[64],isHidden:[64],collapsedHandler:[64]},[[0,"keydown","handleEscape"]]]]],["p-lehqstpm",[[1,"lu-toggle",{startSelected:[1028,"start-selected"],startText:[1,"start-text"],startValue:[8,"start-value"],endText:[1,"end-text"],endValue:[8,"end-value"],value:[1032]}]]],["p-e8xyoyuw",[[1,"lu-button",{color:[1],buttonType:[1025,"button-type"],disabled:[516],expand:[513],fill:[1537],href:[1],shape:[513],size:[513],strong:[4],type:[1],keyFocus:[32]}]]],["p-aicel3uc",[[1,"lu-card",{color:[1]}]]],["p-e4ecbhtz",[[1,"lu-card-buttons"]]],["p-bkq5cmsl",[[0,"lu-card-content"]]],["p-z8gfi5nw",[[1,"lu-card-footer",{color:[1],translucent:[4]}]]],["p-fky9sxod",[[1,"lu-card-header",{color:[1],translucent:[4]}]]],["p-5vgt9u9g",[[1,"lu-card-title",{color:[1]}]]],["p-iemt93i0",[[1,"lu-checkbox",{color:[1],name:[1],labeledById:[1,"labeled-by-id"],checked:[1028],disabled:[4],isExternallyManaged:[4,"is-externally-managed"],value:[8],keyFocus:[32],hasFocus:[32]}]]],["p-edywqwpk",[[4,"lu-checkbox-group",{direction:[1],id:[1537],name:[1],required:[4],value:[1040],setFocus:[64],getValues:[64]},[[0,"luCheckboxDidLoad","onCheckboxDidLoad"],[0,"luCheckboxDidUnload","onCheckboxDidUnload"]]]]],["p-jfbmfsbs",[[1,"lu-col",{offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],pull:[1],pullXs:[1,"pull-xs"],pullSm:[1,"pull-sm"],pullMd:[1,"pull-md"],pullLg:[1,"pull-lg"],pullXl:[1,"pull-xl"],push:[1],pushXs:[1,"push-xs"],pushSm:[1,"push-sm"],pushMd:[1,"push-md"],pushLg:[1,"push-lg"],pushXl:[1,"push-xl"],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]},[[9,"resize","onResize"]]]]],["p-hutnaols",[[1,"lu-fab",{horizontal:[1],vertical:[1],edge:[4],activated:[1028],close:[64]},[[0,"click","onClick"]]]]],["p-teglqw6f",[[1,"lu-fab-list",{activated:[4],side:[1]}]]],["p-8kt91hsn",[[0,"lu-form-validation",{value:[1040],isValid:[1540,"is-valid"],isInvalid:[1540,"is-invalid"],formGroups:[32]},[[0,"luFormGroupDidLoad","onFormGroupDidLoad"],[0,"luFormGroupDidUnload","onFormGroupDidUnload"]]]]],["p-uelqsuze",[[1,"lu-grid",{fixed:[4]}]]],["p-5ymwcdhd",[[1,"lu-header",{color:[1],preHeader:[4,"pre-header"]}]]],["p-gcvug6yx",[[1,"lu-radio",{color:[1],labeledById:[1,"labeled-by-id"],name:[1],disabled:[4],checked:[1028],value:[1032],hasFocus:[32]},[[0,"click","onClick"]]]]],["p-hrbgg9cq",[[0,"lu-radio-group",{allowEmptySelection:[4,"allow-empty-selection"],direction:[1],id:[1537],name:[1],required:[4],value:[1032],setFocus:[64]},[[0,"luRadioDidLoad","onRadioDidLoad"],[0,"luRadioDidUnload","onRadioDidUnload"],[0,"luSelect","onRadioSelect"],[0,"luDeselect","onRadioDeselect"]]]]],["p-xovxgvxb",[[1,"lu-row"]]],["p-fudbg07i",[[1,"lu-select",{id:[1537],color:[1],invalid:[4],name:[1],ariaLabel:[1,"aria-label"],disabled:[4],placeholder:[1],helpText:[1,"help-text"],selectedValue:[1025,"selected-value"],showPlaceholderOption:[4,"show-placeholder-option"],required:[4],options:[1040],valid:[4],isValid:[32],setFocus:[64]}]]],["p-atcqbshm",[[1,"lu-skeleton-text",{width:[1]}]]],["p-trd5ngax",[[1,"lu-spinner",{dataColor:[1,"data-color"],dataScale:[2,"data-scale"],dataDuration:[2,"data-duration"],dataPaused:[4,"data-paused"],dataHidden:[4,"data-hidden"],dataMessage:[1,"data-message"]}]]],["p-7yqwirgg",[[1,"lu-tab",{active:[1028],labeledById:[1025,"labeled-by-id"],name:[8],noSlide:[4,"no-slide"]},[[0,"click","onClick"]]]]],["p-nxcjej8q",[[1,"lu-tabs",{value:[1025],noSlide:[4,"no-slide"],tabs:[32],tabIncrement:[32],pos:[32],left:[32],width:[32],elementResized:[64]},[[0,"luTabDidLoad","onTabDidLoad"],[0,"luTabDidUnload","onTabDidUnload"],[0,"luTabSelect","onTabSelect"]]]]],["p-52syqgs5",[[1,"lu-img",{alt:[1],src:[1],loadSrc:[32]}]]],["p-6bkvsexc",[[6,"lu-label",{color:[1],labelText:[1,"label-text"],required:[4],optional:[4],forId:[513,"for-id"],id:[1537],invalid:[4],errorMessage:[1,"error-message"],helperText:[1,"helper-text"]}]]],["p-whnzq662",[[0,"mylu-set-menu",{sets:[16],activeSetId:[2,"active-set-id"],canReorder:[4,"can-reorder"],spaceTop:[2,"space-top"],orderedSets:[32]},[[0,"luSelectedSetUpdated","onLuSelectedSet"],[0,"luReorderSet","onLuReorderSet"]]],[1,"mylu-breakpoints",{sm:[2],md:[2],lg:[2],xl:[2],currentBreakpoint:[32],currentWidth:[32],currentHeight:[32]},[[9,"resize","onResize"]]],[1,"mylu-set",{canReorder:[4,"can-reorder"],setId:[2,"set-id"],isActive:[1028,"is-active"],showActiveBar:[4,"show-active-bar"],setTitle:[1,"set-title"],order:[2],isReordering:[4,"is-reordering"],translationTracker:[2,"translation-tracker"]},[[0,"click","onClick"]]],[1,"mylu-set-menu-bar",{color:[1],spaceTop:[2,"space-top"],selectedSet:[1026,"selected-set"],sets:[32],cloneSets:[32],circleDragging:[32],selectedItemHeight:[32]},[[0,"luSetDidLoad","onSetDidLoad"],[0,"luSetDidUnload","onSetDidUnload"],[2,"myluCircleDrag","onMyluCircleDrag"],[0,"myluCircleDragEnd","onMyluCircleDragEnd"],[0,"luSelect","onSetSelection"],[1,"drag","onMouseMove"]]],[1,"mylu-circle",{backgroundColor:[1,"background-color"],isDraggable:[4,"is-draggable"],isPresentational:[4,"is-presentational"],setId:[2,"set-id"],isImage:[4,"is-image"],outline:[4],isDragging:[32]},[[3,"dragstart","onDragStart"],[0,"dragend","onDragEnd"]]],[1,"mylu-dot",{backgroundColor:[1,"background-color"],isPresentational:[4,"is-presentational"]}],[1,"lu-icon",{color:[1],mode:[1],ariaLabel:[1537,"aria-label"],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[1],src:[1],icon:[1],size:[1],svgContent:[32],isVisible:[32]}]]]],{resourcesUrl:e}));
+import{p as e,b as l}from"./p-9ab70fa5.js";e().then(e=>l([["p-kgmqnj4t",[[0,"mylu-avatar",{showNotification:[4,"show-notification"],showAction:[4,"show-action"],actionIcon:[1,"action-icon"],circleBackgroundColor:[1,"circle-background-color"],notificationBackgroundColor:[1,"notification-background-color"],actionBackgroundColor:[1,"action-background-color"],imgUrl:[1,"img-url"],isActionable:[4,"is-actionable"],imgLoaded:[32]}]]],["p-r0hggosv",[[1,"lu-card-image",{altText:[1,"alt-text"],iconColor:[1,"icon-color"],iconName:[1,"icon-name"],iconSize:[1,"icon-size"],isIcon:[4,"is-icon"],src:[1]}]]],["p-1upfcclb",[[1,"lu-fab-button",{color:[1],activated:[4],disabled:[4],href:[1],isExternallyManaged:[4,"is-externally-managed"],show:[1028],selected:[1028],toggleButton:[4,"toggle-button"],translucent:[4],type:[1],size:[1],value:[8],keyFocus:[32]}]]],["p-i3wmjwvv",[[1,"lu-form-group",{clearErrorStateOnClearInput:[4,"clear-error-state-on-clear-input"],clearInput:[4,"clear-input"],color:[1],clearOnEdit:[1028,"clear-on-edit"],errorMessage:[1025,"error-message"],externallyDeemedValid:[1028,"externally-deemed-valid"],externallyDeemedInvalid:[1028,"externally-deemed-invalid"],forId:[1025,"for-id"],helperText:[1,"helper-text"],id:[1537],isExternallyValidated:[4,"is-externally-validated"],isValidatedOnSubmission:[4,"is-validated-on-submission"],labelText:[1,"label-text"],updateTrigger:[1,"update-trigger"],value:[32],isCheckboxGroup:[32],isValid:[32],isInvalid:[32],isSelect:[32],isRadioGroup:[32],isRequired:[32],needsEmailValidation:[32],needsPatternValidation:[32],needsPasswordValidation:[32],pattern:[32],isInput:[32],getValidationValues:[64]}]]],["p-wusqngla",[[1,"lu-input",{accept:[1],autocomplete:[1],autocapitalize:[1],autocorrect:[1],autofocus:[4],clearInput:[4,"clear-input"],clearOnEdit:[1028,"clear-on-edit"],capture:[1],checked:[4],color:[1],debounce:[2],disabled:[4],form:[1],id:[1537],inputmode:[1],invalid:[4],list:[1],max:[8],min:[8],minLength:[2,"min-length"],maxLength:[2,"max-length"],multiple:[4],name:[1],pattern:[1],placeholder:[1],prefixIcon:[1,"prefix-icon"],prefixIconClickable:[4,"prefix-icon-clickable"],suffixIcon:[1025,"suffix-icon"],suffixIconClickable:[1028,"suffix-icon-clickable"],readOnly:[4,"read-only"],required:[4],size:[2],spellcheck:[4],step:[8],tabIndex:[2,"tab-index"],type:[1],valid:[4],value:[1025],hasFocus:[32],setFocus:[64]}]]],["p-7lnpl9az",[[1,"lu-side-menu",{color:[1],isVisible:[1028,"is-visible"],isCollapsible:[1540,"is-collapsible"],isCollapsed:[1540,"is-collapsed"],hasBoxShadow:[4,"has-box-shadow"],externallyManaged:[4,"externally-managed"],makeVisible:[64],isHidden:[64],collapsedHandler:[64]},[[0,"keydown","handleEscape"]]]]],["p-vtlmzywo",[[1,"lu-toggle",{startSelected:[1028,"start-selected"],startText:[1,"start-text"],startValue:[8,"start-value"],endText:[1,"end-text"],endValue:[8,"end-value"],value:[1032]}]]],["p-qqmpdlxh",[[1,"lu-button",{color:[1],buttonType:[1025,"button-type"],disabled:[516],expand:[513],fill:[1537],href:[1],shape:[513],size:[513],strong:[4],type:[1],keyFocus:[32]}]]],["p-fx1ekrxd",[[1,"lu-card",{color:[1]}]]],["p-ibhbphit",[[1,"lu-card-buttons"]]],["p-k44kk98g",[[0,"lu-card-content"]]],["p-9yz6u43g",[[1,"lu-card-footer",{color:[1],translucent:[4]}]]],["p-fpxvwx6r",[[1,"lu-card-header",{color:[1],translucent:[4]}]]],["p-kyawfosa",[[1,"lu-card-title",{color:[1]}]]],["p-ykqvn7hb",[[1,"lu-checkbox",{color:[1],name:[1],labeledById:[1,"labeled-by-id"],checked:[1028],disabled:[4],isExternallyManaged:[4,"is-externally-managed"],value:[8],keyFocus:[32],hasFocus:[32]}]]],["p-ata6bs8q",[[4,"lu-checkbox-group",{direction:[1],id:[1537],name:[1],required:[4],value:[1040],setFocus:[64],getValues:[64]},[[0,"luCheckboxDidLoad","onCheckboxDidLoad"],[0,"luCheckboxDidUnload","onCheckboxDidUnload"]]]]],["p-v083bwcv",[[1,"lu-col",{offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],pull:[1],pullXs:[1,"pull-xs"],pullSm:[1,"pull-sm"],pullMd:[1,"pull-md"],pullLg:[1,"pull-lg"],pullXl:[1,"pull-xl"],push:[1],pushXs:[1,"push-xs"],pushSm:[1,"push-sm"],pushMd:[1,"push-md"],pushLg:[1,"push-lg"],pushXl:[1,"push-xl"],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]},[[9,"resize","onResize"]]]]],["p-y7e9wk73",[[1,"lu-fab",{horizontal:[1],vertical:[1],edge:[4],activated:[1028],close:[64]},[[0,"click","onClick"]]]]],["p-vrnclv6h",[[1,"lu-fab-list",{activated:[4],side:[1]}]]],["p-zsabzbdy",[[0,"lu-form-validation",{value:[1040],isValid:[1540,"is-valid"],isInvalid:[1540,"is-invalid"],formGroups:[32]},[[0,"luFormGroupDidLoad","onFormGroupDidLoad"],[0,"luFormGroupDidUnload","onFormGroupDidUnload"]]]]],["p-th29b1wd",[[1,"lu-grid",{fixed:[4]}]]],["p-4k4dfqcz",[[1,"lu-header",{color:[1],preHeader:[4,"pre-header"]}]]],["p-ehjj9jyz",[[1,"lu-radio",{color:[1],labeledById:[1,"labeled-by-id"],name:[1],disabled:[4],checked:[1028],value:[1032],hasFocus:[32]},[[0,"click","onClick"]]]]],["p-qbf21f3p",[[0,"lu-radio-group",{allowEmptySelection:[4,"allow-empty-selection"],direction:[1],id:[1537],name:[1],required:[4],value:[1032],setFocus:[64]},[[0,"luRadioDidLoad","onRadioDidLoad"],[0,"luRadioDidUnload","onRadioDidUnload"],[0,"luSelect","onRadioSelect"],[0,"luDeselect","onRadioDeselect"]]]]],["p-yfm8s2dy",[[1,"lu-row"]]],["p-4mqnu3ua",[[1,"lu-select",{id:[1537],color:[1],invalid:[4],name:[1],ariaLabel:[1,"aria-label"],disabled:[4],placeholder:[1],helpText:[1,"help-text"],selectedValue:[1025,"selected-value"],showPlaceholderOption:[4,"show-placeholder-option"],required:[4],options:[1040],valid:[4],isValid:[32],setFocus:[64]}]]],["p-nkau5hir",[[1,"lu-skeleton-text",{width:[1]}]]],["p-1ejftdpd",[[1,"lu-spinner",{dataColor:[1,"data-color"],dataScale:[2,"data-scale"],dataDuration:[2,"data-duration"],dataPaused:[4,"data-paused"],dataHidden:[4,"data-hidden"],dataMessage:[1,"data-message"]}]]],["p-u8pjv4u5",[[1,"lu-tab",{active:[1028],labeledById:[1025,"labeled-by-id"],name:[8],noSlide:[4,"no-slide"]},[[0,"click","onClick"]]]]],["p-syrydyj1",[[1,"lu-tabs",{value:[1025],noSlide:[4,"no-slide"],tabs:[32],tabIncrement:[32],pos:[32],left:[32],width:[32],elementResized:[64]},[[0,"luTabDidLoad","onTabDidLoad"],[0,"luTabDidUnload","onTabDidUnload"],[0,"luTabSelect","onTabSelect"]]]]],["p-njcv7tc7",[[1,"mylu-breakpoints",{sm:[2],md:[2],lg:[2],xl:[2],currentBreakpoint:[32],currentWidth:[32],currentHeight:[32]},[[9,"resize","onResize"]]]]],["p-zimjtw4l",[[1,"lu-img",{alt:[1],src:[1],loadSrc:[32]}]]],["p-z4g2b3dz",[[6,"lu-label",{color:[1],labelText:[1,"label-text"],required:[4],optional:[4],forId:[513,"for-id"],id:[1537],invalid:[4],errorMessage:[1,"error-message"],helperText:[1,"helper-text"]}]]],["p-bz1xzkbu",[[0,"mylu-set-menu",{sets:[16],activeSetId:[2,"active-set-id"],canReorder:[4,"can-reorder"],orderedSets:[32]},[[0,"luSelectedSetUpdated","onLuSelectedSet"],[0,"luReorderSet","onLuReorderSet"]]],[1,"mylu-set",{canReorder:[4,"can-reorder"],setId:[2,"set-id"],isActive:[1028,"is-active"],showActiveBar:[4,"show-active-bar"],setTitle:[1,"set-title"],order:[2],isReordering:[4,"is-reordering"],translationTracker:[2,"translation-tracker"]},[[0,"click","onClick"]]],[1,"mylu-set-menu-bar",{color:[1],selectedSet:[1026,"selected-set"],sets:[32],cloneSets:[32],circleDragging:[32],selectedItemHeight:[32],isTransitioning:[32],transitioningTimeout:[32]},[[0,"luSetDidLoad","onSetDidLoad"],[0,"luSetDidUnload","onSetDidUnload"],[2,"circleDragStart","onCircleDragStart"],[0,"circleDragEnd","onCircleDragEnd"],[0,"luSelect","onSetSelection"],[1,"drag","onMouseMove"]]],[1,"mylu-dot",{backgroundColor:[1,"background-color"],isActionable:[4,"is-actionable"]}],[1,"mylu-circle",{backgroundColor:[1,"background-color"],isActionable:[4,"is-actionable"],isOutline:[4,"is-outline"],isDraggable:[4,"is-draggable"],setId:[2,"set-id"],hideDecorators:[4,"hide-decorators"],isDragging:[32]},[[3,"dragstart","onDragStart"],[2,"dragend","onDragEnd"]]],[1,"lu-icon",{color:[1],mode:[1],ariaLabel:[1537,"aria-label"],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[1],src:[1],icon:[1],size:[1],svgContent:[32],isVisible:[32]}]]]],{resourcesUrl:e}));

docs/docs.json

 {
-  "timestamp": "2019-06-20T20:03:55",
+  "timestamp": "2019-06-25T23:10:27",
   "compiler": {
     "name": "@stencil/core",
-    "version": "1.0.3",
-    "typescriptVersion": "3.5.1"
+    "version": "1.1.1",
+    "typescriptVersion": "3.5.2"
   },
@@ -25,5 +25,4 @@ "components": [
           "reflectToAttr": false,
-          "docs": "lower right dot background color",
+          "docs": "Sets the background color for the action slot icon",
           "docsTags": [],
-          "default": "'mylu_primary_shade'",
           "optional": false,
@@ -38,3 +37,3 @@ "required": false
           "reflectToAttr": false,
-          "docs": "lower right dot icon",
+          "docs": "Sets the icon for the action dot",
           "docsTags": [],
@@ -45,2 +44,13 @@ "optional": false,
         {
+          "name": "circleBackgroundColor",
+          "type": "string",
+          "mutable": false,
+          "attr": "circle-background-color",
+          "reflectToAttr": false,
+          "docs": "Sets the background color for the circle",
+          "docsTags": [],
+          "optional": false,
+          "required": false
+        },
+        {
           "name": "imgUrl",
@@ -51,3 +61,3 @@ "type": "string",
           "reflectToAttr": false,
-          "docs": "image url of the profile",
+          "docs": "Sets the url of the profile image",
           "docsTags": [],
@@ -58,2 +68,25 @@ "optional": false,
         {
+          "name": "isActionable",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "is-actionable",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "false",
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "notificationBackgroundColor",
+          "type": "string",
+          "mutable": false,
+          "attr": "notification-background-color",
+          "reflectToAttr": false,
+          "docs": "Sets the background color for the notification slot icon",
+          "docsTags": [],
+          "optional": false,
+          "required": false
+        },
+        {
           "name": "showAction",
@@ -64,3 +97,3 @@ "type": "boolean",
           "reflectToAttr": false,
-          "docs": "Signifies we need to show the action or the lower right dot",
+          "docs": "Show the action dot (bottom-right by default)",
           "docsTags": [],
@@ -70,16 +103,18 @@ "default": "false",
           "required": false
+        },
+        {
+          "name": "showNotification",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "show-notification",
+          "reflectToAttr": false,
+          "docs": "Show the notification dot (upper right by default)",
+          "docsTags": [],
+          "default": "false",
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [],
-      "events": [
-        {
-          "event": "myluAvatarClicked",
-          "detail": "null",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "lets our host know when the button has been clicked",
-          "docsTags": []
-        }
-      ],
+      "events": [],
       "styles": [],
@@ -184,6 +219,6 @@ "slots": []
         {
-          "name": "isDraggable",
+          "name": "hideDecorators",
           "type": "boolean",
           "mutable": false,
-          "attr": "is-draggable",
+          "attr": "hide-decorators",
           "reflectToAttr": false,
@@ -197,6 +232,6 @@ "docs": "",
         {
-          "name": "isImage",
+          "name": "isActionable",
           "type": "boolean",
           "mutable": false,
-          "attr": "is-image",
+          "attr": "is-actionable",
           "reflectToAttr": false,
@@ -210,6 +245,6 @@ "docs": "",
         {
-          "name": "isPresentational",
+          "name": "isDraggable",
           "type": "boolean",
           "mutable": false,
-          "attr": "is-presentational",
+          "attr": "is-draggable",
           "reflectToAttr": false,
@@ -223,6 +258,6 @@ "docs": "",
         {
-          "name": "outline",
+          "name": "isOutline",
           "type": "boolean",
           "mutable": false,
-          "attr": "outline",
+          "attr": "is-outline",
           "reflectToAttr": false,
@@ -250,4 +285,4 @@ "docs": "",
         {
-          "event": "myluCircleClicked",
-          "detail": "void",
+          "event": "circleClicked",
+          "detail": "any",
           "bubbles": true,
@@ -260,4 +295,4 @@ "cancelable": true,
         {
-          "event": "myluCircleDrag",
-          "detail": "void",
+          "event": "circleDragEnd",
+          "detail": "any",
           "bubbles": true,
@@ -270,4 +305,4 @@ "cancelable": true,
         {
-          "event": "myluCircleDragEnd",
-          "detail": "void",
+          "event": "circleDragStart",
+          "detail": "any",
           "bubbles": true,
@@ -280,44 +315,3 @@ "cancelable": true,
       ],
-      "styles": [
-        {
-          "name": "--mylu-circle-border",
-          "annotation": "prop",
-          "docs": "A way to set border to none... or whatever else"
-        },
-        {
-          "name": "--mylu-circle-border-color",
-          "annotation": "prop",
-          "docs": "Color of edge"
-        },
-        {
-          "name": "--mylu-circle-border-thickness",
-          "annotation": "prop",
-          "docs": "Thickness of border"
-        },
-        {
-          "name": "--mylu-circle-diameter",
-          "annotation": "prop",
-          "docs": "diameter for images"
-        },
-        {
-          "name": "--mylu-circle-font-size",
-          "annotation": "prop",
-          "docs": "Font size - so you can make icons bigger or smaller"
-        },
-        {
-          "name": "--mylu-circle-notification-right",
-          "annotation": "prop",
-          "docs": "Dots position relative to the right for notification"
-        },
-        {
-          "name": "--mylu-circle-notification-top",
-          "annotation": "prop",
-          "docs": "Dots position relative to the top for notification"
-        },
-        {
-          "name": "--mylu-circle-padding",
-          "annotation": "prop",
-          "docs": "Diameter of radio"
-        }
-      ],
+      "styles": [],
       "slots": []
@@ -341,3 +335,3 @@ },
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Sets background color of the icon container.",
           "docsTags": [],
@@ -348,8 +342,8 @@ "optional": false,
         {
-          "name": "isPresentational",
+          "name": "isActionable",
           "type": "boolean",
           "mutable": false,
-          "attr": "is-presentational",
+          "attr": "is-actionable",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Determines whether a button or span in rendered. This dot might be a very small click target.",
           "docsTags": [],
@@ -364,3 +358,3 @@ "default": "false",
         {
-          "event": "myluDotClicked",
+          "event": "dotClicked",
           "detail": "any",
@@ -370,23 +364,7 @@ "bubbles": true,
           "composed": true,
-          "docs": "",
+          "docs": "If the dot is clicked, emits this custom event.",
           "docsTags": []
         }
       ],
-      "styles": [
-        {
-          "name": "--mylu-dot-border-color",
-          "annotation": "prop",
-          "docs": "Color of edge"
-        },
-        {
-          "name": "--mylu-dot-font-size",
-          "annotation": "prop",
-          "docs": "Font size of inner icon"
-        },
-        {
-          "name": "--mylu-dot-padding",
-          "annotation": "prop",
-          "docs": "Diameter of radio"
-        }
-      ],
+      "styles": [],
       "slots": []
@@ -572,14 +550,2 @@ },
           "required": false
-        },
-        {
-          "name": "spaceTop",
-          "type": "number",
-          "mutable": false,
-          "attr": "space-top",
-          "reflectToAttr": false,
-          "docs": "How much space is on top",
-          "docsTags": [],
-          "default": "0",
-          "optional": false,
-          "required": false
         }
@@ -642,14 +608,2 @@ ],
           "required": false
-        },
-        {
-          "name": "spaceTop",
-          "type": "number",
-          "mutable": false,
-          "attr": "space-top",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "default": "0",
-          "optional": false,
-          "required": false
         }
@@ -656,0 +610,0 @@ ],

package.json

 {
   "name": "@lu-development/ux-mylu-patterns",
-  "version": "0.3.0-dev.201906202003.d2a0437",
+  "version": "0.3.0-dev.201906252309.b36a2f9",
   "description": "Liberty University MyLU Patterns",
@@ -10,3 +10,3 @@ "module": "dist/index.mjs",
   "main": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
@@ -48,4 +48,4 @@ "collection:main": "dist/collection/index.js",
   "devDependencies": {
-    "@stencil/core": "1.0.3",
-    "@stencil/sass": "^1.0.0",
+    "@stencil/core": "1.1.1",
+    "@stencil/sass": "^1.0.1",
     "@types/jest": "24.0.13",
@@ -65,5 +65,6 @@ "@types/puppeteer": "1.12.4",
     "stylelint-order": "2.0.0",
-    "tslint": "^5.10.0"
+    "tslint": "^5.10.0",
+    "xvfb": "^0.2.3"
   },
   "license": "MIT"
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1844700

increased by0.3%

Number of package files

278

increased by1.83%

Lines of code

26279

increased by0.42%

Worsened metrics

Dev dependency count

18

increased by5.88%

No dependency changes