diff --git a/bun.lock b/bun.lock
index b99f75ee6..e2448fdc5 100644
--- a/bun.lock
+++ b/bun.lock
@@ -72,6 +72,7 @@
"version": "0.1.0",
"dependencies": {
"oxc-resolver": "~11.10.0",
+ "sass": "~1.86.3",
},
"devDependencies": {
"@eslint/js": "*",
diff --git a/packages/common/src/html.ts b/packages/common/src/html.ts
index c8d4cd4ff..c8e625cb5 100644
--- a/packages/common/src/html.ts
+++ b/packages/common/src/html.ts
@@ -86,7 +86,9 @@ export const CSS_CLASSES = {
},
TAB: {
TAG: "ch-tab-render",
- SELECTOR: "tab"
+ SELECTOR: "tab",
+ FILLED_LIST_SELECTOR: "tab-filled-list",
+ OUTLINED_SELECTOR: "tab-outlined"
},
TOOLTIP: {
TAG: "ch-tooltip",
@@ -134,3 +136,16 @@ export const CUSTOM_CSS_ONLY_FOR_PREVIEW_LAYOUT = `.layout {
font-size: var(--mer-font__size--xs);
justify-content: center;
}`;
+
+export const CONTENT_SLOT = {
+ /* Diagonal hatch pattern used as a visual placeholder for empty content areas */
+ SELECTOR: "content-slot",
+ CSS: `
+ background-color: transparent;
+ background-image: var(--content-slot-background-image);
+ block-size: 200px;
+ display: grid;
+ place-content: center;
+ margin: 0 !important;
+ `
+};
diff --git a/packages/common/src/metadata/components/tab/metadata.ts b/packages/common/src/metadata/components/tab/metadata.ts
index d6702414e..ccecac351 100644
--- a/packages/common/src/metadata/components/tab/metadata.ts
+++ b/packages/common/src/metadata/components/tab/metadata.ts
@@ -1,32 +1,80 @@
import { getIconPath } from "@genexus/mercury/assets-manager.js";
-import { CSS_CLASSES } from "../../../html";
+import { CONTENT_SLOT, CSS_CLASSES } from "../../../html";
import type { ComponentMetadata } from "../../../typings/component-metadata";
import type { CodeTemplateVariables } from "../../../typings/metadata-to-framework-language";
import { chameleonImportType } from "../../../utils";
import { parseMetadata } from "../../parseMetadata";
-import { itemsDisabledModel, simpleModel, withIconsModel } from "./models";
+import {
+ itemsDisabledModel,
+ simpleModel,
+ sortableModel,
+ withIconsModel
+} from "./models";
-const COMMON_CHILDREN = [
+const customCssOnlyForPreview = `
+ch-tab-render p {${CONTENT_SLOT.CSS}}
+`;
+
+const COMMON_CHILDREN_BASE = [
{
tag: "div",
- class: CSS_CLASSES.SPACING_BODY.ALL,
- children: "Item 1 slotted content",
+ children: {
+ tag: "p",
+ children: "Item 1 slotted content"
+ },
properties: [{ name: "slot", value: "item-1" }]
},
{
tag: "div",
- class: CSS_CLASSES.SPACING_BODY.ALL,
- children: "Item 2 slotted content",
+ children: {
+ tag: "p",
+ children: "Item 2 slotted content"
+ },
properties: [{ name: "slot", value: "item-2" }]
},
{
tag: "div",
- class: CSS_CLASSES.SPACING_BODY.ALL,
- children: "Item 3 slotted content",
+ children: {
+ tag: "p",
+ children: "Item 3 slotted content"
+ },
properties: [{ name: "slot", value: "item-3" }]
+ },
+ {
+ tag: "div",
+ children: {
+ tag: "p",
+ children: "Item 4 slotted content"
+ },
+ properties: [{ name: "slot", value: "item-4" }]
+ },
+ {
+ tag: "div",
+ children: {
+ tag: "p",
+ children: "Item 5 slotted content"
+ },
+ properties: [{ name: "slot", value: "item-5" }]
+ },
+ {
+ tag: "div",
+ children: {
+ tag: "p",
+ children: "Item 6 slotted content"
+ },
+ properties: [{ name: "slot", value: "item-6" }]
}
];
+const withSpacingBody = (useSpacing: boolean, count: number = 3) => {
+ return COMMON_CHILDREN_BASE.slice(0, count).map(item => ({
+ ...item,
+ class: useSpacing ? CSS_CLASSES.SPACING_BODY.ALL : undefined
+ }));
+};
+const COMMON_CHILDREN = (count: number = 3) => withSpacingBody(false, count);
+const COMMON_CHILDREN_WITH_SPACING_BODY = (count: number = 3) =>
+ withSpacingBody(true, count);
const ICON_UPLOAD_NAME = "ICON_UPLOAD";
const ICON_UNDO_NAME = "ICON_UNDO";
@@ -58,7 +106,7 @@ const SLOTS_VARIABLES: CodeTemplateVariables = [
}
];
-const SLOTS_COMMON_CHILDREN = {
+const SLOTS_ADDITIONAL_ACTIONS = {
tag: "div",
slot: "tab-list-start",
class: "buttons-spacer",
@@ -107,15 +155,45 @@ const SLOTS_COMMON_CHILDREN = {
}
]
};
+
export const tabMetadata = parseMetadata({
title: "Tab",
description:
"A tab component is a versatile UI element that organizes content into separate views, each accessible through individual tabs. It enhances user experience by allowing easy navigation between different sections without reloading the page, making it ideal for displaying related content in a compact space.",
- bundles: ["components/tab", "utils/spacing", "chameleon/scrollbar"],
+ bundles: [
+ "components/tab",
+ "utils/spacing",
+ "utils/elevation",
+ "chameleon/scrollbar"
+ ],
+ customCssOnlyForPreview: customCssOnlyForPreview,
codeSnippets: {
- tabListPositionBlockStart: {
- linkId: "tab-list-position-block-start",
- title: "1.1. (Default) Tab List Position: Block Start",
+ tabListDefault: {
+ linkId: "tab-list-default",
+ title: "1.1. Default",
+ states: [
+ {
+ name: "tabModel",
+ type: "TabModel",
+ value: simpleModel
+ }
+ ],
+ imports: [chameleonImportType("TabModel")],
+ template: {
+ tag: CSS_CLASSES.TAB.TAG,
+ class: CSS_CLASSES.TAB.SELECTOR,
+ properties: [
+ { name: "model", value: "tabModel" },
+ { name: "selectedId", value: "item-1" },
+ { name: "tabListPosition", value: "block-start" }
+ ],
+ children: COMMON_CHILDREN()
+ }
+ },
+
+ spacingBody: {
+ linkId: "spacing-body",
+ title: "1.2. Spacing Body",
states: [
{
name: "tabModel",
@@ -132,13 +210,13 @@ export const tabMetadata = parseMetadata({
{ name: "selectedId", value: "item-1" },
{ name: "tabListPosition", value: "block-start" }
],
- children: COMMON_CHILDREN
+ children: COMMON_CHILDREN_WITH_SPACING_BODY()
}
},
tabListPositionBlockEnd: {
linkId: "tab-list-position-block-end",
- title: "1.2. Tab List Position: Block End",
+ title: "1.3. Tab List Position: Block End",
states: [
{
name: "tabModel",
@@ -155,13 +233,13 @@ export const tabMetadata = parseMetadata({
{ name: "selectedId", value: "item-1" },
{ name: "tabListPosition", value: "block-end" }
],
- children: COMMON_CHILDREN
+ children: COMMON_CHILDREN_WITH_SPACING_BODY()
}
},
tabListPositionInlineStart: {
linkId: "tab-list-position-inline-start",
- title: "1.3. Tab List Position: Inline Start",
+ title: "1.4. Tab List Position: Inline Start",
states: [
{
name: "tabModel",
@@ -173,18 +251,19 @@ export const tabMetadata = parseMetadata({
template: {
tag: CSS_CLASSES.TAB.TAG,
class: CSS_CLASSES.TAB.SELECTOR,
+
properties: [
{ name: "model", value: "tabModel" },
{ name: "selectedId", value: "item-1" },
{ name: "tabListPosition", value: "inline-start" }
],
- children: COMMON_CHILDREN
+ children: COMMON_CHILDREN_WITH_SPACING_BODY()
}
},
tabListPositionInlineEnd: {
linkId: "tab-list-position-inline-end",
- title: "1.4. Tab List Position: Inline End",
+ title: "1.5. Tab List Position: Inline End",
states: [
{
name: "tabModel",
@@ -201,13 +280,13 @@ export const tabMetadata = parseMetadata({
{ name: "selectedId", value: "item-1" },
{ name: "tabListPosition", value: "inline-end" }
],
- children: COMMON_CHILDREN
+ children: COMMON_CHILDREN_WITH_SPACING_BODY()
}
},
withIcons: {
linkId: "with-icons",
- title: "1.5. With Icons",
+ title: "1.6. With Icons",
states: [
{
name: "tabModel",
@@ -227,7 +306,7 @@ export const tabMetadata = parseMetadata({
{ name: "selectedId", value: "item-1" },
{ name: "tabListPosition", value: "block-start" }
],
- children: COMMON_CHILDREN
+ children: COMMON_CHILDREN_WITH_SPACING_BODY()
}
},
@@ -252,18 +331,18 @@ export const tabMetadata = parseMetadata({
{ name: "closeButton", value: "true" },
{ name: "closeButtonAccessibleName", value: "close tab" }
],
- children: COMMON_CHILDREN
+ children: COMMON_CHILDREN_WITH_SPACING_BODY()
}
},
- sortableButtons: {
- linkId: "sortable-buttons",
- title: "1.6. Sortable Buttons",
+ sortableTabButtons: {
+ linkId: "sortable-tab-buttons",
+ title: "1.8. Sortable Tab Buttons",
states: [
{
name: "tabModel",
type: "TabModel",
- value: simpleModel
+ value: sortableModel
}
],
imports: [
@@ -279,13 +358,13 @@ export const tabMetadata = parseMetadata({
{ name: "sortable", value: "true" },
{ name: "tabListPosition", value: "block-start" }
],
- children: COMMON_CHILDREN
+ children: COMMON_CHILDREN_WITH_SPACING_BODY(6)
}
},
- itemsDisabledBlock: {
- linkId: "items-disabled-block",
- title: "1.8. Items Disabled: Block",
+ itemsDisabled: {
+ linkId: "items-disabled",
+ title: "1.9. Items Disabled",
states: [
{
name: "tabModel",
@@ -306,45 +385,7 @@ export const tabMetadata = parseMetadata({
{ name: "tabListPosition", value: "block-start" }
],
children: [
- ...COMMON_CHILDREN,
- // Add another disabled item to show multiple can be disabled,
- // with two enabled
- {
- tag: "div",
- class: CSS_CLASSES.SPACING_BODY.ALL,
- children: "Item 4 slotted content",
- properties: [{ name: "slot", value: "item-4" }]
- }
- ]
- }
- },
-
- itemsDisabledInline: {
- linkId: "items-disabled-inline",
- title: "1.9. Items Disabled: Inline",
- states: [
- {
- name: "tabModel",
- type: "TabModel",
- value: itemsDisabledModel
- }
- ],
- imports: [
- chameleonImportType("TabModel"),
- 'import { getIconPath } from "@genexus/mercury/assets-manager.js";'
- ],
- template: {
- tag: CSS_CLASSES.TAB.TAG,
- class: CSS_CLASSES.TAB.SELECTOR,
- properties: [
- { name: "model", value: "tabModel" },
- { name: "selectedId", value: "item-3" },
- { name: "tabListPosition", value: "inline-start" }
- ],
- children: [
- ...COMMON_CHILDREN,
- // Add another disabled item to show multiple can be disabled,
- // with two enabled
+ ...COMMON_CHILDREN_WITH_SPACING_BODY(),
{
tag: "div",
class: CSS_CLASSES.SPACING_BODY.ALL,
@@ -378,13 +419,16 @@ export const tabMetadata = parseMetadata({
],
template: {
tag: CSS_CLASSES.TAB.TAG,
- class: CSS_CLASSES.TAB.SELECTOR,
+ class: [
+ CSS_CLASSES.TAB.SELECTOR,
+ CSS_CLASSES.ELEVATION[1].SELECTOR
+ ].join(" "),
properties: [
{ name: "model", value: "tabModel" },
{ name: "selectedId", value: "item-1" },
{ name: "tabListPosition", value: "block-start" }
],
- children: COMMON_CHILDREN
+ children: COMMON_CHILDREN_WITH_SPACING_BODY()
}
},
@@ -411,13 +455,16 @@ export const tabMetadata = parseMetadata({
],
template: {
tag: CSS_CLASSES.TAB.TAG,
- class: `${CSS_CLASSES.TAB.SELECTOR} ${CSS_CLASSES.ELEVATION[2].SELECTOR}`,
+ class: [
+ CSS_CLASSES.TAB.SELECTOR,
+ CSS_CLASSES.ELEVATION[2].SELECTOR
+ ].join(" "),
properties: [
{ name: "model", value: "tabModel" },
{ name: "selectedId", value: "item-1" },
{ name: "tabListPosition", value: "block-start" }
],
- children: COMMON_CHILDREN
+ children: COMMON_CHILDREN_WITH_SPACING_BODY()
}
},
@@ -441,13 +488,16 @@ export const tabMetadata = parseMetadata({
imports: [chameleonImportType("TabModel")],
template: {
tag: CSS_CLASSES.TAB.TAG,
- class: `${CSS_CLASSES.TAB.SELECTOR} ${CSS_CLASSES.ELEVATION[3].SELECTOR}`,
+ class: [
+ CSS_CLASSES.TAB.SELECTOR,
+ CSS_CLASSES.ELEVATION[3].SELECTOR
+ ].join(" "),
properties: [
{ name: "model", value: "tabModel" },
{ name: "selectedId", value: "item-1" },
{ name: "tabListPosition", value: "block-start" }
],
- children: COMMON_CHILDREN
+ children: COMMON_CHILDREN_WITH_SPACING_BODY()
}
},
@@ -483,10 +533,10 @@ export const tabMetadata = parseMetadata({
{ name: "showTabListStart", value: true }
],
children: [
- ...COMMON_CHILDREN,
+ ...COMMON_CHILDREN_WITH_SPACING_BODY(),
{
properties: [{ name: "slot", value: "tab-list-start" }],
- ...SLOTS_COMMON_CHILDREN
+ ...SLOTS_ADDITIONAL_ACTIONS
}
]
}
@@ -524,10 +574,10 @@ export const tabMetadata = parseMetadata({
{ name: "showTabListEnd", value: true }
],
children: [
- ...COMMON_CHILDREN,
+ ...COMMON_CHILDREN_WITH_SPACING_BODY(),
{
properties: [{ name: "slot", value: "tab-list-end" }],
- ...SLOTS_COMMON_CHILDREN
+ ...SLOTS_ADDITIONAL_ACTIONS
}
]
}
diff --git a/packages/common/src/metadata/components/tab/models.ts b/packages/common/src/metadata/components/tab/models.ts
index 44013502c..559d2bd2f 100644
--- a/packages/common/src/metadata/components/tab/models.ts
+++ b/packages/common/src/metadata/components/tab/models.ts
@@ -7,10 +7,13 @@ export const simpleModel: TabModel = [
{ id: "item-3", name: "Item Button 3" }
];
+// This model intentionally includes several items so the sorting experience
+// in the showcase feels more realistic and meaningful.
+
export const sortableModel: TabModel = [
{
id: "item-1",
- name: "Sortable Button 1",
+ name: "Item Button 1",
startImgSrc: getIconPath({
category: "system",
name: "drag",
@@ -19,7 +22,7 @@ export const sortableModel: TabModel = [
},
{
id: "item-2",
- name: "Sortable Button 2",
+ name: "Item Button 2",
startImgSrc: getIconPath({
category: "system",
name: "drag",
@@ -28,7 +31,34 @@ export const sortableModel: TabModel = [
},
{
id: "item-3",
- name: "Sortable Button 3",
+ name: "Item Button 3",
+ startImgSrc: getIconPath({
+ category: "system",
+ name: "drag",
+ colorType: "neutral"
+ })
+ },
+ {
+ id: "item-4",
+ name: "Item Button 4",
+ startImgSrc: getIconPath({
+ category: "system",
+ name: "drag",
+ colorType: "neutral"
+ })
+ },
+ {
+ id: "item-5",
+ name: "Item Button 5",
+ startImgSrc: getIconPath({
+ category: "system",
+ name: "drag",
+ colorType: "neutral"
+ })
+ },
+ {
+ id: "item-6",
+ name: "Item Button 6",
startImgSrc: getIconPath({
category: "system",
name: "drag",
diff --git a/packages/mercury/src/base/_common.scss b/packages/mercury/src/base/_common.scss
index 546eb8e62..2d2b23a4e 100644
--- a/packages/mercury/src/base/_common.scss
+++ b/packages/mercury/src/base/_common.scss
@@ -323,57 +323,49 @@
// ----------------------
// Tab Caption (Button)
// ----------------------
-@mixin tab-button-border-block() {
- border-block: var(--tab-caption__border-width)
- var(--tab-caption__border-style) var(--tab-caption__border-color);
+
+// Border
+$tab-button-border: var(--mer-border__width--sm) solid transparent;
+
+@mixin tab-button-border-block-start() {
+ border-block-start: $tab-button-border;
}
@mixin tab-button-border-block-end() {
- border-block-end: var(--tab-caption__border-width)
- var(--tab-caption__border-style) var(--tab-caption__border-color);
+ border-block-end: $tab-button-border;
}
-@mixin tab-button-border-block-start() {
- border-block-start: var(--tab-caption__border-width)
- var(--tab-caption__border-style) var(--tab-caption__border-color);
+@mixin tab-button-border-inline-start() {
+ border-inline-start: $tab-button-border;
}
-@mixin tab-button-gap() {
- gap: var(--tab-caption__gap);
+@mixin tab-button-border-inline-end() {
+ border-inline-end: $tab-button-border;
}
+
+// Colors
@mixin tab-button-colors-enabled() {
- background-color: var(--tab-caption__bg-color);
- color: var(--tab-caption__color);
- border-color: var(--tab-caption__border-color);
+ background-color: var(--elevation-background-color, var(--mer-surface));
+ color: var(--mer-text__neutral);
+ border-color: transparent;
}
@mixin tab-button-colors-hover() {
- --tab-caption__bg-color: var(--tab-caption__bg-color--hover);
- // color remains the same
- // border-color remains the same
+ background-color: var(--mer-color__tinted-primary--10);
}
-@mixin tab-button-colors-disabled() {
- --tab-caption__bg-color: var(--tab-caption__bg-color--disabled);
- --tab-caption__color: var(--mer-text__primary--disabled);
- --tab-caption__border-color--selected-inline: var(
- --mer-border-color__primary--disabled
- );
- --tab-caption__border-color--selected-stack: var(
- --mer-surface__elevation--02
- );
-}
-@mixin tab-button-colors-selected-inline() {
- --tab-caption__bg-color: var(--tab-caption__bg-color--selected-inline);
- --tab-caption__color: var(--tab-caption__color--selected);
- --tab-caption__border-color: var(
- --tab-caption__border-color--selected-inline
- );
+@mixin tab-button-colors-selected() {
+ color: var(--mer-text__highlighted);
+ border-color: var(--mer-accent__primary);
}
-@mixin tab-button-colors-selected-stack() {
- --tab-caption__bg-color: var(--tab-caption__bg-color--selected-stack);
- --tab-caption__color: var(--tab-caption__color--selected);
- --tab-caption__border-color: var(--tab-caption__border-color--selected-stack);
+@mixin tab-button-colors-disabled() {
+ background-color: transparent;
+ color: var(--mer-text__primary--disabled);
+ border-color: var(--mer-border-color__on-elevation--01);
}
+// Spacing
+@mixin tab-button-gap() {
+ gap: var(--mer-spacing--xs);
+}
@mixin tab-button-padding-stack() {
- padding-block: var(--tab-caption__padding-block);
- padding-inline: var(--tab-caption__padding-inline);
+ padding-block: var(--mer-spacing--xs);
+ padding-inline: var(--mer-spacing--sm);
}
// ----------------------
diff --git a/packages/mercury/src/components/tab/_tab-styles.scss b/packages/mercury/src/components/tab/_tab-styles.scss
index 9f28e5e5f..d94ff1b5e 100644
--- a/packages/mercury/src/components/tab/_tab-styles.scss
+++ b/packages/mercury/src/components/tab/_tab-styles.scss
@@ -5,116 +5,92 @@
--ch-tab-close-button__background-image-size: var(--mer-icon__size--md);
--ch-tab-close-button__image-size: var(--mer-spacing--md);
--ch-tab-button__image-size: var(--mer-icon__box--md);
+}
- --spacing-body-block-start: var(--mer-spacing--md);
- --spacing-body-block-end: var(--mer-spacing--md);
- --spacing-body-inline-start: var(--mer-spacing--md);
- --spacing-body-inline-end: var(--mer-spacing--md);
-
- @include items-container-border();
- @include items-container-colors();
+%tab-button-sortable {
+ // TODO: "sortable" part is not supported in Chameleon yet.
+ --icon-path: var(--icon__navigation_drag_on-surface--enabled);
+ &--before {
+ content: "";
+ display: block;
+ inline-size: var(--mer-icon__box--md);
+ block-size: var(--mer-icon__box--md);
+ background: no-repeat center / var(--mer-icon__size--md) var(--icon-path);
+ margin-inline-end: var(--mer-spacing--2xs);
+ flex-shrink: 0;
+ }
+ background-color: var(--elevation-background-color, var(--mer-surface));
}
%tab-button-block {
@include tab-button-colors-enabled();
@include tab-button-gap();
@extend %body-regular-s;
-
- border-block: var(--tab-caption__border-width)
- var(--tab-caption__border-style) transparent;
-
- // TODO: Remove this mixin
- // @include tab-button-border-block-end();
}
%tab-button-block-not-closable {
- // Due to border-block-width: 1px;
- padding-block: var(--tab-caption__padding-block);
- padding-inline: var(--tab-caption__padding-inline);
+ padding-block: var(--mer-spacing--xs);
+ padding-inline: var(--mer-spacing--sm);
}
%tab-button-block-closable {
- // Due to border-block-width: 1px and padding: var(--mer-spacing--2xs) for the close button
- padding-block: calc(
- var(--tab-caption__padding-block) - var(--mer-spacing--2xs) - 1px
- );
-
- // Due to padding: var(--mer-spacing--2xs) for the close button;
- padding-inline: var(--tab-caption__padding-inline)
- calc(var(--tab-caption__padding-inline) - var(--mer-spacing--2xs) - 1px);
+ padding-block: calc(var(--mer-spacing--xs) - var(--mer-spacing--2xs) - 1px);
+ padding-inline: var(--mer-spacing--sm)
+ calc(var(--mer-spacing--sm) - var(--mer-spacing--2xs) - 1px);
}
%tab-button-inline {
@include tab-button-colors-enabled();
@include tab-button-gap();
- @extend %body-regular-s;
-
@include tab-button-padding-stack();
- border-inline: var(--tab-caption__border-width)
- var(--tab-caption__border-style) transparent;
-
- // TODO: Remove this mixin
- // @include tab-button-border-block();
+ @extend %body-regular-s;
}
-// Block Start
-%tab-button-block-start--hover {
+// Common states for all tab variants
+%tab-button--hover-active {
@include tab-button-colors-hover();
}
-%tab-button-block-start--active {
- // TODO
- @include tab-button-colors-hover();
+// Block Start
+%tab-button-block-start {
+ @include tab-button-border-block-end();
}
%tab-button-block-start--selected {
- @include tab-button-colors-selected-inline();
- border-block-end-color: var(--tab-caption__border-color);
+ @include tab-button-colors-selected();
+ border-block-end-color: var(--mer-accent__primary);
}
// Block End
-%tab-button-block-end--hover {
- @include tab-button-colors-hover();
-}
-
-%tab-button-block-end--active {
- // TODO
- @include tab-button-colors-hover();
+%tab-button-block-end {
+ @include tab-button-border-block-start();
}
%tab-button-block-end--selected {
- @include tab-button-colors-selected-inline();
- border-block-start-color: var(--tab-caption__border-color);
+ @include tab-button-colors-selected();
+ border-block-start-color: var(--mer-accent__primary);
}
// Inline Start
-%tab-button-inline-start--hover {
- @include tab-button-colors-hover();
-}
-
-%tab-button-inline-start--active {
- // TODO
- @include tab-button-colors-hover();
+%tab-button-inline-start {
+ @include tab-button-border-inline-end();
}
%tab-button-inline-start--selected {
- @include tab-button-colors-selected-stack();
- border-inline-end-color: var(--tab-caption__border-color);
+ @include tab-button-colors-selected();
+ background-color: var(--mer-color__tinted-primary--10);
+ border-inline-end-color: var(--mer-accent__primary);
}
// Inline End
-%tab-button-inline-end--hover {
- @include tab-button-colors-hover();
-}
-
-%tab-button-inline-end--active {
- // TODO
- @include tab-button-colors-hover();
+%tab-button-inline-end {
+ @include tab-button-border-inline-start();
}
%tab-button-inline-end--selected {
- @include tab-button-colors-selected-stack();
- border-inline-start-color: var(--tab-caption__border-color);
+ @include tab-button-colors-selected();
+ background-color: var(--mer-color__tinted-primary--10);
+ border-inline-start-color: var(--mer-accent__primary);
}
// Focus
@@ -143,49 +119,52 @@
}
%tab-list {
- $tabListBorderCommonStyles: var(--items-container__border-width)
- var(--items-container__border-style)
- var(--elevation-border-color, var(--items-container__border-color));
-
- &--block-start {
- border-block-end: $tabListBorderCommonStyles;
- }
-
- &--block-end {
- border-block-start: $tabListBorderCommonStyles;
- }
-
- &--inline-start {
- border-inline-end: $tabListBorderCommonStyles;
- }
+ background-color: var(--elevation-background-color, var(--mer-surface));
+}
- &--inline-end {
- border-inline-start: $tabListBorderCommonStyles;
- }
+%tab-panel {
+ // The host (.tab) also implements "spacing-body".
+ --spacing-body-block-start: var(--mer-spacing--sm);
+ --spacing-body-block-end: var(--mer-spacing--sm);
+ --spacing-body-inline-start: var(--mer-spacing--xs);
+ --spacing-body-inline-end: var(--mer-spacing--xs);
}
+// - - - - - - - - - - - - - - - - - - - - - - - -
+// tab Mixin
+// - - - - - - - - - - - - - - - - - - - - - - - -
@mixin tab(
$tab-selector: ".tab",
+ $tab-button-sortable-selector: ".tab::part(tab).sortable",
$tab-button-block-closable-selector: ".tab::part(tab block closable)",
$tab-button-block-not-closable-selector: ".tab::part(tab block not-closable)",
+ // position: block-start
+ $tab-list--selector: ".tab::part(tab-list)",
+ $tab-list--block-start-selector: ".tab::part(tab-list block-start)",
$tab-button-block-start-selector: ".tab::part(tab block-start)",
$tab-button-block-start--selected-selector:
".tab::part(tab block-start selected)",
$tab-button-block-start--disabled-selector:
".tab::part(tab block-start disabled)",
+ // position: block-end
+ $tab-list--block-end-selector: ".tab::part(tab-list block-end)",
$tab-button-block-end-selector: ".tab::part(tab block-end)",
$tab-button-block-end--selected-selector: ".tab::part(tab block-end selected)",
$tab-button-block-end--disabled-selector: ".tab::part(tab block-end disabled)",
+ // position: inline-start
+ $tab-list--inline-start-selector: ".tab::part(tab-list inline-start)",
$tab-button-inline-start-selector: ".tab::part(tab inline-start)",
$tab-button-inline-start--selected-selector:
".tab::part(tab inline-start selected)",
$tab-button-inline-start--disabled-selector:
".tab::part(tab inline-start disabled)",
+ // position: inline-end
+ $tab-list--inline-end-selector: ".tab::part(tab-list inline-end)",
$tab-button-inline-end-selector: ".tab::part(tab inline-end)",
$tab-button-inline-end--selected-selector:
".tab::part(tab inline-end selected)",
@@ -195,10 +174,7 @@
$tab-button--disabled-selector: ".tab::part(tab disabled)",
$tab-button-close-button-selector: ".tab::part(close-button)",
- $tab-list--block-start-selector: ".tab::part(tab-list block-start)",
- $tab-list--block-end-selector: ".tab::part(tab-list block-end)",
- $tab-list--inline-start-selector: ".tab::part(tab-list inline-start)",
- $tab-list--inline-end-selector: ".tab::part(tab-list inline-end)",
+ $tab-panel-container-selector: ".tab::part(tab-panel-container)",
$add--tab: true,
$add--tab-button-block-start: true,
@@ -214,6 +190,16 @@
}
}
+ // - - - - - - - - - - - - - - - - - - - -
+ // Tab Button (sortable)
+ // - - - - - - - - - - - - - - - - - - - -
+ #{$tab-button-sortable-selector} {
+ // TODO: "sortable" part is not supported in Chameleon yet.
+ &::before {
+ @extend %tab-button-sortable;
+ }
+ }
+
// - - - - - - - - - - - - - - - - - - - -
// Tab Button (block closable)
// - - - - - - - - - - - - - - - - - - - -
@@ -236,12 +222,11 @@
// - - - - - - - - - - - - - - - - - - - -
@if ($add--tab-button-block-start) {
#{$tab-button-block-start-selector} {
- &:hover {
- @extend %tab-button-block-start--hover;
- }
+ @extend %tab-button-block-start;
+ &:hover,
&:active {
- @extend %tab-button-block-start--active;
+ @extend %tab-button--hover-active;
}
&:focus-visible {
@@ -265,12 +250,11 @@
// - - - - - - - - - - - - - - - - - - - -
@if ($add--tab-button-block-end) {
#{$tab-button-block-end-selector} {
- &:hover {
- @extend %tab-button-block-end--hover;
- }
+ @extend %tab-button-block-end;
+ &:hover,
&:active {
- @extend %tab-button-block-end--active;
+ @extend %tab-button--hover-active;
}
&:focus-visible {
@@ -295,13 +279,11 @@
@if ($add--tab-button-inline-start) {
#{$tab-button-inline-start-selector} {
@extend %tab-button-inline;
+ @extend %tab-button-inline-start;
- &:hover {
- @extend %tab-button-inline-start--hover;
- }
-
+ &:hover,
&:active {
- @extend %tab-button-inline-start--active;
+ @extend %tab-button--hover-active;
}
&:focus-visible {
@@ -326,13 +308,11 @@
@if ($add--tab-button-inline-end) {
#{$tab-button-inline-end-selector} {
@extend %tab-button-inline;
+ @extend %tab-button-inline-end;
- &:hover {
- @extend %tab-button-inline-end--hover;
- }
-
+ &:hover,
&:active {
- @extend %tab-button-inline-end--active;
+ @extend %tab-button--hover-active;
}
&:focus-visible {
@@ -351,14 +331,6 @@
}
}
- #{$tab-button-close-button-selector} {
- @extend %tab-button-close-button;
-
- &:focus-visible {
- @extend %tab-button-close-button--focus-visible;
- }
- }
-
#{$tab-button-close-button-selector} {
@extend %tab-button-close-button;
@@ -371,21 +343,20 @@
}
}
+ // - - - - - - - - - - - - - - - - - - - -
+ // Tab List
+ // - - - - - - - - - - - - - - - - - - - -
@if $add--tab-list {
- #{$tab-list--block-start-selector} {
- @extend %tab-list--block-start;
- }
-
- #{$tab-list--block-end-selector} {
- @extend %tab-list--block-end;
+ #{$tab-list--selector} {
+ @extend %tab-list;
}
+ }
- #{$tab-list--inline-start-selector} {
- @extend %tab-list--inline-start;
- }
+ // - - - - - - - - - - - - - - - - - - - -
+ // Tab Panel
+ // - - - - - - - - - - - - - - - - - - - -
- #{$tab-list--inline-end-selector} {
- @extend %tab-list--inline-end;
- }
+ #{$tab-panel-container-selector} {
+ @extend %tab-panel;
}
}
diff --git a/packages/mercury/src/mercury.scss b/packages/mercury/src/mercury.scss
index 4a529d852..28d6d7aa4 100644
--- a/packages/mercury/src/mercury.scss
+++ b/packages/mercury/src/mercury.scss
@@ -475,6 +475,9 @@
@if $tab {
@include tab();
+ // These variants are hidden because they have not been discussed yet.
+ // @include tab-filled-list();
+ // @include tab-outlined();
}
@if $tabular-grid {
diff --git a/packages/mercury/src/tests/bundles/constants.ts b/packages/mercury/src/tests/bundles/constants.ts
index 8f6d57157..57c2ecaa1 100644
--- a/packages/mercury/src/tests/bundles/constants.ts
+++ b/packages/mercury/src/tests/bundles/constants.ts
@@ -47,9 +47,9 @@ export const OUTPUT_BUNDLES = [
] as const;
export const EXPECTED_BUNDLE_SIZE_RAW = {
- "all.css": 1974239,
- "base/base-globant.css": 39154,
- "base/base.css": 39425,
+ "all.css": 1971011,
+ "base/base-globant.css": 37982,
+ "base/base.css": 38253,
"base/icons.css": 1832852,
"chameleon/scrollbar.css": 1008,
"components/accordion.css": 4004,
@@ -61,7 +61,7 @@ export const EXPECTED_BUNDLE_SIZE_RAW = {
"components/dialog.css": 4822,
"components/dropdown.css": 6207,
"components/edit.css": 1468,
- "components/flexible-layout.css": 7543,
+ "components/flexible-layout.css": 7563,
"components/icon.css": 765,
"components/layout-splitter.css": 143,
"components/list-box.css": 4578,
@@ -74,7 +74,7 @@ export const EXPECTED_BUNDLE_SIZE_RAW = {
"components/sidebar.css": 2112,
"components/slider.css": 1594,
"components/switch.css": 2025,
- "components/tab.css": 6056,
+ "components/tab.css": 4380,
"components/tabular-grid.css": 14776,
"components/ticket-list.css": 2108,
"components/tooltip.css": 904,
@@ -90,9 +90,9 @@ export const EXPECTED_BUNDLE_SIZE_RAW = {
} satisfies { [key in (typeof OUTPUT_BUNDLES)[number]]: number };
export const EXPECTED_BUNDLE_SIZE_GZIPPED = {
- "all.css": 134155,
- "base/base-globant.css": 5267,
- "base/base.css": 5256,
+ "all.css": 133944,
+ "base/base-globant.css": 5145,
+ "base/base.css": 5135,
"base/icons.css": 113820,
"chameleon/scrollbar.css": 573,
"components/accordion.css": 1089,
@@ -104,7 +104,7 @@ export const EXPECTED_BUNDLE_SIZE_GZIPPED = {
"components/dialog.css": 1459,
"components/dropdown.css": 1413,
"components/edit.css": 755,
- "components/flexible-layout.css": 1316,
+ "components/flexible-layout.css": 1398,
"components/icon.css": 588,
"components/layout-splitter.css": 439,
"components/list-box.css": 1088,
@@ -117,7 +117,7 @@ export const EXPECTED_BUNDLE_SIZE_GZIPPED = {
"components/sidebar.css": 909,
"components/slider.css": 722,
"components/switch.css": 842,
- "components/tab.css": 1160,
+ "components/tab.css": 1131,
"components/tabular-grid.css": 2705,
"components/ticket-list.css": 953,
"components/tooltip.css": 619,
diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/all.json b/packages/mercury/src/tests/bundles/expected-bundle-content/all.json
index 3aac2cf16..66baed594 100644
--- a/packages/mercury/src/tests/bundles/expected-bundle-content/all.json
+++ b/packages/mercury/src/tests/bundles/expected-bundle-content/all.json
@@ -203,28 +203,28 @@
".flexible-layout::part(droppable-area) { background-color: color-mix(in srgb, var(--mer-accent__primary) 25%, transparent); }",
".flexible-layout::part(leaf) { --ch-tab-close-button__background-image-size: var(--mer-icon__size--md); --ch-tab-close-button__image-size: var(--mer-spacing--md); --ch-tab-button__image-size: var(--mer-icon__box--md); --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); --spacing-body-inline-start: var(--mer-spacing--md); --spacing-body-inline-end: var(--mer-spacing--md); }",
".flexible-layout::part(tab block closable) { padding-block: calc(var(--tab-caption__padding-block) - var(--mer-spacing--2xs) - 1px); padding-inline: var(--tab-caption__padding-inline) calc(var(--tab-caption__padding-inline) - var(--mer-spacing--2xs) - 1px); }",
- ".flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable) { background-color: var(--tab-caption__bg-color); color: var(--tab-caption__color); border-color: var(--tab-caption__border-color); gap: var(--tab-caption__gap); border-block: 1px solid rgba(0, 0, 0, 0); }",
+ ".flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable) { background-color: var(--elevation-background-color, var(--mer-surface)); color: var(--mer-text__neutral); border-color: rgba(0, 0, 0, 0); gap: var(--mer-spacing--xs); border-block: 1px solid rgba(0, 0, 0, 0); }",
".flexible-layout::part(tab block not-closable) { padding-block: var(--tab-caption__padding-block); padding-inline: var(--tab-caption__padding-inline); }",
".flexible-layout::part(tab block-end selected) { border-block-end-color: var(--mer-accent__primary); background-color: var(--flexible-layout--tab-button-block-end__background-color--selected); }",
".flexible-layout::part(tab block-end) { background-color: var(--flexible-layout--tab-button-block-end__background-color); color: var(--tab-caption__color--selected); }",
- ".flexible-layout::part(tab block-end):active { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".flexible-layout::part(tab block-end):hover { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".flexible-layout::part(tab block-start disabled), .flexible-layout::part(tab block-end disabled), .flexible-layout::part(tab inline-start disabled), .flexible-layout::part(tab inline-end disabled) { --tab-caption__bg-color: var(--tab-caption__bg-color--disabled); --tab-caption__color: var(--mer-text__primary--disabled); --tab-caption__border-color--selected-inline: var( --mer-border-color__primary--disabled ); --tab-caption__border-color--selected-stack: var( --mer-surface__elevation--02 ); }",
- ".flexible-layout::part(tab block-start disabled), .flexible-layout::part(tab block-end disabled), .flexible-layout::part(tab inline-start disabled), .flexible-layout::part(tab inline-end disabled) { --tab-caption__bg-color: var(--tab-caption__bg-color--disabled); --tab-caption__color: var(--mer-text__primary--disabled); --tab-caption__border-color--selected-inline: var( --mer-border-color__primary--disabled ); --tab-caption__border-color--selected-stack: var( --mer-surface__elevation--02 ); }",
+ ".flexible-layout::part(tab block-end):active { background-color: var(--mer-color__tinted-primary--10); }",
+ ".flexible-layout::part(tab block-end):hover { background-color: var(--mer-color__tinted-primary--10); }",
+ ".flexible-layout::part(tab block-start disabled), .flexible-layout::part(tab block-end disabled), .flexible-layout::part(tab inline-start disabled), .flexible-layout::part(tab inline-end disabled) { background-color: rgba(0, 0, 0, 0); color: var(--mer-text__primary--disabled); border-color: var(--mer-border-color__on-elevation--01); }",
+ ".flexible-layout::part(tab block-start disabled), .flexible-layout::part(tab block-end disabled), .flexible-layout::part(tab inline-start disabled), .flexible-layout::part(tab inline-end disabled) { background-color: rgba(0, 0, 0, 0); color: var(--mer-text__primary--disabled); border-color: var(--mer-border-color__on-elevation--01); }",
".flexible-layout::part(tab block-start selected) { border-block-start-color: var(--mer-accent__primary); background-color: var(--flexible-layout--tab-button-block-start__background-color--selected); color: var(--tab-caption__color--selected); }",
".flexible-layout::part(tab block-start selected)::before, .flexible-layout::part(tab block-end selected)::before { color: var(--mer-accent__primary); }",
".flexible-layout::part(tab block-start) { background-color: var(--flexible-layout--tab-button-block-start__background-color); }",
- ".flexible-layout::part(tab block-start):active { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".flexible-layout::part(tab block-start):hover { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
+ ".flexible-layout::part(tab block-start):active { background-color: var(--mer-color__tinted-primary--10); }",
+ ".flexible-layout::part(tab block-start):hover { background-color: var(--mer-color__tinted-primary--10); }",
".flexible-layout::part(tab inline-end selected) { border-inline-end-color: var(--mer-accent__primary); color: var(--mer-accent__primary); }",
".flexible-layout::part(tab inline-end) { background-color: var(--flexible-layout--tab-button-inline-end__background-color); inline-size: var(--flexible-layout--tab-list-inline__inline-size); }",
- ".flexible-layout::part(tab inline-end):active { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".flexible-layout::part(tab inline-end):hover { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
+ ".flexible-layout::part(tab inline-end):active { background-color: var(--mer-color__tinted-primary--10); }",
+ ".flexible-layout::part(tab inline-end):hover { background-color: var(--mer-color__tinted-primary--10); }",
".flexible-layout::part(tab inline-start selected) { border-inline-start-color: var(--mer-accent__primary); color: var(--mer-accent__primary); }",
".flexible-layout::part(tab inline-start) { background-color: var(--flexible-layout--tab-button-inline-start__background-color); inline-size: var(--flexible-layout--tab-list-inline__inline-size); }",
- ".flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end) { background-color: var(--tab-caption__bg-color); color: var(--tab-caption__color); border-color: var(--tab-caption__border-color); gap: var(--tab-caption__gap); padding-block: var(--tab-caption__padding-block); padding-inline: calc(var(--tab-caption__padding-inline) - 1px); border-inline: 1px solid rgba(0, 0, 0, 0); }",
- ".flexible-layout::part(tab inline-start):active { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".flexible-layout::part(tab inline-start):hover { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
+ ".flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end) { background-color: var(--elevation-background-color, var(--mer-surface)); color: var(--mer-text__neutral); border-color: rgba(0, 0, 0, 0); gap: var(--mer-spacing--xs); padding-block: var(--tab-caption__padding-block); padding-inline: calc(var(--tab-caption__padding-inline) - 1px); border-inline: 1px solid rgba(0, 0, 0, 0); }",
+ ".flexible-layout::part(tab inline-start):active { background-color: var(--mer-color__tinted-primary--10); }",
+ ".flexible-layout::part(tab inline-start):hover { background-color: var(--mer-color__tinted-primary--10); }",
".flexible-layout::part(tab-list block) { background-color: var(--flexible-layout--tab-list-block__background-color); overflow: auto; }",
".flexible-layout::part(tab-list inline) { background-color: var(--flexible-layout--tab-list-inline__background-color); inline-size: var(--flexible-layout--tab-list-inline__inline-size); gap: 4px; }",
".heading-1 { font-size: var(--font-size-header-h1); }",
@@ -378,28 +378,23 @@
".switch-small::part(thumb):focus-visible { --focus__outline-offset: 1px; }",
".switch-small::part(track disabled), .switch-large::part(track disabled) { --ch-switch-track__unchecked-background-color: var( --mer-accent__primary--disabled ); --ch-switch-track__checked-background-color: var( --mer-accent__primary--disabled ); --ch-switch-thumb__unchecked-background-color: var( --mer-icon__on-disabled ); --ch-switch-thumb__checked-background-color: var(--mer-icon__on-disabled); }",
".switch-small::part(track), .switch-large::part(track) { border-radius: var(--ch-switch-track-block-size); margin-inline-end: var(--mer-spacing--xs); }",
- ".tab { --ch-tab-close-button__background-image-size: var(--mer-icon__size--md); --ch-tab-close-button__image-size: var(--mer-spacing--md); --ch-tab-button__image-size: var(--mer-icon__box--md); --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); --spacing-body-inline-start: var(--mer-spacing--md); --spacing-body-inline-end: var(--mer-spacing--md); border-style: var(--items-container__border-style); border-width: var(--items-container__border-width); background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); }",
- ".tab::part(tab block closable) { padding-block: calc(var(--tab-caption__padding-block) - var(--mer-spacing--2xs) - 1px); padding-inline: var(--tab-caption__padding-inline) calc(var(--tab-caption__padding-inline) - var(--mer-spacing--2xs) - 1px); }",
- ".tab::part(tab block closable), .tab::part(tab block not-closable) { background-color: var(--tab-caption__bg-color); color: var(--tab-caption__color); border-color: var(--tab-caption__border-color); gap: var(--tab-caption__gap); border-block: var(--tab-caption__border-width) var(--tab-caption__border-style) rgba(0,0,0,0); }",
- ".tab::part(tab block not-closable) { padding-block: var(--tab-caption__padding-block); padding-inline: var(--tab-caption__padding-inline); }",
- ".tab::part(tab block-end selected) { --tab-caption__bg-color: var(--tab-caption__bg-color--selected-inline); --tab-caption__color: var(--tab-caption__color--selected); --tab-caption__border-color: var( --tab-caption__border-color--selected-inline ); border-block-start-color: var(--tab-caption__border-color); }",
- ".tab::part(tab block-end):active { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".tab::part(tab block-end):hover { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".tab::part(tab block-start disabled), .tab::part(tab block-end disabled), .tab::part(tab inline-start disabled), .tab::part(tab inline-end disabled) { --tab-caption__bg-color: var(--tab-caption__bg-color--disabled); --tab-caption__color: var(--mer-text__primary--disabled); --tab-caption__border-color--selected-inline: var( --mer-border-color__primary--disabled ); --tab-caption__border-color--selected-stack: var( --mer-surface__elevation--02 ); --tab-button__border-width: 0; }",
- ".tab::part(tab block-start selected) { --tab-caption__bg-color: var(--tab-caption__bg-color--selected-inline); --tab-caption__color: var(--tab-caption__color--selected); --tab-caption__border-color: var( --tab-caption__border-color--selected-inline ); border-block-end-color: var(--tab-caption__border-color); }",
- ".tab::part(tab block-start):active { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".tab::part(tab block-start):hover { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".tab::part(tab inline-end selected) { --tab-caption__bg-color: var(--tab-caption__bg-color--selected-stack); --tab-caption__color: var(--tab-caption__color--selected); --tab-caption__border-color: var(--tab-caption__border-color--selected-stack); border-inline-start-color: var(--tab-caption__border-color); }",
- ".tab::part(tab inline-end):active { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".tab::part(tab inline-end):hover { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".tab::part(tab inline-start selected) { --tab-caption__bg-color: var(--tab-caption__bg-color--selected-stack); --tab-caption__color: var(--tab-caption__color--selected); --tab-caption__border-color: var(--tab-caption__border-color--selected-stack); border-inline-end-color: var(--tab-caption__border-color); }",
- ".tab::part(tab inline-start), .tab::part(tab inline-end) { background-color: var(--tab-caption__bg-color); color: var(--tab-caption__color); border-color: var(--tab-caption__border-color); gap: var(--tab-caption__gap); padding-block: var(--tab-caption__padding-block); padding-inline: var(--tab-caption__padding-inline); border-inline: var(--tab-caption__border-width) var(--tab-caption__border-style) rgba(0,0,0,0); }",
- ".tab::part(tab inline-start):active { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".tab::part(tab inline-start):hover { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
- ".tab::part(tab-list block-end) { border-block-start: var(--items-container__border-width) var(--items-container__border-style) var(--elevation-border-color, var(--items-container__border-color)); }",
- ".tab::part(tab-list block-start) { border-block-end: var(--items-container__border-width) var(--items-container__border-style) var(--elevation-border-color, var(--items-container__border-color)); }",
- ".tab::part(tab-list inline-end) { border-inline-start: var(--items-container__border-width) var(--items-container__border-style) var(--elevation-border-color, var(--items-container__border-color)); }",
- ".tab::part(tab-list inline-start) { border-inline-end: var(--items-container__border-width) var(--items-container__border-style) var(--elevation-border-color, var(--items-container__border-color)); }",
+ ".tab { --ch-tab-close-button__background-image-size: var(--mer-icon__size--md); --ch-tab-close-button__image-size: var(--mer-spacing--md); --ch-tab-button__image-size: var(--mer-icon__box--md); }",
+ ".tab::part(tab block closable) { padding-block: calc(var(--mer-spacing--xs) - var(--mer-spacing--2xs) - 1px); padding-inline: var(--mer-spacing--sm) calc(var(--mer-spacing--sm) - var(--mer-spacing--2xs) - 1px); }",
+ ".tab::part(tab block closable), .tab::part(tab block not-closable) { background-color: var(--elevation-background-color, var(--mer-surface)); color: var(--mer-text__neutral); border-color: rgba(0, 0, 0, 0); gap: var(--mer-spacing--xs); }",
+ ".tab::part(tab block not-closable) { padding-block: var(--mer-spacing--xs); padding-inline: var(--mer-spacing--sm); }",
+ ".tab::part(tab block-end selected) { color: var(--mer-text__highlighted); border-color: var(--mer-accent__primary); border-block-start-color: var(--mer-accent__primary); }",
+ ".tab::part(tab block-end) { border-block-start: var(--mer-border__width--sm) solid rgba(0,0,0,0); }",
+ ".tab::part(tab block-start disabled), .tab::part(tab block-end disabled), .tab::part(tab inline-start disabled), .tab::part(tab inline-end disabled) { background-color: rgba(0, 0, 0, 0); color: var(--mer-text__primary--disabled); border-color: var(--mer-border-color__on-elevation--01); --tab-button__border-width: 0; }",
+ ".tab::part(tab block-start selected) { color: var(--mer-text__highlighted); border-color: var(--mer-accent__primary); border-block-end-color: var(--mer-accent__primary); }",
+ ".tab::part(tab block-start) { border-block-end: var(--mer-border__width--sm) solid rgba(0,0,0,0); }",
+ ".tab::part(tab block-start):hover, .tab::part(tab block-start):active, .tab::part(tab block-end):hover, .tab::part(tab block-end):active, .tab::part(tab inline-start):hover, .tab::part(tab inline-start):active, .tab::part(tab inline-end):hover, .tab::part(tab inline-end):active { background-color: var(--mer-color__tinted-primary--10); }",
+ ".tab::part(tab inline-end selected) { color: var(--mer-text__highlighted); border-color: var(--mer-accent__primary); background-color: var(--mer-color__tinted-primary--10); border-inline-start-color: var(--mer-accent__primary); }",
+ ".tab::part(tab inline-end) { border-inline-start: var(--mer-border__width--sm) solid rgba(0,0,0,0); }",
+ ".tab::part(tab inline-start selected) { color: var(--mer-text__highlighted); border-color: var(--mer-accent__primary); background-color: var(--mer-color__tinted-primary--10); border-inline-end-color: var(--mer-accent__primary); }",
+ ".tab::part(tab inline-start) { border-inline-end: var(--mer-border__width--sm) solid rgba(0,0,0,0); }",
+ ".tab::part(tab inline-start), .tab::part(tab inline-end) { background-color: var(--elevation-background-color, var(--mer-surface)); color: var(--mer-text__neutral); border-color: rgba(0, 0, 0, 0); gap: var(--mer-spacing--xs); padding-block: var(--mer-spacing--xs); padding-inline: var(--mer-spacing--sm); }",
+ ".tab::part(tab-list) { background-color: var(--elevation-background-color, var(--mer-surface)); }",
+ ".tab::part(tab-panel-container) { --spacing-body-block-start: var(--mer-spacing--sm); --spacing-body-block-end: var(--mer-spacing--sm); --spacing-body-inline-start: var(--mer-spacing--xs); --spacing-body-inline-end: var(--mer-spacing--xs); }",
".tabular-grid ch-tabular-grid-cell { padding-block: var(--grid-cell__padding-block); padding-inline: var(--grid-cell__padding-inline); align-items: start; justify-content: start; min-inline-size: 0px; }",
".tabular-grid, .property-grid { --focus__outline-offset: -2px; --grid-label__gap: var(--mer-spacing--xs); --grid-common__gap: var(--mer-spacing--xs); max-block-size: 100%; --indent: 16px; background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); --item__border-color--enabled: var(--mer-surface__elevation--01); --grid-rowset-legend__font-size: var(--grid-base__font-size); --grid-rowset-legend__color: var(--grid-base__color); --grid-rowset-legend__color--hover: var(--item__color--hover); --grid-rowset-legend__padding-inline: var(--item__padding-inline); --grid-rowset-legend__padding-block: var(--mer-spacing--3xs); --grid-rowset-legend__indent: var(--mer-spacing--md); --grid-row-actions-show-on-row-hover__margin-inline-end: var( --mer-spacing--xs ); --grid-column-bar__gap: var(--mer-spacing--xs); --grid-column-bar__bg-color: var(--grid-base__bg-color); --grid-column-bar__color: var(--mer-text__bright); --grid-column-bar__padding-inline: var(--mer-spacing--xs); --grid-column-bar__padding-block: var(--mer-spacing--xs); --grid-column-bar__font-size: var(--grid-base__font-size); --grid-bar-resize-split__inline-size: var(--mer-spacing--2xs); --grid-bar-resize-split__bg-color: transparent; --grid-bar-resize-split__border-inline-end: var(--mer-border__width--sm) solid transparent; --grid-bar-resize-split__border-inline-end-color--hover: var( --grid-column-bar__color ); }",
".tabular-grid-align-cells-block-center .tabular-grid-cell { align-items: center; }",
@@ -504,7 +499,7 @@
":host(.ch-scrollable)::-webkit-scrollbar-corner, .ch-scrollable::-webkit-scrollbar-corner, .scrollable::-webkit-scrollbar-corner { background: var(--scrollbar-corner__bg); }",
":host(.ch-scrollable)::-webkit-scrollbar-thumb, .ch-scrollable::-webkit-scrollbar-thumb, .scrollable::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb__bg-color); border-radius: var(--scrollbar-thumb__border-radius); }",
":host(.ch-scrollable)::-webkit-scrollbar-track, .ch-scrollable::-webkit-scrollbar-track, .scrollable::-webkit-scrollbar-track { background-color: var(--scrollbar-track__bg-color); border-radius: var(--scrollbar-track__border-radius); }",
- ":root { --mer-border__width--sm: 1px; --mer-border__width--md: 2px; --mer-border__width--lg: 4px; --mer-border__radius--2xs: 1px; --mer-border__radius--xs: 2px; --mer-border__radius--sm: 4px; --mer-border__radius--md: 8px; --mer-border__radius--lg: 12px; --mer-border__radius--xl: 30px; --mer-body__bg-color: var(--mer-surface); --mer-body__color: var(--mer-text__on-surface); --mer-body__margin-block: var(--mer-spacing--sm); --mer-system__border-width: var(--mer-border__width--sm); --mer-system__border-style: solid; --mer-system__border-color: var(--mer-color__neutral-gray--500); --scrollbar__size: var(--mer-spacing--2xs); --scrollbar-track__bg-color: transparent; --scrollbar-track__border-radius: var(--mer-spacing--xs); --scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550); --scrollbar-thumb__border-radius: var(--mer-spacing--xs); --scrollbar-corner__bg: transparent; --mer-icon__box--sm: var(--mer-spacing--sm); --mer-icon__box--md: 14px; --mer-icon__size--sm: 100%; --mer-icon__size--md: 100%; --mer-form-input__padding-inline: var(--mer-spacing--xs); --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline); --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value); --mer-form-input__border-color: var(--mer-color__neutral-gray--500); --mer-form-input__border-style: solid; --mer-form-input__border-width: var(--mer-border__width--sm); --mer-form-input__border: var(--mer-form-input__border-width) var(--mer-form-input__border-style) var(--mer-form-input__border-color); --mer-form-input__border-radius: var(--mer-border__radius--sm); --mer-form-input-check__border-width: var(--mer-border__radius--xs); --mer-form-input-check__border-color: var( --mer-border-color__neutral--active ); --mer-form-input-check__border-color--disabled: var( --mer-accent__primary--disabled ); --mer-checkbox__option-checked-image: url(\"data:image/svg+xml, {{ metadata.title }}
{{ metadata.description }}
-
+
+
+
+
+
+
+
+
+
+
+
+
{{ metadata.title }}
[headingLevel]="3"
/>
+
+
- Set the closeButton property to true to show a close
- button on each tab. When clicked, it triggers the itemClose event.
+ Set the closeButton property to true to show a
+ close button on each tab. When clicked, it triggers the
+ itemClose event.
+
- ⚠️ Note: Tabs are not removed automatically. It's up to
- the developer to handle tab removal. 💡 Why? This gives you full control over how and when tabs
- are closed, which is especially useful when you need to confirm actions, save
- data, or prevent accidental loss. Tabs won't close automatically. You will have to
- manage closing the tab.
+ ⚠️ Note: Tabs are not removed automatically. It's up
+ to the developer to handle tab removal. 💡 Why? This gives you full control over how and
+ when tabs are closed, which is especially useful when you need to confirm
+ actions, save data, or prevent accidental loss. Tabs won't close
+ automatically. You will have to manage closing the tab.
-
- Click and drag any button to sort
+
+
+ Drag any tab button left or right to rearrange the tabs. The drag icons are
+ optional. We suggest using them to indicate that the tabs can be moved.
+
-
{{ metadata.title }}
+
+