@spectrum-web-components/tabs 0.41.1 → 0.42.0

package/src/tabs.css.dev.js

@@ -1,114 +1,7 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(
---spectrum-tab-item-to-tab-item-horizontal-medium
-);--spectrum-tabs-item-vertical-spacing:var(
---spectrum-tab-item-to-tab-item-vertical-medium
-);--spectrum-tabs-start-to-edge:var(
---spectrum-tab-item-start-to-edge-medium
-);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(
---spectrum-tab-item-bottom-to-text-medium
-);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(
---spectrum-tab-item-top-to-workflow-icon-medium
-);--spectrum-tabs-color:var(
---spectrum-neutral-subdued-content-color-default
-);--spectrum-tabs-color-selected:var(
---spectrum-neutral-subdued-content-color-down
-);--spectrum-tabs-color-hover:var(
---spectrum-neutral-subdued-content-color-hover
-);--spectrum-tabs-color-key-focus:var(
---spectrum-neutral-subdued-content-color-key-focus
-);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(
---spectrum-focus-indicator-thickness
-);--spectrum-tabs-focus-indicator-border-radius:var(
---spectrum-corner-radius-100
-);--spectrum-tabs-focus-indicator-gap:var(
---spectrum-tab-item-focus-indicator-gap-medium
-);--spectrum-tabs-focus-indicator-color:var(
---spectrum-focus-indicator-color
-);--spectrum-tabs-selection-indicator-color:var(
---spectrum-neutral-subdued-content-color-down
-);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(
---mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default)
-);--mod-tabs-color-hover:var(
---mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover)
-);--mod-tabs-color-key-focus:var(
---mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus)
-);--mod-tabs-selection-indicator-color:var(
---mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default)
-)}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(
---mod-tabs-list-background-direction-vertical,right
-)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(
---mod-tabs-list-background-direction-vertical-right,left
-)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(
---mod-tabs-list-background-direction-vertical,left
-)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(
---mod-tabs-list-background-direction-vertical,right
-)}:host([compact]) #list{--mod-tabs-item-height:var(
---mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium)
-);--mod-tabs-top-to-text:var(
---mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)
-);--mod-tabs-bottom-to-text:var(
---mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)
-);--mod-tabs-top-to-icon:var(
---mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)
-)}#list{background:linear-gradient(to var(
---mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)
-),var(
---highcontrast-tabs-divider-background-color,var(
---mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)
-)
-) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));display:flex;margin:0;padding-block:0;position:relative;vertical-align:top;z-index:0}::slotted([selected]:not([slot])){color:var(
---highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))
-)}::slotted(:not([slot])).is-disabled{color:var(
---highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))
-);cursor:default}::slotted(:not([slot])).focus-visible{color:var(
---highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
-)}::slotted(:not([slot])):focus-visible{color:var(
---highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
-)}::slotted(:not([slot])).focus-visible:before{border-color:var(
---highcontrast-tabs-focus-indicator-color,var(
---mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
-)
-)}::slotted(:not([slot])):focus-visible:before{border-color:var(
---highcontrast-tabs-focus-indicator-color,var(
---mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
-)
-)}#selection-indicator{background-color:var(
---highcontrast-tabs-selection-indicator-color,var(
---mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)
-)
-);border-radius:var(
---mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius)
-);inset-inline-start:0;position:absolute;transform-origin:0 0;transition:transform var(
---mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)
-) var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));z-index:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-inline-start:var(
---mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing)
-)}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));inset-block-end:0;position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box}:host([quiet]) #list{background:none;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(
---mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet)
-)}:host([direction^=vertical-right]) #list,:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical-right]) #list ::slotted(:not([slot])),:host([direction^=vertical]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(
---mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing)
-);margin-inline-end:var(
---mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)
-);margin-inline-start:var(
---mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)
-);padding-block:0}:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before,:host([direction^=vertical]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(
---mod-tabs-focus-indicator-gap,
-var(--spectrum-tabs-focus-indicator-gap)
-)*-1)}:host([direction^=vertical-right]) #list #selection-indicator,:host([direction^=vertical]) #list #selection-indicator{inline-size:var(
---mod-tabs-divider-size,var(--spectrum-tabs-divider-size)
-);inset-block-start:0;inset-inline-start:0;position:absolute}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(
---highcontrast-tabs-focus-indicator-background-color
-)}#list ::slotted([selected]:not([slot])).focus-visible,#list ::slotted([selected]:not([slot])):focus{color:var(--highcontrast-tabs-color-selected)}#list ::slotted([selected]:not([slot])):focus,#list ::slotted([selected]:not([slot])):focus-visible{color:var(--highcontrast-tabs-color-selected)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(
---mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)
-),var(
---highcontrast-tabs-divider-background-color,var(
---mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)
-)
-) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{display:grid;grid-template-columns:100%;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline-end:0;inset-inline-start:auto}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(
---mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)
-)}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}
+    #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:content-box;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical][quiet]) #list,:host([direction^=vertical-right][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{grid-template-columns:100%;display:grid;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}
 `;
 export default styles;
 //# sourceMappingURL=tabs.css.dev.js.map

package/src/tabs.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["tabs.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 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#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(\n--spectrum-tab-item-to-tab-item-horizontal-medium\n);--spectrum-tabs-item-vertical-spacing:var(\n--spectrum-tab-item-to-tab-item-vertical-medium\n);--spectrum-tabs-start-to-edge:var(\n--spectrum-tab-item-start-to-edge-medium\n);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(\n--spectrum-tab-item-bottom-to-text-medium\n);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(\n--spectrum-tab-item-top-to-workflow-icon-medium\n);--spectrum-tabs-color:var(\n--spectrum-neutral-subdued-content-color-default\n);--spectrum-tabs-color-selected:var(\n--spectrum-neutral-subdued-content-color-down\n);--spectrum-tabs-color-hover:var(\n--spectrum-neutral-subdued-content-color-hover\n);--spectrum-tabs-color-key-focus:var(\n--spectrum-neutral-subdued-content-color-key-focus\n);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-tabs-focus-indicator-border-radius:var(\n--spectrum-corner-radius-100\n);--spectrum-tabs-focus-indicator-gap:var(\n--spectrum-tab-item-focus-indicator-gap-medium\n);--spectrum-tabs-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-tabs-selection-indicator-color:var(\n--spectrum-neutral-subdued-content-color-down\n);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(\n--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default)\n);--mod-tabs-color-hover:var(\n--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover)\n);--mod-tabs-color-key-focus:var(\n--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus)\n);--mod-tabs-selection-indicator-color:var(\n--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default)\n)}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,right\n)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical-right,left\n)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,left\n)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,right\n)}:host([compact]) #list{--mod-tabs-item-height:var(\n--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium)\n);--mod-tabs-top-to-text:var(\n--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)\n);--mod-tabs-bottom-to-text:var(\n--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)\n);--mod-tabs-top-to-icon:var(\n--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)\n)}#list{background:linear-gradient(to var(\n--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)\n),var(\n--highcontrast-tabs-divider-background-color,var(\n--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)\n)\n) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));display:flex;margin:0;padding-block:0;position:relative;vertical-align:top;z-index:0}::slotted([selected]:not([slot])){color:var(\n--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))\n)}::slotted(:not([slot])).is-disabled{color:var(\n--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))\n);cursor:default}::slotted(:not([slot])).focus-visible{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}::slotted(:not([slot])):focus-visible{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}::slotted(:not([slot])).focus-visible:before{border-color:var(\n--highcontrast-tabs-focus-indicator-color,var(\n--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)\n)\n)}::slotted(:not([slot])):focus-visible:before{border-color:var(\n--highcontrast-tabs-focus-indicator-color,var(\n--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)\n)\n)}#selection-indicator{background-color:var(\n--highcontrast-tabs-selection-indicator-color,var(\n--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)\n)\n);border-radius:var(\n--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius)\n);inset-inline-start:0;position:absolute;transform-origin:0 0;transition:transform var(\n--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)\n) var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));z-index:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-inline-start:var(\n--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing)\n)}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));inset-block-end:0;position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box}:host([quiet]) #list{background:none;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(\n--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet)\n)}:host([direction^=vertical-right]) #list,:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical-right]) #list ::slotted(:not([slot])),:host([direction^=vertical]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(\n--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing)\n);margin-inline-end:var(\n--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)\n);margin-inline-start:var(\n--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)\n);padding-block:0}:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before,:host([direction^=vertical]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(\n--mod-tabs-focus-indicator-gap,\nvar(--spectrum-tabs-focus-indicator-gap)\n)*-1)}:host([direction^=vertical-right]) #list #selection-indicator,:host([direction^=vertical]) #list #selection-indicator{inline-size:var(\n--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)\n);inset-block-start:0;inset-inline-start:0;position:absolute}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(\n--highcontrast-tabs-focus-indicator-background-color\n)}#list ::slotted([selected]:not([slot])).focus-visible,#list ::slotted([selected]:not([slot])):focus{color:var(--highcontrast-tabs-color-selected)}#list ::slotted([selected]:not([slot])):focus,#list ::slotted([selected]:not([slot])):focus-visible{color:var(--highcontrast-tabs-color-selected)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(\n--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)\n),var(\n--highcontrast-tabs-divider-background-color,var(\n--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)\n)\n) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{display:grid;grid-template-columns:100%;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline-end:0;inset-inline-start:auto}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(\n--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)\n)}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}\n`;\nexport default styles;"],
-  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8Gf,eAAe;",
+  "sourcesContent": ["/*\nCopyright 2024 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    #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:content-box;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical][quiet]) #list,:host([direction^=vertical-right][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{grid-template-columns:100%;display:grid;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

package/src/tabs.css.js

@@ -1,111 +1,4 @@
 "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
-#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(
---spectrum-tab-item-to-tab-item-horizontal-medium
-);--spectrum-tabs-item-vertical-spacing:var(
---spectrum-tab-item-to-tab-item-vertical-medium
-);--spectrum-tabs-start-to-edge:var(
---spectrum-tab-item-start-to-edge-medium
-);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(
---spectrum-tab-item-bottom-to-text-medium
-);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(
---spectrum-tab-item-top-to-workflow-icon-medium
-);--spectrum-tabs-color:var(
---spectrum-neutral-subdued-content-color-default
-);--spectrum-tabs-color-selected:var(
---spectrum-neutral-subdued-content-color-down
-);--spectrum-tabs-color-hover:var(
---spectrum-neutral-subdued-content-color-hover
-);--spectrum-tabs-color-key-focus:var(
---spectrum-neutral-subdued-content-color-key-focus
-);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(
---spectrum-focus-indicator-thickness
-);--spectrum-tabs-focus-indicator-border-radius:var(
---spectrum-corner-radius-100
-);--spectrum-tabs-focus-indicator-gap:var(
---spectrum-tab-item-focus-indicator-gap-medium
-);--spectrum-tabs-focus-indicator-color:var(
---spectrum-focus-indicator-color
-);--spectrum-tabs-selection-indicator-color:var(
---spectrum-neutral-subdued-content-color-down
-);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(
---mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default)
-);--mod-tabs-color-hover:var(
---mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover)
-);--mod-tabs-color-key-focus:var(
---mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus)
-);--mod-tabs-selection-indicator-color:var(
---mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default)
-)}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(
---mod-tabs-list-background-direction-vertical,right
-)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(
---mod-tabs-list-background-direction-vertical-right,left
-)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(
---mod-tabs-list-background-direction-vertical,left
-)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(
---mod-tabs-list-background-direction-vertical,right
-)}:host([compact]) #list{--mod-tabs-item-height:var(
---mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium)
-);--mod-tabs-top-to-text:var(
---mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)
-);--mod-tabs-bottom-to-text:var(
---mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)
-);--mod-tabs-top-to-icon:var(
---mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)
-)}#list{background:linear-gradient(to var(
---mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)
-),var(
---highcontrast-tabs-divider-background-color,var(
---mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)
-)
-) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));display:flex;margin:0;padding-block:0;position:relative;vertical-align:top;z-index:0}::slotted([selected]:not([slot])){color:var(
---highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))
-)}::slotted(:not([slot])).is-disabled{color:var(
---highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))
-);cursor:default}::slotted(:not([slot])).focus-visible{color:var(
---highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
-)}::slotted(:not([slot])):focus-visible{color:var(
---highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))
-)}::slotted(:not([slot])).focus-visible:before{border-color:var(
---highcontrast-tabs-focus-indicator-color,var(
---mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
-)
-)}::slotted(:not([slot])):focus-visible:before{border-color:var(
---highcontrast-tabs-focus-indicator-color,var(
---mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)
-)
-)}#selection-indicator{background-color:var(
---highcontrast-tabs-selection-indicator-color,var(
---mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)
-)
-);border-radius:var(
---mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius)
-);inset-inline-start:0;position:absolute;transform-origin:0 0;transition:transform var(
---mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)
-) var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));z-index:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-inline-start:var(
---mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing)
-)}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));inset-block-end:0;position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box}:host([quiet]) #list{background:none;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(
---mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet)
-)}:host([direction^=vertical-right]) #list,:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical-right]) #list ::slotted(:not([slot])),:host([direction^=vertical]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(
---mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing)
-);margin-inline-end:var(
---mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)
-);margin-inline-start:var(
---mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)
-);padding-block:0}:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before,:host([direction^=vertical]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(
---mod-tabs-focus-indicator-gap,
-var(--spectrum-tabs-focus-indicator-gap)
-)*-1)}:host([direction^=vertical-right]) #list #selection-indicator,:host([direction^=vertical]) #list #selection-indicator{inline-size:var(
---mod-tabs-divider-size,var(--spectrum-tabs-divider-size)
-);inset-block-start:0;inset-inline-start:0;position:absolute}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(
---highcontrast-tabs-focus-indicator-background-color
-)}#list ::slotted([selected]:not([slot])).focus-visible,#list ::slotted([selected]:not([slot])):focus{color:var(--highcontrast-tabs-color-selected)}#list ::slotted([selected]:not([slot])):focus,#list ::slotted([selected]:not([slot])):focus-visible{color:var(--highcontrast-tabs-color-selected)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(
---mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)
-),var(
---highcontrast-tabs-divider-background-color,var(
---mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)
-)
-) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{display:grid;grid-template-columns:100%;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline-end:0;inset-inline-start:auto}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(
---mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)
-)}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}
+    #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:content-box;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical][quiet]) #list,:host([direction^=vertical-right][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{grid-template-columns:100%;display:grid;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}
 `;export default o;
 //# sourceMappingURL=tabs.css.js.map

package/src/tabs.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["tabs.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 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#list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(\n--spectrum-tab-item-to-tab-item-horizontal-medium\n);--spectrum-tabs-item-vertical-spacing:var(\n--spectrum-tab-item-to-tab-item-vertical-medium\n);--spectrum-tabs-start-to-edge:var(\n--spectrum-tab-item-start-to-edge-medium\n);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(\n--spectrum-tab-item-bottom-to-text-medium\n);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(\n--spectrum-tab-item-top-to-workflow-icon-medium\n);--spectrum-tabs-color:var(\n--spectrum-neutral-subdued-content-color-default\n);--spectrum-tabs-color-selected:var(\n--spectrum-neutral-subdued-content-color-down\n);--spectrum-tabs-color-hover:var(\n--spectrum-neutral-subdued-content-color-hover\n);--spectrum-tabs-color-key-focus:var(\n--spectrum-neutral-subdued-content-color-key-focus\n);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-tabs-focus-indicator-border-radius:var(\n--spectrum-corner-radius-100\n);--spectrum-tabs-focus-indicator-gap:var(\n--spectrum-tab-item-focus-indicator-gap-medium\n);--spectrum-tabs-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-tabs-selection-indicator-color:var(\n--spectrum-neutral-subdued-content-color-down\n);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(\n--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default)\n);--mod-tabs-color-hover:var(\n--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover)\n);--mod-tabs-color-key-focus:var(\n--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus)\n);--mod-tabs-selection-indicator-color:var(\n--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default)\n)}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,right\n)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical-right,left\n)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,left\n)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(\n--mod-tabs-list-background-direction-vertical,right\n)}:host([compact]) #list{--mod-tabs-item-height:var(\n--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium)\n);--mod-tabs-top-to-text:var(\n--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)\n);--mod-tabs-bottom-to-text:var(\n--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium)\n);--mod-tabs-top-to-icon:var(\n--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)\n)}#list{background:linear-gradient(to var(\n--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)\n),var(\n--highcontrast-tabs-divider-background-color,var(\n--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)\n)\n) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));display:flex;margin:0;padding-block:0;position:relative;vertical-align:top;z-index:0}::slotted([selected]:not([slot])){color:var(\n--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected))\n)}::slotted(:not([slot])).is-disabled{color:var(\n--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))\n);cursor:default}::slotted(:not([slot])).focus-visible{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}::slotted(:not([slot])):focus-visible{color:var(\n--highcontrast-tabs-color-key-focus,var(--mod-tabs-color-key-focus,var(--spectrum-tabs-color-key-focus))\n)}::slotted(:not([slot])).focus-visible:before{border-color:var(\n--highcontrast-tabs-focus-indicator-color,var(\n--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)\n)\n)}::slotted(:not([slot])):focus-visible:before{border-color:var(\n--highcontrast-tabs-focus-indicator-color,var(\n--mod-tabs-focus-indicator-color,var(--spectrum-tabs-focus-indicator-color)\n)\n)}#selection-indicator{background-color:var(\n--highcontrast-tabs-selection-indicator-color,var(\n--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)\n)\n);border-radius:var(\n--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius)\n);inset-inline-start:0;position:absolute;transform-origin:0 0;transition:transform var(\n--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration)\n) var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));z-index:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-inline-start:var(\n--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing)\n)}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));inset-block-end:0;position:absolute}:host([direction^=horizontal][compact]) #list{align-items:end;box-sizing:content-box}:host([quiet]) #list{background:none;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(\n--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet)\n)}:host([direction^=vertical-right]) #list,:host([direction^=vertical]) #list{display:inline-flex;flex-direction:column;padding:0}:host([direction^=vertical-right][quiet]) #list,:host([direction^=vertical][quiet]) #list{border-color:#0000}:host([direction^=vertical-right]) #list ::slotted(:not([slot])),:host([direction^=vertical]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(\n--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing)\n);margin-inline-end:var(\n--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)\n);margin-inline-start:var(\n--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge)\n);padding-block:0}:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before,:host([direction^=vertical]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(\n--mod-tabs-focus-indicator-gap,\nvar(--spectrum-tabs-focus-indicator-gap)\n)*-1)}:host([direction^=vertical-right]) #list #selection-indicator,:host([direction^=vertical]) #list #selection-indicator{inline-size:var(\n--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)\n);inset-block-start:0;inset-inline-start:0;position:absolute}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(\n--highcontrast-tabs-focus-indicator-background-color\n)}#list ::slotted([selected]:not([slot])).focus-visible,#list ::slotted([selected]:not([slot])):focus{color:var(--highcontrast-tabs-color-selected)}#list ::slotted([selected]:not([slot])):focus,#list ::slotted([selected]:not([slot])):focus-visible{color:var(--highcontrast-tabs-color-selected)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(\n--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)\n),var(\n--highcontrast-tabs-divider-background-color,var(\n--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)\n)\n) 0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{display:grid;grid-template-columns:100%;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline-end:0;inset-inline-start:auto}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(\n--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)\n)}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}\n`;\nexport default styles;"],
-  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8Gf,eAAeC",
+  "sourcesContent": ["/*\nCopyright 2024 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    #list{--spectrum-tabs-item-height:var(--spectrum-tab-item-height-medium);--spectrum-tabs-item-horizontal-spacing:var(--spectrum-tab-item-to-tab-item-horizontal-medium);--spectrum-tabs-item-vertical-spacing:var(--spectrum-tab-item-to-tab-item-vertical-medium);--spectrum-tabs-start-to-edge:var(--spectrum-tab-item-start-to-edge-medium);--spectrum-tabs-top-to-text:var(--spectrum-tab-item-top-to-text-medium);--spectrum-tabs-bottom-to-text:var(--spectrum-tab-item-bottom-to-text-medium);--spectrum-tabs-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-tabs-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-tabs-top-to-icon:var(--spectrum-tab-item-top-to-workflow-icon-medium);--spectrum-tabs-color:var(--spectrum-neutral-subdued-content-color-default);--spectrum-tabs-color-selected:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-color-hover:var(--spectrum-neutral-subdued-content-color-hover);--spectrum-tabs-color-key-focus:var(--spectrum-neutral-subdued-content-color-key-focus);--spectrum-tabs-color-disabled:var(--spectrum-gray-500);--spectrum-tabs-font-family:var(--spectrum-sans-font-family-stack);--spectrum-tabs-font-style:var(--spectrum-default-font-style);--spectrum-tabs-font-size:var(--spectrum-font-size-100);--spectrum-tabs-line-height:var(--spectrum-line-height-100);--spectrum-tabs-focus-indicator-width:var(--spectrum-focus-indicator-thickness);--spectrum-tabs-focus-indicator-border-radius:var(--spectrum-corner-radius-100);--spectrum-tabs-focus-indicator-gap:var(--spectrum-tab-item-focus-indicator-gap-medium);--spectrum-tabs-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-tabs-selection-indicator-color:var(--spectrum-neutral-subdued-content-color-down);--spectrum-tabs-list-background-direction:top;--spectrum-tabs-divider-background-color:var(--spectrum-gray-300);--spectrum-tabs-divider-size:var(--spectrum-border-width-200);--spectrum-tabs-divider-border-radius:1px;--spectrum-tabs-animation-duration:var(--spectrum-animation-duration-100);--spectrum-tabs-animation-ease:var(--spectrum-animation-ease-in-out)}:host([emphasized]) #list{--mod-tabs-color-selected:var(--mod-tabs-color-selected-emphasized,var(--spectrum-accent-content-color-default));--mod-tabs-color-hover:var(--mod-tabs-color-hover-emphasized,var(--spectrum-accent-content-color-hover));--mod-tabs-color-key-focus:var(--mod-tabs-color-key-focus-emphasized,var(--spectrum-accent-content-color-key-focus));--mod-tabs-selection-indicator-color:var(--mod-tabs-selection-indicator-color-emphasized,var(--spectrum-accent-content-color-default))}:host([direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical-right,left)}:host([dir=rtl][direction^=vertical]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,left)}:host([dir=rtl][direction^=vertical-right]) #list{--mod-tabs-list-background-direction:var(--mod-tabs-list-background-direction-vertical,right)}:host([compact]) #list{--mod-tabs-item-height:var(--mod-tabs-item-height-compact,var(--spectrum-tab-item-compact-height-medium));--mod-tabs-top-to-text:var(--mod-tabs-top-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-bottom-to-text:var(--mod-tabs-bottom-to-text-compact,var(--spectrum-tab-item-top-to-text-compact-medium));--mod-tabs-top-to-icon:var(--mod-tabs-top-to-icon-compact,var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))}#list{z-index:0;vertical-align:top;background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)));margin:0;padding-block:0;display:flex;position:relative}::slotted([selected]:not([slot])){color:var(--highcontrast-tabs-color-selected,var(--mod-tabs-color-selected,var(--spectrum-tabs-color-selected)))}::slotted([disabled]:not([slot])){cursor:default;color:var(--highcontrast-tabs-color-disabled,var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled)))}#selection-indicator{background-color:var(--highcontrast-tabs-selection-indicator-color,var(--mod-tabs-selection-indicator-color,var(--spectrum-tabs-selection-indicator-color)));z-index:0;transition:transform var(--mod-tabs-animation-duration,var(--spectrum-tabs-animation-duration))var(--mod-tabs-animation-ease,var(--spectrum-tabs-animation-ease));transform-origin:0 0;border-radius:var(--mod-tabs-divider-border-radius,var(--spectrum-tabs-divider-border-radius));position:absolute;inset-inline-start:0}:host([direction^=horizontal]) #list{align-items:center}:host([direction^=horizontal]) #list ::slotted(:not([slot])){vertical-align:top}:host([direction^=horizontal]) #list ::slotted(:not([slot]):not(:first-child)){margin-inline-start:var(--mod-tabs-item-horizontal-spacing,var(--spectrum-tabs-item-horizontal-spacing))}:host([direction^=horizontal]) #list #selection-indicator{block-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-end:0}:host([direction^=horizontal][compact]) #list{box-sizing:content-box;align-items:end}:host([quiet]) #list{background:0 0;border-color:#0000;display:inline-flex}:host([quiet]) #selection-indicator{padding-inline-start:var(--mod-tabs-start-to-item-quiet,var(--spectrum-tabs-start-to-item-quiet))}:host([direction^=vertical]) #list,:host([direction^=vertical-right]) #list{flex-direction:column;padding:0;display:inline-flex}:host([direction^=vertical][quiet]) #list,:host([direction^=vertical-right][quiet]) #list{border-color:#0000}:host([direction^=vertical]) #list ::slotted(:not([slot])),:host([direction^=vertical-right]) #list ::slotted(:not([slot])){block-size:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));line-height:var(--mod-tabs-item-height,var(--spectrum-tabs-item-height));margin-block-end:var(--mod-tabs-item-vertical-spacing,var(--spectrum-tabs-item-vertical-spacing));margin-inline-start:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));margin-inline-end:var(--mod-tabs-start-to-edge,var(--spectrum-tabs-start-to-edge));padding-block:0}:host([direction^=vertical]) #list ::slotted(:not([slot])):before,:host([direction^=vertical-right]) #list ::slotted(:not([slot])):before{inset-inline-start:calc(var(--mod-tabs-focus-indicator-gap,var(--spectrum-tabs-focus-indicator-gap))*-1)}:host([direction^=vertical]) #list #selection-indicator,:host([direction^=vertical-right]) #list #selection-indicator{inline-size:var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size));position:absolute;inset-block-start:0;inset-inline-start:0}:host([direction^=vertical-right]) #list #selection-indicator{inset-inline:auto 0}@media (forced-colors:active){#list{--highcontrast-tabs-divider-background-color:var(--spectrum-gray-500);--highcontrast-tabs-selection-indicator-color:Highlight;--highcontrast-tabs-focus-indicator-color:CanvasText;--highcontrast-tabs-focus-indicator-background-color:Highlight;--highcontrast-tabs-color:ButtonText;--highcontrast-tabs-color-hover:ButtonText;--highcontrast-tabs-color-selected:HighlightText;--highcontrast-tabs-color-key-focus:ButtonText;--highcontrast-tabs-color-disabled:GrayText;forced-color-adjust:none}#list ::slotted([selected]:not([slot])):before{background-color:var(--highcontrast-tabs-focus-indicator-background-color)}:host([direction^=vertical][compact]) #list #list ::slotted(:not([slot])):before{block-size:100%;inset-block-start:0}:host([quiet]) #list{background:linear-gradient(to var(--mod-tabs-list-background-direction,var(--spectrum-tabs-list-background-direction)),var(--highcontrast-tabs-divider-background-color,var(--mod-tabs-divider-background-color,var(--spectrum-tabs-divider-background-color)))0 var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)),transparent var(--mod-tabs-divider-size,var(--spectrum-tabs-divider-size)))}}#list{--spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight)}:host{grid-template-columns:100%;display:grid;position:relative}:host(:not([direction^=vertical])){grid-template-rows:auto 1fr}:host([direction^=vertical]){grid-template-columns:auto 1fr}:host([dir=rtl]) #selection-indicator{left:0;right:auto}:host([direction=vertical-right]) #list #selection-indicator{inset-inline:auto 0}#list{justify-content:var(--swc-tabs-list-justify-content)}:host([disabled]) #list{pointer-events:none}:host([disabled]) #list #selection-indicator{background-color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([disabled]) ::slotted(sp-tab){color:var(--mod-tabs-color-disabled,var(--spectrum-tabs-color-disabled))}:host([direction=vertical-right]) #list #selection-indicator,:host([direction=vertical]) #list #selection-indicator{inset-block-start:0}#selection-indicator.first-position{transition:none}:host([dir][direction=horizontal]) #list.scroll{scrollbar-width:none;overflow:auto hidden}:host([dir][direction=horizontal]) #list.scroll::-webkit-scrollbar{display:none}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/stories/tabs.stories.js

@@ -51,29 +51,20 @@ export const Default = (args) => {
             }
             sp-tab-panel {
                 grid-area: 2/1/2/1;
-                transition: opacity
-                        var(--spectrum-global-animation-duration-300)
+                transition: opacity var(--spectrum-animation-duration-300)
                         ease-in-out,
-                    transform var(--spectrum-global-animation-duration-300)
-                        ease-in-out;
+                    transform var(--spectrum-animation-duration-300) ease-in-out;
             }
             sp-tab-panel:not([selected]) {
                 display: unset;
                 opacity: 0;
                 height: 0;
                 pointer-events: none;
-                transform: translateY(
-                    var(
-                        --spectrum-dropdown-flyout-menu-offset-y,
-                        var(--spectrum-global-dimension-size-75)
-                    )
-                );
-                transition: opacity
-                        var(--spectrum-global-animation-duration-300)
+                transform: translateY(calc(var(--swc-scale-factor) * 6px));
+                transition: opacity var(--spectrum-animation-duration-300)
                         ease-in-out,
-                    transform var(--spectrum-global-animation-duration-300)
-                        ease-in-out,
-                    height 0s ease var(--spectrum-global-animation-duration-300);
+                    transform var(--spectrum-animation-duration-300) ease-in-out,
+                    height 0s ease var(--spectrum-animation-duration-300);
             }
         </style>
         <sp-tabs

package/stories/tabs.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["tabs.stories.ts"],
-  "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 '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';\nimport '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport '@spectrum-web-components/tabs/sp-tab-panel.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nexport default {\n    component: 'sp-tabs',\n    title: 'Tabs',\n    argTypes: {\n        direction: {\n            name: 'direction',\n            type: { name: 'string', required: false },\n            description: 'The direction of the Tabs element',\n            table: {\n                type: {\n                    summary: '\"vertical\" | \"vertical-right\" | \"horizontal\"',\n                },\n                defaultValue: { summary: 'horizontal' },\n            },\n            control: {\n                type: 'text',\n            },\n        },\n        verticalTab: { control: 'boolean' },\n        auto: { control: 'boolean' },\n    },\n    args: {\n        direction: 'horizontal',\n        type: false,\n        verticalTab: false,\n        auto: false,\n    },\n};\n\ninterface Properties {\n    direction: 'vertical' | 'vertical-right' | 'horizontal';\n    verticalTabs?: boolean;\n    verticalTab?: boolean;\n    auto?: boolean;\n}\n\nconst panels = (): TemplateResult => html`\n    <sp-tab-panel value=\"1\">Content for \"Really Long Name\"</sp-tab-panel>\n    <sp-tab-panel value=\"2\">Content for tab 2</sp-tab-panel>\n    <sp-tab-panel value=\"3\">Content for tab 3</sp-tab-panel>\n    <sp-tab-panel value=\"4\">Content for tab 4</sp-tab-panel>\n`;\n\nexport const Default = (args: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                display: grid;\n                grid-template-columns: 100%;\n            }\n            sp-tab-panel {\n                grid-area: 2/1/2/1;\n                transition: opacity\n                        var(--spectrum-global-animation-duration-300)\n                        ease-in-out,\n                    transform var(--spectrum-global-animation-duration-300)\n                        ease-in-out;\n            }\n            sp-tab-panel:not([selected]) {\n                display: unset;\n                opacity: 0;\n                height: 0;\n                pointer-events: none;\n                transform: translateY(\n                    var(\n                        --spectrum-dropdown-flyout-menu-offset-y,\n                        var(--spectrum-global-dimension-size-75)\n                    )\n                );\n                transition: opacity\n                        var(--spectrum-global-animation-duration-300)\n                        ease-in-out,\n                    transform var(--spectrum-global-animation-duration-300)\n                        ease-in-out,\n                    height 0s ease var(--spectrum-global-animation-duration-300);\n            }\n        </style>\n        <sp-tabs\n            selected=\"1\"\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            direction=${args.direction}\n        >\n            <sp-tab value=\"2\">Tab 2</sp-tab>\n            <sp-tab value=\"3\">Tab 3</sp-tab>\n            <sp-tab value=\"4\">Tab 4</sp-tab>\n            <sp-tab value=\"1\" selected>Really Long Name</sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const Autofocus = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            autofocus\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            direction=${args.direction}\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const disabledTabs = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            disabled\n            ?auto=${args.auto}\n            label=\"Disabled Tabs\"\n            direction=${args.direction}\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const disabledTab = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            ?auto=${args.auto}\n            label=\"Disabled Tab\"\n            direction=${args.direction}\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\" disabled></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\" disabled></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const emphasized = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs selected=\"1\" emphasized ?auto=${args.auto} label=\"Demo Tabs\">\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const emphasizedQuiet = (args: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                display: grid;\n                grid-template-columns: 100%;\n            }\n        </style>\n        <sp-tabs\n            selected=\"1\"\n            emphasized\n            quiet\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const Vertical = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nVertical.args = {\n    direction: 'vertical',\n};\n\nexport const verticalQuiet = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            quiet\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nverticalQuiet.args = {\n    direction: 'vertical',\n};\n\nexport const verticalEmphasizedQuiet = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            quiet\n            emphasized\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nverticalEmphasizedQuiet.args = {\n    direction: 'vertical',\n};\n\nexport const verticalCompact = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            compact\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nverticalCompact.args = {\n    direction: 'vertical',\n};\n\nexport const verticalQuietCompact = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            quiet\n            compact\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nverticalQuietCompact.args = {\n    direction: 'vertical',\n};\n\nexport const VerticalSized = (args: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                display: grid;\n                height: 75vh;\n                --swc-tabs-list-justify-content: center;\n            }\n        </style>\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nVerticalSized.args = {\n    direction: 'vertical',\n};\n\nexport const VerticalRight = (args: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                height: 75vh;\n                --swc-tabs-list-justify-content: center;\n            }\n        </style>\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nVerticalRight.args = {\n    direction: 'vertical-right',\n};\n\nexport const Icons = ({\n    direction,\n    verticalTab,\n    auto,\n}: Properties): TemplateResult => {\n    return html`\n        <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n            <sp-tab label=\"Tab 1\" value=\"1\" ?vertical=${verticalTab}>\n                <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n            </sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\" ?vertical=${verticalTab}>\n                <sp-icon-close slot=\"icon\"></sp-icon-close>\n            </sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\" ?vertical=${verticalTab}>\n                <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n            </sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\" ?vertical=${verticalTab}>\n                <sp-icon-help slot=\"icon\"></sp-icon-help>\n            </sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const IconsWithSlottedLabel = ({\n    direction,\n    verticalTab,\n    auto,\n}: Properties): TemplateResult => {\n    return html`\n        <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n            <sp-tab value=\"1\" ?vertical=${verticalTab}>\n                Tab 1\n                <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n            </sp-tab>\n            <sp-tab value=\"2\" ?vertical=${verticalTab}>\n                Tab 2\n                <sp-icon-close slot=\"icon\"></sp-icon-close>\n            </sp-tab>\n            <sp-tab value=\"3\" ?vertical=${verticalTab}>\n                Tab 3\n                <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n            </sp-tab>\n            <sp-tab value=\"4\" ?vertical=${verticalTab}>\n                Tab 4\n                <sp-icon-help slot=\"icon\"></sp-icon-help>\n            </sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const IconsOnly = ({\n    direction,\n    verticalTab,\n    auto,\n}: Properties): TemplateResult => {\n    return html`\n        <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n            <sp-tab aria-label=\"Tab 1\" value=\"1\" ?vertical=${verticalTab}>\n                <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n            </sp-tab>\n            <sp-tab aria-label=\"Tab 2\" value=\"2\" ?vertical=${verticalTab}>\n                <sp-icon-close slot=\"icon\"></sp-icon-close>\n            </sp-tab>\n            <sp-tab aria-label=\"Tab 3\" value=\"3\" ?vertical=${verticalTab}>\n                <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n            </sp-tab>\n            <sp-tab aria-label=\"Tab 4\" value=\"4\" ?vertical=${verticalTab}>\n                <sp-icon-help slot=\"icon\"></sp-icon-help>\n            </sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const iconsIi = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\" vertical>\n                <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n            </sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\" vertical>\n                <sp-icon-close slot=\"icon\"></sp-icon-close>\n            </sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\" vertical>\n                <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n            </sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\" vertical>\n                <sp-icon-help slot=\"icon\"></sp-icon-help>\n            </sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\niconsIi.args = {\n    direction: 'vertical',\n};\niconsIi.storyName = 'Icons II';\n\nexport const iconsIii = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\">\n                <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n            </sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\">\n                <sp-icon-close slot=\"icon\"></sp-icon-close>\n            </sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\">\n                <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n            </sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\">\n                <sp-icon-help slot=\"icon\"></sp-icon-help>\n            </sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\niconsIii.args = {\n    direction: 'vertical',\n};\niconsIii.storyName = 'Icons III';\n\nexport const Quiet = ({ direction, auto }: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                display: grid;\n                grid-template-columns: 100%;\n            }\n        </style>\n        <sp-tabs selected=\"1\" quiet direction=${direction} ?auto=${auto}>\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const Compact = ({ direction, auto }: Properties): TemplateResult => {\n    return html`\n        <sp-tabs selected=\"1\" compact direction=${direction} ?auto=${auto}>\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const quietCompact = ({\n    direction,\n    auto,\n}: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                display: grid;\n                grid-template-columns: 100%;\n            }\n        </style>\n        <sp-tabs\n            selected=\"1\"\n            quiet\n            compact\n            direction=${direction}\n            ?auto=${auto}\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nquietCompact.storyName = 'Quiet Compact';\n"],
-  "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*/\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';\nimport '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport '@spectrum-web-components/tabs/sp-tab-panel.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nexport default {\n    component: 'sp-tabs',\n    title: 'Tabs',\n    argTypes: {\n        direction: {\n            name: 'direction',\n            type: { name: 'string', required: false },\n            description: 'The direction of the Tabs element',\n            table: {\n                type: {\n                    summary: '\"vertical\" | \"vertical-right\" | \"horizontal\"',\n                },\n                defaultValue: { summary: 'horizontal' },\n            },\n            control: {\n                type: 'text',\n            },\n        },\n        verticalTab: { control: 'boolean' },\n        auto: { control: 'boolean' },\n    },\n    args: {\n        direction: 'horizontal',\n        type: false,\n        verticalTab: false,\n        auto: false,\n    },\n};\n\ninterface Properties {\n    direction: 'vertical' | 'vertical-right' | 'horizontal';\n    verticalTabs?: boolean;\n    verticalTab?: boolean;\n    auto?: boolean;\n}\n\nconst panels = (): TemplateResult => html`\n    <sp-tab-panel value=\"1\">Content for \"Really Long Name\"</sp-tab-panel>\n    <sp-tab-panel value=\"2\">Content for tab 2</sp-tab-panel>\n    <sp-tab-panel value=\"3\">Content for tab 3</sp-tab-panel>\n    <sp-tab-panel value=\"4\">Content for tab 4</sp-tab-panel>\n`;\n\nexport const Default = (args: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                display: grid;\n                grid-template-columns: 100%;\n            }\n            sp-tab-panel {\n                grid-area: 2/1/2/1;\n                transition: opacity var(--spectrum-animation-duration-300)\n                        ease-in-out,\n                    transform var(--spectrum-animation-duration-300) ease-in-out;\n            }\n            sp-tab-panel:not([selected]) {\n                display: unset;\n                opacity: 0;\n                height: 0;\n                pointer-events: none;\n                transform: translateY(calc(var(--swc-scale-factor) * 6px));\n                transition: opacity var(--spectrum-animation-duration-300)\n                        ease-in-out,\n                    transform var(--spectrum-animation-duration-300) ease-in-out,\n                    height 0s ease var(--spectrum-animation-duration-300);\n            }\n        </style>\n        <sp-tabs\n            selected=\"1\"\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            direction=${args.direction}\n        >\n            <sp-tab value=\"2\">Tab 2</sp-tab>\n            <sp-tab value=\"3\">Tab 3</sp-tab>\n            <sp-tab value=\"4\">Tab 4</sp-tab>\n            <sp-tab value=\"1\" selected>Really Long Name</sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const Autofocus = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            autofocus\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            direction=${args.direction}\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const disabledTabs = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            disabled\n            ?auto=${args.auto}\n            label=\"Disabled Tabs\"\n            direction=${args.direction}\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const disabledTab = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            ?auto=${args.auto}\n            label=\"Disabled Tab\"\n            direction=${args.direction}\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\" disabled></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\" disabled></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const emphasized = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs selected=\"1\" emphasized ?auto=${args.auto} label=\"Demo Tabs\">\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const emphasizedQuiet = (args: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                display: grid;\n                grid-template-columns: 100%;\n            }\n        </style>\n        <sp-tabs\n            selected=\"1\"\n            emphasized\n            quiet\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const Vertical = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nVertical.args = {\n    direction: 'vertical',\n};\n\nexport const verticalQuiet = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            quiet\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nverticalQuiet.args = {\n    direction: 'vertical',\n};\n\nexport const verticalEmphasizedQuiet = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            quiet\n            emphasized\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nverticalEmphasizedQuiet.args = {\n    direction: 'vertical',\n};\n\nexport const verticalCompact = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            compact\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nverticalCompact.args = {\n    direction: 'vertical',\n};\n\nexport const verticalQuietCompact = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n            quiet\n            compact\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nverticalQuietCompact.args = {\n    direction: 'vertical',\n};\n\nexport const VerticalSized = (args: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                display: grid;\n                height: 75vh;\n                --swc-tabs-list-justify-content: center;\n            }\n        </style>\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nVerticalSized.args = {\n    direction: 'vertical',\n};\n\nexport const VerticalRight = (args: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                height: 75vh;\n                --swc-tabs-list-justify-content: center;\n            }\n        </style>\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\nVerticalRight.args = {\n    direction: 'vertical-right',\n};\n\nexport const Icons = ({\n    direction,\n    verticalTab,\n    auto,\n}: Properties): TemplateResult => {\n    return html`\n        <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n            <sp-tab label=\"Tab 1\" value=\"1\" ?vertical=${verticalTab}>\n                <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n            </sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\" ?vertical=${verticalTab}>\n                <sp-icon-close slot=\"icon\"></sp-icon-close>\n            </sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\" ?vertical=${verticalTab}>\n                <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n            </sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\" ?vertical=${verticalTab}>\n                <sp-icon-help slot=\"icon\"></sp-icon-help>\n            </sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const IconsWithSlottedLabel = ({\n    direction,\n    verticalTab,\n    auto,\n}: Properties): TemplateResult => {\n    return html`\n        <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n            <sp-tab value=\"1\" ?vertical=${verticalTab}>\n                Tab 1\n                <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n            </sp-tab>\n            <sp-tab value=\"2\" ?vertical=${verticalTab}>\n                Tab 2\n                <sp-icon-close slot=\"icon\"></sp-icon-close>\n            </sp-tab>\n            <sp-tab value=\"3\" ?vertical=${verticalTab}>\n                Tab 3\n                <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n            </sp-tab>\n            <sp-tab value=\"4\" ?vertical=${verticalTab}>\n                Tab 4\n                <sp-icon-help slot=\"icon\"></sp-icon-help>\n            </sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const IconsOnly = ({\n    direction,\n    verticalTab,\n    auto,\n}: Properties): TemplateResult => {\n    return html`\n        <sp-tabs selected=\"1\" direction=${direction} ?auto=${auto}>\n            <sp-tab aria-label=\"Tab 1\" value=\"1\" ?vertical=${verticalTab}>\n                <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n            </sp-tab>\n            <sp-tab aria-label=\"Tab 2\" value=\"2\" ?vertical=${verticalTab}>\n                <sp-icon-close slot=\"icon\"></sp-icon-close>\n            </sp-tab>\n            <sp-tab aria-label=\"Tab 3\" value=\"3\" ?vertical=${verticalTab}>\n                <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n            </sp-tab>\n            <sp-tab aria-label=\"Tab 4\" value=\"4\" ?vertical=${verticalTab}>\n                <sp-icon-help slot=\"icon\"></sp-icon-help>\n            </sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const iconsIi = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\" vertical>\n                <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n            </sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\" vertical>\n                <sp-icon-close slot=\"icon\"></sp-icon-close>\n            </sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\" vertical>\n                <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n            </sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\" vertical>\n                <sp-icon-help slot=\"icon\"></sp-icon-help>\n            </sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\niconsIi.args = {\n    direction: 'vertical',\n};\niconsIi.storyName = 'Icons II';\n\nexport const iconsIii = (args: Properties): TemplateResult => {\n    return html`\n        <sp-tabs\n            selected=\"1\"\n            direction=${args.direction}\n            ?auto=${args.auto}\n            label=\"Demo Tabs\"\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\">\n                <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n            </sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\">\n                <sp-icon-close slot=\"icon\"></sp-icon-close>\n            </sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\">\n                <sp-icon-chevron-down slot=\"icon\"></sp-icon-chevron-down>\n            </sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\">\n                <sp-icon-help slot=\"icon\"></sp-icon-help>\n            </sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\niconsIii.args = {\n    direction: 'vertical',\n};\niconsIii.storyName = 'Icons III';\n\nexport const Quiet = ({ direction, auto }: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                display: grid;\n                grid-template-columns: 100%;\n            }\n        </style>\n        <sp-tabs selected=\"1\" quiet direction=${direction} ?auto=${auto}>\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const Compact = ({ direction, auto }: Properties): TemplateResult => {\n    return html`\n        <sp-tabs selected=\"1\" compact direction=${direction} ?auto=${auto}>\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nexport const quietCompact = ({\n    direction,\n    auto,\n}: Properties): TemplateResult => {\n    return html`\n        <style>\n            sp-tabs {\n                display: grid;\n                grid-template-columns: 100%;\n            }\n        </style>\n        <sp-tabs\n            selected=\"1\"\n            quiet\n            compact\n            direction=${direction}\n            ?auto=${auto}\n        >\n            <sp-tab label=\"Tab 1\" value=\"1\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"2\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"3\"></sp-tab>\n            <sp-tab label=\"Tab 4\" value=\"4\"></sp-tab>\n            ${panels()}\n        </sp-tabs>\n    `;\n};\n\nquietCompact.storyName = 'Quiet Compact';\n"],
+  "mappings": ";AAWA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,YAA4B;AAErC,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACN,WAAW;AAAA,MACP,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM;AAAA,UACF,SAAS;AAAA,QACb;AAAA,QACA,cAAc,EAAE,SAAS,aAAa;AAAA,MAC1C;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,aAAa,EAAE,SAAS,UAAU;AAAA,IAClC,MAAM,EAAE,SAAS,UAAU;AAAA,EAC/B;AAAA,EACA,MAAM;AAAA,IACF,WAAW;AAAA,IACX,MAAM;AAAA,IACN,aAAa;AAAA,IACb,MAAM;AAAA,EACV;AACJ;AASA,MAAM,SAAS,MAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,aAAM,UAAU,CAAC,SAAqC;AACzD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBA0BS,KAAK,IAAI;AAAA;AAAA,wBAEL,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMxB,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,YAAY,CAAC,SAAqC;AAC3D,SAAO;AAAA;AAAA;AAAA;AAAA,oBAIS,KAAK,IAAI;AAAA;AAAA,wBAEL,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMxB,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,eAAe,CAAC,SAAqC;AAC9D,SAAO;AAAA;AAAA;AAAA;AAAA,oBAIS,KAAK,IAAI;AAAA;AAAA,wBAEL,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMxB,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,cAAc,CAAC,SAAqC;AAC7D,SAAO;AAAA;AAAA;AAAA,oBAGS,KAAK,IAAI;AAAA;AAAA,wBAEL,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMxB,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,aAAa,CAAC,SAAqC;AAC5D,SAAO;AAAA,iDACsC,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5C,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,kBAAkB,CAAC,SAAqC;AACjE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWS,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOf,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,WAAW,CAAC,SAAqC;AAC1D,SAAO;AAAA;AAAA;AAAA,wBAGa,KAAK,SAAS;AAAA,oBAClB,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOf,OAAO,CAAC;AAAA;AAAA;AAGtB;AACA,SAAS,OAAO;AAAA,EACZ,WAAW;AACf;AAEO,aAAM,gBAAgB,CAAC,SAAqC;AAC/D,SAAO;AAAA;AAAA;AAAA,wBAGa,KAAK,SAAS;AAAA,oBAClB,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQf,OAAO,CAAC;AAAA;AAAA;AAGtB;AACA,cAAc,OAAO;AAAA,EACjB,WAAW;AACf;AAEO,aAAM,0BAA0B,CAAC,SAAqC;AACzE,SAAO;AAAA;AAAA;AAAA,wBAGa,KAAK,SAAS;AAAA,oBAClB,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cASf,OAAO,CAAC;AAAA;AAAA;AAGtB;AACA,wBAAwB,OAAO;AAAA,EAC3B,WAAW;AACf;AAEO,aAAM,kBAAkB,CAAC,SAAqC;AACjE,SAAO;AAAA;AAAA;AAAA,wBAGa,KAAK,SAAS;AAAA,oBAClB,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQf,OAAO,CAAC;AAAA;AAAA;AAGtB;AACA,gBAAgB,OAAO;AAAA,EACnB,WAAW;AACf;AAEO,aAAM,uBAAuB,CAAC,SAAqC;AACtE,SAAO;AAAA;AAAA;AAAA,wBAGa,KAAK,SAAS;AAAA,oBAClB,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cASf,OAAO,CAAC;AAAA;AAAA;AAGtB;AACA,qBAAqB,OAAO;AAAA,EACxB,WAAW;AACf;AAEO,aAAM,gBAAgB,CAAC,SAAqC;AAC/D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUa,KAAK,SAAS;AAAA,oBAClB,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOf,OAAO,CAAC;AAAA;AAAA;AAGtB;AACA,cAAc,OAAO;AAAA,EACjB,WAAW;AACf;AAEO,aAAM,gBAAgB,CAAC,SAAqC;AAC/D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASa,KAAK,SAAS;AAAA,oBAClB,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOf,OAAO,CAAC;AAAA;AAAA;AAGtB;AACA,cAAc,OAAO;AAAA,EACjB,WAAW;AACf;AAEO,aAAM,QAAQ,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACJ,MAAkC;AAC9B,SAAO;AAAA,0CAC+B,SAAS,UAAU,IAAI;AAAA,wDACT,WAAW;AAAA;AAAA;AAAA,wDAGX,WAAW;AAAA;AAAA;AAAA,wDAGX,WAAW;AAAA;AAAA;AAAA,wDAGX,WAAW;AAAA;AAAA;AAAA,cAGrD,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,wBAAwB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACJ,MAAkC;AAC9B,SAAO;AAAA,0CAC+B,SAAS,UAAU,IAAI;AAAA,0CACvB,WAAW;AAAA;AAAA;AAAA;AAAA,0CAIX,WAAW;AAAA;AAAA;AAAA;AAAA,0CAIX,WAAW;AAAA;AAAA;AAAA;AAAA,0CAIX,WAAW;AAAA;AAAA;AAAA;AAAA,cAIvC,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,YAAY,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACJ,MAAkC;AAC9B,SAAO;AAAA,0CAC+B,SAAS,UAAU,IAAI;AAAA,6DACJ,WAAW;AAAA;AAAA;AAAA,6DAGX,WAAW;AAAA;AAAA;AAAA,6DAGX,WAAW;AAAA;AAAA;AAAA,6DAGX,WAAW;AAAA;AAAA;AAAA,cAG1D,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,UAAU,CAAC,SAAqC;AACzD,SAAO;AAAA;AAAA;AAAA,wBAGa,KAAK,SAAS;AAAA,oBAClB,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAef,OAAO,CAAC;AAAA;AAAA;AAGtB;AACA,QAAQ,OAAO;AAAA,EACX,WAAW;AACf;AACA,QAAQ,YAAY;AAEb,aAAM,WAAW,CAAC,SAAqC;AAC1D,SAAO;AAAA;AAAA;AAAA,wBAGa,KAAK,SAAS;AAAA,oBAClB,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAef,OAAO,CAAC;AAAA;AAAA;AAGtB;AACA,SAAS,OAAO;AAAA,EACZ,WAAW;AACf;AACA,SAAS,YAAY;AAEd,aAAM,QAAQ,CAAC,EAAE,WAAW,KAAK,MAAkC;AACtE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gDAOqC,SAAS,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,cAKzD,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,UAAU,CAAC,EAAE,WAAW,KAAK,MAAkC;AACxE,SAAO;AAAA,kDACuC,SAAS,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,cAK3D,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEO,aAAM,eAAe,CAAC;AAAA,EACzB;AAAA,EACA;AACJ,MAAkC;AAC9B,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAWa,SAAS;AAAA,oBACb,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMV,OAAO,CAAC;AAAA;AAAA;AAGtB;AAEA,aAAa,YAAY;",
   "names": []
 }