@spectrum-web-components/tabs 0.6.9-lit-next.0 → 0.6.10

package/custom-elements.json

@@ -558,7 +558,7 @@
             },
             {
               "kind": "method",
-              "name": "getUpdateComplete",
+              "name": "_getUpdateComplete",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -680,7 +680,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{position:relative;box-sizing:border-box;height:var(--spectrum-tabs-item-height);line-height:var(--spectrum-tabs-item-height);z-index:1;text-decoration:none;white-space:nowrap;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;cursor:pointer;outline:none}:host([disabled]),:host([disabled]) #itemLabel{cursor:default}:host(:not([vertical])) ::slotted([slot=icon]){height:var(--spectrum-tabs-item-height)}:host([dir=ltr]) slot[name=icon]+#itemLabel{margin-left:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#itemLabel{margin-right:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host:before{content:\"\";position:absolute;top:50%;box-sizing:border-box;height:var(--spectrum-tabs-focus-ring-height);margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2 + var(--spectrum-tabs-rule-size)/2);border:var(--spectrum-tabs-focus-ring-size) solid transparent;border-radius:var(--spectrum-tabs-focus-ring-border-radius);pointer-events:none}#itemLabel{cursor:pointer;vertical-align:top;display:inline-block;font-size:var(--spectrum-tabs-text-size);font-weight:var(--spectrum-tabs-text-font-weight);text-decoration:none}#itemLabel:empty{display:none}:host{color:var(--spectrum-tabs-m-text-color,var(--spectrum-alias-label-text-color))}:host(:not([vertical])) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color,var(--spectrum-alias-icon-color))}:host(:hover){color:var(--spectrum-tabs-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]){color:var(--spectrum-tabs-m-text-color-selected,var(--spectrum-global-color-gray-900))}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-selected,var(--spectrum-global-color-gray-900))}:host(.focus-visible),:host(.focus-visible){color:var(--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host(.focus-visible),:host(:focus-visible){color:var(--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host(.focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(:focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([disabled]){color:var(--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}\n`"
+          "default": "css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-item-height);line-height:var(--spectrum-tabs-item-height);outline:none;position:relative;text-decoration:none;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #itemLabel{cursor:default}:host(:not([vertical])) ::slotted([slot=icon]){height:var(\n--spectrum-tabs-item-height\n)}:host([dir=ltr]) slot[name=icon]+#itemLabel{margin-left:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#itemLabel{margin-right:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host:before{border:var(--spectrum-tabs-focus-ring-size) solid transparent;border-radius:var(--spectrum-tabs-focus-ring-border-radius);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-focus-ring-height);margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2 + var(--spectrum-tabs-rule-size)/2);pointer-events:none;position:absolute;top:50%}#itemLabel{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-text-size);font-weight:var(--spectrum-tabs-text-font-weight);text-decoration:none;vertical-align:top}#itemLabel:empty{display:none}:host{color:var(\n--spectrum-tabs-m-text-color,var(--spectrum-alias-label-text-color)\n)}:host(:not([vertical])) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){color:var(\n--spectrum-tabs-m-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([selected]){color:var(\n--spectrum-tabs-m-text-color-selected,var(--spectrum-global-color-gray-900)\n)}:host([selected]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-selected,var(--spectrum-global-color-gray-900)\n)}:host(.focus-visible){color:var(\n--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){color:var(\n--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus)\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus)\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}:host(:focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}:host([disabled]){color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}\n`"
         }
       ],
       "exports": [
@@ -701,7 +701,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{--spectrum-tabs-focus-ring-border-radius:var(--spectrum-tabs-m-focus-ring-border-radius);--spectrum-tabs-compact-item-height:var(--spectrum-tabs-m-compact-item-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-compact-vertical-item-height:var(--spectrum-tabs-m-compact-vertical-item-height,var(--spectrum-global-dimension-size-400));--spectrum-tabs-compact-vertical-item-gap:var(--spectrum-tabs-m-compact-vertical-item-gap,var(--spectrum-global-dimension-size-50));--spectrum-tabs-text-font-weight:var(--spectrum-tabs-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-tabs-rule-border-radius:var(--spectrum-tabs-m-rule-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-tabs-rule-size:var(--spectrum-tabs-m-rule-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-focus-ring-size:var(--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-text-size:var(--spectrum-tabs-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-tabs-height:var(--spectrum-tabs-m-height,var(--spectrum-global-dimension-size-600));--spectrum-tabs-item-height:var(--spectrum-tabs-m-item-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-icon-gap:var(--spectrum-tabs-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-tabs-focus-ring-height:var(--spectrum-tabs-m-focus-ring-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-focus-ring-padding-x:var(--spectrum-tabs-m-focus-ring-padding-x,var(--spectrum-alias-item-padding-m));--spectrum-tabs-item-gap:var(--spectrum-tabs-m-item-gap,var(--spectrum-global-dimension-size-300));--spectrum-tabs-selection-indicator-animation-duration:var(--spectrum-tabs-m-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-tabs-vertical-rule-size:var(--spectrum-tabs-m-vertical-rule-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-vertical-item-height:var(--spectrum-tabs-m-vertical-item-height,var(--spectrum-global-dimension-size-550));--spectrum-tabs-vertical-item-gap:var(--spectrum-tabs-m-vertical-item-gap,var(--spectrum-global-dimension-size-50));--spectrum-tabs-vertical-item-margin-left:var(--spectrum-tabs-m-vertical-item-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-tabs-quiet-compact-height:var(--spectrum-tabs-quiet-m-compact-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-item-height:calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-compact-item-height:calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-text-size:var(--spectrum-alias-font-size-default,var(--spectrum-global-dimension-font-size-100))}#list{display:flex;position:relative;z-index:0;margin:0;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);vertical-align:top}:host([dir=ltr]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) #selectionIndicator{left:0}:host([dir=rtl]) #selectionIndicator{right:0}#selectionIndicator{position:absolute;z-index:0;transition:transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out;transform-origin:top left;border-radius:var(--spectrum-tabs-rule-border-radius)}:host([compact]) ::slotted(*){line-height:var(--spectrum-tabs-compact-item-height)}:host([compact]) ::slotted(*){height:var(--spectrum-tabs-compact-item-height)}:host([direction=horizontal]) #list{align-items:center;border-bottom:var(--spectrum-tabs-rule-size) solid}:host([direction=horizontal]) ::slotted(*){vertical-align:top}:host([dir=ltr][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-left:var(--spectrum-tabs-item-gap)}:host([dir=rtl][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-right:var(--spectrum-tabs-item-gap)}:host([direction=horizontal]) #selectionIndicator{position:absolute;bottom:0;height:var(--spectrum-tabs-rule-size);bottom:calc(-1*var(--spectrum-tabs-rule-size))}:host([direction=horizontal][compact]) #list{box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height);align-items:end}:host([quiet]) #list{display:inline-flex}:host([dir=ltr][direction=vertical]) #list{border-left:var(--spectrum-tabs-vertical-rule-size) solid}:host([dir=rtl][direction=vertical]) #list{border-right:var(--spectrum-tabs-vertical-rule-size) solid}:host([direction=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction=vertical]) ::slotted(*){margin-left:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl][direction=vertical]) ::slotted(*){margin-right:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([direction=vertical]) ::slotted(*){height:var(--spectrum-tabs-vertical-item-height);padding-top:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);margin-bottom:var(--spectrum-tabs-vertical-item-gap)}:host([dir=ltr][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=ltr][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([direction=vertical]) ::slotted(*):before{margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2)}:host([direction=vertical][compact]) #list ::slotted(*){height:var(--spectrum-tabs-compact-vertical-item-height);line-height:var(--spectrum-tabs-compact-vertical-item-height);margin-bottom:var(--spectrum-tabs-compact-vertical-item-gap)}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:0}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:0}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([direction=vertical]) #selectionIndicator{position:absolute;width:var(--spectrum-tabs-vertical-rule-size)}#list{border-bottom-color:var(--spectrum-tabs-m-rule-color,var(--spectrum-alias-border-color-light))}:host([dir=ltr][direction=vertical]) #list{border-left-color:var(--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light))}:host([dir=rtl][direction=vertical]) #list{border-right-color:var(--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light))}#selectionIndicator{background-color:var(--spectrum-tabs-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}:host([quiet]) #list{border-bottom-color:var(--spectrum-tabs-quiet-m-rule-color,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #selectionIndicator{background-color:var(--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}:host([dir=ltr][direction=vertical][compact]) #list,:host([dir=ltr][direction=vertical][quiet]) #list{border-left-color:var(--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent))}:host([dir=rtl][direction=vertical][compact]) #list,:host([dir=rtl][direction=vertical][quiet]) #list{border-right-color:var(--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent))}:host([direction=vertical][compact]) #list #selectionIndicator,:host([direction=vertical][quiet]) #list #selectionIndicator{background-color:var(--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}\n`"
+          "default": "css`\n:host{--spectrum-tabs-focus-ring-border-radius:var(\n--spectrum-tabs-m-focus-ring-border-radius\n);--spectrum-tabs-compact-item-height:var(\n--spectrum-tabs-m-compact-item-height,var(--spectrum-alias-item-height-m)\n);--spectrum-tabs-compact-vertical-item-height:var(\n--spectrum-tabs-m-compact-vertical-item-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-tabs-compact-vertical-item-gap:var(\n--spectrum-tabs-m-compact-vertical-item-gap,var(--spectrum-global-dimension-size-50)\n);--spectrum-tabs-text-font-weight:var(\n--spectrum-tabs-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-rule-border-radius:var(\n--spectrum-tabs-m-rule-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-rule-size:var(\n--spectrum-tabs-m-rule-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-focus-ring-size:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-text-size:var(\n--spectrum-tabs-m-text-size,var(--spectrum-alias-item-text-size-m)\n);--spectrum-tabs-height:var(\n--spectrum-tabs-m-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-item-height:var(\n--spectrum-tabs-m-item-height,var(--spectrum-alias-item-height-m)\n);--spectrum-tabs-icon-gap:var(\n--spectrum-tabs-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m)\n);--spectrum-tabs-focus-ring-height:var(\n--spectrum-tabs-m-focus-ring-height,var(--spectrum-alias-item-height-m)\n);--spectrum-tabs-focus-ring-padding-x:var(\n--spectrum-tabs-m-focus-ring-padding-x,var(--spectrum-alias-item-padding-m)\n);--spectrum-tabs-item-gap:var(\n--spectrum-tabs-m-item-gap,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-selection-indicator-animation-duration:var(\n--spectrum-tabs-m-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-vertical-rule-size:var(\n--spectrum-tabs-m-vertical-rule-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-vertical-item-height:var(\n--spectrum-tabs-m-vertical-item-height,var(--spectrum-global-dimension-size-550)\n);--spectrum-tabs-vertical-item-gap:var(\n--spectrum-tabs-m-vertical-item-gap,var(--spectrum-global-dimension-size-50)\n);--spectrum-tabs-vertical-item-margin-left:var(\n--spectrum-tabs-m-vertical-item-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-tabs-quiet-compact-height:var(\n--spectrum-tabs-quiet-m-compact-height,var(--spectrum-alias-item-height-m)\n)}:host{--spectrum-tabs-item-height:calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-compact-item-height:calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-text-size:var(\n--spectrum-alias-font-size-default,var(--spectrum-global-dimension-font-size-100)\n)}#list{display:flex;margin:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);padding-top:0;position:relative;vertical-align:top;z-index:0}:host([dir=ltr]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) #selectionIndicator{left:0}:host([dir=rtl]) #selectionIndicator{right:0}#selectionIndicator{border-radius:var(--spectrum-tabs-rule-border-radius);position:absolute;transform-origin:top left;transition:transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out;z-index:0}:host([compact]) ::slotted(*){height:var(\n--spectrum-tabs-compact-item-height\n);line-height:var(--spectrum-tabs-compact-item-height)}:host([direction=horizontal]) #list{align-items:center;border-bottom:var(--spectrum-tabs-rule-size) solid}:host([direction=horizontal]) ::slotted(*){vertical-align:top}:host([dir=ltr][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-left:var(\n--spectrum-tabs-item-gap\n)}:host([dir=rtl][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-right:var(\n--spectrum-tabs-item-gap\n)}:host([direction=horizontal]) #selectionIndicator{bottom:0;bottom:calc(-1*var(--spectrum-tabs-rule-size));height:var(--spectrum-tabs-rule-size);position:absolute}:host([direction=horizontal][compact]) #list{align-items:end;box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height)}:host([quiet]) #list{display:inline-flex}:host([dir=ltr][direction=vertical]) #list{border-left:var(--spectrum-tabs-vertical-rule-size) solid}:host([dir=rtl][direction=vertical]) #list{border-right:var(--spectrum-tabs-vertical-rule-size) solid}:host([direction=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction=vertical]) ::slotted(*){margin-left:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl][direction=vertical]) ::slotted(*){margin-right:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([direction=vertical]) ::slotted(*){height:var(\n--spectrum-tabs-vertical-item-height\n);margin-bottom:var(--spectrum-tabs-vertical-item-gap);padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);padding-top:0}:host([dir=ltr][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=ltr][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([direction=vertical]) ::slotted(*):before{margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2)}:host([direction=vertical][compact]) #list ::slotted(*){height:var(\n--spectrum-tabs-compact-vertical-item-height\n);line-height:var(--spectrum-tabs-compact-vertical-item-height);margin-bottom:var(--spectrum-tabs-compact-vertical-item-gap)}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:0}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:0}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([direction=vertical]) #selectionIndicator{position:absolute;width:var(--spectrum-tabs-vertical-rule-size)}#list{border-bottom-color:var(\n--spectrum-tabs-m-rule-color,var(--spectrum-alias-border-color-light)\n)}:host([dir=ltr][direction=vertical]) #list{border-left-color:var(\n--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light)\n)}:host([dir=rtl][direction=vertical]) #list{border-right-color:var(\n--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light)\n)}#selectionIndicator{background-color:var(\n--spectrum-tabs-m-selection-indicator-color,var(--spectrum-global-color-gray-900)\n)}:host([quiet]) #list{border-bottom-color:var(\n--spectrum-tabs-quiet-m-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([quiet]) #selectionIndicator{background-color:var(\n--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900)\n)}:host([dir=ltr][direction=vertical][compact]) #list,:host([dir=ltr][direction=vertical][quiet]) #list{border-left-color:var(\n--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([dir=rtl][direction=vertical][compact]) #list,:host([dir=rtl][direction=vertical][quiet]) #list{border-right-color:var(\n--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([direction=vertical][compact]) #list #selectionIndicator,:host([direction=vertical][quiet]) #list #selectionIndicator{background-color:var(\n--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900)\n)}\n`"
         }
       ],
       "exports": [
@@ -743,7 +743,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{position:relative;box-sizing:border-box;height:var(--spectrum-tabs-item-height);line-height:var(--spectrum-tabs-item-height);z-index:1;text-decoration:none;white-space:nowrap;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;cursor:pointer;outline:none}:host([disabled]),:host([disabled]) #itemLabel{cursor:default}:host(:not([vertical])) ::slotted([slot=icon]){height:var(--spectrum-tabs-item-height)}:host([dir=ltr]) slot[name=icon]+#itemLabel{margin-left:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#itemLabel{margin-right:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host:before{content:\"\";position:absolute;top:50%;box-sizing:border-box;height:var(--spectrum-tabs-focus-ring-height);margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2 + var(--spectrum-tabs-rule-size)/2);border:var(--spectrum-tabs-focus-ring-size) solid transparent;border-radius:var(--spectrum-tabs-focus-ring-border-radius);pointer-events:none}#itemLabel{cursor:pointer;vertical-align:top;display:inline-block;font-size:var(--spectrum-tabs-text-size);font-weight:var(--spectrum-tabs-text-font-weight);text-decoration:none}#itemLabel:empty{display:none}:host{color:var(--spectrum-tabs-m-text-color,var(--spectrum-alias-label-text-color))}:host(:not([vertical])) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color,var(--spectrum-alias-icon-color))}:host(:hover){color:var(--spectrum-tabs-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]){color:var(--spectrum-tabs-m-text-color-selected,var(--spectrum-global-color-gray-900))}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-selected,var(--spectrum-global-color-gray-900))}:host(.focus-visible),:host(.focus-visible){color:var(--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host(.focus-visible),:host(:focus-visible){color:var(--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host(.focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(:focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([disabled]){color:var(--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}:host([disabled]){pointer-events:none}:host([vertical]){display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto!important;--sp-tab-vertial-margin-y:calc((var(--spectrum-tabs-vertical-item-height,\nvar(--spectrum-global-dimension-size-550)) - var(--spectrum-tabs-focus-ring-height,\nvar(--spectrum-alias-single-line-height)))/2)}:host([vertical]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)));right:calc(-1*var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)));height:auto;margin-top:0!important;top:0;bottom:0}:host([vertical]) ::slotted([slot=icon]){margin-top:var(--sp-tab-vertial-margin-y);flex-shrink:0}:host([dir][vertical]) slot[name=icon]+#itemLabel{font-size:var(--spectrum-tabs-text-size,var(--spectrum-alias-font-size-default));font-weight:var(--spectrum-tabs-text-font-weight,var(--spectrum-alias-body-text-font-weight));line-height:1;margin:var(--sp-tab-vertial-margin-y) 0}#itemLabel[hidden]{display:none}\n`"
+          "default": "css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-item-height);line-height:var(--spectrum-tabs-item-height);outline:none;position:relative;text-decoration:none;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #itemLabel{cursor:default}:host(:not([vertical])) ::slotted([slot=icon]){height:var(\n--spectrum-tabs-item-height\n)}:host([dir=ltr]) slot[name=icon]+#itemLabel{margin-left:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#itemLabel{margin-right:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host:before{border:var(--spectrum-tabs-focus-ring-size) solid transparent;border-radius:var(--spectrum-tabs-focus-ring-border-radius);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-focus-ring-height);margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2 + var(--spectrum-tabs-rule-size)/2);pointer-events:none;position:absolute;top:50%}#itemLabel{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-text-size);font-weight:var(--spectrum-tabs-text-font-weight);text-decoration:none;vertical-align:top}#itemLabel:empty{display:none}:host{color:var(\n--spectrum-tabs-m-text-color,var(--spectrum-alias-label-text-color)\n)}:host(:not([vertical])) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){color:var(\n--spectrum-tabs-m-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([selected]){color:var(\n--spectrum-tabs-m-text-color-selected,var(--spectrum-global-color-gray-900)\n)}:host([selected]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-selected,var(--spectrum-global-color-gray-900)\n)}:host(.focus-visible){color:var(\n--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){color:var(\n--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus)\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus)\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}:host(:focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}:host([disabled]){color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host([disabled]){pointer-events:none}:host([vertical]){--sp-tab-vertial-margin-y:calc((var(\n--spectrum-tabs-vertical-item-height,\nvar(--spectrum-global-dimension-size-550)\n) - var(\n--spectrum-tabs-focus-ring-height,\nvar(--spectrum-alias-single-line-height)\n))/2);align-items:center;display:flex;flex-direction:column;height:auto!important;justify-content:center}:host([vertical]):before{bottom:0;height:auto;left:calc(-1*var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)));margin-top:0!important;right:calc(-1*var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)));top:0}:host([vertical]) ::slotted([slot=icon]){flex-shrink:0;margin-top:var(--sp-tab-vertial-margin-y)}:host([dir][vertical]) slot[name=icon]+#itemLabel{font-size:var(\n--spectrum-tabs-text-size,var(--spectrum-alias-font-size-default)\n);font-weight:var(\n--spectrum-tabs-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);line-height:1;margin:var(--sp-tab-vertial-margin-y) 0}#itemLabel[hidden]{display:none}\n`"
         }
       ],
       "exports": [
@@ -764,7 +764,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css`\n:host{--spectrum-tabs-focus-ring-border-radius:var(--spectrum-tabs-m-focus-ring-border-radius);--spectrum-tabs-compact-item-height:var(--spectrum-tabs-m-compact-item-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-compact-vertical-item-height:var(--spectrum-tabs-m-compact-vertical-item-height,var(--spectrum-global-dimension-size-400));--spectrum-tabs-compact-vertical-item-gap:var(--spectrum-tabs-m-compact-vertical-item-gap,var(--spectrum-global-dimension-size-50));--spectrum-tabs-text-font-weight:var(--spectrum-tabs-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-tabs-rule-border-radius:var(--spectrum-tabs-m-rule-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-tabs-rule-size:var(--spectrum-tabs-m-rule-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-focus-ring-size:var(--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-text-size:var(--spectrum-tabs-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-tabs-height:var(--spectrum-tabs-m-height,var(--spectrum-global-dimension-size-600));--spectrum-tabs-item-height:var(--spectrum-tabs-m-item-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-icon-gap:var(--spectrum-tabs-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-tabs-focus-ring-height:var(--spectrum-tabs-m-focus-ring-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-focus-ring-padding-x:var(--spectrum-tabs-m-focus-ring-padding-x,var(--spectrum-alias-item-padding-m));--spectrum-tabs-item-gap:var(--spectrum-tabs-m-item-gap,var(--spectrum-global-dimension-size-300));--spectrum-tabs-selection-indicator-animation-duration:var(--spectrum-tabs-m-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-tabs-vertical-rule-size:var(--spectrum-tabs-m-vertical-rule-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-vertical-item-height:var(--spectrum-tabs-m-vertical-item-height,var(--spectrum-global-dimension-size-550));--spectrum-tabs-vertical-item-gap:var(--spectrum-tabs-m-vertical-item-gap,var(--spectrum-global-dimension-size-50));--spectrum-tabs-vertical-item-margin-left:var(--spectrum-tabs-m-vertical-item-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-tabs-quiet-compact-height:var(--spectrum-tabs-quiet-m-compact-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-item-height:calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-compact-item-height:calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-text-size:var(--spectrum-alias-font-size-default,var(--spectrum-global-dimension-font-size-100))}#list{display:flex;position:relative;z-index:0;margin:0;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);vertical-align:top}:host([dir=ltr]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) #selectionIndicator{left:0}:host([dir=rtl]) #selectionIndicator{right:0}#selectionIndicator{position:absolute;z-index:0;transition:transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out;transform-origin:top left;border-radius:var(--spectrum-tabs-rule-border-radius)}:host([compact]) ::slotted(*){line-height:var(--spectrum-tabs-compact-item-height)}:host([compact]) ::slotted(*){height:var(--spectrum-tabs-compact-item-height)}:host([direction=horizontal]) #list{align-items:center;border-bottom:var(--spectrum-tabs-rule-size) solid}:host([direction=horizontal]) ::slotted(*){vertical-align:top}:host([dir=ltr][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-left:var(--spectrum-tabs-item-gap)}:host([dir=rtl][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-right:var(--spectrum-tabs-item-gap)}:host([direction=horizontal]) #selectionIndicator{position:absolute;bottom:0;height:var(--spectrum-tabs-rule-size);bottom:calc(-1*var(--spectrum-tabs-rule-size))}:host([direction=horizontal][compact]) #list{box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height);align-items:end}:host([quiet]) #list{display:inline-flex}:host([dir=ltr][direction=vertical]) #list{border-left:var(--spectrum-tabs-vertical-rule-size) solid}:host([dir=rtl][direction=vertical]) #list{border-right:var(--spectrum-tabs-vertical-rule-size) solid}:host([direction=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction=vertical]) ::slotted(*){margin-left:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl][direction=vertical]) ::slotted(*){margin-right:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([direction=vertical]) ::slotted(*){height:var(--spectrum-tabs-vertical-item-height);padding-top:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);margin-bottom:var(--spectrum-tabs-vertical-item-gap)}:host([dir=ltr][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=ltr][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([direction=vertical]) ::slotted(*):before{margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2)}:host([direction=vertical][compact]) #list ::slotted(*){height:var(--spectrum-tabs-compact-vertical-item-height);line-height:var(--spectrum-tabs-compact-vertical-item-height);margin-bottom:var(--spectrum-tabs-compact-vertical-item-gap)}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:0}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:0}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([direction=vertical]) #selectionIndicator{position:absolute;width:var(--spectrum-tabs-vertical-rule-size)}#list{border-bottom-color:var(--spectrum-tabs-m-rule-color,var(--spectrum-alias-border-color-light))}:host([dir=ltr][direction=vertical]) #list{border-left-color:var(--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light))}:host([dir=rtl][direction=vertical]) #list{border-right-color:var(--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light))}#selectionIndicator{background-color:var(--spectrum-tabs-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}:host([quiet]) #list{border-bottom-color:var(--spectrum-tabs-quiet-m-rule-color,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #selectionIndicator{background-color:var(--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}:host([dir=ltr][direction=vertical][compact]) #list,:host([dir=ltr][direction=vertical][quiet]) #list{border-left-color:var(--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent))}:host([dir=rtl][direction=vertical][compact]) #list,:host([dir=rtl][direction=vertical][quiet]) #list{border-right-color:var(--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent))}:host([direction=vertical][compact]) #list #selectionIndicator,:host([direction=vertical][quiet]) #list #selectionIndicator{background-color:var(--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}:host{display:grid}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([disabled]) #selectionIndicator{background-color:var(--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([direction=vertical-right]) #selectionIndicator,:host([direction=vertical]) #selectionIndicator{top:0;height:1px}:host([compact]){--spectrum-tabs-height:var(--spectrum-tabs-quiet-compact-height)}:host([direction=horizontal]:not([quiet])) #list{border-bottom-color:var(--spectrum-tabs-rule-color,var(--spectrum-global-color-gray-200))}:host([dir][direction=horizontal]) #selectionIndicator{width:1px}:host([dir=ltr][direction=vertical-right]) #list{display:inline-flex;flex-direction:column;padding:0;border-right:var(--spectrum-tabs-vertical-rule-width,var(--spectrum-alias-border-size-thick)) solid;border-right-color:var(--spectrum-tabs-vertical-rule-color,var(--spectrum-global-color-gray-200))}:host([dir=rtl][direction=vertical-right]) #list{display:inline-flex;flex-direction:column;padding:0;border-left:var(--spectrum-tabs-vertical-rule-width,var(--spectrum-alias-border-size-thick)) solid;border-left-color:var(--spectrum-tabs-vertical-rule-color,var(--spectrum-global-color-gray-200))}:host([dir=ltr][direction=vertical-right]) ::slotted(*){height:var(--spectrum-tabs-vertical-item-height,var(--spectrum-global-dimension-size-550));padding:0 var(--spectrum-tabs-focus-ring-padding-x,var(--spectrum-global-dimension-size-100));margin-right:calc(var(--spectrum-tabs-vertical-item-margin-left,\nvar(--spectrum-global-dimension-size-150)) - var(--spectrum-tabs-focus-ring-padding-x,\nvar(--spectrum-global-dimension-size-100)));margin-bottom:var(--spectrum-tabs-vertical-item-gap,var(--spectrum-global-dimension-size-50))}:host([dir=rtl][direction=vertical-right]) ::slotted(*){height:var(--spectrum-tabs-vertical-item-height,var(--spectrum-global-dimension-size-550));padding:0 var(--spectrum-tabs-focus-ring-padding-x,var(--spectrum-global-dimension-size-100));margin-left:calc(var(--spectrum-tabs-vertical-item-margin-left,\nvar(--spectrum-global-dimension-size-150)) - var(--spectrum-tabs-focus-ring-padding-x,\nvar(--spectrum-global-dimension-size-100)));margin-bottom:var(--spectrum-tabs-vertical-item-gap,var(--spectrum-global-dimension-size-50))}:host([direction=vertical-right][compact]) ::slotted(*){line-height:var(--spectrum-tabs-compact-vertical-item-height,var(--spectrum-global-dimension-size-400));margin-bottom:var(--spectrum-tabs-compact-vertical-item-gap,var(--spectrum-global-dimension-size-50));height:var(--spectrum-tabs-compact-vertical-item-height,var(--spectrum-global-dimension-size-400))}:host([dir=ltr][direction=vertical-right]) #selectionIndicator{position:absolute;left:auto;width:var(--spectrum-tabs-vertical-rule-width,var(--spectrum-alias-border-size-thick));right:calc(-1*var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)))}:host([dir=rtl][direction=vertical-right]) #selectionIndicator{position:absolute;right:auto;width:var(--spectrum-tabs-vertical-rule-width,var(--spectrum-alias-border-size-thick));left:calc(-1*var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)))}:host([dir=ltr][direction=vertical-right][compact]) #list,:host([dir=ltr][direction=vertical-right][quiet]) #list{border-right-color:var(--spectrum-tabs-quiet-vertical-rule-color,var(--spectrum-alias-border-color-transparent))}:host([dir=rtl][direction=vertical-right][compact]) #list,:host([dir=rtl][direction=vertical-right][quiet]) #list{border-left-color:var(--spectrum-tabs-quiet-vertical-rule-color,var(--spectrum-alias-border-color-transparent))}:host([direction=vertical-right][compact]) #selectionIndicator,:host([direction=vertical-right][quiet]) #selectionIndicator{background-color:var(--spectrum-tabs-quiet-selection-indicator-color,var(--spectrum-global-color-gray-900))}#selectionIndicator.first-position{transition:none}\n`"
+          "default": "css`\n:host{--spectrum-tabs-focus-ring-border-radius:var(\n--spectrum-tabs-m-focus-ring-border-radius\n);--spectrum-tabs-compact-item-height:var(\n--spectrum-tabs-m-compact-item-height,var(--spectrum-alias-item-height-m)\n);--spectrum-tabs-compact-vertical-item-height:var(\n--spectrum-tabs-m-compact-vertical-item-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-tabs-compact-vertical-item-gap:var(\n--spectrum-tabs-m-compact-vertical-item-gap,var(--spectrum-global-dimension-size-50)\n);--spectrum-tabs-text-font-weight:var(\n--spectrum-tabs-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-rule-border-radius:var(\n--spectrum-tabs-m-rule-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-rule-size:var(\n--spectrum-tabs-m-rule-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-focus-ring-size:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-text-size:var(\n--spectrum-tabs-m-text-size,var(--spectrum-alias-item-text-size-m)\n);--spectrum-tabs-height:var(\n--spectrum-tabs-m-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-item-height:var(\n--spectrum-tabs-m-item-height,var(--spectrum-alias-item-height-m)\n);--spectrum-tabs-icon-gap:var(\n--spectrum-tabs-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m)\n);--spectrum-tabs-focus-ring-height:var(\n--spectrum-tabs-m-focus-ring-height,var(--spectrum-alias-item-height-m)\n);--spectrum-tabs-focus-ring-padding-x:var(\n--spectrum-tabs-m-focus-ring-padding-x,var(--spectrum-alias-item-padding-m)\n);--spectrum-tabs-item-gap:var(\n--spectrum-tabs-m-item-gap,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-selection-indicator-animation-duration:var(\n--spectrum-tabs-m-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-vertical-rule-size:var(\n--spectrum-tabs-m-vertical-rule-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-vertical-item-height:var(\n--spectrum-tabs-m-vertical-item-height,var(--spectrum-global-dimension-size-550)\n);--spectrum-tabs-vertical-item-gap:var(\n--spectrum-tabs-m-vertical-item-gap,var(--spectrum-global-dimension-size-50)\n);--spectrum-tabs-vertical-item-margin-left:var(\n--spectrum-tabs-m-vertical-item-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-tabs-quiet-compact-height:var(\n--spectrum-tabs-quiet-m-compact-height,var(--spectrum-alias-item-height-m)\n)}:host{--spectrum-tabs-item-height:calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-compact-item-height:calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-text-size:var(\n--spectrum-alias-font-size-default,var(--spectrum-global-dimension-font-size-100)\n)}#list{display:flex;margin:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);padding-top:0;position:relative;vertical-align:top;z-index:0}:host([dir=ltr]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) #selectionIndicator{left:0}:host([dir=rtl]) #selectionIndicator{right:0}#selectionIndicator{border-radius:var(--spectrum-tabs-rule-border-radius);position:absolute;transform-origin:top left;transition:transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out;z-index:0}:host([compact]) ::slotted(*){height:var(\n--spectrum-tabs-compact-item-height\n);line-height:var(--spectrum-tabs-compact-item-height)}:host([direction=horizontal]) #list{align-items:center;border-bottom:var(--spectrum-tabs-rule-size) solid}:host([direction=horizontal]) ::slotted(*){vertical-align:top}:host([dir=ltr][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-left:var(\n--spectrum-tabs-item-gap\n)}:host([dir=rtl][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-right:var(\n--spectrum-tabs-item-gap\n)}:host([direction=horizontal]) #selectionIndicator{bottom:0;bottom:calc(-1*var(--spectrum-tabs-rule-size));height:var(--spectrum-tabs-rule-size);position:absolute}:host([direction=horizontal][compact]) #list{align-items:end;box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height)}:host([quiet]) #list{display:inline-flex}:host([dir=ltr][direction=vertical]) #list{border-left:var(--spectrum-tabs-vertical-rule-size) solid}:host([dir=rtl][direction=vertical]) #list{border-right:var(--spectrum-tabs-vertical-rule-size) solid}:host([direction=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction=vertical]) ::slotted(*){margin-left:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl][direction=vertical]) ::slotted(*){margin-right:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([direction=vertical]) ::slotted(*){height:var(\n--spectrum-tabs-vertical-item-height\n);margin-bottom:var(--spectrum-tabs-vertical-item-gap);padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);padding-top:0}:host([dir=ltr][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=ltr][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([direction=vertical]) ::slotted(*):before{margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2)}:host([direction=vertical][compact]) #list ::slotted(*){height:var(\n--spectrum-tabs-compact-vertical-item-height\n);line-height:var(--spectrum-tabs-compact-vertical-item-height);margin-bottom:var(--spectrum-tabs-compact-vertical-item-gap)}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:0}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:0}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([direction=vertical]) #selectionIndicator{position:absolute;width:var(--spectrum-tabs-vertical-rule-size)}#list{border-bottom-color:var(\n--spectrum-tabs-m-rule-color,var(--spectrum-alias-border-color-light)\n)}:host([dir=ltr][direction=vertical]) #list{border-left-color:var(\n--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light)\n)}:host([dir=rtl][direction=vertical]) #list{border-right-color:var(\n--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light)\n)}#selectionIndicator{background-color:var(\n--spectrum-tabs-m-selection-indicator-color,var(--spectrum-global-color-gray-900)\n)}:host([quiet]) #list{border-bottom-color:var(\n--spectrum-tabs-quiet-m-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([quiet]) #selectionIndicator{background-color:var(\n--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900)\n)}:host([dir=ltr][direction=vertical][compact]) #list,:host([dir=ltr][direction=vertical][quiet]) #list{border-left-color:var(\n--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([dir=rtl][direction=vertical][compact]) #list,:host([dir=rtl][direction=vertical][quiet]) #list{border-right-color:var(\n--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([direction=vertical][compact]) #list #selectionIndicator,:host([direction=vertical][quiet]) #list #selectionIndicator{background-color:var(\n--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900)\n)}:host{display:grid}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([disabled]) #selectionIndicator{background-color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted(sp-tab){color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([direction=vertical-right]) #selectionIndicator,:host([direction=vertical]) #selectionIndicator{height:1px;top:0}:host([compact]){--spectrum-tabs-height:var(--spectrum-tabs-quiet-compact-height)}:host([direction=horizontal]:not([quiet])) #list{border-bottom-color:var(\n--spectrum-tabs-rule-color,var(--spectrum-global-color-gray-200)\n)}:host([dir][direction=horizontal]) #selectionIndicator{width:1px}:host([dir=ltr][direction=vertical-right]) #list{border-right:var(\n--spectrum-tabs-vertical-rule-width,var(--spectrum-alias-border-size-thick)\n) solid;border-right-color:var(\n--spectrum-tabs-vertical-rule-color,var(--spectrum-global-color-gray-200)\n);display:inline-flex;flex-direction:column;padding:0}:host([dir=rtl][direction=vertical-right]) #list{border-left:var(\n--spectrum-tabs-vertical-rule-width,var(--spectrum-alias-border-size-thick)\n) solid;border-left-color:var(\n--spectrum-tabs-vertical-rule-color,var(--spectrum-global-color-gray-200)\n);display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction=vertical-right]) ::slotted(*){height:var(\n--spectrum-tabs-vertical-item-height,var(--spectrum-global-dimension-size-550)\n);margin-bottom:var(\n--spectrum-tabs-vertical-item-gap,var(--spectrum-global-dimension-size-50)\n);margin-right:calc(var(\n--spectrum-tabs-vertical-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) - var(\n--spectrum-tabs-focus-ring-padding-x,\nvar(--spectrum-global-dimension-size-100)\n));padding:0 var(\n--spectrum-tabs-focus-ring-padding-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl][direction=vertical-right]) ::slotted(*){height:var(\n--spectrum-tabs-vertical-item-height,var(--spectrum-global-dimension-size-550)\n);margin-bottom:var(\n--spectrum-tabs-vertical-item-gap,var(--spectrum-global-dimension-size-50)\n);margin-left:calc(var(\n--spectrum-tabs-vertical-item-margin-left,\nvar(--spectrum-global-dimension-size-150)\n) - var(\n--spectrum-tabs-focus-ring-padding-x,\nvar(--spectrum-global-dimension-size-100)\n));padding:0 var(\n--spectrum-tabs-focus-ring-padding-x,var(--spectrum-global-dimension-size-100)\n)}:host([direction=vertical-right][compact]) ::slotted(*){height:var(\n--spectrum-tabs-compact-vertical-item-height,var(--spectrum-global-dimension-size-400)\n);line-height:var(\n--spectrum-tabs-compact-vertical-item-height,var(--spectrum-global-dimension-size-400)\n);margin-bottom:var(\n--spectrum-tabs-compact-vertical-item-gap,var(--spectrum-global-dimension-size-50)\n)}:host([dir=ltr][direction=vertical-right]) #selectionIndicator{left:auto;position:absolute;right:calc(-1*var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)));width:var(\n--spectrum-tabs-vertical-rule-width,var(--spectrum-alias-border-size-thick)\n)}:host([dir=rtl][direction=vertical-right]) #selectionIndicator{left:calc(-1*var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)));position:absolute;right:auto;width:var(\n--spectrum-tabs-vertical-rule-width,var(--spectrum-alias-border-size-thick)\n)}:host([dir=ltr][direction=vertical-right][compact]) #list,:host([dir=ltr][direction=vertical-right][quiet]) #list{border-right-color:var(\n--spectrum-tabs-quiet-vertical-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([dir=rtl][direction=vertical-right][compact]) #list,:host([dir=rtl][direction=vertical-right][quiet]) #list{border-left-color:var(\n--spectrum-tabs-quiet-vertical-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([direction=vertical-right][compact]) #selectionIndicator,:host([direction=vertical-right][quiet]) #selectionIndicator{background-color:var(\n--spectrum-tabs-quiet-selection-indicator-color,var(--spectrum-global-color-gray-900)\n)}#selectionIndicator.first-position{transition:none}\n`"
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/tabs",
-    "version": "0.6.9-lit-next.0+f164d1376",
+    "version": "0.6.10",
     "publishConfig": {
         "access": "public"
     },
@@ -48,8 +48,8 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.4.6-lit-next.124+f164d1376",
-        "@spectrum-web-components/shared": "^0.12.9-lit-next.0+f164d1376",
+        "@spectrum-web-components/base": "^0.4.5",
+        "@spectrum-web-components/shared": "^0.12.9",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
@@ -60,5 +60,5 @@
     "sideEffects": [
         "./sp-*.js"
     ],
-    "gitHead": "f164d13764897c13e8da5012f3659b294c240c62"
+    "gitHead": "e05c867a446189df8cfbceb201ec18cd502cfe26"
 }

package/src/Tabs.d.ts

@@ -63,7 +63,7 @@ export declare class Tabs extends Focusable {
     private updateSelectionIndicator;
     private tabChangePromise;
     private tabChangeResolver;
-    protected getUpdateComplete(): Promise<boolean>;
+    protected _getUpdateComplete(): Promise<boolean>;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/src/Tabs.js

@@ -172,7 +172,7 @@ export class Tabs extends Focusable {
             if (typeof tab.updateComplete !== 'undefined') {
                 return tab.updateComplete;
             }
-            return Promise.resolve(true);
+            return Promise.resolve();
         });
         Promise.all(tabUpdateCompletes).then(() => super.manageAutoFocus());
     }
@@ -312,8 +312,8 @@ export class Tabs extends Focusable {
         this.tabChangePromise = new Promise((res) => (this.tabChangeResolver = res));
         setTimeout(this.updateCheckedState);
     }
-    async getUpdateComplete() {
-        const complete = (await super.getUpdateComplete());
+    async _getUpdateComplete() {
+        const complete = (await super._getUpdateComplete());
         await this.tabChangePromise;
         return complete;
     }

package/src/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["Tabs.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    html,\n    property,\n    CSSResultArray,\n    TemplateResult,\n    PropertyValues,\n    ifDefined,\n} from '@spectrum-web-components/base';\nimport { Tab } from './Tab.js';\nimport { Focusable, getActiveElement } from '@spectrum-web-components/shared';\n\nimport tabStyles from './tabs.css.js';\nimport { TabPanel } from './TabPanel.js';\n\nconst availableArrowsByDirection = {\n    vertical: ['ArrowUp', 'ArrowDown'],\n    ['vertical-right']: ['ArrowUp', 'ArrowDown'],\n    horizontal: ['ArrowLeft', 'ArrowRight'],\n};\n\ndeclare global {\n    interface Document {\n        fonts?: {\n            ready: Promise<void>;\n        };\n    }\n}\n\nconst noSelectionStyle = 'transform: translateX(0px) scaleX(0) scaleY(0)';\n\n/**\n * @element sp-tabs\n *\n * @slot - Tab elements to manage as a group\n * @slot tab-panel - Tab Panel elements related to the listed Tab elements\n * @attr {Boolean} quiet - The tabs border is a lot smaller\n * @attr {Boolean} compact - The collection of tabs take up less space\n */\nexport class Tabs extends Focusable {\n    public static get styles(): CSSResultArray {\n        return [tabStyles];\n    }\n\n    /**\n     * Whether to activate a tab on keyboard focus or not.\n     *\n     * By default a tab is activated via a \"click\" interaction. This is specifically intended for when\n     * tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\n     * To learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\n     * https://w3c.github.io/aria-practices/#kbd_selection_follows_focus\n     */\n    @property({ type: Boolean })\n    public auto = false;\n\n    @property({ reflect: true })\n    public direction: 'vertical' | 'vertical-right' | 'horizontal' =\n        'horizontal';\n\n    @property()\n    public label = '';\n\n    @property({ attribute: false })\n    public selectionIndicatorStyle = noSelectionStyle;\n\n    @property({ attribute: false })\n    public shouldAnimate = false;\n\n    @property({ reflect: true })\n    public get selected(): string {\n        return this._selected;\n    }\n\n    public set selected(value: string) {\n        const oldValue = this.selected;\n\n        if (value === oldValue) {\n            return;\n        }\n\n        this._selected = value;\n        this.shouldUpdateCheckedState();\n        this.requestUpdate('selected', oldValue);\n    }\n\n    private _selected = '';\n\n    private tabs: Tab[] = [];\n\n    /**\n     * @private\n     */\n    public get focusElement(): Tab | this {\n        const focusElement = this.tabs.find(\n            (tab) =>\n                !tab.disabled && (tab.selected || tab.value === this.selected)\n        );\n        if (focusElement) {\n            return focusElement;\n        }\n        const fallback = this.tabs.find((tab) => !tab.disabled);\n        return fallback || this;\n    }\n\n    protected manageAutoFocus(): void {\n        const tabs = [...this.children] as Tab[];\n        const tabUpdateCompletes = tabs.map((tab) => {\n            if (typeof tab.updateComplete !== 'undefined') {\n                return tab.updateComplete;\n            }\n            return Promise.resolve(true);\n        });\n        Promise.all(tabUpdateCompletes).then(() => super.manageAutoFocus());\n    }\n\n    protected managePanels({\n        target,\n    }: Event & { target: HTMLSlotElement }): void {\n        const panels = target.assignedElements() as TabPanel[];\n        panels.map((panel) => {\n            const { value, id } = panel;\n            const tab = this.querySelector(`[role=\"tab\"][value=\"${value}\"]`);\n            if (tab) {\n                tab.setAttribute('aria-controls', id);\n                panel.setAttribute('aria-labelledby', tab.id);\n            }\n            panel.selected = value === this.selected;\n        });\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <div\n                aria-label=${ifDefined(this.label ? this.label : undefined)}\n                @click=${this.onClick}\n                @keydown=${this.onKeyDown}\n                @mousedown=${this.manageFocusinType}\n                @focusin=${this.startListeningToKeyboard}\n                id=\"list\"\n                role=\"tablist\"\n            >\n                <slot @slotchange=${this.onSlotChange}></slot>\n                <div\n                    id=\"selectionIndicator\"\n                    class=${ifDefined(\n                        this.shouldAnimate ? undefined : 'first-position'\n                    )}\n                    style=${this.selectionIndicatorStyle}\n                    role=\"presentation\"\n                ></div>\n            </div>\n            <slot name=\"tab-panel\" @slotchange=${this.managePanels}></slot>\n        `;\n    }\n\n    protected firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        const selectedChild = this.querySelector('[selected]') as Tab;\n        if (selectedChild) {\n            this.selectTarget(selectedChild);\n        }\n    }\n\n    protected updated(changes: PropertyValues<this>): void {\n        super.updated(changes);\n        if (changes.has('selected')) {\n            if (changes.get('selected')) {\n                const previous = this.querySelector(\n                    `[role=\"tabpanel\"][value=\"${changes.get('selected')}\"]`\n                ) as TabPanel;\n                if (previous) previous.selected = false;\n            }\n            const next = this.querySelector(\n                `[role=\"tabpanel\"][value=\"${this.selected}\"]`\n            ) as TabPanel;\n            if (next) next.selected = true;\n        }\n        if (changes.has('direction')) {\n            if (this.direction === 'horizontal') {\n                this.removeAttribute('aria-orientation');\n            } else {\n                this.setAttribute('aria-orientation', 'vertical');\n            }\n        }\n        if (changes.has('dir')) {\n            this.updateSelectionIndicator();\n        }\n        if (changes.has('disabled')) {\n            if (this.disabled) {\n                this.setAttribute('aria-disabled', 'true');\n            } else {\n                this.removeAttribute('aria-disabled');\n            }\n        }\n        if (\n            !this.shouldAnimate &&\n            typeof changes.get('shouldAnimate') !== 'undefined'\n        ) {\n            this.shouldAnimate = true;\n        }\n    }\n\n    /**\n     * This will force apply the focus visible styling.\n     * It should always do so when this styling is already applied.\n     */\n    private shouldApplyFocusVisible = false;\n\n    private manageFocusinType = (): void => {\n        if (this.shouldApplyFocusVisible) {\n            return;\n        }\n\n        const handleFocusin = (): void => {\n            this.shouldApplyFocusVisible = false;\n            this.removeEventListener('focusin', handleFocusin);\n        };\n        this.addEventListener('focusin', handleFocusin);\n    };\n\n    public startListeningToKeyboard(): void {\n        this.addEventListener('keydown', this.handleKeydown);\n        this.shouldApplyFocusVisible = true;\n        const selected = this.querySelector('[selected]') as Tab;\n        if (selected) {\n            selected.tabIndex = -1;\n        }\n\n        const stopListeningToKeyboard = (): void => {\n            this.removeEventListener('keydown', this.handleKeydown);\n            this.shouldApplyFocusVisible = false;\n            const selected = this.querySelector('[selected]') as Tab;\n            if (selected) {\n                selected.tabIndex = 0;\n            }\n            this.removeEventListener('focusout', stopListeningToKeyboard);\n        };\n        this.addEventListener('focusout', stopListeningToKeyboard);\n    }\n\n    public handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        const availableArrows = [...availableArrowsByDirection[this.direction]];\n        if (!availableArrows.includes(code)) {\n            return;\n        }\n        if (!this.isLTR && this.direction === 'horizontal') {\n            availableArrows.reverse();\n        }\n        event.preventDefault();\n        const currentFocusedTab = getActiveElement(this) as Tab;\n        let currentFocusedTabIndex = this.tabs.indexOf(currentFocusedTab);\n        currentFocusedTabIndex += code === availableArrows[0] ? -1 : 1;\n        const nextTab = this.tabs[\n            (currentFocusedTabIndex + this.tabs.length) % this.tabs.length\n        ];\n        nextTab.focus();\n        if (this.auto) {\n            this.selected = nextTab.value;\n        }\n    }\n\n    private onClick = (event: Event): void => {\n        const target = event.target as Tab;\n        if (this.disabled || target.disabled) {\n            return;\n        }\n        this.shouldAnimate = true;\n        this.selectTarget(target);\n        if (this.shouldApplyFocusVisible && event.composedPath()[0] !== this) {\n            /* Trick :focus-visible polyfill into thinking keyboard based focus */\n            this.dispatchEvent(\n                new KeyboardEvent('keydown', {\n                    code: 'Tab',\n                })\n            );\n            target.focus();\n        }\n    };\n\n    private onKeyDown = (event: KeyboardEvent): void => {\n        if (event.code === 'Enter' || event.code === 'Space') {\n            event.preventDefault();\n            const target = event.target as HTMLElement;\n            if (target) {\n                this.selectTarget(target);\n            }\n        }\n    };\n\n    private selectTarget(target: HTMLElement): void {\n        const value = target.getAttribute('value');\n        if (value) {\n            const selected = this.selected;\n            this.selected = value;\n            const applyDefault = this.dispatchEvent(\n                new Event('change', {\n                    cancelable: true,\n                })\n            );\n            if (!applyDefault) {\n                this.selected = selected;\n            }\n        }\n    }\n\n    private onSlotChange(): void {\n        this.tabs = [...this.querySelectorAll('[role=\"tab\"]')] as Tab[];\n        this.shouldUpdateCheckedState();\n    }\n\n    private shouldUpdateCheckedState(): void {\n        this.tabChangeResolver();\n        this.tabChangePromise = new Promise(\n            (res) => (this.tabChangeResolver = res)\n        );\n        setTimeout(this.updateCheckedState);\n    }\n\n    private updateCheckedState = (): void => {\n        if (!this.tabs.length) {\n            this.tabs = [...this.querySelectorAll('[role=\"tab\"]')] as Tab[];\n        }\n        this.tabs.forEach((element) => {\n            element.removeAttribute('selected');\n        });\n\n        if (this.selected) {\n            const currentChecked = this.tabs.find(\n                (el) => el.value === this.selected\n            );\n\n            if (currentChecked) {\n                currentChecked.selected = true;\n            } else {\n                this.selected = '';\n            }\n        } else {\n            const firstTab = this.tabs[0];\n            if (firstTab) {\n                firstTab.setAttribute('tabindex', '0');\n            }\n        }\n\n        this.updateSelectionIndicator();\n        this.tabChangeResolver();\n    };\n\n    private updateSelectionIndicator = async (): Promise<void> => {\n        const selectedElement = this.tabs.find((el) => el.selected);\n        if (!selectedElement) {\n            this.selectionIndicatorStyle = noSelectionStyle;\n            return;\n        }\n        await Promise.all([\n            selectedElement.updateComplete,\n            document.fonts ? document.fonts.ready : Promise.resolve(),\n        ]);\n        const tabBoundingClientRect = selectedElement.getBoundingClientRect();\n        const parentBoundingClientRect = this.getBoundingClientRect();\n\n        if (this.direction === 'horizontal') {\n            const width = tabBoundingClientRect.width;\n            const offset =\n                this.dir === 'ltr'\n                    ? tabBoundingClientRect.left - parentBoundingClientRect.left\n                    : tabBoundingClientRect.right -\n                      parentBoundingClientRect.right;\n\n            this.selectionIndicatorStyle = `transform: translateX(${offset}px) scaleX(${\n                this.dir === 'ltr' ? width : -1 * width\n            });`;\n        } else {\n            const height = tabBoundingClientRect.height;\n            const offset =\n                tabBoundingClientRect.top - parentBoundingClientRect.top;\n\n            this.selectionIndicatorStyle = `transform: translateY(${offset}px) scaleY(${height});`;\n        }\n    };\n\n    private tabChangePromise = Promise.resolve();\n    private tabChangeResolver: () => void = function () {\n        return;\n    };\n\n    protected async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        await this.tabChangePromise;\n        return complete;\n    }\n\n    public connectedCallback(): void {\n        super.connectedCallback();\n        window.addEventListener('resize', this.updateSelectionIndicator);\n        if ('fonts' in document) {\n            ((document as unknown) as {\n                fonts: {\n                    addEventListener: (\n                        name: string,\n                        callback: () => void\n                    ) => void;\n                };\n            }).fonts.addEventListener(\n                'loadingdone',\n                this.updateSelectionIndicator\n            );\n        }\n    }\n\n    public disconnectedCallback(): void {\n        window.removeEventListener('resize', this.updateSelectionIndicator);\n        if ('fonts' in document) {\n            ((document as unknown) as {\n                fonts: {\n                    removeEventListener: (\n                        name: string,\n                        callback: () => void\n                    ) => void;\n                };\n            }).fonts.removeEventListener(\n                'loadingdone',\n                this.updateSelectionIndicator\n            );\n        }\n        super.disconnectedCallback();\n    }\n}\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["Tabs.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    html,\n    property,\n    CSSResultArray,\n    TemplateResult,\n    PropertyValues,\n    ifDefined,\n} from '@spectrum-web-components/base';\nimport { Tab } from './Tab.js';\nimport { Focusable, getActiveElement } from '@spectrum-web-components/shared';\n\nimport tabStyles from './tabs.css.js';\nimport { TabPanel } from './TabPanel.js';\n\nconst availableArrowsByDirection = {\n    vertical: ['ArrowUp', 'ArrowDown'],\n    ['vertical-right']: ['ArrowUp', 'ArrowDown'],\n    horizontal: ['ArrowLeft', 'ArrowRight'],\n};\n\ndeclare global {\n    interface Document {\n        fonts?: {\n            ready: Promise<void>;\n        };\n    }\n}\n\nconst noSelectionStyle = 'transform: translateX(0px) scaleX(0) scaleY(0)';\n\n/**\n * @element sp-tabs\n *\n * @slot - Tab elements to manage as a group\n * @slot tab-panel - Tab Panel elements related to the listed Tab elements\n * @attr {Boolean} quiet - The tabs border is a lot smaller\n * @attr {Boolean} compact - The collection of tabs take up less space\n */\nexport class Tabs extends Focusable {\n    public static get styles(): CSSResultArray {\n        return [tabStyles];\n    }\n\n    /**\n     * Whether to activate a tab on keyboard focus or not.\n     *\n     * By default a tab is activated via a \"click\" interaction. This is specifically intended for when\n     * tab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\n     * To learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\n     * https://w3c.github.io/aria-practices/#kbd_selection_follows_focus\n     */\n    @property({ type: Boolean })\n    public auto = false;\n\n    @property({ reflect: true })\n    public direction: 'vertical' | 'vertical-right' | 'horizontal' =\n        'horizontal';\n\n    @property()\n    public label = '';\n\n    @property({ attribute: false })\n    public selectionIndicatorStyle = noSelectionStyle;\n\n    @property({ attribute: false })\n    public shouldAnimate = false;\n\n    @property({ reflect: true })\n    public get selected(): string {\n        return this._selected;\n    }\n\n    public set selected(value: string) {\n        const oldValue = this.selected;\n\n        if (value === oldValue) {\n            return;\n        }\n\n        this._selected = value;\n        this.shouldUpdateCheckedState();\n        this.requestUpdate('selected', oldValue);\n    }\n\n    private _selected = '';\n\n    private tabs: Tab[] = [];\n\n    /**\n     * @private\n     */\n    public get focusElement(): Tab | this {\n        const focusElement = this.tabs.find(\n            (tab) =>\n                !tab.disabled && (tab.selected || tab.value === this.selected)\n        );\n        if (focusElement) {\n            return focusElement;\n        }\n        const fallback = this.tabs.find((tab) => !tab.disabled);\n        return fallback || this;\n    }\n\n    protected manageAutoFocus(): void {\n        const tabs = [...this.children] as Tab[];\n        const tabUpdateCompletes = tabs.map((tab) => {\n            if (typeof tab.updateComplete !== 'undefined') {\n                return tab.updateComplete;\n            }\n            return Promise.resolve();\n        });\n        Promise.all(tabUpdateCompletes).then(() => super.manageAutoFocus());\n    }\n\n    protected managePanels({\n        target,\n    }: Event & { target: HTMLSlotElement }): void {\n        const panels = target.assignedElements() as TabPanel[];\n        panels.map((panel) => {\n            const { value, id } = panel;\n            const tab = this.querySelector(`[role=\"tab\"][value=\"${value}\"]`);\n            if (tab) {\n                tab.setAttribute('aria-controls', id);\n                panel.setAttribute('aria-labelledby', tab.id);\n            }\n            panel.selected = value === this.selected;\n        });\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <div\n                aria-label=${ifDefined(this.label ? this.label : undefined)}\n                @click=${this.onClick}\n                @keydown=${this.onKeyDown}\n                @mousedown=${this.manageFocusinType}\n                @focusin=${this.startListeningToKeyboard}\n                id=\"list\"\n                role=\"tablist\"\n            >\n                <slot @slotchange=${this.onSlotChange}></slot>\n                <div\n                    id=\"selectionIndicator\"\n                    class=${ifDefined(\n                        this.shouldAnimate ? undefined : 'first-position'\n                    )}\n                    style=${this.selectionIndicatorStyle}\n                    role=\"presentation\"\n                ></div>\n            </div>\n            <slot name=\"tab-panel\" @slotchange=${this.managePanels}></slot>\n        `;\n    }\n\n    protected firstUpdated(changes: PropertyValues): void {\n        super.firstUpdated(changes);\n        const selectedChild = this.querySelector('[selected]') as Tab;\n        if (selectedChild) {\n            this.selectTarget(selectedChild);\n        }\n    }\n\n    protected updated(changes: PropertyValues<this>): void {\n        super.updated(changes);\n        if (changes.has('selected')) {\n            if (changes.get('selected')) {\n                const previous = this.querySelector(\n                    `[role=\"tabpanel\"][value=\"${changes.get('selected')}\"]`\n                ) as TabPanel;\n                if (previous) previous.selected = false;\n            }\n            const next = this.querySelector(\n                `[role=\"tabpanel\"][value=\"${this.selected}\"]`\n            ) as TabPanel;\n            if (next) next.selected = true;\n        }\n        if (changes.has('direction')) {\n            if (this.direction === 'horizontal') {\n                this.removeAttribute('aria-orientation');\n            } else {\n                this.setAttribute('aria-orientation', 'vertical');\n            }\n        }\n        if (changes.has('dir')) {\n            this.updateSelectionIndicator();\n        }\n        if (changes.has('disabled')) {\n            if (this.disabled) {\n                this.setAttribute('aria-disabled', 'true');\n            } else {\n                this.removeAttribute('aria-disabled');\n            }\n        }\n        if (\n            !this.shouldAnimate &&\n            typeof changes.get('shouldAnimate') !== 'undefined'\n        ) {\n            this.shouldAnimate = true;\n        }\n    }\n\n    /**\n     * This will force apply the focus visible styling.\n     * It should always do so when this styling is already applied.\n     */\n    private shouldApplyFocusVisible = false;\n\n    private manageFocusinType = (): void => {\n        if (this.shouldApplyFocusVisible) {\n            return;\n        }\n\n        const handleFocusin = (): void => {\n            this.shouldApplyFocusVisible = false;\n            this.removeEventListener('focusin', handleFocusin);\n        };\n        this.addEventListener('focusin', handleFocusin);\n    };\n\n    public startListeningToKeyboard(): void {\n        this.addEventListener('keydown', this.handleKeydown);\n        this.shouldApplyFocusVisible = true;\n        const selected = this.querySelector('[selected]') as Tab;\n        if (selected) {\n            selected.tabIndex = -1;\n        }\n\n        const stopListeningToKeyboard = (): void => {\n            this.removeEventListener('keydown', this.handleKeydown);\n            this.shouldApplyFocusVisible = false;\n            const selected = this.querySelector('[selected]') as Tab;\n            if (selected) {\n                selected.tabIndex = 0;\n            }\n            this.removeEventListener('focusout', stopListeningToKeyboard);\n        };\n        this.addEventListener('focusout', stopListeningToKeyboard);\n    }\n\n    public handleKeydown(event: KeyboardEvent): void {\n        const { code } = event;\n        const availableArrows = [...availableArrowsByDirection[this.direction]];\n        if (!availableArrows.includes(code)) {\n            return;\n        }\n        if (!this.isLTR && this.direction === 'horizontal') {\n            availableArrows.reverse();\n        }\n        event.preventDefault();\n        const currentFocusedTab = getActiveElement(this) as Tab;\n        let currentFocusedTabIndex = this.tabs.indexOf(currentFocusedTab);\n        currentFocusedTabIndex += code === availableArrows[0] ? -1 : 1;\n        const nextTab = this.tabs[\n            (currentFocusedTabIndex + this.tabs.length) % this.tabs.length\n        ];\n        nextTab.focus();\n        if (this.auto) {\n            this.selected = nextTab.value;\n        }\n    }\n\n    private onClick = (event: Event): void => {\n        const target = event.target as Tab;\n        if (this.disabled || target.disabled) {\n            return;\n        }\n        this.shouldAnimate = true;\n        this.selectTarget(target);\n        if (this.shouldApplyFocusVisible && event.composedPath()[0] !== this) {\n            /* Trick :focus-visible polyfill into thinking keyboard based focus */\n            this.dispatchEvent(\n                new KeyboardEvent('keydown', {\n                    code: 'Tab',\n                })\n            );\n            target.focus();\n        }\n    };\n\n    private onKeyDown = (event: KeyboardEvent): void => {\n        if (event.code === 'Enter' || event.code === 'Space') {\n            event.preventDefault();\n            const target = event.target as HTMLElement;\n            if (target) {\n                this.selectTarget(target);\n            }\n        }\n    };\n\n    private selectTarget(target: HTMLElement): void {\n        const value = target.getAttribute('value');\n        if (value) {\n            const selected = this.selected;\n            this.selected = value;\n            const applyDefault = this.dispatchEvent(\n                new Event('change', {\n                    cancelable: true,\n                })\n            );\n            if (!applyDefault) {\n                this.selected = selected;\n            }\n        }\n    }\n\n    private onSlotChange(): void {\n        this.tabs = [...this.querySelectorAll('[role=\"tab\"]')] as Tab[];\n        this.shouldUpdateCheckedState();\n    }\n\n    private shouldUpdateCheckedState(): void {\n        this.tabChangeResolver();\n        this.tabChangePromise = new Promise(\n            (res) => (this.tabChangeResolver = res)\n        );\n        setTimeout(this.updateCheckedState);\n    }\n\n    private updateCheckedState = (): void => {\n        if (!this.tabs.length) {\n            this.tabs = [...this.querySelectorAll('[role=\"tab\"]')] as Tab[];\n        }\n        this.tabs.forEach((element) => {\n            element.removeAttribute('selected');\n        });\n\n        if (this.selected) {\n            const currentChecked = this.tabs.find(\n                (el) => el.value === this.selected\n            );\n\n            if (currentChecked) {\n                currentChecked.selected = true;\n            } else {\n                this.selected = '';\n            }\n        } else {\n            const firstTab = this.tabs[0];\n            if (firstTab) {\n                firstTab.setAttribute('tabindex', '0');\n            }\n        }\n\n        this.updateSelectionIndicator();\n        this.tabChangeResolver();\n    };\n\n    private updateSelectionIndicator = async (): Promise<void> => {\n        const selectedElement = this.tabs.find((el) => el.selected);\n        if (!selectedElement) {\n            this.selectionIndicatorStyle = noSelectionStyle;\n            return;\n        }\n        await Promise.all([\n            selectedElement.updateComplete,\n            document.fonts ? document.fonts.ready : Promise.resolve(),\n        ]);\n        const tabBoundingClientRect = selectedElement.getBoundingClientRect();\n        const parentBoundingClientRect = this.getBoundingClientRect();\n\n        if (this.direction === 'horizontal') {\n            const width = tabBoundingClientRect.width;\n            const offset =\n                this.dir === 'ltr'\n                    ? tabBoundingClientRect.left - parentBoundingClientRect.left\n                    : tabBoundingClientRect.right -\n                      parentBoundingClientRect.right;\n\n            this.selectionIndicatorStyle = `transform: translateX(${offset}px) scaleX(${\n                this.dir === 'ltr' ? width : -1 * width\n            });`;\n        } else {\n            const height = tabBoundingClientRect.height;\n            const offset =\n                tabBoundingClientRect.top - parentBoundingClientRect.top;\n\n            this.selectionIndicatorStyle = `transform: translateY(${offset}px) scaleY(${height});`;\n        }\n    };\n\n    private tabChangePromise = Promise.resolve();\n    private tabChangeResolver: () => void = function () {\n        return;\n    };\n\n    protected async _getUpdateComplete(): Promise<boolean> {\n        const complete = (await super._getUpdateComplete()) as boolean;\n        await this.tabChangePromise;\n        return complete;\n    }\n\n    public connectedCallback(): void {\n        super.connectedCallback();\n        window.addEventListener('resize', this.updateSelectionIndicator);\n        if ('fonts' in document) {\n            ((document as unknown) as {\n                fonts: {\n                    addEventListener: (\n                        name: string,\n                        callback: () => void\n                    ) => void;\n                };\n            }).fonts.addEventListener(\n                'loadingdone',\n                this.updateSelectionIndicator\n            );\n        }\n    }\n\n    public disconnectedCallback(): void {\n        window.removeEventListener('resize', this.updateSelectionIndicator);\n        if ('fonts' in document) {\n            ((document as unknown) as {\n                fonts: {\n                    removeEventListener: (\n                        name: string,\n                        callback: () => void\n                    ) => void;\n                };\n            }).fonts.removeEventListener(\n                'loadingdone',\n                this.updateSelectionIndicator\n            );\n        }\n        super.disconnectedCallback();\n    }\n}\n"]}

package/src/spectrum-config.js

@@ -52,7 +52,7 @@ const config = {
                 {
                     replacement: '::slotted(:not([slot]):not(:first-child))',
                     selector:
-                        '.spectrum-Tabs-item+:not(.spectrum-Tabs-selectionIndicator)',
+                        /\.spectrum-Tabs-item\s?\+\s?\*:not\(.spectrum-Tabs-selectionIndicator\)/,
                 },
             ],
             exclude: [

package/src/spectrum-tab.css.js

@@ -11,7 +11,37 @@ governing permissions and limitations under the License.
 */
 import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{position:relative;box-sizing:border-box;height:var(--spectrum-tabs-item-height);line-height:var(--spectrum-tabs-item-height);z-index:1;text-decoration:none;white-space:nowrap;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;cursor:pointer;outline:none}:host([disabled]),:host([disabled]) #itemLabel{cursor:default}:host(:not([vertical])) ::slotted([slot=icon]){height:var(--spectrum-tabs-item-height)}:host([dir=ltr]) slot[name=icon]+#itemLabel{margin-left:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#itemLabel{margin-right:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host:before{content:"";position:absolute;top:50%;box-sizing:border-box;height:var(--spectrum-tabs-focus-ring-height);margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2 + var(--spectrum-tabs-rule-size)/2);border:var(--spectrum-tabs-focus-ring-size) solid transparent;border-radius:var(--spectrum-tabs-focus-ring-border-radius);pointer-events:none}#itemLabel{cursor:pointer;vertical-align:top;display:inline-block;font-size:var(--spectrum-tabs-text-size);font-weight:var(--spectrum-tabs-text-font-weight);text-decoration:none}#itemLabel:empty{display:none}:host{color:var(--spectrum-tabs-m-text-color,var(--spectrum-alias-label-text-color))}:host(:not([vertical])) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color,var(--spectrum-alias-icon-color))}:host(:hover){color:var(--spectrum-tabs-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]){color:var(--spectrum-tabs-m-text-color-selected,var(--spectrum-global-color-gray-900))}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-selected,var(--spectrum-global-color-gray-900))}:host(.focus-visible),:host(.focus-visible){color:var(--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host(.focus-visible),:host(:focus-visible){color:var(--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host(.focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(:focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([disabled]){color:var(--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}
+:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-item-height);line-height:var(--spectrum-tabs-item-height);outline:none;position:relative;text-decoration:none;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #itemLabel{cursor:default}:host(:not([vertical])) ::slotted([slot=icon]){height:var(
+--spectrum-tabs-item-height
+)}:host([dir=ltr]) slot[name=icon]+#itemLabel{margin-left:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#itemLabel{margin-right:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host:before{border:var(--spectrum-tabs-focus-ring-size) solid transparent;border-radius:var(--spectrum-tabs-focus-ring-border-radius);box-sizing:border-box;content:"";height:var(--spectrum-tabs-focus-ring-height);margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2 + var(--spectrum-tabs-rule-size)/2);pointer-events:none;position:absolute;top:50%}#itemLabel{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-text-size);font-weight:var(--spectrum-tabs-text-font-weight);text-decoration:none;vertical-align:top}#itemLabel:empty{display:none}:host{color:var(
+--spectrum-tabs-m-text-color,var(--spectrum-alias-label-text-color)
+)}:host(:not([vertical])) ::slotted([slot=icon]){color:var(
+--spectrum-tabs-m-icon-color,var(--spectrum-alias-icon-color)
+)}:host(:hover){color:var(
+--spectrum-tabs-m-text-color-hover,var(--spectrum-alias-text-color-hover)
+)}:host(:hover) ::slotted([slot=icon]){color:var(
+--spectrum-tabs-m-icon-color-hover,var(--spectrum-alias-icon-color-hover)
+)}:host([selected]){color:var(
+--spectrum-tabs-m-text-color-selected,var(--spectrum-global-color-gray-900)
+)}:host([selected]) ::slotted([slot=icon]){color:var(
+--spectrum-tabs-m-icon-color-selected,var(--spectrum-global-color-gray-900)
+)}:host(.focus-visible){color:var(
+--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover)
+)}:host(:focus-visible){color:var(
+--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover)
+)}:host(.focus-visible):before{border-color:var(
+--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus)
+)}:host(:focus-visible):before{border-color:var(
+--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus)
+)}:host(.focus-visible) ::slotted([slot=icon]){color:var(
+--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)
+)}:host(:focus-visible) ::slotted([slot=icon]){color:var(
+--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)
+)}:host([disabled]){color:var(
+--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)
+)}:host([disabled]) ::slotted([slot=icon]){color:var(
+--spectrum-tabs-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)
+)}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-tab.css.js.map

package/src/spectrum-tab.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"spectrum-tab.css.js","sourceRoot":"","sources":["spectrum-tab.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;CAEjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{position:relative;box-sizing:border-box;height:var(--spectrum-tabs-item-height);line-height:var(--spectrum-tabs-item-height);z-index:1;text-decoration:none;white-space:nowrap;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;cursor:pointer;outline:none}:host([disabled]),:host([disabled]) #itemLabel{cursor:default}:host(:not([vertical])) ::slotted([slot=icon]){height:var(--spectrum-tabs-item-height)}:host([dir=ltr]) slot[name=icon]+#itemLabel{margin-left:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#itemLabel{margin-right:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host:before{content:\"\";position:absolute;top:50%;box-sizing:border-box;height:var(--spectrum-tabs-focus-ring-height);margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2 + var(--spectrum-tabs-rule-size)/2);border:var(--spectrum-tabs-focus-ring-size) solid transparent;border-radius:var(--spectrum-tabs-focus-ring-border-radius);pointer-events:none}#itemLabel{cursor:pointer;vertical-align:top;display:inline-block;font-size:var(--spectrum-tabs-text-size);font-weight:var(--spectrum-tabs-text-font-weight);text-decoration:none}#itemLabel:empty{display:none}:host{color:var(--spectrum-tabs-m-text-color,var(--spectrum-alias-label-text-color))}:host(:not([vertical])) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color,var(--spectrum-alias-icon-color))}:host(:hover){color:var(--spectrum-tabs-m-text-color-hover,var(--spectrum-alias-text-color-hover))}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-hover,var(--spectrum-alias-icon-color-hover))}:host([selected]){color:var(--spectrum-tabs-m-text-color-selected,var(--spectrum-global-color-gray-900))}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-selected,var(--spectrum-global-color-gray-900))}:host(.focus-visible),:host(.focus-visible){color:var(--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host(.focus-visible),:host(:focus-visible){color:var(--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover))}:host(.focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(:focus-visible):before{border-color:var(--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus))}:host([disabled]){color:var(--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled))}\n`;\nexport default styles;"]}
+{"version":3,"file":"spectrum-tab.css.js","sourceRoot":"","sources":["spectrum-tab.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-item-height);line-height:var(--spectrum-tabs-item-height);outline:none;position:relative;text-decoration:none;transition:color var(--spectrum-global-animation-duration-100,.13s) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #itemLabel{cursor:default}:host(:not([vertical])) ::slotted([slot=icon]){height:var(\n--spectrum-tabs-item-height\n)}:host([dir=ltr]) slot[name=icon]+#itemLabel{margin-left:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#itemLabel{margin-right:calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host:before{border:var(--spectrum-tabs-focus-ring-size) solid transparent;border-radius:var(--spectrum-tabs-focus-ring-border-radius);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-focus-ring-height);margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2 + var(--spectrum-tabs-rule-size)/2);pointer-events:none;position:absolute;top:50%}#itemLabel{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-text-size);font-weight:var(--spectrum-tabs-text-font-weight);text-decoration:none;vertical-align:top}#itemLabel:empty{display:none}:host{color:var(\n--spectrum-tabs-m-text-color,var(--spectrum-alias-label-text-color)\n)}:host(:not([vertical])) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color,var(--spectrum-alias-icon-color)\n)}:host(:hover){color:var(\n--spectrum-tabs-m-text-color-hover,var(--spectrum-alias-text-color-hover)\n)}:host(:hover) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host([selected]){color:var(\n--spectrum-tabs-m-text-color-selected,var(--spectrum-global-color-gray-900)\n)}:host([selected]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-selected,var(--spectrum-global-color-gray-900)\n)}:host(.focus-visible){color:var(\n--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(:focus-visible){color:var(\n--spectrum-tabs-m-text-color-key-focus,var(--spectrum-alias-text-color-hover)\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus)\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-m-focus-ring-color,var(--spectrum-alias-border-color-focus)\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}:host(:focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-key-focus,var(--spectrum-alias-icon-color-focus)\n)}:host([disabled]){color:var(\n--spectrum-tabs-m-text-color-disabled,var(--spectrum-alias-text-color-disabled)\n)}:host([disabled]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-m-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}\n`;\nexport default styles;"]}

package/src/spectrum-tabs.css.js

@@ -11,7 +11,79 @@ governing permissions and limitations under the License.
 */
 import { css } from '@spectrum-web-components/base';
 const styles = css `
-:host{--spectrum-tabs-focus-ring-border-radius:var(--spectrum-tabs-m-focus-ring-border-radius);--spectrum-tabs-compact-item-height:var(--spectrum-tabs-m-compact-item-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-compact-vertical-item-height:var(--spectrum-tabs-m-compact-vertical-item-height,var(--spectrum-global-dimension-size-400));--spectrum-tabs-compact-vertical-item-gap:var(--spectrum-tabs-m-compact-vertical-item-gap,var(--spectrum-global-dimension-size-50));--spectrum-tabs-text-font-weight:var(--spectrum-tabs-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-tabs-rule-border-radius:var(--spectrum-tabs-m-rule-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-tabs-rule-size:var(--spectrum-tabs-m-rule-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-focus-ring-size:var(--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-text-size:var(--spectrum-tabs-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-tabs-height:var(--spectrum-tabs-m-height,var(--spectrum-global-dimension-size-600));--spectrum-tabs-item-height:var(--spectrum-tabs-m-item-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-icon-gap:var(--spectrum-tabs-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-tabs-focus-ring-height:var(--spectrum-tabs-m-focus-ring-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-focus-ring-padding-x:var(--spectrum-tabs-m-focus-ring-padding-x,var(--spectrum-alias-item-padding-m));--spectrum-tabs-item-gap:var(--spectrum-tabs-m-item-gap,var(--spectrum-global-dimension-size-300));--spectrum-tabs-selection-indicator-animation-duration:var(--spectrum-tabs-m-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-tabs-vertical-rule-size:var(--spectrum-tabs-m-vertical-rule-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-vertical-item-height:var(--spectrum-tabs-m-vertical-item-height,var(--spectrum-global-dimension-size-550));--spectrum-tabs-vertical-item-gap:var(--spectrum-tabs-m-vertical-item-gap,var(--spectrum-global-dimension-size-50));--spectrum-tabs-vertical-item-margin-left:var(--spectrum-tabs-m-vertical-item-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-tabs-quiet-compact-height:var(--spectrum-tabs-quiet-m-compact-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-item-height:calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-compact-item-height:calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-text-size:var(--spectrum-alias-font-size-default,var(--spectrum-global-dimension-font-size-100))}#list{display:flex;position:relative;z-index:0;margin:0;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);vertical-align:top}:host([dir=ltr]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) #selectionIndicator{left:0}:host([dir=rtl]) #selectionIndicator{right:0}#selectionIndicator{position:absolute;z-index:0;transition:transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out;transform-origin:top left;border-radius:var(--spectrum-tabs-rule-border-radius)}:host([compact]) ::slotted(*){line-height:var(--spectrum-tabs-compact-item-height)}:host([compact]) ::slotted(*){height:var(--spectrum-tabs-compact-item-height)}:host([direction=horizontal]) #list{align-items:center;border-bottom:var(--spectrum-tabs-rule-size) solid}:host([direction=horizontal]) ::slotted(*){vertical-align:top}:host([dir=ltr][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-left:var(--spectrum-tabs-item-gap)}:host([dir=rtl][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-right:var(--spectrum-tabs-item-gap)}:host([direction=horizontal]) #selectionIndicator{position:absolute;bottom:0;height:var(--spectrum-tabs-rule-size);bottom:calc(-1*var(--spectrum-tabs-rule-size))}:host([direction=horizontal][compact]) #list{box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height);align-items:end}:host([quiet]) #list{display:inline-flex}:host([dir=ltr][direction=vertical]) #list{border-left:var(--spectrum-tabs-vertical-rule-size) solid}:host([dir=rtl][direction=vertical]) #list{border-right:var(--spectrum-tabs-vertical-rule-size) solid}:host([direction=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction=vertical]) ::slotted(*){margin-left:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl][direction=vertical]) ::slotted(*){margin-right:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([direction=vertical]) ::slotted(*){height:var(--spectrum-tabs-vertical-item-height);padding-top:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);margin-bottom:var(--spectrum-tabs-vertical-item-gap)}:host([dir=ltr][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=ltr][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([direction=vertical]) ::slotted(*):before{margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2)}:host([direction=vertical][compact]) #list ::slotted(*){height:var(--spectrum-tabs-compact-vertical-item-height);line-height:var(--spectrum-tabs-compact-vertical-item-height);margin-bottom:var(--spectrum-tabs-compact-vertical-item-gap)}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:0}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:0}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([direction=vertical]) #selectionIndicator{position:absolute;width:var(--spectrum-tabs-vertical-rule-size)}#list{border-bottom-color:var(--spectrum-tabs-m-rule-color,var(--spectrum-alias-border-color-light))}:host([dir=ltr][direction=vertical]) #list{border-left-color:var(--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light))}:host([dir=rtl][direction=vertical]) #list{border-right-color:var(--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light))}#selectionIndicator{background-color:var(--spectrum-tabs-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}:host([quiet]) #list{border-bottom-color:var(--spectrum-tabs-quiet-m-rule-color,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #selectionIndicator{background-color:var(--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}:host([dir=ltr][direction=vertical][compact]) #list,:host([dir=ltr][direction=vertical][quiet]) #list{border-left-color:var(--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent))}:host([dir=rtl][direction=vertical][compact]) #list,:host([dir=rtl][direction=vertical][quiet]) #list{border-right-color:var(--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent))}:host([direction=vertical][compact]) #list #selectionIndicator,:host([direction=vertical][quiet]) #list #selectionIndicator{background-color:var(--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}
+:host{--spectrum-tabs-focus-ring-border-radius:var(
+--spectrum-tabs-m-focus-ring-border-radius
+);--spectrum-tabs-compact-item-height:var(
+--spectrum-tabs-m-compact-item-height,var(--spectrum-alias-item-height-m)
+);--spectrum-tabs-compact-vertical-item-height:var(
+--spectrum-tabs-m-compact-vertical-item-height,var(--spectrum-global-dimension-size-400)
+);--spectrum-tabs-compact-vertical-item-gap:var(
+--spectrum-tabs-m-compact-vertical-item-gap,var(--spectrum-global-dimension-size-50)
+);--spectrum-tabs-text-font-weight:var(
+--spectrum-tabs-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)
+);--spectrum-tabs-rule-border-radius:var(
+--spectrum-tabs-m-rule-border-radius,var(--spectrum-global-dimension-static-size-10)
+);--spectrum-tabs-rule-size:var(
+--spectrum-tabs-m-rule-size,var(--spectrum-alias-border-size-thick)
+);--spectrum-tabs-focus-ring-size:var(
+--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)
+);--spectrum-tabs-text-size:var(
+--spectrum-tabs-m-text-size,var(--spectrum-alias-item-text-size-m)
+);--spectrum-tabs-height:var(
+--spectrum-tabs-m-height,var(--spectrum-global-dimension-size-600)
+);--spectrum-tabs-item-height:var(
+--spectrum-tabs-m-item-height,var(--spectrum-alias-item-height-m)
+);--spectrum-tabs-icon-gap:var(
+--spectrum-tabs-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m)
+);--spectrum-tabs-focus-ring-height:var(
+--spectrum-tabs-m-focus-ring-height,var(--spectrum-alias-item-height-m)
+);--spectrum-tabs-focus-ring-padding-x:var(
+--spectrum-tabs-m-focus-ring-padding-x,var(--spectrum-alias-item-padding-m)
+);--spectrum-tabs-item-gap:var(
+--spectrum-tabs-m-item-gap,var(--spectrum-global-dimension-size-300)
+);--spectrum-tabs-selection-indicator-animation-duration:var(
+--spectrum-tabs-m-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)
+);--spectrum-tabs-vertical-rule-size:var(
+--spectrum-tabs-m-vertical-rule-size,var(--spectrum-alias-border-size-thick)
+);--spectrum-tabs-vertical-item-height:var(
+--spectrum-tabs-m-vertical-item-height,var(--spectrum-global-dimension-size-550)
+);--spectrum-tabs-vertical-item-gap:var(
+--spectrum-tabs-m-vertical-item-gap,var(--spectrum-global-dimension-size-50)
+);--spectrum-tabs-vertical-item-margin-left:var(
+--spectrum-tabs-m-vertical-item-margin-left,var(--spectrum-global-dimension-size-150)
+);--spectrum-tabs-quiet-compact-height:var(
+--spectrum-tabs-quiet-m-compact-height,var(--spectrum-alias-item-height-m)
+)}:host{--spectrum-tabs-item-height:calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-compact-item-height:calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-text-size:var(
+--spectrum-alias-font-size-default,var(--spectrum-global-dimension-font-size-100)
+)}#list{display:flex;margin:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);padding-top:0;position:relative;vertical-align:top;z-index:0}:host([dir=ltr]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) #selectionIndicator{left:0}:host([dir=rtl]) #selectionIndicator{right:0}#selectionIndicator{border-radius:var(--spectrum-tabs-rule-border-radius);position:absolute;transform-origin:top left;transition:transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out;z-index:0}:host([compact]) ::slotted(*){height:var(
+--spectrum-tabs-compact-item-height
+);line-height:var(--spectrum-tabs-compact-item-height)}:host([direction=horizontal]) #list{align-items:center;border-bottom:var(--spectrum-tabs-rule-size) solid}:host([direction=horizontal]) ::slotted(*){vertical-align:top}:host([dir=ltr][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-left:var(
+--spectrum-tabs-item-gap
+)}:host([dir=rtl][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-right:var(
+--spectrum-tabs-item-gap
+)}:host([direction=horizontal]) #selectionIndicator{bottom:0;bottom:calc(-1*var(--spectrum-tabs-rule-size));height:var(--spectrum-tabs-rule-size);position:absolute}:host([direction=horizontal][compact]) #list{align-items:end;box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height)}:host([quiet]) #list{display:inline-flex}:host([dir=ltr][direction=vertical]) #list{border-left:var(--spectrum-tabs-vertical-rule-size) solid}:host([dir=rtl][direction=vertical]) #list{border-right:var(--spectrum-tabs-vertical-rule-size) solid}:host([direction=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction=vertical]) ::slotted(*){margin-left:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl][direction=vertical]) ::slotted(*){margin-right:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([direction=vertical]) ::slotted(*){height:var(
+--spectrum-tabs-vertical-item-height
+);margin-bottom:var(--spectrum-tabs-vertical-item-gap);padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);padding-top:0}:host([dir=ltr][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=ltr][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([direction=vertical]) ::slotted(*):before{margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2)}:host([direction=vertical][compact]) #list ::slotted(*){height:var(
+--spectrum-tabs-compact-vertical-item-height
+);line-height:var(--spectrum-tabs-compact-vertical-item-height);margin-bottom:var(--spectrum-tabs-compact-vertical-item-gap)}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:0}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:0}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([direction=vertical]) #selectionIndicator{position:absolute;width:var(--spectrum-tabs-vertical-rule-size)}#list{border-bottom-color:var(
+--spectrum-tabs-m-rule-color,var(--spectrum-alias-border-color-light)
+)}:host([dir=ltr][direction=vertical]) #list{border-left-color:var(
+--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light)
+)}:host([dir=rtl][direction=vertical]) #list{border-right-color:var(
+--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light)
+)}#selectionIndicator{background-color:var(
+--spectrum-tabs-m-selection-indicator-color,var(--spectrum-global-color-gray-900)
+)}:host([quiet]) #list{border-bottom-color:var(
+--spectrum-tabs-quiet-m-rule-color,var(--spectrum-alias-border-color-transparent)
+)}:host([quiet]) #selectionIndicator{background-color:var(
+--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900)
+)}:host([dir=ltr][direction=vertical][compact]) #list,:host([dir=ltr][direction=vertical][quiet]) #list{border-left-color:var(
+--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent)
+)}:host([dir=rtl][direction=vertical][compact]) #list,:host([dir=rtl][direction=vertical][quiet]) #list{border-right-color:var(
+--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent)
+)}:host([direction=vertical][compact]) #list #selectionIndicator,:host([direction=vertical][quiet]) #list #selectionIndicator{background-color:var(
+--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900)
+)}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-tabs.css.js.map

package/src/spectrum-tabs.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"spectrum-tabs.css.js","sourceRoot":"","sources":["spectrum-tabs.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;CAEjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-tabs-focus-ring-border-radius:var(--spectrum-tabs-m-focus-ring-border-radius);--spectrum-tabs-compact-item-height:var(--spectrum-tabs-m-compact-item-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-compact-vertical-item-height:var(--spectrum-tabs-m-compact-vertical-item-height,var(--spectrum-global-dimension-size-400));--spectrum-tabs-compact-vertical-item-gap:var(--spectrum-tabs-m-compact-vertical-item-gap,var(--spectrum-global-dimension-size-50));--spectrum-tabs-text-font-weight:var(--spectrum-tabs-m-text-font-weight,var(--spectrum-alias-body-text-font-weight));--spectrum-tabs-rule-border-radius:var(--spectrum-tabs-m-rule-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-tabs-rule-size:var(--spectrum-tabs-m-rule-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-focus-ring-size:var(--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-text-size:var(--spectrum-tabs-m-text-size,var(--spectrum-alias-item-text-size-m));--spectrum-tabs-height:var(--spectrum-tabs-m-height,var(--spectrum-global-dimension-size-600));--spectrum-tabs-item-height:var(--spectrum-tabs-m-item-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-icon-gap:var(--spectrum-tabs-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m));--spectrum-tabs-focus-ring-height:var(--spectrum-tabs-m-focus-ring-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-focus-ring-padding-x:var(--spectrum-tabs-m-focus-ring-padding-x,var(--spectrum-alias-item-padding-m));--spectrum-tabs-item-gap:var(--spectrum-tabs-m-item-gap,var(--spectrum-global-dimension-size-300));--spectrum-tabs-selection-indicator-animation-duration:var(--spectrum-tabs-m-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-tabs-vertical-rule-size:var(--spectrum-tabs-m-vertical-rule-size,var(--spectrum-alias-border-size-thick));--spectrum-tabs-vertical-item-height:var(--spectrum-tabs-m-vertical-item-height,var(--spectrum-global-dimension-size-550));--spectrum-tabs-vertical-item-gap:var(--spectrum-tabs-m-vertical-item-gap,var(--spectrum-global-dimension-size-50));--spectrum-tabs-vertical-item-margin-left:var(--spectrum-tabs-m-vertical-item-margin-left,var(--spectrum-global-dimension-size-150));--spectrum-tabs-quiet-compact-height:var(--spectrum-tabs-quiet-m-compact-height,var(--spectrum-alias-item-height-m));--spectrum-tabs-item-height:calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-compact-item-height:calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-text-size:var(--spectrum-alias-font-size-default,var(--spectrum-global-dimension-font-size-100))}#list{display:flex;position:relative;z-index:0;margin:0;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);vertical-align:top}:host([dir=ltr]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) #selectionIndicator{left:0}:host([dir=rtl]) #selectionIndicator{right:0}#selectionIndicator{position:absolute;z-index:0;transition:transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out;transform-origin:top left;border-radius:var(--spectrum-tabs-rule-border-radius)}:host([compact]) ::slotted(*){line-height:var(--spectrum-tabs-compact-item-height)}:host([compact]) ::slotted(*){height:var(--spectrum-tabs-compact-item-height)}:host([direction=horizontal]) #list{align-items:center;border-bottom:var(--spectrum-tabs-rule-size) solid}:host([direction=horizontal]) ::slotted(*){vertical-align:top}:host([dir=ltr][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-left:var(--spectrum-tabs-item-gap)}:host([dir=rtl][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-right:var(--spectrum-tabs-item-gap)}:host([direction=horizontal]) #selectionIndicator{position:absolute;bottom:0;height:var(--spectrum-tabs-rule-size);bottom:calc(-1*var(--spectrum-tabs-rule-size))}:host([direction=horizontal][compact]) #list{box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height);align-items:end}:host([quiet]) #list{display:inline-flex}:host([dir=ltr][direction=vertical]) #list{border-left:var(--spectrum-tabs-vertical-rule-size) solid}:host([dir=rtl][direction=vertical]) #list{border-right:var(--spectrum-tabs-vertical-rule-size) solid}:host([direction=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction=vertical]) ::slotted(*){margin-left:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl][direction=vertical]) ::slotted(*){margin-right:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([direction=vertical]) ::slotted(*){height:var(--spectrum-tabs-vertical-item-height);padding-top:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);margin-bottom:var(--spectrum-tabs-vertical-item-gap)}:host([dir=ltr][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=ltr][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([direction=vertical]) ::slotted(*):before{margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2)}:host([direction=vertical][compact]) #list ::slotted(*){height:var(--spectrum-tabs-compact-vertical-item-height);line-height:var(--spectrum-tabs-compact-vertical-item-height);margin-bottom:var(--spectrum-tabs-compact-vertical-item-gap)}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:0}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:0}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([direction=vertical]) #selectionIndicator{position:absolute;width:var(--spectrum-tabs-vertical-rule-size)}#list{border-bottom-color:var(--spectrum-tabs-m-rule-color,var(--spectrum-alias-border-color-light))}:host([dir=ltr][direction=vertical]) #list{border-left-color:var(--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light))}:host([dir=rtl][direction=vertical]) #list{border-right-color:var(--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light))}#selectionIndicator{background-color:var(--spectrum-tabs-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}:host([quiet]) #list{border-bottom-color:var(--spectrum-tabs-quiet-m-rule-color,var(--spectrum-alias-border-color-transparent))}:host([quiet]) #selectionIndicator{background-color:var(--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}:host([dir=ltr][direction=vertical][compact]) #list,:host([dir=ltr][direction=vertical][quiet]) #list{border-left-color:var(--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent))}:host([dir=rtl][direction=vertical][compact]) #list,:host([dir=rtl][direction=vertical][quiet]) #list{border-right-color:var(--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent))}:host([direction=vertical][compact]) #list #selectionIndicator,:host([direction=vertical][quiet]) #list #selectionIndicator{background-color:var(--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900))}\n`;\nexport default styles;"]}
+{"version":3,"file":"spectrum-tabs.css.js","sourceRoot":"","sources":["spectrum-tabs.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-tabs-focus-ring-border-radius:var(\n--spectrum-tabs-m-focus-ring-border-radius\n);--spectrum-tabs-compact-item-height:var(\n--spectrum-tabs-m-compact-item-height,var(--spectrum-alias-item-height-m)\n);--spectrum-tabs-compact-vertical-item-height:var(\n--spectrum-tabs-m-compact-vertical-item-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-tabs-compact-vertical-item-gap:var(\n--spectrum-tabs-m-compact-vertical-item-gap,var(--spectrum-global-dimension-size-50)\n);--spectrum-tabs-text-font-weight:var(\n--spectrum-tabs-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-tabs-rule-border-radius:var(\n--spectrum-tabs-m-rule-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-tabs-rule-size:var(\n--spectrum-tabs-m-rule-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-focus-ring-size:var(\n--spectrum-tabs-m-focus-ring-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-text-size:var(\n--spectrum-tabs-m-text-size,var(--spectrum-alias-item-text-size-m)\n);--spectrum-tabs-height:var(\n--spectrum-tabs-m-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-tabs-item-height:var(\n--spectrum-tabs-m-item-height,var(--spectrum-alias-item-height-m)\n);--spectrum-tabs-icon-gap:var(\n--spectrum-tabs-m-icon-gap,var(--spectrum-alias-item-workflow-icon-gap-m)\n);--spectrum-tabs-focus-ring-height:var(\n--spectrum-tabs-m-focus-ring-height,var(--spectrum-alias-item-height-m)\n);--spectrum-tabs-focus-ring-padding-x:var(\n--spectrum-tabs-m-focus-ring-padding-x,var(--spectrum-alias-item-padding-m)\n);--spectrum-tabs-item-gap:var(\n--spectrum-tabs-m-item-gap,var(--spectrum-global-dimension-size-300)\n);--spectrum-tabs-selection-indicator-animation-duration:var(\n--spectrum-tabs-m-selection-indicator-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-tabs-vertical-rule-size:var(\n--spectrum-tabs-m-vertical-rule-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-tabs-vertical-item-height:var(\n--spectrum-tabs-m-vertical-item-height,var(--spectrum-global-dimension-size-550)\n);--spectrum-tabs-vertical-item-gap:var(\n--spectrum-tabs-m-vertical-item-gap,var(--spectrum-global-dimension-size-50)\n);--spectrum-tabs-vertical-item-margin-left:var(\n--spectrum-tabs-m-vertical-item-margin-left,var(--spectrum-global-dimension-size-150)\n);--spectrum-tabs-quiet-compact-height:var(\n--spectrum-tabs-quiet-m-compact-height,var(--spectrum-alias-item-height-m)\n)}:host{--spectrum-tabs-item-height:calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-compact-item-height:calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-size));--spectrum-tabs-text-size:var(\n--spectrum-alias-font-size-default,var(--spectrum-global-dimension-font-size-100)\n)}#list{display:flex;margin:0;padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);padding-top:0;position:relative;vertical-align:top;z-index:0}:host([dir=ltr]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=ltr]) #selectionIndicator{left:0}:host([dir=rtl]) #selectionIndicator{right:0}#selectionIndicator{border-radius:var(--spectrum-tabs-rule-border-radius);position:absolute;transform-origin:top left;transition:transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out;z-index:0}:host([compact]) ::slotted(*){height:var(\n--spectrum-tabs-compact-item-height\n);line-height:var(--spectrum-tabs-compact-item-height)}:host([direction=horizontal]) #list{align-items:center;border-bottom:var(--spectrum-tabs-rule-size) solid}:host([direction=horizontal]) ::slotted(*){vertical-align:top}:host([dir=ltr][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-left:var(\n--spectrum-tabs-item-gap\n)}:host([dir=rtl][direction=horizontal]) ::slotted(:not([slot]):not(:first-child)){margin-right:var(\n--spectrum-tabs-item-gap\n)}:host([direction=horizontal]) #selectionIndicator{bottom:0;bottom:calc(-1*var(--spectrum-tabs-rule-size));height:var(--spectrum-tabs-rule-size);position:absolute}:host([direction=horizontal][compact]) #list{align-items:end;box-sizing:content-box;height:var(--spectrum-tabs-compact-item-height)}:host([quiet]) #list{display:inline-flex}:host([dir=ltr][direction=vertical]) #list{border-left:var(--spectrum-tabs-vertical-rule-size) solid}:host([dir=rtl][direction=vertical]) #list{border-right:var(--spectrum-tabs-vertical-rule-size) solid}:host([direction=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([dir=ltr][direction=vertical]) ::slotted(*){margin-left:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([dir=rtl][direction=vertical]) ::slotted(*){margin-right:calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x))}:host([direction=vertical]) ::slotted(*){height:var(\n--spectrum-tabs-vertical-item-height\n);margin-bottom:var(--spectrum-tabs-vertical-item-gap);padding-bottom:0;padding-left:var(--spectrum-tabs-focus-ring-padding-x);padding-right:var(--spectrum-tabs-focus-ring-padding-x);padding-top:0}:host([dir=ltr][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=ltr][direction=vertical]) ::slotted(*):before{right:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([dir=rtl][direction=vertical]) ::slotted(*):before{left:calc(-1*var(--spectrum-tabs-focus-ring-size))}:host([direction=vertical]) ::slotted(*):before{margin-top:calc(var(--spectrum-tabs-focus-ring-height)/-2)}:host([direction=vertical][compact]) #list ::slotted(*){height:var(\n--spectrum-tabs-compact-vertical-item-height\n);line-height:var(--spectrum-tabs-compact-vertical-item-height);margin-bottom:var(--spectrum-tabs-compact-vertical-item-gap)}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:0}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:0}:host([dir=ltr][direction=vertical]) #selectionIndicator{left:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([dir=rtl][direction=vertical]) #selectionIndicator{right:calc(-1*var(--spectrum-tabs-vertical-rule-size))}:host([direction=vertical]) #selectionIndicator{position:absolute;width:var(--spectrum-tabs-vertical-rule-size)}#list{border-bottom-color:var(\n--spectrum-tabs-m-rule-color,var(--spectrum-alias-border-color-light)\n)}:host([dir=ltr][direction=vertical]) #list{border-left-color:var(\n--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light)\n)}:host([dir=rtl][direction=vertical]) #list{border-right-color:var(\n--spectrum-tabs-m-vertical-rule-color,var(--spectrum-alias-border-color-light)\n)}#selectionIndicator{background-color:var(\n--spectrum-tabs-m-selection-indicator-color,var(--spectrum-global-color-gray-900)\n)}:host([quiet]) #list{border-bottom-color:var(\n--spectrum-tabs-quiet-m-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([quiet]) #selectionIndicator{background-color:var(\n--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900)\n)}:host([dir=ltr][direction=vertical][compact]) #list,:host([dir=ltr][direction=vertical][quiet]) #list{border-left-color:var(\n--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([dir=rtl][direction=vertical][compact]) #list,:host([dir=rtl][direction=vertical][quiet]) #list{border-right-color:var(\n--spectrum-tabs-quiet-m-vertical-rule-color,var(--spectrum-alias-border-color-transparent)\n)}:host([direction=vertical][compact]) #list #selectionIndicator,:host([direction=vertical][quiet]) #list #selectionIndicator{background-color:var(\n--spectrum-tabs-quiet-m-selection-indicator-color,var(--spectrum-global-color-gray-900)\n)}\n`;\nexport default styles;"]}