@spectrum-web-components/tabs 0.11.1 → 0.11.2

package/src/spectrum-config.js

@@ -1,135 +1,271 @@
+// @ts-check
 /*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the 'License');
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
 
+import {
+    builder,
+    converterFor,
+} from '../../../tasks/process-spectrum-utils.js';
+
+const converter = converterFor('spectrum-Tabs');
+
+/**
+ * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
+ */
 const config = {
-    spectrum: 'tabs',
-    components: [
+    conversions: [
         {
-            name: 'tabs',
-            host: {
-                selector: '.spectrum-Tabs',
-                shadowSelector: '#list',
-            },
-            attributes: [
-                {
-                    type: 'boolean',
-                    selector: '.spectrum-Tabs--compact',
-                },
-                {
-                    type: 'boolean',
-                    selector: '.spectrum-Tabs--quiet',
-                },
+            inPackage: '@spectrum-css/tabs',
+            outPackage: 'tabs',
+            fileName: 'tabs',
+            components: [
                 {
-                    type: 'enum',
-                    name: 'direction^',
-                    values: [
-                        '.spectrum-Tabs--vertical',
-                        '.spectrum-Tabs--horizontal',
+                    exactSelector: true,
+                    find: [builder.class('spectrum-Tabs--quiet')],
+                    replace: [
+                        {
+                            replace: builder.attribute('quiet'),
+                            hoist: true,
+                        },
+                        {
+                            replace: builder.combinator(' '),
+                        },
+                        {
+                            replace: builder.id('list'),
+                        },
                     ],
                 },
                 {
-                    type: 'boolean',
-                    selector: '.spectrum-Tabs--emphasized',
+                    expandSelector: true,
+                    find: [builder.class('spectrum-Tabs--horizontal')],
+                    replace: [
+                        {
+                            replace: builder.attribute(
+                                'direction',
+                                'horizontal',
+                                'prefix'
+                            ),
+                            hoist: true,
+                        },
+                        {
+                            replace: builder.combinator(' '),
+                        },
+                        {
+                            replace: builder.id('list'),
+                        },
+                        {
+                            replace: builder.combinator(' '),
+                        },
+                    ],
                 },
                 {
-                    type: 'enum',
-                    name: 'size',
-                    forceOntoHost: true,
-                    values: [
+                    expandSelector: true,
+                    find: [builder.class('spectrum-Tabs--vertical')],
+                    replace: [
                         {
-                            name: 's',
-                            selector: '.spectrum-Tabs--sizeS',
+                            replace: builder.attribute(
+                                'direction',
+                                'vertical',
+                                'prefix'
+                            ),
+                            hoist: true,
                         },
                         {
-                            name: 'm',
-                            selector: '.spectrum-Tabs--sizeM',
+                            replace: builder.combinator(' '),
                         },
                         {
-                            name: 'l',
-                            selector: '.spectrum-Tabs--sizeL',
+                            replace: builder.id('list'),
                         },
                         {
-                            name: 'xl',
-                            selector: '.spectrum-Tabs--sizeXL',
+                            replace: builder.combinator(' '),
                         },
                     ],
                 },
-            ],
-            ids: [
                 {
-                    selector: '.spectrum-Tabs-selectionIndicator',
-                    name: 'selection-indicator',
+                    collapseSelector: true,
+                    find: [
+                        builder.class('spectrum-Tabs-item'),
+                        builder.combinator('+'),
+                        { type: 'universal' },
+                        {
+                            type: 'pseudo-class',
+                            kind: 'not',
+                            selectors: [
+                                [
+                                    builder.class(
+                                        'spectrum-Tabs-selectionIndicator'
+                                    ),
+                                ],
+                            ],
+                        },
+                    ],
+                    replace: [
+                        {
+                            replace: {
+                                type: 'pseudo-element',
+                                kind: 'slotted',
+                                selector: [
+                                    {
+                                        type: 'pseudo-class',
+                                        kind: 'not',
+                                        selectors: [
+                                            [builder.attribute('slot')],
+                                        ],
+                                    },
+                                    {
+                                        type: 'pseudo-class',
+                                        kind: 'not',
+                                        selectors: [
+                                            [
+                                                {
+                                                    type: 'pseudo-class',
+                                                    kind: 'first-child',
+                                                },
+                                            ],
+                                        ],
+                                    },
+                                ],
+                            },
+                        },
+                        {
+                            replace: builder.combinator(' '),
+                        },
+                        {
+                            replace: builder.combinator(' '),
+                        },
+                        {
+                            replace: builder.combinator(' '),
+                        },
+                    ],
                 },
-            ],
-            slots: [
+                converter.classToId('spectrum-Tabs', 'list'),
+                converter.classToAttribute('spectrum-Tabs--compact'),
+                converter.classToAttribute('spectrum-Tabs--quiet'),
+                converter.classToAttribute('spectrum-Tabs--emphasized'),
+                converter.classToId(
+                    'spectrum-Tabs-selectionIndicator',
+                    'selection-indicator'
+                ),
                 {
-                    selector: '.spectrum-Tabs-item',
-                    contents: ':not([slot])',
+                    find: builder.class('spectrum-Tabs-item'),
+                    replace: {
+                        type: 'pseudo-element',
+                        kind: 'slotted',
+                        selector: [
+                            {
+                                type: 'pseudo-class',
+                                kind: 'not',
+                                selectors: [[builder.attribute('slot')]],
+                            },
+                        ],
+                    },
                 },
                 {
-                    selector: '.is-selected',
-                    contents: '[selected]:not([slot])',
+                    find: builder.class('is-selected'),
+                    replace: {
+                        type: 'pseudo-element',
+                        kind: 'slotted',
+                        selector: [
+                            builder.attribute('selected'),
+                            {
+                                type: 'pseudo-class',
+                                kind: 'not',
+                                selectors: [[builder.attribute('slot')]],
+                            },
+                        ],
+                    },
                 },
             ],
-            complexSelectors: [
+            excludeByComponents: [
+                builder.class('spectrum-Tabs-itemLabel'),
+                builder.class('spectrum-Icon'),
+                builder.pseudoClass('hover'),
                 {
-                    replacement: '::slotted(:not([slot]):not(:first-child))',
-                    selector:
-                        /\.spectrum-Tabs-item\s?\+\s?\*:not\(.spectrum-Tabs-selectionIndicator\)/,
-                },
-                {
-                    replacement:
-                        ':host([emphasized]) ::slotted([selected]:not([slot]))',
-                    selector:
-                        '.spectrum-Tabs--emphasized .spectrum-Tabs-item.is-selected',
+                    type: 'class',
+                    name: 'regex',
+                    regex: /spectrum-Tabs--size/,
                 },
             ],
-            exclude: [
-                /^\.spectrum-Tabs-item/,
-                /\.spectrum-Tabs-item \.spectrum/,
+            excludeByWholeSelector: [
+                [builder.class('spectrum-Tabs-item')],
+                [
+                    builder.class('spectrum-Tabs-item'),
+                    builder.pseudoElement('before'),
+                ],
+                [
+                    builder.class('spectrum-Tabs-item'),
+                    builder.class('focus-ring'),
+                    builder.pseudoElement('before'),
+                ],
             ],
         },
         {
-            name: 'tab',
-            host: {
-                // A lot of the styling in tab-item relies on the ::before psuedo element,
-                // which is incompatible with :host
-                selector: '.spectrum-Tabs-item',
-            },
-            attributes: [
-                {
-                    type: 'boolean',
-                    selector: '.is-selected',
-                    name: 'selected',
-                },
+            inPackage: '@spectrum-css/tabs',
+            outPackage: 'tabs',
+            fileName: 'tab',
+            components: [
+                // .spectrum-Icon+.spectrum-Tabs-itemLabel
+                // slot[name='icon'] + #item-label
                 {
-                    type: 'boolean',
-                    selector: '.is-disabled',
-                    name: 'disabled',
+                    find: [
+                        builder.class('spectrum-Icon'),
+                        builder.combinator('+'),
+                        builder.class('spectrum-Tabs-itemLabel'),
+                    ],
+                    replace: [
+                        {
+                            replace: builder.attribute('name', 'icon'),
+                            hoist: false,
+                        },
+                    ],
                 },
+                converter.classToHost('spectrum-Tabs-item'),
+                converter.classToAttribute('is-disabled', 'disabled'),
+                converter.classToAttribute('is-selected', 'selected'),
+                converter.classToId('spectrum-Tabs-itemLabel', 'item-label'),
+                converter.classToSlotted('spectrum-Icon', 'icon'),
             ],
-            ids: [
+            excludeByComponents: [
                 {
-                    selector: '.spectrum-Tabs-itemLabel',
-                    name: 'item-label',
+                    type: 'class',
+                    name: 'regex',
+                    regex: /spectrum-Tabs--/,
                 },
+                builder.class('spectrum-Tabs'),
+                builder.class('spectrum-Tabs-selectionIndicator'),
+            ],
+        },
+        {
+            inPackage: '@spectrum-css/tabs',
+            outPackage: 'tabs',
+            fileName: 'tabs-sizes',
+            components: [
+                ...converter.enumerateAttributes(
+                    [
+                        ['spectrum-Tabs--sizeS', 's'],
+                        ['spectrum-Tabs--sizeM', 'm'],
+                        ['spectrum-Tabs--sizeL', 'l'],
+                        ['spectrum-Tabs--sizeXL', 'xl'],
+                    ],
+                    'size'
+                ),
             ],
-            slots: [
+            requireComponentPresence: [
                 {
-                    name: 'icon',
-                    selector: '.spectrum-Icon',
+                    type: 'class',
+                    name: 'regex',
+                    regex: /spectrum-Tabs--size/,
                 },
             ],
-            exclude: [/.spectrum-Tabs(?!-item)/],
         },
     ],
 };

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

@@ -3,45 +3,15 @@ import { css } from "@spectrum-web-components/base";
 const styles = css`
 :host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(
 --spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration
-) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(
---spectrum-tabs-quiet-textonly-tabitem-height
-)}:host([dir=ltr]) slot[name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(
+) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-radius
-);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(
---spectrum-tabs-textonly-tabitem-text-color
-)}::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color
-)}:host(:hover){color:var(
---spectrum-tabs-textonly-tabitem-text-color-hover
-)}:host(:hover) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-hover
-)}:host([selected]){color:var(
---spectrum-tabs-textonly-tabitem-text-color-selected
-)}:host([selected]) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-selected
-)}:host(.focus-visible){color:var(
---spectrum-tabs-textonly-tabitem-text-color-selected-key-focus
-)}:host(.focus-visible){color:var(
---spectrum-tabs-textonly-tabitem-text-color-selected-key-focus
-)}:host(:focus-visible){color:var(
---spectrum-tabs-textonly-tabitem-text-color-selected-key-focus
-)}:host(.focus-visible):before{border-color:var(
+);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus
 )}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus
 )}:host(:focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus
-)}:host(.focus-visible) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus
-)}:host(.focus-visible) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus
-)}:host(:focus-visible) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus
-)}:host([disabled]){color:var(
---spectrum-tabs-textonly-tabitem-text-color-disabled
-)}:host([disabled]) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-disabled
-)}
+)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-tab.css.dev.js.map

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

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

package/src/spectrum-tab.css.js

@@ -1,44 +1,14 @@
 "use strict";import{css as t}from"@spectrum-web-components/base";const e=t`
 :host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(
 --spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration
-) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(
---spectrum-tabs-quiet-textonly-tabitem-height
-)}:host([dir=ltr]) slot[name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(
+) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-radius
-);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(
---spectrum-tabs-textonly-tabitem-text-color
-)}::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color
-)}:host(:hover){color:var(
---spectrum-tabs-textonly-tabitem-text-color-hover
-)}:host(:hover) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-hover
-)}:host([selected]){color:var(
---spectrum-tabs-textonly-tabitem-text-color-selected
-)}:host([selected]) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-selected
-)}:host(.focus-visible){color:var(
---spectrum-tabs-textonly-tabitem-text-color-selected-key-focus
-)}:host(.focus-visible){color:var(
---spectrum-tabs-textonly-tabitem-text-color-selected-key-focus
-)}:host(:focus-visible){color:var(
---spectrum-tabs-textonly-tabitem-text-color-selected-key-focus
-)}:host(.focus-visible):before{border-color:var(
+);box-sizing:border-box;content:"";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus
 )}:host(.focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus
 )}:host(:focus-visible):before{border-color:var(
 --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus
-)}:host(.focus-visible) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus
-)}:host(.focus-visible) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus
-)}:host(:focus-visible) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus
-)}:host([disabled]){color:var(
---spectrum-tabs-textonly-tabitem-text-color-disabled
-)}:host([disabled]) ::slotted([slot=icon]){color:var(
---spectrum-tabs-textonly-tabitem-icon-color-disabled
-)}
+)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}
 `;export default e;
 //# sourceMappingURL=spectrum-tab.css.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-tab.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(\n--spectrum-tabs-quiet-textonly-tabitem-height\n)}:host([dir=ltr]) slot[name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) slot[name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(\n--spectrum-tabs-textonly-tabitem-text-color\n)}::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color\n)}:host(:hover){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-hover\n)}:host(:hover) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-hover\n)}:host([selected]){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected\n)}:host([selected]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected\n)}:host(.focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus\n)}:host(.focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus\n)}:host(:focus-visible){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host(:focus-visible) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus\n)}:host([disabled]){color:var(\n--spectrum-tabs-textonly-tabitem-text-color-disabled\n)}:host([disabled]) ::slotted([slot=icon]){color:var(\n--spectrum-tabs-textonly-tabitem-icon-color-disabled\n)}\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,EA2Cf,eAAeC",
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{box-sizing:border-box;cursor:pointer;height:var(--spectrum-tabs-quiet-textonly-tabitem-height);line-height:var(--spectrum-tabs-quiet-textonly-tabitem-height);outline:none;position:relative;text-decoration:none;transition:color var(\n--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration\n) ease-out;white-space:nowrap;z-index:1}:host([disabled]){cursor:default}:host([disabled]) #item-label{cursor:default}::slotted([slot=icon]){height:var(--spectrum-tabs-quiet-textonly-tabitem-height)}:host([dir=ltr]) [name=icon]+#item-label{margin-left:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=rtl]) [name=icon]+#item-label{margin-right:calc(var(--spectrum-tabs-quiet-textonly-tabitem-icon-gap) - var(--spectrum-global-dimension-size-40))}:host([dir=ltr]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=ltr]):before{right:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host([dir=rtl]):before{left:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x)*-1)}:host:before{border:var(--spectrum-tabs-textonly-tabitem-focus-ring-size) solid transparent;border-radius:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-radius\n);box-sizing:border-box;content:\"\";height:var(--spectrum-tabs-textonly-tabitem-focus-ring-height);margin-top:calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height)/-2);pointer-events:none;position:absolute;top:50%}#item-label{cursor:pointer;display:inline-block;font-size:var(--spectrum-tabs-texticon-tabitem-text-size);font-weight:var(--spectrum-tabs-textonly-tabitem-text-font-weight);text-decoration:none;vertical-align:top}#item-label:empty{display:none}:host{color:var(--spectrum-tabs-textonly-tabitem-text-color)}::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color)}:host(:hover){color:var(--spectrum-tabs-textonly-tabitem-text-color-hover)}:host(:hover) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-hover)}:host([selected]){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected)}:host([selected]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(:focus-visible){color:var(--spectrum-tabs-textonly-tabitem-text-color-selected-key-focus)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(:focus-visible):before{border-color:var(\n--spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus\n)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(.focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host(:focus-visible) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus)}:host([disabled]){color:var(--spectrum-tabs-textonly-tabitem-text-color-disabled)}:host([disabled]) ::slotted([slot=icon]){color:var(--spectrum-tabs-textonly-tabitem-icon-color-disabled)}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/spectrum-tabs-sizes.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("@spectrum-web-components/base").CSSResult;
+export default styles;