@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
244 lines (222 loc) • 9.05 kB
JavaScript
import{css as e,unsafeCSS as t}from"../../../node_modules/@lit/reactive-element/css-tag.js";import"../../../node_modules/lit/index.js";import{defineVars as n}from"../../../node_modules/@sandlada/jss/dist/define-vars.js";import{defineTokenRefsRecord as r}from"../../../node_modules/@sandlada/jss/dist/define-token-refs.js";import{Easing as i}from"../../../node_modules/@sandlada/mdk/build/domain/easing.js";import"../../../node_modules/@sandlada/mdk/build/index.js";import{overrideComponentTokens as a}from"../../../utils/tokens/override-component-tokens.js";import{stringTokens as o}from"../../../utils/tokens/string-tokens.js";import"../../../utils/tokens/index.js";import{ListItemDefinition as s}from"../../../component-definitions/list.definition.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const c=n(r(s,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-list-item`}),!0).join(``),l=t(i.Emphasized.ToCSSValue()),u=o(a(`--mdc-ripple`,{"enabled-hovered-color":`var(--_hovered-state-layer-color)`,"enabled-focused-color":`var(--_focused-state-layer-color)`,"enabled-pressed-color":`var(--_pressed-state-layer-color)`,"enabled-hovered-opacity":`var(--_hovered-state-layer-opacity)`,"enabled-focused-opacity":`var(--_focused-state-layer-opacity)`,"enabled-pressed-opacity":`var(--_pressed-state-layer-opacity)`})),d=o(a(`--mdc-icon`,{"enabled-size":`var(--_leading-icon-size)`})),f=e`
@layer mdc.list-item.variable {
:host { ${t(c)}; }
}
@layer mdc.list-item.base {
:host {
display: block;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.container {
all: unset;
position: relative;
box-sizing: border-box;
display: flex;
align-items: stretch;
width: 100%;
min-height: var(--_one-line-container-height);
padding-inline-start: var(--_enabled-container-inline-leading-padding-space);
padding-inline-end: var(--_enabled-container-inline-trailing-padding-space);
border-start-start-radius: var(--_container-shape-start-start);
border-start-end-radius: var(--_container-shape-start-end);
border-end-start-radius: var(--_container-shape-end-start);
border-end-end-radius: var(--_container-shape-end-end);
background-color: var(--_enabled-container-color);
color: var(--_enabled-label-color);
text-align: start;
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 200ms ${l};
}
.container.one-line {
min-height: var(--_one-line-container-height);
}
.container.two-line {
min-height: var(--_two-line-container-height);
}
.container.three-line {
min-height: var(--_three-line-container-height);
}
.container:hover {
background-color: var(--_hovered-container-color);
}
.container:focus-visible {
background-color: var(--_focused-container-color);
}
.container:active {
background-color: var(--_pressed-container-color);
}
.container.disabled {
cursor: default;
pointer-events: none;
background-color: var(--_disabled-container-color);
color: var(--_disabled-label-color);
opacity: var(--_disabled-label-opacity);
}
}
@layer mdc.list-item.base.layout {
.item {
position: relative;
z-index: 1;
display: flex;
align-items: center;
flex: 1;
min-width: 0;
gap: 16px;
}
.leading {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 0;
color: var(--_enabled-leading-icon-color);
${t(d)};
}
::slotted([slot='start']),
::slotted([slot='control']) {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-self: stretch;
flex: 1;
min-width: 0;
}
.end {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 0;
color: var(--_enabled-trailing-icon-color);
}
.touch-target {
position: absolute;
top: 50%;
left: 50%;
height: var(--_min-touch-target-size);
width: 100%;
transform: translate(-50%, -50%);
pointer-events: none;
}
}
@layer mdc.list-item.base.label {
.headline,
.overline,
.supporting-text,
.trailing-supporting-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.headline {
display: block;
font-family: var(--_enabled-label-font);
font-size: var(--_enabled-label-size);
font-weight: var(--_enabled-label-weight);
letter-spacing: var(--_enabled-label-tracking);
line-height: var(--_enabled-label-line-height);
color: var(--_enabled-label-color);
}
.overline {
font-family: var(--_enabled-overline-font);
font-size: var(--_enabled-overline-size);
font-weight: var(--_enabled-overline-weight);
letter-spacing: var(--_enabled-overline-tracking);
line-height: var(--_enabled-overline-line-height);
color: var(--_enabled-overline-color);
}
.supporting-text {
font-family: var(--_enabled-supporting-text-font);
font-size: var(--_enabled-supporting-text-size);
font-weight: var(--_enabled-supporting-text-weight);
letter-spacing: var(--_enabled-supporting-text-tracking);
line-height: var(--_enabled-supporting-text-line-height);
color: var(--_enabled-supporting-text-color);
}
.trailing-supporting-text {
font-family: var(--_enabled-trailing-supporting-text-font);
font-size: var(--_enabled-trailing-supporting-text-size);
font-weight: var(--_enabled-trailing-supporting-text-weight);
letter-spacing: var(--_enabled-trailing-supporting-text-tracking);
line-height: var(--_enabled-trailing-supporting-text-line-height);
color: var(--_enabled-trailing-supporting-text-color);
}
}
@layer mdc.list-item.composite.ripple {
.container mdc-ripple {
border-radius: inherit;
z-index: 0;
${t(u)};
}
}
@layer mdc.list-item.composite.focus-ring {
.container mdc-focus-ring {
border-radius: inherit;
z-index: 1;
}
}
@layer mdc.list-item.composite.selected {
.container.selected {
background-color: var(--_enabled-container-color-selected);
color: var(--_enabled-label-color-selected);
}
.container.selected:hover {
background-color: var(--_hovered-container-color-selected);
}
.container.selected:focus-visible {
background-color: var(--_focused-container-color-selected);
}
.container.selected:active {
background-color: var(--_pressed-container-color-selected);
}
.container.selected .headline {
color: var(--_enabled-label-color-selected);
}
.container.selected .overline {
color: var(--_enabled-overline-color-selected);
}
.container.selected .supporting-text {
color: var(--_enabled-supporting-text-color-selected);
}
.container.selected .trailing-supporting-text {
color: var(--_enabled-trailing-supporting-text-color-selected);
}
.container.selected .leading {
color: var(--_enabled-leading-icon-color-selected);
}
.container.selected .end {
color: var(--_enabled-trailing-icon-color-selected);
}
}
@media (prefers-reduced-motion: reduce) {
.container {
transition: none;
}
}
@media (forced-colors: active) {
.container.selected {
background-color: Highlight;
color: HighlightText;
}
.container.disabled {
opacity: 1;
color: GrayText;
}
}
`;export{f as ListItemStyles};
//# sourceMappingURL=list-item.style.js.map