@vuu-ui/vuu-ui-controls 0.8.5-debug

package/index.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/vuu-ui-controls/src/editable-label/EditableLabel.css", "../../../packages/vuu-shell/src/connection-status/ConnectionStatusIcon.css", "../../../packages/vuu-shell/src/login/LoginPanel.css", "../../../packages/vuu-shell/src/session-editing-form/SessionEditingForm.css", "../../../packages/vuu-shell/src/user-profile/UserPanel.css", "../../../packages/vuu-shell/src/user-profile/UserProfile.css", "../../../packages/vuu-shell/src/theme-switch/ThemeSwitch.css", "../../../packages/vuu-shell/src/app-header/AppHeader.css", "../../../packages/vuu-shell/src/shell-layouts/context-panel/ContextPanel.css", "../../../packages/vuu-shell/src/left-nav/LeftNav.css", "../../../packages/vuu-shell/src/shell.css", "../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/popup/popup-service.css", "../../../packages/vuu-popups/src/popup-menu/PopupMenu.css", "../../../packages/vuu-ui-controls/src/drag-drop/Draggable.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tabstrip.css", "../../../packages/vuu-ui-controls/src/tabstrip/TabMenu.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tab.css"],
+  "sourcesContent": [".vuuEditableLabel {\n  --saltInput-minWidth: 14px;\n  --saltInput-position: absolute;\n  --editableLabel-padding: var(--saltEditableLabel-padding, 6px);\n  --editableLabel-height: var(--saltEditableLabel-height, 26px);\n  color: inherit;\n  cursor: default;\n  display: flex;\n  flex-direction: column;\n  font-size: var(--salt-text-fontSize);\n  height: var(--editableLabel-height);\n  justify-content: center;\n  outline: none;\n  padding: 0 var(--editableLabel-padding);\n  position: relative;\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuEditableLabel:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--editableLabel-padding, 0);\n  padding: 0;\n  outline-style: none;\n  right: var(--editableLabel-padding, 0);\n}\n\n.vuuEditableLabel-input {\n  outline: none;\n}\n", ".vuuStatus-container {\n\tdisplay: flex;\n}\n\n.vuuStatus-text {\n\talign-self: center;\n}\n\n\n.vuuStatus {\n\t--vuu-icon-height: 18px;\n\t--vuu-icon-padding: var(--vuuStatus-padding, 6px);\n\t--vuu-icon-width: var(--vuuStatus-width, auto);\n\t--vuu-icon-min-width: var(--vuuStatus-min-width, 20px);\n\talign-items: center;\n\tdisplay: inline-flex;\n\theight: var(--vuu-icon-height);\n\tjustify-content: center;\n\tmin-width: var(--vuu-icon-min-width);\n\tpadding: 0 var(--vuu-icon-padding);\n\twidth: var(--vuu-icon-width);\n\tposition: relative;\n}\n\n.vuuStatus[data-icon]::after {\n\tinset: 0 0 0 0;\n\tcontent: '';\n\tbox-shadow: 0 0 0 0 black;\n\tposition: absolute;\n\tmask: var(--vuu-icon-svg) center center/20px 20px no-repeat;\n\t-webkit-mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;\n}\n\n.vuuActiveStatus::after {\n\t--vuu-icon-svg: var(--svg-active-status);\n\tbackground-color: rgb(0, 255, 0);\n}\n\n.vuuConnectingStatus::after {\n\t--vuu-icon-svg: var(--svg-connecting-status);\n\tbackground-color: orange;\n\ttransform: scale(1);\n\tanimation: infinite pulse 1s;\n}\n\n.vuuDisconnectedStatus::after {\n\t--vuu-icon-svg: var(--svg-disconnected-status);\n\tbackground-color: red;\n\ttransform: scale(1);\n\tanimation: infinite pulse 0.5s;\n}\n\n@keyframes pulse {\n\t0% {\n\t\ttransform: scale(0.95);\n\t\tbox-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);\n\t}\n\n\t70% {\n\t\ttransform: scale(1);\n\t\tbox-shadow: 0 0 0 0 rgba(0, 0, 0, 0);\n\t}\n\n\t100% {\n\t\ttransform: scale(0.95);\n\t\tbox-shadow: 0 0 0 0 rgba(0, 0, 0, 0);\n\t}\n}", ".vuuLoginPanel {\n  --hwTextInput-border: solid 1px #ccc;\n  --hwTextInput-height: 28px;\n  --hwTextInput-padding: 0 12px;\n  --hwTextInput-width: 100%;\n  --login-row-height: 60px;\n  align-content: center;\n  align-items: center;\n  border: solid 1px lightgray;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  justify-content: center;\n  justify-items: center;\n  margin: 0 auto;\n  padding: 48px 48px 24px 48px;\n  width: fit-content;\n}\n\n.vuuLoginPanel-login {\n  grid-column: 2/3;\n  align-self: end;\n  justify-self: end;\n}\n", ".vuuSessionEditingForm {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    min-width: 400px;\n    padding: 6px;\n}\n\n.vuuSessionEditingForm-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    gap: 3px;\n    overflow: auto;\n}\n\n.vuuSessionEditingForm-field {\n    align-items: center;\n    display: flex;\n    height: 32px;\n}\n\n.vuuSessionEditingForm-fieldLabel {\n    flex: 0 0 50%;\n}\n\n.vuuSessionEditingForm-fieldValue {\n    max-width: 50%;\n}\n\n.vuuSessionEditingForm-fieldValue.vuuReadOnly {\n    font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n.vuuSessionEditingForm-buttonbar {\n    align-items: center;\n    border-top: solid 1px var(--salt-container-primary-borderColor);\n    display: flex;\n    justify-content: flex-end;\n    flex: 0 0 autox;\n    gap: 6px;\n    padding-top: 6px;\n}\n\n.vuuSessionEditingForm-errorBanner {\n    --vuu-icon-left: 3px;\n    --vuu-icon-size: 18px;\n    --vuu-icon-top: 3px;\n    border: solid 1px var(--salt-status-error-borderColor);\n    line-height: 24px;\n    padding: 0 6px 0 26px;\n    position: relative;\n}", ".vuuUserPanel {\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  max-height: 400px;\n  padding: 12px;\n}\n\nvuuUserPanel-history {\n  flex: 1 1 auto;\n}\n\n.vuuUserPanel-buttonBar {\n  --saltButton-width: 100%;\n  align-items: flex-end;\n  border-top: 1px solid var(--surface3);\n  display: flex;\n  flex: 0 0 32px;\n  justify-content: flex-start;\n}\n\n.btn-logout {\n  --hwButton-icon-left: 12px;\n  --hwButton-padding: 0 6px 0 24px;\n  padding-left: 24px;\n}\n", ".vuuUserProfile {\n  --svg-icon: var(--svg-user);\n}\n", ".vuuThemeSwitch {\n    --saltButton-minWidth: 22px;\n}\n\n.vuuThemeSwitch {\n    --svg-light: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 31q2.9 0 4.95-2.05Q31 26.9 31 24q0-2.9-2.05-4.95Q26.9 17 24 17q-2.9 0-4.95 2.05Q17 21.1 17 24q0 2.9 2.05 4.95Q21.1 31 24 31Zm0 3q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM3.5 25.5q-.65 0-1.075-.425Q2 24.65 2 24q0-.65.425-1.075Q2.85 22.5 3.5 22.5h5q.65 0 1.075.425Q10 23.35 10 24q0 .65-.425 1.075-.425.425-1.075.425Zm36 0q-.65 0-1.075-.425Q38 24.65 38 24q0-.65.425-1.075.425-.425 1.075-.425h5q.65 0 1.075.425Q46 23.35 46 24q0 .65-.425 1.075-.425.425-1.075.425ZM24 10q-.65 0-1.075-.425Q22.5 9.15 22.5 8.5v-5q0-.65.425-1.075Q23.35 2 24 2q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 10 24 10Zm0 36q-.65 0-1.075-.425-.425-.425-.425-1.075v-5q0-.65.425-1.075Q23.35 38 24 38q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 46 24 46ZM12 14.1l-2.85-2.8q-.45-.45-.425-1.075.025-.625.425-1.075.45-.45 1.075-.45t1.075.45L14.1 12q.4.45.4 1.05 0 .6-.4 1-.4.45-1.025.45-.625 0-1.075-.4Zm24.7 24.75L33.9 36q-.4-.45-.4-1.075t.45-1.025q.4-.45 1-.45t1.05.45l2.85 2.8q.45.45.425 1.075-.025.625-.425 1.075-.45.45-1.075.45t-1.075-.45ZM33.9 14.1q-.45-.45-.45-1.05 0-.6.45-1.05l2.8-2.85q.45-.45 1.075-.425.625.025 1.075.425.45.45.45 1.075t-.45 1.075L36 14.1q-.4.4-1.025.4-.625 0-1.075-.4ZM9.15 38.85q-.45-.45-.45-1.075t.45-1.075L12 33.9q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05l-2.8 2.85q-.45.45-1.075.425-.625-.025-1.075-.425ZM24 24Z\"/></svg>');\n    --svg-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 42q-7.5 0-12.75-5.25T6 24q0-7.5 5.25-12.75T24 6q.4 0 .85.025.45.025 1.15.075-1.8 1.6-2.8 3.95-1 2.35-1 4.95 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q2.6 0 4.95-.925T41.9 22.3q.05.6.075.975Q42 23.65 42 24q0 7.5-5.25 12.75T24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z\"/></svg>');\n}\n\n.salt-density-high .vuuThemeSwitch {\n    --saltButton-minWidth: 16px;\n    --saltButton-width: 18px;\n    --vuuThemeSwitch-iconSize: 16px;\n}\n\n.vuuThemeSwitch [data-icon] {\n    --vuu-icon-size: var(--vuuThemeSwitch-iconSize,18px);\n}\n\n.vuuThemeSwitch [data-icon='light'] {\n    --vuu-icon-svg: var(--svg-light);\n}\n.vuuThemeSwitch [data-icon='dark'] {\n    --vuu-icon-svg: var(--svg-dark);\n}\n", ".vuuAppHeader {\n  align-items: center;\n  border-bottom: solid 1px var(--salt-container-secondary-borderColor);\n  display: flex;\n  height: 40px;\n  justify-content: flex-end;\n}\n\n.vuu-purple-theme .vuuAppHeader {\n  border-radius: 8px;\n  border: 1px solid #D6D7DA; \n  height: 44px;\n  margin-bottom: 8px;\n}", ".vuuContextPanel {\n    position: relative;\n    transition: width .3s ease-in-out;\n    width: var(--vuu-side-panel-width, 0px) !important;\n    z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n    --vuu-side-panel-width: 300px !important;\n    --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n    --vuu-side-panel-padding: 24px;\n}\n\n.vuuContextPanel-overlay {\n    width: 0px !important;\n}\n\n.vuuContextPanel-inner {\n    background-color: var(--salt-container-primary-background);\n    box-shadow: var(--vuu-side-panel-shadow, none);\n    height: 100%;\n    padding-bottom: 24px;\n    padding-top: 24px;\n    padding-left: var(--vuu-side-panel-padding, 0);\n    padding-right: var(--vuu-side-panel-padding, 0);\n    position: absolute;\n    right: 0;\n    top:0;\n    transition-property: padding-left, padding-right, width;\n    transition-duration: .3s;\n    transition-timing-function: ease-in-out;\n    width: var(--vuu-side-panel-width, 0px);\n\n}\n\n.vuuContextPanel-header {\n    align-items: center;\n    display: flex;\n    flex-wrap: nowrap;\n    height: 27px;\n    justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n    font-size: 20px;\n    font-weight: 700;\n    white-space: nowrap;\n}", ".vuuLeftNav {\n\n    --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n    --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n    --svg-templates: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n    --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n    --vuu-accent-color: #f37880;\n    --vuu-light-text-primary: #15171b;\n    background-color: #2A015F;\n    container-type: inline-size;\n    display: flex;\n    flex-direction: column;\n    padding: 32px 16px;\n    transition: width .3s ease-in-out;\n\n}\n\n.vuuLeftNav-logo {\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n}\n\n.vuuLeftNav-main {\n    flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n    color: white;\n    margin-top: 102px;\n    padding: 0;\n}\n\n.vuuLeftNav-menuitem {\n    --vuu-icon-color: white;\n    align-items: center;\n    border-radius: 6px;\n    display: flex;\n    font-weight: 700;\n    height: 40px;\n   line-height: 24px;\n   list-style: none;\n   padding: 8px 16px 8px 48px;    \n}\n\n.vuuLeftNav-menuitem[data-icon] {\n    --vuu-icon-left: 32px;\n    --vuu-icon-size: 16px;\n}\n\n.vuuLeftNav-menuitem[data-icon='demo'] {\n    --vuu-icon-svg: var(--svg-demo);\n  }\n.vuuLeftNav-menuitem[data-icon='tables'] {\n    --vuu-icon-svg: var(--svg-tables);\n  }\n.vuuLeftNav-menuitem[data-icon='templates'] {\n    --vuu-icon-svg: var(--svg-templates);\n  }\n.vuuLeftNav-menuitem[data-icon='layouts'] {\n    --vuu-icon-svg: var(--svg-layouts);\n  }\n\n  .vuuLeftNav-menuitem-label {\n    white-space: nowrap;\n  }\n\n.vuuLeftNav-menuitem-active {\n   --vuu-icon-color: var(--vuu-accent-color);\n   background: rgba(255, 255, 255, 0.10);\n   border-left: solid 4px var(--vuu-accent-color);\n}\n\n@container (max-width: 100px) {\n    .vuuLeftNav-menuitem {\n        padding-left: 28px;\n    }\n    .vuuLeftNav-menuitem-label {\n        display: none;\n    }\n}\n\n.vuuLeftNav-buttonBar {\n    align-items: center;\n    display: flex;\n    flex: 0 0 100px;\n    justify-content: center;;\n}\n\n.vuuLeftNav-toggleButton {\n    --vuu-icon-color: var(--vuu-light-text-primary);\n    --vuu-icon-left: 11px;\n    --vuu-icon-top: 10px;\n    --vuu-icon-size: 16px;\n    background-color: var(--vuu-accent-color);\n    border-width: 0;\n    border-radius: 18px;\n    height: 36px;\n    position: relative;\n    width: 36px\n}\n\n.vuuLeftNav-toggleButton-open {\n    --vuu-icon-left: 9px;\n\n}", ".vuuShell {\n  background-color: var(--salt-container-primary-background, ivory);\n  height: var(--vuuShell-height, 100vh);\n  width: var(--vuuShell-width, 100vw);\n}\n\n.vuuShell-palette {\n  --vuuView-border: none;\n  --vuuView-margin: 0;\n}\n\n.vuuShell-warningPlaceholder {\n  background-color: var(--salt-container-background-high);\n  height: 100%;\n}\n", ".vuuDialog {\n  background: var(--salt-container-primary-background);\n  border: var(--vuuDialog-border, solid 1px #ccc);\n  border-radius: 5px;\n  padding: var(--vuuDialog-padding, 0);\n  box-shadow: var(--salt-overlayable-shadow, none);\n  height: var(--vuuDialog-height, fit-content);\n  width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n\n  --saltToolbar-background: transparent;\n  --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n  align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n  right: 2px;\n}\n\n\n", ".vuuMenuList {\n  --context-menu-color: var(--vuuMenuList-color,#161616);\n  --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n  --context-menu-highlight-bg: #a4d5f4;\n  --context-menu-blur-focus-bg: #e0e4e9;\n  --menu-item-icon-color: black;\n  --menu-item-twisty-color: black;\n  --menu-item-twisty-content: '';\n  --menu-item-twisty-top: 50%;\n  --menu-item-twisty-left: auto;\n  --menu-item-twisty-right: 0px;\n  --menu-icon-size: 12px;\n\n  background-clip: padding-box;\n  background-color: white;\n  border-radius: 4px;\n  border: solid 1px var(--vuuMenuList-borderColor, rgba(0, 0, 0, 0.15));\n  box-shadow: var(--context-menu-shadow);\n  font-size: var(--vuuMenuList-fontSize, var(--salt-text-label-fontSize));\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  list-style: none;\n  margin: 2px 0 0;\n  outline: 0;\n  overflow: hidden;\n  padding: var(--vuuMenuList-padding, 0);\n  position: absolute;\n}\n\n.vuuMenuItem {\n  align-items: center;\n  border-width: 1px;\n  border-color: var(--vuuMenuItem-borderColor, transparent);\n  border-style: var(--vuuMenuItem-borderStyle, none);\n  color: var(--context-menu-color);\n  display: flex;\n  gap: 6px;\n  height: var(--vuuMenuItem-height, var(--hw-list-item-height, 24px));\n  padding: var(--context-menu-padding);\n  padding-right: 24px;\n  position: relative;\n  white-space: nowrap;\n}\n\n.vuuIconContainer {\n  display: inline-block;\n  flex: 12px 0 0;\n  height: var(--menu-icon-size);\n  mask-repeat: no-repeat;\n  width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n  border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n  content: var(--menu-item-twisty-content);\n  -webkit-mask: var(--vuu-svg-chevron-right) center center/8px 8px no-repeat;\n  mask: var(---vuu-svg-chevron-right) center center/8px 8px no-repeat;\n  background-color: var(--menu-item-twisty-color);\n  height: 16px;\n  left: var(--menu-item-twisty-left);\n  right: var(--menu-item-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--menu-item-twisty-top);\n  transition: transform 0.3s;\n  width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n  background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n  background-color: var(--context-menu-highlight-bg);\n  cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .vuuMenuItem[data-highlighted] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n  left: auto;\n  right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n  text-decoration: none;\n  color: rgb(0, 0, 0);\n  background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.vuuMenuItem-button:hover {\n  outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n  clear: both;\n  font-weight: normal;\n  line-height: 1.5;\n  color: rgb(120, 120, 120);\n  white-space: nowrap;\n  text-decoration: none;\n  cursor: default;\n}\n", ".vuuPopup {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.vuuPopup {\n  position: absolute;\n}\n", ".vuuPopupMenu {\n    --saltButton-height: 24px;\n    --saltButton-width: 24px;\n    --vuu-icon-color: #606477;\n    --vuu-icon-height: 20px;\n    --vuu-icon-left: 2px;\n    --vuu-icon-size: 16px;\n    --vuu-icon-top: 2px;\n    --vuu-icon-width: 20px;\n\n    background: var(--vuuPopupMenu-background, transparent);\n    border-radius: 4px;\n    cursor: pointer;\n    display: inline-block;\n    margin-top: 2px;\n    padding: 2px;\n}\n\n.vuuPopupMenu:hover {\n    /* --vuu-icon-color: #15171B; */\n    --vuu-icon-color: var(--saltButton-text-color-hover);\n}\n\n.vuuPopupMenu-open {\n    --saltButton-background: var(--salt-actionable-secondary-background-active);\n    --vuu-icon-color: white;\n}\n\n/* temp references to theme until new theme fully incorporated */\n.vuu-theme-purple .vuuPopupMenu:hover {\n    --saltButton-background-hover: #F37880;\n}\n\n.vuu-theme-purple .vuuPopupMenu-open {\n    --saltButton-background: #6D18BD;\n}", ".vuuDraggable {\n  background: transparent;\n  box-shadow: var(--salt-overlayable-shadow-drag);\n  cursor: var(--salt-draggable-grab-cursor-active);\n  position: absolute;\n  opacity: .95;\n  z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n  display: var(--saltDraggable-display, inline-block);\n  height: var(--saltDraggable-spacer-height, var(--tabs-tabstrip-height));\n  transition: var(--saltDraggable-transitionProp, width) 0.3s ease;\n  width: var(--saltDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n  display: var(--saltDraggable-display, inline-block);\n  /* height: var(--saltDraggable-spacer-height, var(--tabs-tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  height: 0px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n  transition: var(--saltDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n  /* height: var(--saltDraggable-spacer-height, var(--tabs-tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  background-color: var(--salt-palette-accent-background);\n  height: 2px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n  background-color: var(--salt-palette-accent-background);\n  position: absolute;\n  top: -2px;\n  left: -3px;\n}\n\n.vuuDraggable-settling {\n  transition-property: left, top;\n  transition-duration: .15s;\n  transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n  order: 1;\n}", "/* Component class applied to the root element */\n.vuuTabstrip {\n  --vuuOverflowContainer-background: transparent;\n  /* --tabs-tabstrip-height: var(--vuuTabstrip-height, var(--salt-size-stackable)); */\n  --tabs-tabstrip-height: var(--vuuTabstrip-height, 28px);\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor));\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: visible;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip-horizontal {\n  --vuuTabActivationIndicator-height: 1px;\n  --vuuTabActivationIndicator-thumb-inset: -1px 0 0 0;\n  --tab-activationIndicator-borderStyle: none none solid none;\n  --tab-activationIndicator-inset: auto 0px 0px 0px;\n  --tab-activationIndicator-transitionProperty: left;\n  --tab-activationIndicator-thumb-height: 0px;\n  --tab-thumb-height: 2px;\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip-vertical {\n  --vuuTabActivationIndicator-thumb-inset: 0 0 0 -1px;\n\n  --tab-activationIndicator-transition: top 0.3s ease;\n  --tab-activationIndicator-borderStyle: none solid none none;\n  --tab-activationIndicator-inset: 0px 0px 0px auto;\n  --tab-activationIndicator-transitionProperty: top;\n  --tab-activationIndicator-width: 1px;\n  --tab-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab {\n  --vuuTabs-activationIndicator-transition: none;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.vuuTabstrip-addTabButton {\n  --saltButton-height: 20px;\n  --saltButton-width: 20px;\n}\n\n.vuuTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.vuuTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.vuuTabstrip-vertical .vuuTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: 100%;\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.vuuDraggable-tabstrip-horizontal {\n  --tab-thumb-height: 2px;\n  --tabs-tabstrip-height: 28px;\n  --tab-activationIndicator-thumb-height: 2px;\n  --tab-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.vuuDraggable-tabstrip-vertical {\n  --tab-activationIndicator-inset: 0px 0px 0px auto;\n  --tab-activationIndicator-thumb-width: 2px;\n}\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n  order: 99;\n  visibility: hidden;\n} */\n\n.vuuTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n", ".vuuTabMenu {\n    top: -2px;\n}", "/* Class applied to root Tab element */\n.vuuTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tab-background: var(--salt-navigable-primary-background);\n  --tab-cursor: pointer;\n  --tab-position: relative;\n}\n\n.vuuTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--vuuTab-background, var(--tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--vuuTab-cursor, var(--tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  gap: 8px;\n  height: var(--vuuTab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n  min-width: var(--vuuTab-minWidth, 40px);\n  outline: none;\n  padding: 0 24px;\n  position: var(--vuuTab-position, var(--tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.vuuTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.vuuTab:not(.vuuTab-vertical) {\n  margin: 0 var(--tab-spacing) 0 0;\n}\n\n.vuuTab-selected {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n  align-items: center;;\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--vuuTabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  position: relative;\n}\n\n.vuuTab-closeable .vuuTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n  display: none;\n}\n\n.vuuTab .vuuTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--vuuTab-top, var(--tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab-vertical .vuuTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.vuuTab .vuuTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.vuuTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.vuuTab-vertical.vuuTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.vuuTab-vertical .saltFocusVisible:not(.vuuTab-selected):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.vuuTab.saltFocusVisible {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.vuuTab:before {\n  content: var(--tab-before-content, none);\n  background: var(--tab-before-background);\n  height: var(--tab-before-height);\n  inset: var(--tab-before-inset);\n  position: absolute;\n  width: var(--tab-before-width);\n  z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.vuuDraggable .vuuTab:before,\n.vuuTab:not(.vuuTab-selected).saltFocusVisible:before,\n.vuuTab:hover:not(.vuuTab-selected):before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-hover);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n.vuuTab-selected:before {\n  --tab-before-content: \"\";\n  background: var(--salt-navigable-indicator-active);\n  height: var(--tab-thumb-height);\n  position: absolute;\n  left: var(--tab-thumb-offset,0);\n  bottom:0px; \n  transition: var(--tab-thumb-transition, none);\n  width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover) {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n/* .vuuTabstrip.vuuTabThumb-noTransition .vuuTab-selected:before {\n  transition: none; \n} */"],
+  "mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACnCF;AACC;AAAA;AAGD;AACC;AAAA;AAID;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGD;AACC;AACA;AACA;AACA;AACA;AACA;AAAA;AAGD;AACC;AACA;AAAA;AAGD;AACC;AACA;AACA;AACA;AAAA;AAGD;AACC;AACA;AACA;AACA;AAAA;AAGD;AAAA;AAEE;AACA;AAAA;AAAA;AAIA;AACA;AAAA;AAAA;AAIA;AACA;AAAA;AAAA;;;ACjEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACtBF;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACnDJ;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACxBF;AACE;AAAA;;;ACDF;AACI;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAEJ;AACI;AAAA;;;ACvBJ;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;;;ACZF;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;;;AC9CJ;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACD;AACA;AACA;AAAA;AAGH;AACI;AACA;AAAA;AAGJ;AACI;AAAA;AAEJ;AACI;AAAA;AAEJ;AACI;AAAA;AAEJ;AACI;AAAA;AAGF;AACE;AAAA;AAGJ;AACG;AACA;AACA;AAAA;AAGH;AACI;AACI;AAAA;AAEJ;AACI;AAAA;AAAA;AAIR;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AAAA;;;ACvGJ;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;;;ACbF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACxBF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAEF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC3HF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACZF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AAEI;AAAA;AAGJ;AACI;AACA;AAAA;AAIJ;AACI;AAAA;AAGJ;AACI;AAAA;;;AClCJ;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAGA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACrDF;AACE;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AAAA;AAEF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAQF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AClJF;AACI;AAAA;;;ACAJ;AACE;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAIF;AAAA;AAAA;AAGE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@vuu-ui/vuu-ui-controls",
+  "version": "0.8.5-debug",
+  "description": "VUU UI Controls",
+  "author": "heswell",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@salt-ds/core": "1.2.0",
+    "@vuu-ui/vuu-data": "0.8.5-debug",
+    "@vuu-ui/vuu-data-types": "0.8.5-debug",
+    "@vuu-ui/vuu-layout": "0.8.5-debug",
+    "@vuu-ui/vuu-utils": "0.8.5-debug"
+  },
+  "peerDependencies": {
+    "classnames": "^2.2.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "files": [
+    "cjs",
+    "esm",
+    "index.css",
+    "index.css.map",
+    "/types"
+  ],
+  "module": "esm/index.js",
+  "main": "cjs/index.js",
+  "types": "types/index.d.ts"
+}

package/types/drag-drop/DragDropProvider.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+export interface DragDropContextProps {
+    dragSources?: Map<string, string[]>;
+    dropTargets?: Map<string, string[]>;
+    registerDragDropParty: (id: string) => void;
+}
+export type DragSources = {
+    [key: string]: {
+        dropTargets: string | string[];
+    };
+};
+export interface DragDropProviderProps {
+    children: ReactNode;
+    dragSources: DragSources;
+}
+export declare const DragDropProvider: ({ children, dragSources: dragSourcesProp, }: DragDropProviderProps) => JSX.Element;
+export interface DragDropProviderResult {
+    isDragSource: boolean;
+    isDropTarget: boolean;
+    register: (id: string) => void;
+}
+export declare const useDragDropProvider: (id?: string) => DragDropProviderResult;

package/types/drag-drop/Draggable.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, MutableRefObject, TransitionEventHandler } from "react";
+import "./Draggable.css";
+export declare const Draggable: import("react").ForwardRefExoticComponent<{
+    wrapperClassName: string;
+    element: HTMLElement;
+    onTransitionEnd?: TransitionEventHandler<Element> | undefined;
+    scale?: number | undefined;
+    style: CSSProperties;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const createDragSpacer: (transitioning?: MutableRefObject<boolean>) => HTMLElement;
+export declare const createDropIndicatorPosition: () => HTMLElement;
+export declare const createDropIndicator: (transitioning?: MutableRefObject<boolean>) => HTMLElement;

package/types/drag-drop/DropIndicator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Rect } from "./dragDropTypesNext";
+import "./DropIndicator.css";
+export declare const DropIndicator: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    rect: Rect;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/drag-drop/drag-utils.d.ts

@@ -0,0 +1,48 @@
+import { Direction, orientationType } from "./dragDropTypesNext";
+export type MeasuredDropTarget = {
+    currentIndex: number;
+    dataIndex?: number;
+    element: HTMLElement;
+    index: number;
+    order: number | undefined;
+    isDraggedElement: boolean;
+    isOverflowIndicator?: boolean;
+    start: number;
+    end: number;
+    mid: number;
+    size: number;
+};
+export type targetType = {
+    element: HTMLElement | null;
+    index: number;
+    isLast?: boolean;
+};
+type Dimension = keyof Pick<DOMRect, "width" | "height">;
+export declare const measureElementSizePositionAndOrder: (element: HTMLElement, dimension?: Dimension, includeAutoMargin?: boolean) => [number, number, number | undefined];
+export declare const dimensions: (orientation: orientationType) => {
+    CLIENT_SIZE: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    CONTRA: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+    CONTRA_POS: "clientX" | "clientY";
+    DIMENSION: "width" | "height";
+    END: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+    POS: "clientX" | "clientY";
+    SCROLL_POS: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    SCROLL_SIZE: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    START: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+} | {
+    CLIENT_SIZE: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    CONTRA: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+    CONTRA_POS: "clientX" | "clientY";
+    DIMENSION: "width" | "height";
+    END: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+    POS: "clientX" | "clientY";
+    SCROLL_POS: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    SCROLL_SIZE: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    START: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+};
+export declare const getDraggedItem: (measuredItems: MeasuredDropTarget[]) => MeasuredDropTarget;
+export declare const moveDragItem: (measuredItems: MeasuredDropTarget[], dropTarget: MeasuredDropTarget) => MeasuredDropTarget[];
+export declare const isDraggedElement: (item: MeasuredDropTarget) => boolean;
+export declare const measureDropTargets: (container: HTMLElement, orientation: orientationType, draggedItem: HTMLElement, itemQuery?: string) => MeasuredDropTarget[];
+export declare const getNextDropTarget: (dropTargets: MeasuredDropTarget[], pos: number, direction: Direction) => MeasuredDropTarget | null;
+export {};

package/types/drag-drop/dragDropTypesNext.d.ts

@@ -0,0 +1,72 @@
+import { MouseEventHandler, RefObject } from "react";
+export type ViewportRange = {
+    atEnd: boolean;
+    atStart: boolean;
+    from: number;
+    to: number;
+};
+type dimension = "width" | "height" | "scrollWidth" | "scrollHeight";
+type dimensions = {
+    size: dimension;
+    depth: dimension;
+    scrollDepth: dimension;
+};
+export type dimensionsType = {
+    horizontal: dimensions;
+    vertical: dimensions;
+};
+export type orientationType = keyof dimensionsType;
+export type dragStrategy = "drop-indicator" | "natural-movement";
+export type Direction = "fwd" | "bwd";
+export declare const FWD: Direction;
+export declare const BWD: Direction;
+export interface MouseOffset {
+    x: number;
+    y: number;
+}
+export type Rect = {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+};
+export interface DragHookResult {
+    draggable?: JSX.Element;
+    dropIndicator?: JSX.Element;
+    draggedItemIndex?: number;
+    isDragging: boolean;
+    isScrolling: RefObject<boolean>;
+    onMouseDown?: MouseEventHandler;
+    revealOverflowedItems: boolean;
+}
+export interface InternalDragHookResult extends Omit<DragHookResult, "isDragging" | "isScrolling"> {
+    beginDrag: (evt: MouseEvent) => void;
+    drag: (dragPos: number, mouseMoveDirection: "fwd" | "bwd") => void;
+    drop: () => void;
+    handleScrollStart: () => void;
+    handleScrollStop: (scrollDirection: "fwd" | "bwd", _scrollPos: number, atEnd: boolean) => void;
+}
+export interface DragDropProps {
+    allowDragDrop?: boolean | dragStrategy;
+    /** this is the className that will be assigned during drag to the dragged element  */
+    draggableClassName: string;
+    extendedDropZone?: boolean;
+    id?: string;
+    isDragSource?: boolean;
+    isDropTarget?: boolean;
+    onDragStart?: () => void;
+    onDrop: (fromIndex: number, toIndex: number) => void;
+    onDropSettle?: (toIndex: number) => void;
+    orientation: orientationType;
+    containerRef: RefObject<HTMLElement>;
+    itemQuery?: string;
+    viewportRange?: ViewportRange;
+}
+export type DragDropHook = (props: DragDropProps) => DragHookResult;
+export interface InternalDragDropProps extends Omit<DragDropProps, "draggableClassName"> {
+    draggableRef: RefObject<HTMLDivElement>;
+    isDragSource?: boolean;
+    isDropTarget?: boolean;
+    selected?: unknown;
+}
+export {};

package/types/drag-drop/drop-target-utils.d.ts

@@ -0,0 +1,75 @@
+import { ViewportRange } from "./dragDropTypesNext";
+import { Direction, orientationType, Rect } from "./dragDropTypesNext";
+export declare const NOT_OVERFLOWED = ":not(.wrapped)";
+export declare const NOT_HIDDEN = ":not([aria-hidden=\"true\"])";
+export type MeasuredDropTarget = {
+    /**
+      The index position currently occupied by this item. If draggable
+      is dropped here, this will be the destination drop position.
+    */
+    currentIndex: number;
+    dataIndex?: number;
+    element: HTMLElement;
+    id: string;
+    index: number;
+    isDraggedItem: boolean;
+    isLast?: boolean;
+    isOverflowIndicator?: boolean;
+    start: number;
+    end: number;
+    mid: number;
+    size: number;
+};
+export type targetType = {
+    element: HTMLElement | null;
+    index: number;
+    isLast?: boolean;
+};
+/** clones and removes id */
+export declare const cloneElement: <T extends HTMLElement>(element: T) => T;
+type Dimension = keyof Pick<DOMRect, "width" | "height">;
+type ElementPosition = "x" | "y";
+export declare const measureElementSizeAndPosition: (element: HTMLElement, dimension?: Dimension, includeAutoMargin?: boolean) => number[];
+export declare const dimensions: (orientation: orientationType) => {
+    CLIENT_POS: "clientX" | "clientY";
+    CLIENT_SIZE: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    CONTRA: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+    CONTRA_CLIENT_POS: "clientX" | "clientY";
+    CONTRA_END: "width" | "height";
+    CONTRA_POS: ElementPosition;
+    DIMENSION: "width" | "height";
+    END: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+    POS: ElementPosition;
+    SCROLL_POS: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    SCROLL_SIZE: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    START: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+} | {
+    CLIENT_POS: "clientX" | "clientY";
+    CLIENT_SIZE: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    CONTRA: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+    CONTRA_CLIENT_POS: "clientX" | "clientY";
+    CONTRA_END: "width" | "height";
+    CONTRA_POS: ElementPosition;
+    DIMENSION: "width" | "height";
+    END: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+    POS: ElementPosition;
+    SCROLL_POS: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    SCROLL_SIZE: "scrollLeft" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollHeight" | "clientHeight";
+    START: "left" | "right" | "x" | "y" | "width" | "height" | "bottom" | "top";
+};
+export declare const getItemById: (measuredItems: MeasuredDropTarget[], id: string) => MeasuredDropTarget | undefined;
+export declare const removeDraggedItem: (measuredItems: MeasuredDropTarget[], index: number) => void;
+export type dropZone = "start" | "end";
+export declare const measureDropTargets: (container: HTMLElement, orientation: orientationType, itemQuery?: string, viewportRange?: ViewportRange, draggedItemId?: string) => MeasuredDropTarget[];
+export declare const getIndexOfDraggedItem: (dropTargets: MeasuredDropTarget[]) => number;
+export declare const mutateDropTargetsSwitchDropTargetPosition: (dropTargets: MeasuredDropTarget[], direction: Direction) => void;
+export declare const getNextDropTarget: (dropTargets: MeasuredDropTarget[], pos: number, mouseMoveDirection: Direction) => MeasuredDropTarget;
+/**
+ * An item within a scrollable container might have a width or height greater than that of
+ * the container. If we drag such an item, we don't want the draggable to be larger than
+ * the container.
+ */
+export declare function constrainRect(targetRect: Rect, constraintRect: Rect): Rect;
+export declare const moveItem: <T = unknown>(items: T[], fromIndex: number, toIndex: number) => T[];
+export declare const dropTargetsDebugString: (dropTargets: MeasuredDropTarget[]) => string;
+export {};

package/types/drag-drop/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DragDropProvider";
+export * from "./useDragDropNext";

package/types/drag-drop/useAutoScroll.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+export type ScrollStopHandler = (scrollDirection: "fwd" | "bwd", scrollPos: number, atEnd: boolean) => void;
+export declare const useAutoScroll: ({ containerRef, onScrollingStopped, orientation, }: {
+    containerRef: RefObject<HTMLElement>;
+    onScrollingStopped?: ScrollStopHandler | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+}) => {
+    isScrolling: import("react").MutableRefObject<boolean>;
+    startScrolling: (direction: "fwd" | "bwd", scrollRate: number, scrollUnit?: any) => void;
+    stopScrolling: (atEnd?: any) => void;
+};

package/types/drag-drop/useDragDisplacers.d.ts

@@ -0,0 +1,15 @@
+import { MeasuredDropTarget } from "./drop-target-utils";
+import { Direction } from "./dragDropTypesNext";
+export type DragDisplacersHookResult = {
+    clearDisplacedItem: () => void;
+    displaceItem: (dropTargets: MeasuredDropTarget[], dropTarget: MeasuredDropTarget, size: number, useTransition?: boolean, direction?: Direction | "static", orientation?: "horizontal" | "vertical") => void;
+    displaceLastItem: (dropTargets: MeasuredDropTarget[], dropTarget: MeasuredDropTarget, size: number, useTransition?: boolean, direction?: Direction | "static", orientation?: "horizontal" | "vertical") => void;
+    clearSpacers: () => void;
+};
+export type DragDisplacersHook = () => DragDisplacersHookResult;
+/**
+ * Manage a pair of displacer elements to smoothly display a moving gap between
+ * list items of any kind. Designed to be used in a drag drop operation. The 'static'
+ * direction option should be used at drag start or following scroll.
+ */
+export declare const useDragDisplacers: DragDisplacersHook;

package/types/drag-drop/useDragDropIndicator.d.ts

@@ -0,0 +1,2 @@
+import { InternalDragDropProps, InternalDragHookResult } from "./dragDropTypesNext";
+export declare const useDragDropIndicator: ({ draggableRef, onDrop, orientation, containerRef, itemQuery, selected, viewportRange, }: InternalDragDropProps) => InternalDragHookResult;

package/types/drag-drop/useDragDropNaturalMovementNext.d.ts

@@ -0,0 +1,2 @@
+import { InternalDragDropProps, InternalDragHookResult } from "./dragDropTypesNext";
+export declare const useDragDropNaturalMovement: ({ draggableRef, onDrop, orientation, containerRef, itemQuery, selected, viewportRange, }: InternalDragDropProps) => InternalDragHookResult;

package/types/drag-drop/useDragDropNext.d.ts

@@ -0,0 +1,2 @@
+import { DragDropHook } from "./dragDropTypesNext";
+export declare const useDragDropNext: DragDropHook;

package/types/drag-drop/useDragSpacers.d.ts

@@ -0,0 +1,7 @@
+import { MeasuredDropTarget } from "./drag-utils";
+import { Direction } from "./dragDropTypesNext";
+export declare const useDragSpacers: () => {
+    displaceItem: (item: MeasuredDropTarget | null | undefined, draggedItem: MeasuredDropTarget, useTransition?: any, direction?: Direction) => void;
+    displaceLastItem: (item: MeasuredDropTarget, size: number, useTransition?: any) => void;
+    clearSpacers: () => void;
+};

package/types/drag-drop/useDropIndicator.d.ts

@@ -0,0 +1,8 @@
+import { dropZone, MeasuredDropTarget } from "./drop-target-utils";
+export declare const SPACER_SIZE = 0;
+export type DropIndicatorHookResult = {
+    positionDropIndicator: (dropTarget: MeasuredDropTarget, dropZone: dropZone) => HTMLElement;
+    clearSpacer: () => void;
+};
+export type DropIndicatorHook = () => DropIndicatorHookResult;
+export declare const useDropIndicator: DropIndicatorHook;

package/types/drag-drop/useTransition.d.ts

@@ -0,0 +1,3 @@
+export declare const useTransition: () => {
+    applyTransition: (element: HTMLElement, property: string, value: string) => void;
+};

package/types/editable-label/EditableLabel.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from "react";
+import "./EditableLabel.css";
+export interface EditableLabelProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    className?: string;
+    defaultEditing?: boolean;
+    defaultValue?: string;
+    editing?: boolean;
+    onEnterEditMode: () => void;
+    onChange?: (value: string) => void;
+    onExitEditMode: (originalLabel: string | undefined, editedLabel: string | undefined, allowDeactivation?: boolean, editCancelled?: boolean) => void;
+    defaultIsEditing?: boolean;
+    value?: string;
+}
+export declare const EditableLabel: import("react").ForwardRefExoticComponent<EditableLabelProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/editable-label/index.d.ts

@@ -0,0 +1 @@
+export * from "./EditableLabel";

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./editable-label";
+export * from "./tabstrip";

package/types/tabstrip/Tab.d.ts

@@ -0,0 +1,27 @@
+import { KeyboardEvent, MouseEvent } from "react";
+import "./Tab.css";
+import { MenuActionHandler } from "packages/vuu-data-types";
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "onKeyUp" | "onClick"> & {
+    ariaControls?: string | undefined;
+    closeable?: boolean | undefined;
+    draggable?: boolean | undefined;
+    dragging?: boolean | undefined;
+    editable?: boolean | undefined;
+    editing?: boolean | undefined;
+    focused?: boolean | undefined;
+    focusVisible?: boolean | undefined;
+    focusedChildIndex?: number | undefined;
+    location?: string | undefined;
+    selected?: boolean | undefined;
+    showMenuButton?: boolean | undefined;
+    index: number;
+    label?: string | undefined;
+    onClick?: ((e: MouseEvent<HTMLElement, globalThis.MouseEvent>, index: number) => void) | undefined;
+    onClose?: ((index: number) => void) | undefined;
+    onEnterEditMode?: (() => void) | undefined;
+    onExitEditMode?: import("./TabsTypes").exitEditHandler | undefined;
+    onKeyUp?: ((e: KeyboardEvent<Element>, index: number) => void) | undefined;
+    onMenuAction?: MenuActionHandler | undefined;
+    onMenuClose?: (() => void) | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/tabstrip/TabMenu.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { MenuActionHandler } from "packages/vuu-data-types";
+import "./TabMenu.css";
+export interface TabMenuProps {
+    allowClose: boolean;
+    allowRename: boolean;
+    location?: string;
+    onMenuAction: MenuActionHandler;
+    onMenuClose?: () => void;
+    index: number;
+}
+export declare const TabMenu: ({ allowClose, allowRename, location, onMenuAction, onMenuClose, index, }: TabMenuProps) => JSX.Element;

package/types/tabstrip/TabMenuOptions.d.ts

@@ -0,0 +1,10 @@
+import { ContextMenuItemDescriptor } from "packages/vuu-data-types";
+export type MenuOptions = {
+    [key: string]: unknown;
+};
+export interface TabMenuOptions {
+    tabIndex: number;
+}
+export declare const isTabMenuOptions: (options: unknown) => options is TabMenuOptions;
+export declare const closeCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;
+export declare const renameCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;

package/types/tabstrip/TabsTypes.d.ts

@@ -0,0 +1,112 @@
+import type { AriaAttributes, HTMLAttributes, KeyboardEvent, MouseEvent, ReactElement } from "react";
+import type { EditableLabelProps } from "../editable-label";
+import type { MenuActionHandler } from "packages/vuu-data-types";
+export type orientationType = "horizontal" | "vertical";
+export type ExitEditModeHandler = (originalValue: string, editedValue: string, allowDeactivation: boolean, tabIndex: number) => void;
+export interface FocusAPI {
+    focus: () => void;
+}
+export type navigationProps = Pick<TabProps, "onFocus" | "onKeyDown">;
+export type composableTabProps = navigationProps & Pick<TabProps, "onClick" | "onEnterEditMode" | "onExitEditMode" | "onMouseDown">;
+export type TabstripVariant = "primary" | "tertiary";
+export interface TabstripProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     *  index value of Active Tab.
+     */
+    activeTabIndex: number;
+    /**
+     * Boolean that enables add new tab
+     */
+    allowAddTab?: boolean;
+    /**
+     * when true Tabs may be re-arranged by dragging individual Tabs to new position within Tabstrip.
+     */
+    allowDragDrop?: boolean;
+    /**
+     * when true Tabs may be closed by user. This can be overridden on each individual Tab
+     */
+    allowCloseTab?: boolean;
+    /**
+     * when true Tab labels may be edited by user. This can be overridden on each individual Tab
+     */
+    allowRenameTab?: boolean;
+    animateSelectionThumb?: boolean;
+    /**
+     * Boolean that indicates if tabs are centered on the container
+     */
+    centered?: boolean;
+    /**
+     *  index value of Selected Tab, used in uncontrolled mode
+     */
+    defaultActiveTabIndex?: number;
+    editing?: boolean;
+    keyBoardActivation?: "manual" | "automatic";
+    /**
+     * A custom context menu location for TabMenu
+     */
+    location?: string;
+    /**
+     * callback that fires when user has clicked Add Tab button.
+     * client is responsible for re-render with additional tab.
+     * It is also responsibility of client to select tne new tab
+     * by setting activeTabIndex, if that is the desired behaviour.
+     */
+    onAddTab?: () => void;
+    /**
+     * callback that fires when tab selection changes
+     */
+    onActiveChange?: (tabIndex: number) => void;
+    /**
+     * callback that fires when user has opted to remove tab.
+     * client is responsible for re-render with tab removed.
+     * It is also responsibility of client to select tne new tab
+     * by setting activeTabIndex, a suggested value for this is
+     * provided by newActiveTabIndex.
+     */
+    onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;
+    onMoveTab?: (fromIndex: number, toIndex: number) => void;
+    orientation?: orientationType;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: ExitEditModeHandler;
+    /**
+     * Boolean that indicates whether to enable overflow dropdown or not
+     */
+    overflowMenu?: boolean;
+    promptForNewTabName?: boolean;
+    /**
+     * Should each tab render a popup menu. Default is false if tab is
+     * not closeable or renameable, otherwise true.
+     */
+    showTabMenuButton?: boolean;
+}
+export type exitEditHandler = (originalValue: string, editedValue: string, allowDeactivation: boolean, tabIndex: number) => void;
+export interface responsiveDataAttributes {
+    "data-index": number;
+    "data-overflowed"?: boolean;
+    "data-priority": number;
+}
+export type TabProps = Omit<HTMLAttributes<HTMLElement>, "onClick" | "onKeyUp"> & {
+    ariaControls?: AriaAttributes["aria-controls"];
+    closeable?: boolean;
+    draggable?: boolean;
+    dragging?: boolean;
+    editable?: boolean;
+    editing?: EditableLabelProps["editing"];
+    focused?: boolean;
+    focusVisible?: boolean;
+    focusedChildIndex?: number;
+    location?: string;
+    selected?: boolean;
+    showMenuButton?: boolean;
+    index: number;
+    label?: EditableLabelProps["defaultValue"];
+    onClick?: (e: MouseEvent<HTMLElement>, index: number) => void;
+    onClose?: (index: number) => void;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: exitEditHandler;
+    onKeyUp?: (e: KeyboardEvent, index: number) => void;
+    onMenuAction?: MenuActionHandler;
+    onMenuClose?: () => void;
+    orientation?: "horizontal" | "vertical";
+};
+export type TabElement = ReactElement<TabProps>;

package/types/tabstrip/Tabstrip.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TabstripProps } from "./TabsTypes";
+import "./Tabstrip.css";
+export declare const Tabstrip: ({ activeTabIndex: activeTabIndexProp, allowAddTab, allowCloseTab, allowDragDrop, allowRenameTab, animateSelectionThumb, children, className: classNameProp, id: idProp, keyBoardActivation, location, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, showTabMenuButton, style: styleProp, ...htmlAttributes }: TabstripProps) => JSX.Element;