diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index af91005d058..4c163bdf1c3 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4562,6 +4562,10 @@ export namespace Components { * Accessible name for the dropdown menu. */ "dropdownLabel": string; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements": FlipPlacement[]; /** * Specifies the kind of the component, which will apply to border and background, if applicable. */ @@ -4574,6 +4578,11 @@ export namespace Components { * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. */ "overlayPositioning": OverlayPositioning; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-end" + */ + "placement": MenuPlacement; /** * Specifies an icon to display at the end of the primary button. */ @@ -12509,6 +12518,10 @@ declare namespace LocalJSX { * Accessible name for the dropdown menu. */ "dropdownLabel"?: string; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements"?: FlipPlacement[]; /** * Specifies the kind of the component, which will apply to border and background, if applicable. */ @@ -12529,6 +12542,11 @@ declare namespace LocalJSX { * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. */ "overlayPositioning"?: OverlayPositioning; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-end" + */ + "placement"?: MenuPlacement; /** * Specifies an icon to display at the end of the primary button. */ diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts b/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts index 8a9cb3773d8..9c59303b7a9 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts @@ -1,4 +1,7 @@ -import { hidden, renders, disabled, defaults } from "../../tests/commonTests"; +import { html } from "../../../support/formatting"; +import { hidden, renders, disabled, defaults, themed } from "../../tests/commonTests"; +import { ComponentTestTokens } from "../../tests/commonTests/themed"; +import { CSS } from "./resources"; describe("calcite-list-item-group", () => { describe("renders", () => { @@ -33,4 +36,33 @@ describe("calcite-list-item-group", () => { }, ]); }); + + describe("themed", () => { + const tokens: ComponentTestTokens = { + "--calcite-list-item-group-background-color": { + selector: "calcite-list-item-group", + targetProp: "backgroundColor", + }, + "--calcite-list-item-group-text-color": { + selector: "calcite-list-item-group", + shadowSelector: `.${CSS.container}`, + targetProp: "color", + }, + }; + themed( + html` + + + + + + `, + tokens, + ); + }); }); diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss index 128675c519f..6658c0f9168 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss @@ -4,43 +4,27 @@ * These properties can be overridden using the component's tag as selector. * * @prop --calcite-list-item-group-background-color: Specifies the background color of the component. - * @prop --calcite-list-item-group-border-color: Specifies the border color of the component. - * @prop --calcite-list-item-heading-text-color: Specifies the text color of the component's heading. + * @prop --calcite-list-item-group-text-color: Specifies the text color of the component. */ :host { - display: flex; - flex-direction: column; + @apply flex flex-col; + background-color: var(--calcite-list-item-group-background-color, var(--calcite-color-foreground-1)); } :host([filter-hidden]) { - display: none; + @apply hidden; } @include disabled(); .container { @apply text-n1 m-0 flex flex-1 p-3 font-medium; - - color: var(--calcite-list-item-group-heading-text-color, var(--calcite-color-text-2)); + color: var(--calcite-list-item-group-text-color, var(--calcite-color-text-2)); } .heading { @apply p-0; - padding-inline-start: calc( - var(--calcite-internal-list-item-spacing-indent, var(--calcite-spacing-xl)) * - var(--calcite-internal-list-item-spacing-indent-multiplier) - ); -} - -::slotted(calcite-list-item) { - border-block-start: var(--calcite-border-width-sm) solid - var(--calcite-list-item-group-border-color, var(--calcite-color-border-3)); -} - -// removes border for the first item of the group for both filtered and unfiltered items. -::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) { - border: none; } @include base-component(); diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts index f053f7b303f..589d5a7846e 100755 --- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts +++ b/packages/calcite-components/src/components/list-item/list-item.e2e.ts @@ -1,6 +1,7 @@ import { newE2EPage } from "@stencil/core/testing"; -import { defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests"; +import { defaults, disabled, focusable, hidden, renders, slots, themed } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { ComponentTestTokens } from "../../tests/commonTests/themed"; import { CSS, SLOTS } from "./resources"; describe("calcite-list-item", () => { @@ -341,4 +342,149 @@ describe("calcite-list-item", () => { expect(await listItem.getProperty("dragSelected")).toBe(false); expect(calciteListItemDragHandleChange).toHaveReceivedEventTimes(2); }); + + describe("theme", () => { + describe("default", () => { + const tokens: ComponentTestTokens = { + "--calcite-list-item-background-color-active": { + selector: "calcite-list-item", + shadowSelector: `.${CSS.container}`, + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: CSS.container } }, + }, + "--calcite-list-item-background-color-hover": { + selector: "calcite-list-item", + shadowSelector: `.${CSS.containerHover}`, + targetProp: "backgroundColor", + state: "hover", + }, + "--calcite-list-item-background-color": [ + { + selector: "calcite-list-item", + targetProp: "backgroundColor", + }, + { + selector: "calcite-list-item", + shadowSelector: `.${CSS.container}`, + targetProp: "backgroundColor", + }, + ], + "--calcite-list-item-border-color": { + selector: "calcite-list-item", + shadowSelector: `.${CSS.nestedContainer}`, + targetProp: "borderBlockEndColor", + }, + "--calcite-list-item-description-text-color-selected": { + selector: "calcite-list-item[selected]", + shadowSelector: `.${CSS.description}`, + targetProp: "color", + }, + "--calcite-list-item-description-text-color": { + selector: "calcite-list-item", + shadowSelector: `.${CSS.description}`, + targetProp: "color", + }, + "--calcite-list-item-label-text-color": { + selector: "calcite-list-item", + shadowSelector: `.${CSS.label}`, + targetProp: "color", + }, + "--calcite-list-item-spacing-indent": { + selector: "calcite-list-item", + targetProp: "marginInlineStart", + shadowSelector: `.${CSS.nestedContainer}`, + }, + "--calcite-list-item-indicator-color": { + selector: "calcite-list-item", + shadowSelector: `.${CSS.selectionContainer}`, + targetProp: "color", + }, + "--calcite-list-item-indicator-color-hover": { + selector: "calcite-list-item", + shadowSelector: `.${CSS.selectionContainer}`, + targetProp: "color", + state: "hover", + }, + "--calcite-list-item-indicator-color-selected": { + selector: "calcite-list-item[selected]", + shadowSelector: `.${CSS.selectionContainer}`, + targetProp: "color", + }, + }; + themed( + html` + + + + + + + + + + `, + tokens, + ); + }); + describe("border", () => { + const tokens: ComponentTestTokens = { + "--calcite-list-item-border-color": { + selector: "calcite-list-item[selected]", + shadowSelector: `.${CSS.wrapperBordered}`, + targetProp: "borderBlockEndColor", + }, + "--calcite-list-item-indicator-color": { + selector: "calcite-list-item[selected]", + shadowSelector: `.${CSS.containerBorder}`, + targetProp: "borderInlineStartColor", + }, + "--calcite-list-item-indicator-color-hover": { + selector: "calcite-list-item[selected]", + shadowSelector: `.${CSS.containerBorder}`, + targetProp: "borderInlineStartColor", + state: "hover", + }, + "--calcite-list-item-indicator-color-selected": { + selector: "calcite-list-item[selected]", + shadowSelector: `.${CSS.containerBorder}`, + targetProp: "borderInlineStartColor", + }, + }; + themed( + html` + + + + + + + + + + `, + tokens, + ); + }); + describe("filtered fallback", () => { + const tokens: ComponentTestTokens = { + "--calcite-list-background-color": { + selector: "calcite-list-item", + targetProp: "backgroundColor", + }, + }; + themed( + html` + + + + `, + tokens, + ); + }); + }); }); diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss index 4f9d6e4fced..92ffa782287 100755 --- a/packages/calcite-components/src/components/list-item/list-item.scss +++ b/packages/calcite-components/src/components/list-item/list-item.scss @@ -1,67 +1,79 @@ -/** - * CSS Custom Properties +/* * - * These properties can be overridden using the component's tag as selector. - * - * @prop --calcite-list-item-background-color-hover: Specifies the background color of the component when hovered. - * @prop --calcite-list-item-background-color: Specifies the background color of the component. - * @prop --calcite-list-item-border-color: Specifies the border color of the component. - * @prop --calcite-list-item-content-text-color: Specifies the text color of the component's content. - * @prop --calcite-list-item-description-text-color: Specifies the text color of the component's description. - * @prop --calcite-list-item-focus: Specifies the focus of the component. -* @prop --calcite-list-item-handle-icon-color: Specifies the icon color of the sub-component. -* @prop --calcite-list-item-handle-icon-color-hover: Specifies the icon color of the sub-component when in hover state. -* @prop --calcite-list-item-handle-icon-color-focus: Specifies the icon color of the sub-component when in focus state. -* @prop --calcite-list-item-handle-icon-color-selected: Specifies the icon color of the sub-component when selected. -* @prop --calcite-list-item-handle-background-color: Specifies the background color of the sub-component. -* @prop --calcite-list-item-handle-background-color-hover: Specifies the background color of the sub-component when in hover state. -* @prop --calcite-list-item-handle-background-color-focus: Specifies the background color of the sub-component when in focus state. -* @prop --calcite-list-item-handle-background-color-selected: Specifies the background color of the sub-component when selected. - * @prop --calcite-list-item-open-icon-color-hover: Specifies the color of the component's open icon when hovered. - * @prop --calcite-list-item-selection-border-color: Specifies the border color of the component's selection. - * @prop --calcite-list-item-selection-icon-color-hover: Specifies the color of the component's selection icon when hovered. - * @prop --calcite-list-item-selection-icon-color-selected: Specifies the color of the component's selection icon when selected. - */ + * --calcite-list-item-background-color-active: Specifies the background color of the component when active. + * --calcite-list-item-background-color-hover: Specifies the background color of the component when hovered. + * --calcite-list-item-background-color: Specifies the background color of the component. + * --calcite-list-item-border-color: Specifies the border color of nested items. + * --calcite-list-item-description-text-color-selected: Specifies the text color of the description when selected. + * --calcite-list-item-description-text-color: Specifies the text color of the description. + * --calcite-list-item-indicator-color-hover: Specifies the color of the nested container or selector icon when the component is hovered. + * --calcite-list-item-indicator-color-selected: Specifies the color of the nested container or selector icon when the component is selected. + * --calcite-list-item-indicator-color: Specifies the default color of the nested container or selector icon. + * --calcite-list-item-label-text-color: Specifies the text color of the label. + * --calcite-list-item-nested-text-color-hover: Specifies the text color of nested items when hovered. + * --calcite-list-item-nested-text-color: Specifies the text color of nested items. + * --calcite-list-item-spacing-indent: Specifies the indented spacing of nested items. +*/ :host { - display: flex; - flex-direction: column; + @apply flex flex-col; + background-color: var(--calcite-list-item-background-color, var(--calcite-color-foreground-1)); +} + +:host([filter-hidden]), +:host([closed]) { + @apply hidden; +} + +.wrapper--bordered { + border-block-end-width: var(--calcite-border-width-sm); + border-block-end-style: solid; + border-block-end-color: var(--calcite-list-item-border-color, var(--calcite-color-border-3)); } @include disabled(); .container { - background-color: var(--calcite-list-item-background-color, var(-calcite-color-foreground-1)); - box-sizing: border-box; - display: flex; - flex: 1 1 0%; - font-family: var(--calcite-sans-family); + @apply box-border + flex + flex-1; + + background-color: var( + --calcite-list-item-background-color, + var(--calcite-list-background-color, var(--calcite-color-foreground-1)) + ); * { - box-sizing: border-box; + @apply box-border; } } -.container:hover { +.container--hover:hover { + @apply cursor-pointer; background-color: var(--calcite-list-item-background-color-hover, var(--calcite-color-foreground-2)); - cursor: pointer; +} - &.container--border-unselected { - border-color: var(--calcite-color-border-1); - } +.container:active { + background-color: var(--calcite-list-item-background-color-active, var(--calcite-color-foreground-1)); } .container--border { - border-inline-start-width: var(--calcite-border-width-lg); + border-inline-start-width: theme("borderWidth.4"); border-inline-start-style: solid; } .container--border-selected { - border-inline-start-color: var(--calcite-list-item-selection-border-color, var(--calcite-color-brand)); + border-inline-start-color: var(--calcite-list-item-indicator-color-selected, theme("colors.brand")); } .container--border-unselected { - border-inline-start-color: transparent; + border-inline-start-color: var(--calcite-list-item-indicator-color, theme("colors.transparent")); +} + +.container:hover { + &.container--border-unselected { + border-inline-start-color: var(--calcite-list-item-indicator-color-hover, theme("borderColor.color.1")); + } } .nested-container { @@ -69,8 +81,8 @@ border-solid border-0; - margin-inline-start: var(--calcite-list-item-spacing-indent, theme("spacing.6")); border-color: var(--calcite-list-item-border-color, var(--calcite-color-border-3)); + margin-inline-start: var(--calcite-list-item-spacing-indent, theme("spacing.6")); } .nested-container--open { @@ -78,72 +90,69 @@ } .content-container { - color: var(--calcite-list-item-content-text-color, var(--calcite-color-text-2)); - user-select: none; - display: flex; - flex: 1 1 auto; - font-family: var(--calcite-sans-family); - font-weight: var(--calcite-font-weight-normal); - align-items: stretch; - padding: 0; -} - -.content, -.custom-content { - font-size: var(--calcite-font-size--2); - line-height: 1.375; - display: flex; - flex: 1 1 auto; - flex-direction: column; - justify-content: center; - padding-inline: var(--calcite-spacing-md); - padding-block: var(--calcite-spacing-sm); + @apply select-none + flex + flex-auto + font-normal + items-stretch + p-0; + color: var(--calcite-list-text-color, var(--calcite-color-text-2)); } -.label { - color: var(--calcite-list-item-label-text-color, var(--calcite-color-text-1)); +tr, +td { + @apply focus-base; } -.description { - color: var(--calcite-list-item-description-text-color, var(--calcite-color-text-3)); - margin-block-start: var(--calcite-spacing-base); +tr:focus, +td:focus { + @apply focus-inset; } -.content-bottom { - background-color: var(--calcite-list-item-background-color, var(--calcite-color-foreground-1)); - display: flex; - flex-direction: column; +.content, +.custom-content { + @apply text-n2-wrap + flex + flex-auto + flex-col + justify-center + px-3 + py-2; } .label, .description, .content-bottom { - font-size: var(--calcite-font-size--2); - @include word-break(); - font-family: var(--calcite-sans-family); - font-weight: var(--calcite-font-weight-normal); - + @apply text-n2 word-break font-sans font-normal; &:only-child { - margin: 0; - padding-block: var(--calcite-spacing-xxs); + @apply m-0 py-1; } } -:host([selected]) .label { - font-weight: var(--calcite-font-weight-medium); +.label { color: var(--calcite-list-item-label-text-color, var(--calcite-color-text-1)); } +:host([selected]) .label { + @apply font-medium; +} + +.description { + @apply mt-0.5; + + color: var(--calcite-list-item-description-text-color, var(--calcite-color-text-3)); +} + :host([selected]) .description { - color: var(--calcite-list-item-description-text-color, var(--calcite-color-text-2)); + color: var(--calcite-list-item-description-text-color-selected, var(--calcite-color-text-2)); } .content-start { - justify-content: flex-start; + @apply justify-start; } .content-end { - justify-content: flex-end; + @apply justify-end; } .content-start, @@ -151,49 +160,36 @@ @apply flex-auto; ::slotted(calcite-icon) { - align-self: center; - margin-inline: var(--calcite-spacing-md); + @apply self-center mx-3; } } +.content-bottom { + @apply flex flex-col; +} + .content-container--has-center-content .content-start, .content-container--has-center-content .content-end { - flex: 0 1 auto; + @apply flex-initial; } .selection-container { @apply flex px-3 py-0; - color: var(--calcite-list-item-icon-color, var(--calcite-color-border-input)); + color: var(--calcite-list-item-indicator-color, theme("borderColor.color.input")); } .selection-container--single { - color: transparent; + color: var(--calcite-list-item-indicator-color, theme("colors.transparent")); } -:host(:not([disabled]):not([selected]):hover) .selection-container--single { - color: var(--calcite-list-item-selection-icon-color-hover, var(--calcite-color-border-1)); +:host(:not([disabled]):not([selected])) .container:hover .selection-container--single { + color: var(--calcite-list-item-indicator-color-hover, theme("borderColor.color.1")); } -:host([selected]) .container:hover .selection-container, -:host([selected]) .container:hover .selection-container--single, +:host([selected]:hover) .selection-container, +:host([selected]:hover) .selection-container--single, :host([selected]) .selection-container { - color: var(--calcite-list-item-selection-icon-color-selected, var(--calcite-color-brand)); -} - -.open-container { - color: var(--calcite-list-item-icon-color, var(--calcite-color-text-3)); -} - -.container, -.actions-start, -.actions-end, -.content-container, -.drag-container { - outline-color: transparent; - - &:focus { - @include focusInset("--calcite-list-item-focus", "--calcite-internal-list-item-focus-offset"); - } + color: var(--calcite-list-item-indicator-color-selected, theme("colors.brand")); } .actions-start, @@ -203,8 +199,7 @@ .selection-container, .drag-container, .open-container { - display: flex; - align-items: center; + @apply flex items-center; calcite-action, calcite-handle { @@ -212,10 +207,6 @@ } } -:host(:not([disabled])) .container:hover .open-container { - color: var(--calcite-list-item-open-icon-color-hover, var(--calcite-color-text-1)); -} - .open-container, .selection-container { @apply cursor-pointer; @@ -228,32 +219,14 @@ ::slotted(calcite-action-menu), ::slotted(calcite-handle), ::slotted(calcite-dropdown) { - align-self: stretch; + @apply self-stretch; + color: inherit; } } -::slotted(calcite-list-item), -::slotted(calcite-list) { - border-block-start-width: var(--calcite-border-width-sm); -} - ::slotted(calcite-list:empty) { - padding-block: var(--calcite-spacing-md); -} - -calcite-handle { - --calcite-handle-icon-color: var(--calcite-list-item-handle-icon-color); - --calcite-handle-background-color: var(--calcite-list-item-handle-background-color); - - --calcite-handle-icon-color-hover: var(--calcite-list-item-handle-icon-color-hover); - --calcite-handle-background-color-hover: var(--calcite-list-item-handle-background-color-hover); - - --calcite-handle-icon-color-focus: var(--calcite-list-item-handle-icon-color-focus); - --calcite-handle-background-color-focus: var(--calcite-list-item-handle-background-color-focus); - - --calcite-handle-icon-color-selected: var(--calcite-list-item-handle-icon-color-selected); - --calcite-handle-background-color-selected: var(--calcite-list-item-handle-background-color-selected); + @apply border-t-0; } @include base-component(); diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index 5296eb23fe1..0b8896a92bb 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -5,7 +5,8 @@ import { html } from "../../../support/formatting"; import { CSS as ListItemCSS, activeCellTestAttribute } from "../list-item/resources"; import { DEBOUNCE_TIMEOUT as FILTER_DEBOUNCE_TIMEOUT } from "../filter/resources"; import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils"; -import { debounceTimeout } from "./resources"; +import { ComponentTestTokens, themed } from "../../tests/commonTests/themed"; +import { CSS, debounceTimeout } from "./resources"; import { ListDragDetail } from "./interfaces"; const placeholder = placeholderImage({ @@ -1326,4 +1327,51 @@ describe("calcite-list", () => { expect(await handle.getProperty("selected")).toBe(false); }); }); + + describe("theme", () => { + describe("filtered default", () => { + const tokens: ComponentTestTokens = { + "--calcite-list-header-background-color": { + shadowSelector: `.${CSS.sticky}`, + targetProp: "backgroundColor", + }, + "--calcite-list-header-z-index": { + shadowSelector: `.${CSS.sticky}`, + targetProp: "backgroundColor", + }, + }; + themed( + html` + + + + +
No fruits found
+
Try a different fruit?
+ + `, + tokens, + ); + }); + describe("filtered fallback", () => { + const tokens: ComponentTestTokens = { + "--calcite-list-background-color": { + shadowSelector: `.${CSS.sticky}`, + targetProp: "backgroundColor", + }, + }; + themed( + html` + + + + +
No fruits found
+
Try a different fruit?
+ + `, + tokens, + ); + }); + }); }); diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss index fe218e95f7b..a3260f0b562 100755 --- a/packages/calcite-components/src/components/list/list.scss +++ b/packages/calcite-components/src/components/list/list.scss @@ -4,25 +4,13 @@ * These properties can be overridden using the component's tag as selector. * * @prop --calcite-list-background-color: Specifies the background color of the component. - * @prop --calcite-list-border-color: Specifies the border color of the component. - * @prop --calcite-list-filter-background-color: Specifies the background color of the filter sub-component. - * @prop --calcite-list-filter-input-background-color: defines the background color of the filter input sub-component. - * @prop --calcite-list-filter-input-border-color: defines the border color of the filter input sub-component. - * @prop --calcite-list-filter-input-button-background-color: defines the background color of the filter input button in the input sub-component. - * @prop --calcite-list-filter-input-button-background-color-hover: defines the background color of the filter input button when hovered in the input sub-component. - * @prop --calcite-list-filter-input-button-border-color: defines the border color of the button in the filter input sub-component. - * @prop --calcite-list-filter-input-button-icon-color: defines the icon color of the button in the filter input sub-component. - * @prop --calcite-list-filter-input-button-icon-color-active: defines the icon color of the button when active in the filter input sub-component. - * @prop --calcite-list-filter-input-button-icon-color-hover: defines the icon color of the button when hovered in the filter input sub-component. - * @prop --calcite-list-filter-input-corner-radius: defines the corner radius of the input sub-component. - * @prop --calcite-list-filter-input-icon-color: defines the icon color of the filter input sub-component. - * @prop --calcite-list-filter-input-placeholder-text-color: defines the placeholder text color of the filter input sub-component. - * @prop --calcite-list-filter-input-text-color: defines the text color of the filter input sub-component. + * @prop --calcite-list-header-background-color: Specifies the background color of the component header. * @prop --calcite-list-header-z-index: Specifies the component header's z-index. + * @prop --calcite-list-text-color: Specifies the component text color. */ :host { - display: block; + @apply block; } @include disabled(); @@ -32,19 +20,19 @@ } .table-container { - box-sizing: border-box; - display: flex; - inline-size: var(--calcite-container-size-content-fluid); - flex-direction: column; - background-color: var(--calcite-list-background-color, var(--calcite-color-foreground-1)); + @apply box-border + flex + w-full + flex-col; + background-color: var(--calcite-color-transparent); + * { - box-sizing: border-box; + @apply box-border; } } .table { - inline-size: var(--calcite-container-size-content-fluid); - border-collapse: collapse; + @apply w-full border-collapse; } .stack { @@ -52,50 +40,19 @@ --calcite-stack-padding-block: 0; } -::slotted(calcite-list-item:not([filter-hidden], [closed])) { - border-block-start: var(--calcite-border-width-sm) solid - var(--calcite-list-border-color, var(--calcite-color-border-3)); -} - -// removes border for the first item of the group for both filtered and unfiltered items. -::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) { - border: none; -} - -// removes shadow for the first item in filteredItems of the list. -::slotted(calcite-list-item[data-filter]) { - border: none; -} - .sticky-pos { - position: sticky; - inset-block-start: 0px; + @apply sticky + top-0; z-index: var(--calcite-list-header-z-index, var(--calcite-z-index-sticky)); - background-color: var(--calcite-list-background-color, var(--calcite-color-foreground-1)); -} + background-color: var(--calcite-list-header-background-color, var(--calcite-color-foreground-1)); -.table-header { - padding: 0; + & th { + @apply p-0; + } } .assistive-text { - @include srOnly(); -} - -calcite-filter { - --calcite-filter-background-color: var(--calcite-list-filter-background-color); - --calcite-filter-input-corner-radius: var(--calcite-list-filter-input-corner-radius); - --calcite-filter-input-text-color: var(--calcite-list-filter-input-text-color); - --calcite-filter-input-border-color: var(--calcite-list-filter-input-border-color); - --calcite-filter-input-background-color: var(--calcite-list-filter-input-background-color); - --calcite-filter-input-button-background-color: var(--calcite-list-filter-input-button-background-color); - --calcite-filter-input-button-background-color-hover: var(--calcite-list-filter-input-button-background-color-hover); - --calcite-filter-input-icon-color: var(--calcite-list-filter-input-icon-color); - --calcite-filter-input-button-icon-color: var(--calcite-list-filter-input-button-icon-color); - --calcite-filter-input-button-icon-color-active: var(--calcite-list-filter-input-button-icon-color-active); - --calcite-filter-input-button-icon-color-hover: var(--calcite-list-filter-input-button-icon-color-hover); - --calcite-filter-input-placeholder-text-color: var(--calcite-list-filter-input-placeholder-text-color); - --calcite-filter-input-button-border-color: var(--calcite-list-filter-input-button-border-color); + @apply sr-only; } @include base-component();