From a07c45bdce27a7b0bed3faf46bd638ebab9b42d9 Mon Sep 17 00:00:00 2001 From: Nick Schaap Date: Mon, 13 Mar 2023 20:35:45 -0400 Subject: [PATCH] fix(tabs): bind tabs overflow state with sp-tabs --- packages/tabs/src/TabsOverflow.ts | 20 + packages/tabs/src/spectrum-tabs-overflow.css | 661 +++++++++++++++++++ packages/tabs/src/tabs-overflow.css | 2 + 3 files changed, 683 insertions(+) create mode 100644 packages/tabs/src/spectrum-tabs-overflow.css diff --git a/packages/tabs/src/TabsOverflow.ts b/packages/tabs/src/TabsOverflow.ts index 05bc2f8626..99a219648f 100644 --- a/packages/tabs/src/TabsOverflow.ts +++ b/packages/tabs/src/TabsOverflow.ts @@ -31,6 +31,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; import tabSizes from './spectrum-tabs-sizes.css.js'; import styles from './tabs-overflow.css.js'; +import { MutationController } from '@lit-labs/observers/mutation_controller.js'; interface TabsOverflowState { canScrollLeft: boolean; @@ -61,6 +62,17 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) { resizeController!: ResizeController; + tabsMutations = new MutationController(this, { + target: null, + config: { + attributes: true, + attributeFilter: ['size', 'compact'], + }, + callback: () => { + this.manageTabsAttributes(); + }, + }); + public constructor() { super(); this.resizeController = new ResizeController(this, { @@ -71,6 +83,13 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) { }); } + private manageTabsAttributes(): void { + const [tabsElement] = this.scrollContent; + this.size = tabsElement.size; + this.compact = tabsElement.compact; + this.compact; + } + protected override firstUpdated(changes: PropertyValues): void { super.firstUpdated(changes); // enable scroll event @@ -80,6 +99,7 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) { private async _handleSlotChange(): Promise { const [tabsElement] = this.scrollContent; + this.manageTabsAttributes(); await tabsElement?.updateComplete; this._updateScrollState(); } diff --git a/packages/tabs/src/spectrum-tabs-overflow.css b/packages/tabs/src/spectrum-tabs-overflow.css new file mode 100644 index 0000000000..a480ce05d6 --- /dev/null +++ b/packages/tabs/src/spectrum-tabs-overflow.css @@ -0,0 +1,661 @@ +/* +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 +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +:host([size='s']) { + --spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-s-quiet-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-quiet-textonly-divider-background-color: var( + --spectrum-tabs-s-quiet-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-quiet) + ); + --spectrum-tabs-quiet-textonly-tabitem-icon-gap: var( + --spectrum-tabs-s-quiet-textonly-tabitem-icon-gap, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x: var( + --spectrum-tabs-s-quiet-textonly-tabitem-focus-ring-padding-x, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-tabs-quiet-textonly-tabitem-height: var( + --spectrum-tabs-s-quiet-textonly-tabitem-height, + var(--spectrum-global-dimension-size-500) + ); + --spectrum-tabs-quiet-textonly-divider-size: var( + --spectrum-tabs-s-quiet-textonly-divider-size, + var(--spectrum-alias-border-size-thick) + ); + --spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected: var( + --spectrum-tabs-s-emphasized-texticon-tabitem-icon-color-selected, + var(--spectrum-alias-tabitem-text-color-emphasized-selected-default) + ); + --spectrum-tabs-emphasized-texticon-tabitem-text-color-selected: var( + --spectrum-tabs-s-emphasized-texticon-tabitem-text-color-selected, + var(--spectrum-alias-tabitem-text-color-emphasized-selected-default) + ); + --spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-s-emphasized-texticon-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-selection-indicator-color-emphasized) + ); + --spectrum-tabs-emphasized-textonly-divider-background-color: var( + --spectrum-tabs-s-emphasized-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-default) + ); + --spectrum-tabs-texticon-tabitem-text-size: var( + --spectrum-tabs-s-texticon-tabitem-text-size, + var(--spectrum-global-dimension-font-size-75) + ); + --spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration: var( + --spectrum-tabs-s-texticon-tabitem-selection-indicator-animation-duration, + var(--spectrum-global-animation-duration-100) + ); + --spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease: var( + --spectrum-tabs-s-texticon-tabitem-selection-indicator-animation-ease, + var(--spectrum-global-animation-ease-in-out) + ); + --spectrum-tabs-textonly-tabitem-icon-color-selected: var( + --spectrum-tabs-s-textonly-tabitem-icon-color-selected, + var(--spectrum-alias-tabitem-icon-color-selected) + ); + --spectrum-tabs-textonly-tabitem-text-color-selected: var( + --spectrum-tabs-s-textonly-tabitem-text-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-s-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus: var( + --spectrum-tabs-s-textonly-tabitem-icon-color-selected-key-focus, + var(--spectrum-alias-tabitem-icon-color-selected) + ); + --spectrum-tabs-textonly-tabitem-text-color-selected-key-focus: var( + --spectrum-tabs-s-textonly-tabitem-text-color-selected-key-focus, + var(--spectrum-alias-tabitem-text-color-selected-key-focus) + ); + --spectrum-tabs-textonly-tabitem-icon-color-disabled: var( + --spectrum-tabs-s-textonly-tabitem-icon-color-disabled, + var(--spectrum-alias-tabitem-icon-color-disabled) + ); + --spectrum-tabs-textonly-tabitem-text-color-disabled: var( + --spectrum-tabs-s-textonly-tabitem-text-color-disabled, + var(--spectrum-alias-text-color-disabled) + ); + --spectrum-tabs-textonly-tabitem-icon-color: var( + --spectrum-tabs-s-textonly-tabitem-icon-color, + var(--spectrum-alias-tabitem-icon-color-default) + ); + --spectrum-tabs-textonly-tabitem-text-color: var( + --spectrum-tabs-s-textonly-tabitem-text-color, + var(--spectrum-alias-tabitem-text-color-default) + ); + --spectrum-tabs-textonly-tabitem-icon-color-hover: var( + --spectrum-tabs-s-textonly-tabitem-icon-color-hover, + var(--spectrum-alias-tabitem-icon-color-hover) + ); + --spectrum-tabs-textonly-tabitem-text-color-hover: var( + --spectrum-tabs-s-textonly-tabitem-text-color-hover, + var(--spectrum-alias-tabitem-text-color-hover) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus: var( + --spectrum-tabs-s-textonly-tabitem-focus-ring-border-color-key-focus, + var(--spectrum-alias-focus-ring-color) + ); + --spectrum-tabs-textonly-divider-background-color: var( + --spectrum-tabs-s-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-default) + ); + --spectrum-tabs-textonly-tabitem-text-font-weight: var( + --spectrum-tabs-s-textonly-tabitem-text-font-weight, + var(--spectrum-alias-body-text-font-weight) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-size: var( + --spectrum-tabs-s-textonly-tabitem-focus-ring-size, + var(--spectrum-alias-focus-ring-size) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-height: var( + --spectrum-tabs-s-textonly-tabitem-focus-ring-height, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-padding-x: var( + --spectrum-tabs-s-textonly-tabitem-focus-ring-padding-x, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-border-radius: var( + --spectrum-tabs-s-textonly-tabitem-focus-ring-border-radius, + var(--spectrum-alias-border-radius-regular) + ); + --spectrum-tabs-textonly-tabitem-margin-right: var( + --spectrum-tabs-s-textonly-tabitem-margin-right, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-tabs-textonly-divider-border-radius: var( + --spectrum-tabs-s-textonly-divider-border-radius, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-s-vertical-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-vertical-textonly-tabitem-height: var( + --spectrum-tabs-s-vertical-textonly-tabitem-height, + var(--spectrum-global-dimension-size-450) + ); + --spectrum-tabs-vertical-textonly-tabitem-gap: var( + --spectrum-tabs-s-vertical-textonly-tabitem-gap, + var(--spectrum-global-dimension-size-85) + ); + --spectrum-tabs-compact-textonly-divider-size: var( + --spectrum-tabs-s-compact-textonly-divider-size, + var(--spectrum-alias-border-size-thick) + ); + --spectrum-tabs-compact-textonly-height: var( + --spectrum-tabs-s-compact-textonly-height, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-tabs-compact-vertical-textonly-tabitem-height: var( + --spectrum-tabs-s-compact-vertical-textonly-tabitem-height, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-tabs-compact-vertical-textonly-tabitem-gap: var( + --spectrum-tabs-s-compact-vertical-textonly-tabitem-gap, + var(--spectrum-global-dimension-size-85) + ); +} +:host([size='m']) { + --spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-m-quiet-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-quiet-textonly-divider-background-color: var( + --spectrum-tabs-m-quiet-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-quiet) + ); + --spectrum-tabs-quiet-textonly-tabitem-icon-gap: var( + --spectrum-tabs-m-quiet-textonly-tabitem-icon-gap, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x: var( + --spectrum-tabs-m-quiet-textonly-tabitem-focus-ring-padding-x, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-tabs-quiet-textonly-tabitem-height: var( + --spectrum-tabs-m-quiet-textonly-tabitem-height, + var(--spectrum-global-dimension-size-600) + ); + --spectrum-tabs-quiet-textonly-divider-size: var( + --spectrum-tabs-m-quiet-textonly-divider-size, + var(--spectrum-alias-border-size-thick) + ); + --spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected: var( + --spectrum-tabs-m-emphasized-texticon-tabitem-icon-color-selected, + var(--spectrum-alias-tabitem-text-color-emphasized-selected-default) + ); + --spectrum-tabs-emphasized-texticon-tabitem-text-color-selected: var( + --spectrum-tabs-m-emphasized-texticon-tabitem-text-color-selected, + var(--spectrum-alias-tabitem-text-color-emphasized-selected-default) + ); + --spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-m-emphasized-texticon-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-selection-indicator-color-emphasized) + ); + --spectrum-tabs-emphasized-textonly-divider-background-color: var( + --spectrum-tabs-m-emphasized-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-default) + ); + --spectrum-tabs-texticon-tabitem-text-size: var( + --spectrum-tabs-m-texticon-tabitem-text-size, + var(--spectrum-global-dimension-font-size-100) + ); + --spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration: var( + --spectrum-tabs-m-texticon-tabitem-selection-indicator-animation-duration, + var(--spectrum-global-animation-duration-100) + ); + --spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease: var( + --spectrum-tabs-m-texticon-tabitem-selection-indicator-animation-ease, + var(--spectrum-global-animation-ease-in-out) + ); + --spectrum-tabs-textonly-tabitem-icon-color-selected: var( + --spectrum-tabs-m-textonly-tabitem-icon-color-selected, + var(--spectrum-alias-tabitem-icon-color-selected) + ); + --spectrum-tabs-textonly-tabitem-text-color-selected: var( + --spectrum-tabs-m-textonly-tabitem-text-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-m-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus: var( + --spectrum-tabs-m-textonly-tabitem-icon-color-selected-key-focus, + var(--spectrum-alias-tabitem-icon-color-selected) + ); + --spectrum-tabs-textonly-tabitem-text-color-selected-key-focus: var( + --spectrum-tabs-m-textonly-tabitem-text-color-selected-key-focus, + var(--spectrum-alias-tabitem-text-color-selected-key-focus) + ); + --spectrum-tabs-textonly-tabitem-icon-color-disabled: var( + --spectrum-tabs-m-textonly-tabitem-icon-color-disabled, + var(--spectrum-alias-tabitem-icon-color-disabled) + ); + --spectrum-tabs-textonly-tabitem-text-color-disabled: var( + --spectrum-tabs-m-textonly-tabitem-text-color-disabled, + var(--spectrum-alias-text-color-disabled) + ); + --spectrum-tabs-textonly-tabitem-icon-color: var( + --spectrum-tabs-m-textonly-tabitem-icon-color, + var(--spectrum-alias-tabitem-icon-color-default) + ); + --spectrum-tabs-textonly-tabitem-text-color: var( + --spectrum-tabs-m-textonly-tabitem-text-color, + var(--spectrum-alias-tabitem-text-color-default) + ); + --spectrum-tabs-textonly-tabitem-icon-color-hover: var( + --spectrum-tabs-m-textonly-tabitem-icon-color-hover, + var(--spectrum-alias-tabitem-icon-color-hover) + ); + --spectrum-tabs-textonly-tabitem-text-color-hover: var( + --spectrum-tabs-m-textonly-tabitem-text-color-hover, + var(--spectrum-alias-tabitem-text-color-hover) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus: var( + --spectrum-tabs-m-textonly-tabitem-focus-ring-border-color-key-focus, + var(--spectrum-alias-focus-ring-color) + ); + --spectrum-tabs-textonly-divider-background-color: var( + --spectrum-tabs-m-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-default) + ); + --spectrum-tabs-textonly-tabitem-text-font-weight: var( + --spectrum-tabs-m-textonly-tabitem-text-font-weight, + var(--spectrum-alias-body-text-font-weight) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-size: var( + --spectrum-tabs-m-textonly-tabitem-focus-ring-size, + var(--spectrum-alias-focus-ring-size) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-height: var( + --spectrum-tabs-m-textonly-tabitem-focus-ring-height, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-padding-x: var( + --spectrum-tabs-m-textonly-tabitem-focus-ring-padding-x, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-border-radius: var( + --spectrum-tabs-m-textonly-tabitem-focus-ring-border-radius, + var(--spectrum-alias-border-radius-regular) + ); + --spectrum-tabs-textonly-tabitem-margin-right: var( + --spectrum-tabs-m-textonly-tabitem-margin-right, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-tabs-textonly-divider-border-radius: var( + --spectrum-tabs-m-textonly-divider-border-radius, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-m-vertical-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-vertical-textonly-tabitem-height: var( + --spectrum-tabs-m-vertical-textonly-tabitem-height, + var(--spectrum-global-dimension-size-550) + ); + --spectrum-tabs-vertical-textonly-tabitem-gap: var( + --spectrum-tabs-m-vertical-textonly-tabitem-gap, + var(--spectrum-global-dimension-size-100) + ); + --spectrum-tabs-compact-textonly-divider-size: var( + --spectrum-tabs-m-compact-textonly-divider-size, + var(--spectrum-alias-border-size-thick) + ); + --spectrum-tabs-compact-textonly-height: var( + --spectrum-tabs-m-compact-textonly-height, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-tabs-compact-vertical-textonly-tabitem-height: var( + --spectrum-tabs-m-compact-vertical-textonly-tabitem-height, + var(--spectrum-global-dimension-size-400) + ); + --spectrum-tabs-compact-vertical-textonly-tabitem-gap: var( + --spectrum-tabs-m-compact-vertical-textonly-tabitem-gap, + var(--spectrum-global-dimension-size-100) + ); +} +:host([size='l']) { + --spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-l-quiet-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-quiet-textonly-divider-background-color: var( + --spectrum-tabs-l-quiet-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-quiet) + ); + --spectrum-tabs-quiet-textonly-tabitem-icon-gap: var( + --spectrum-tabs-l-quiet-textonly-tabitem-icon-gap, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x: var( + --spectrum-tabs-l-quiet-textonly-tabitem-focus-ring-padding-x, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-tabs-quiet-textonly-tabitem-height: var( + --spectrum-tabs-l-quiet-textonly-tabitem-height, + var(--spectrum-global-dimension-size-700) + ); + --spectrum-tabs-quiet-textonly-divider-size: var( + --spectrum-tabs-l-quiet-textonly-divider-size, + var(--spectrum-alias-border-size-thick) + ); + --spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected: var( + --spectrum-tabs-l-emphasized-texticon-tabitem-icon-color-selected, + var(--spectrum-alias-tabitem-text-color-emphasized-selected-default) + ); + --spectrum-tabs-emphasized-texticon-tabitem-text-color-selected: var( + --spectrum-tabs-l-emphasized-texticon-tabitem-text-color-selected, + var(--spectrum-alias-tabitem-text-color-emphasized-selected-default) + ); + --spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-l-emphasized-texticon-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-selection-indicator-color-emphasized) + ); + --spectrum-tabs-emphasized-textonly-divider-background-color: var( + --spectrum-tabs-l-emphasized-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-default) + ); + --spectrum-tabs-texticon-tabitem-text-size: var( + --spectrum-tabs-l-texticon-tabitem-text-size, + var(--spectrum-global-dimension-font-size-200) + ); + --spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration: var( + --spectrum-tabs-l-texticon-tabitem-selection-indicator-animation-duration, + var(--spectrum-global-animation-duration-100) + ); + --spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease: var( + --spectrum-tabs-l-texticon-tabitem-selection-indicator-animation-ease, + var(--spectrum-global-animation-ease-in-out) + ); + --spectrum-tabs-textonly-tabitem-icon-color-selected: var( + --spectrum-tabs-l-textonly-tabitem-icon-color-selected, + var(--spectrum-alias-tabitem-icon-color-selected) + ); + --spectrum-tabs-textonly-tabitem-text-color-selected: var( + --spectrum-tabs-l-textonly-tabitem-text-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-l-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus: var( + --spectrum-tabs-l-textonly-tabitem-icon-color-selected-key-focus, + var(--spectrum-alias-tabitem-icon-color-selected) + ); + --spectrum-tabs-textonly-tabitem-text-color-selected-key-focus: var( + --spectrum-tabs-l-textonly-tabitem-text-color-selected-key-focus, + var(--spectrum-alias-tabitem-text-color-selected-key-focus) + ); + --spectrum-tabs-textonly-tabitem-icon-color-disabled: var( + --spectrum-tabs-l-textonly-tabitem-icon-color-disabled, + var(--spectrum-alias-tabitem-icon-color-disabled) + ); + --spectrum-tabs-textonly-tabitem-text-color-disabled: var( + --spectrum-tabs-l-textonly-tabitem-text-color-disabled, + var(--spectrum-alias-text-color-disabled) + ); + --spectrum-tabs-textonly-tabitem-icon-color: var( + --spectrum-tabs-l-textonly-tabitem-icon-color, + var(--spectrum-alias-tabitem-icon-color-default) + ); + --spectrum-tabs-textonly-tabitem-text-color: var( + --spectrum-tabs-l-textonly-tabitem-text-color, + var(--spectrum-alias-tabitem-text-color-default) + ); + --spectrum-tabs-textonly-tabitem-icon-color-hover: var( + --spectrum-tabs-l-textonly-tabitem-icon-color-hover, + var(--spectrum-alias-tabitem-icon-color-hover) + ); + --spectrum-tabs-textonly-tabitem-text-color-hover: var( + --spectrum-tabs-l-textonly-tabitem-text-color-hover, + var(--spectrum-alias-tabitem-text-color-hover) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus: var( + --spectrum-tabs-l-textonly-tabitem-focus-ring-border-color-key-focus, + var(--spectrum-alias-focus-ring-color) + ); + --spectrum-tabs-textonly-divider-background-color: var( + --spectrum-tabs-l-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-default) + ); + --spectrum-tabs-textonly-tabitem-text-font-weight: var( + --spectrum-tabs-l-textonly-tabitem-text-font-weight, + var(--spectrum-alias-body-text-font-weight) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-size: var( + --spectrum-tabs-l-textonly-tabitem-focus-ring-size, + var(--spectrum-alias-focus-ring-size) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-height: var( + --spectrum-tabs-l-textonly-tabitem-focus-ring-height, + var(--spectrum-global-dimension-size-500) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-padding-x: var( + --spectrum-tabs-l-textonly-tabitem-focus-ring-padding-x, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-border-radius: var( + --spectrum-tabs-l-textonly-tabitem-focus-ring-border-radius, + var(--spectrum-alias-border-radius-regular) + ); + --spectrum-tabs-textonly-tabitem-margin-right: var( + --spectrum-tabs-l-textonly-tabitem-margin-right, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-tabs-textonly-divider-border-radius: var( + --spectrum-tabs-l-textonly-divider-border-radius, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-l-vertical-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-vertical-textonly-tabitem-height: var( + --spectrum-tabs-l-vertical-textonly-tabitem-height, + var(--spectrum-global-dimension-size-650) + ); + --spectrum-tabs-vertical-textonly-tabitem-gap: var( + --spectrum-tabs-l-vertical-textonly-tabitem-gap, + var(--spectrum-global-dimension-size-115) + ); + --spectrum-tabs-compact-textonly-divider-size: var( + --spectrum-tabs-l-compact-textonly-divider-size, + var(--spectrum-alias-border-size-thick) + ); + --spectrum-tabs-compact-textonly-height: var( + --spectrum-tabs-l-compact-textonly-height, + var(--spectrum-global-dimension-size-500) + ); + --spectrum-tabs-compact-vertical-textonly-tabitem-height: var( + --spectrum-tabs-l-compact-vertical-textonly-tabitem-height, + var(--spectrum-global-dimension-size-500) + ); + --spectrum-tabs-compact-vertical-textonly-tabitem-gap: var( + --spectrum-tabs-l-compact-vertical-textonly-tabitem-gap, + var(--spectrum-global-dimension-size-115) + ); +} +:host([size='xl']) { + --spectrum-tabs-quiet-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-xl-quiet-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-quiet-textonly-divider-background-color: var( + --spectrum-tabs-xl-quiet-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-quiet) + ); + --spectrum-tabs-quiet-textonly-tabitem-icon-gap: var( + --spectrum-tabs-xl-quiet-textonly-tabitem-icon-gap, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x: var( + --spectrum-tabs-xl-quiet-textonly-tabitem-focus-ring-padding-x, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-tabs-quiet-textonly-tabitem-height: var( + --spectrum-tabs-xl-quiet-textonly-tabitem-height, + var(--spectrum-global-dimension-size-800) + ); + --spectrum-tabs-quiet-textonly-divider-size: var( + --spectrum-tabs-xl-quiet-textonly-divider-size, + var(--spectrum-alias-border-size-thick) + ); + --spectrum-tabs-emphasized-texticon-tabitem-icon-color-selected: var( + --spectrum-tabs-xl-emphasized-texticon-tabitem-icon-color-selected, + var(--spectrum-alias-tabitem-text-color-emphasized-selected-default) + ); + --spectrum-tabs-emphasized-texticon-tabitem-text-color-selected: var( + --spectrum-tabs-xl-emphasized-texticon-tabitem-text-color-selected, + var(--spectrum-alias-tabitem-text-color-emphasized-selected-default) + ); + --spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-xl-emphasized-texticon-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-selection-indicator-color-emphasized) + ); + --spectrum-tabs-emphasized-textonly-divider-background-color: var( + --spectrum-tabs-xl-emphasized-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-default) + ); + --spectrum-tabs-texticon-tabitem-text-size: var( + --spectrum-tabs-xl-texticon-tabitem-text-size, + var(--spectrum-global-dimension-font-size-300) + ); + --spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration: var( + --spectrum-tabs-xl-texticon-tabitem-selection-indicator-animation-duration, + var(--spectrum-global-animation-duration-100) + ); + --spectrum-tabs-texticon-tabitem-selection-indicator-animation-ease: var( + --spectrum-tabs-xl-texticon-tabitem-selection-indicator-animation-ease, + var(--spectrum-global-animation-ease-in-out) + ); + --spectrum-tabs-textonly-tabitem-icon-color-selected: var( + --spectrum-tabs-xl-textonly-tabitem-icon-color-selected, + var(--spectrum-alias-tabitem-icon-color-selected) + ); + --spectrum-tabs-textonly-tabitem-text-color-selected: var( + --spectrum-tabs-xl-textonly-tabitem-text-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-xl-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-textonly-tabitem-icon-color-selected-key-focus: var( + --spectrum-tabs-xl-textonly-tabitem-icon-color-selected-key-focus, + var(--spectrum-alias-tabitem-icon-color-selected) + ); + --spectrum-tabs-textonly-tabitem-text-color-selected-key-focus: var( + --spectrum-tabs-xl-textonly-tabitem-text-color-selected-key-focus, + var(--spectrum-alias-tabitem-text-color-selected-key-focus) + ); + --spectrum-tabs-textonly-tabitem-icon-color-disabled: var( + --spectrum-tabs-xl-textonly-tabitem-icon-color-disabled, + var(--spectrum-alias-tabitem-icon-color-disabled) + ); + --spectrum-tabs-textonly-tabitem-text-color-disabled: var( + --spectrum-tabs-xl-textonly-tabitem-text-color-disabled, + var(--spectrum-alias-text-color-disabled) + ); + --spectrum-tabs-textonly-tabitem-icon-color: var( + --spectrum-tabs-xl-textonly-tabitem-icon-color, + var(--spectrum-alias-tabitem-icon-color-default) + ); + --spectrum-tabs-textonly-tabitem-text-color: var( + --spectrum-tabs-xl-textonly-tabitem-text-color, + var(--spectrum-alias-tabitem-text-color-default) + ); + --spectrum-tabs-textonly-tabitem-icon-color-hover: var( + --spectrum-tabs-xl-textonly-tabitem-icon-color-hover, + var(--spectrum-alias-tabitem-icon-color-hover) + ); + --spectrum-tabs-textonly-tabitem-text-color-hover: var( + --spectrum-tabs-xl-textonly-tabitem-text-color-hover, + var(--spectrum-alias-tabitem-text-color-hover) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-border-color-key-focus: var( + --spectrum-tabs-xl-textonly-tabitem-focus-ring-border-color-key-focus, + var(--spectrum-alias-focus-ring-color) + ); + --spectrum-tabs-textonly-divider-background-color: var( + --spectrum-tabs-xl-textonly-divider-background-color, + var(--spectrum-alias-tabs-divider-background-color-default) + ); + --spectrum-tabs-textonly-tabitem-text-font-weight: var( + --spectrum-tabs-xl-textonly-tabitem-text-font-weight, + var(--spectrum-alias-body-text-font-weight) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-size: var( + --spectrum-tabs-xl-textonly-tabitem-focus-ring-size, + var(--spectrum-alias-focus-ring-size) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-height: var( + --spectrum-tabs-xl-textonly-tabitem-focus-ring-height, + var(--spectrum-global-dimension-size-600) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-padding-x: var( + --spectrum-tabs-xl-textonly-tabitem-focus-ring-padding-x, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-tabs-textonly-tabitem-focus-ring-border-radius: var( + --spectrum-tabs-xl-textonly-tabitem-focus-ring-border-radius, + var(--spectrum-alias-border-radius-regular) + ); + --spectrum-tabs-textonly-tabitem-margin-right: var( + --spectrum-tabs-xl-textonly-tabitem-margin-right, + var(--spectrum-global-dimension-size-300) + ); + --spectrum-tabs-textonly-divider-border-radius: var( + --spectrum-tabs-xl-textonly-divider-border-radius, + var(--spectrum-global-dimension-static-size-10) + ); + --spectrum-tabs-vertical-textonly-tabitem-selection-indicator-background-color-selected: var( + --spectrum-tabs-xl-vertical-textonly-tabitem-selection-indicator-background-color-selected, + var(--spectrum-alias-tabitem-text-color-selected-default) + ); + --spectrum-tabs-vertical-textonly-tabitem-height: var( + --spectrum-tabs-xl-vertical-textonly-tabitem-height, + var(--spectrum-global-dimension-size-750) + ); + --spectrum-tabs-vertical-textonly-tabitem-gap: var( + --spectrum-tabs-xl-vertical-textonly-tabitem-gap, + var(--spectrum-global-dimension-size-125) + ); + --spectrum-tabs-compact-textonly-divider-size: var( + --spectrum-tabs-xl-compact-textonly-divider-size, + var(--spectrum-alias-border-size-thick) + ); + --spectrum-tabs-compact-textonly-height: var( + --spectrum-tabs-xl-compact-textonly-height, + var(--spectrum-global-dimension-size-600) + ); + --spectrum-tabs-compact-vertical-textonly-tabitem-height: var( + --spectrum-tabs-xl-compact-vertical-textonly-tabitem-height, + var(--spectrum-global-dimension-size-600) + ); + --spectrum-tabs-compact-vertical-textonly-tabitem-gap: var( + --spectrum-tabs-xl-compact-vertical-textonly-tabitem-gap, + var(--spectrum-global-dimension-size-125) + ); +} diff --git a/packages/tabs/src/tabs-overflow.css b/packages/tabs/src/tabs-overflow.css index 7050539bc9..d9d46968a7 100644 --- a/packages/tabs/src/tabs-overflow.css +++ b/packages/tabs/src/tabs-overflow.css @@ -10,6 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +@import './spectrum-tabs-overflow.css'; + :host { inset: 0; width: 100%;