@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
228 lines (204 loc) • 9.7 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{ErrorContainerSnackbarDefinition as s,ErrorSnackbarDefinition as c,InverseSurfaceSnackbarDefinition as l,PrimaryContainerSnackbarDefinition as u,PrimarySnackbarDefinition as d,SecondaryContainerSnackbarDefinition as f,SecondarySnackbarDefinition as p,SnackbarDefinition as m,SurfaceSnackbarDefinition as h,TertiaryContainerSnackbarDefinition as g,TertiarySnackbarDefinition as _}from"../../component-definitions/snackbar.definition.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const v=r(m,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),y=n(v,!0).join(``),b=r(h,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),x=t(n(b,!0).join(``)),S=r(l,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),C=t(n(S,!0).join(``)),w=r(d,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),T=t(n(w,!0).join(``)),E=r(p,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),D=t(n(E,!0).join(``)),O=r(_,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),k=t(n(O,!0).join(``)),A=r(c,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),j=t(n(A,!0).join(``)),M=r(u,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),N=t(n(M,!0).join(``)),P=r(f,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),F=t(n(P,!0).join(``)),I=r(g,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),L=t(n(I,!0).join(``)),R=r(s,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-snackbar`}),z=t(n(R,!0).join(``)),B=t(i.EmphasizedDecelerate.ToCSSValue()),V=t(i.EmphasizedAccelerate.ToCSSValue()),H=o(a(`--mdc-icon`,{"enabled-size":`var(--_icon-size)`})),U=[e`
@layer mdc.snackbar.variable {
:host { ${t(y)}; }
}
@layer mdc.snackbar.base {
:host {
display: block;
position: relative;
}
:host(:not([open])) {
visibility: hidden;
}
.container {
display: flex;
align-items: center;
min-height: var(--_container-min-height);
padding-block: var(--_container-padding-block);
padding-inline: var(--_container-padding-inline);
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);
color: var(--_enabled-label-color);
box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
gap: var(--_container-gap);
pointer-events: auto;
will-change: transform, opacity;
box-sizing: border-box;
position: relative;
}
.container .background {
border-radius: inherit;
inset: 0;
position: absolute;
z-index: -1;
background-color: var(--_enabled-container-color);
}
}
@layer mdc.snackbar.base.label {
.label {
flex: 1;
font-family: var(--_label-font);
font-size: var(--_label-size);
font-weight: var(--_label-weight);
letter-spacing: var(--_label-tracking);
line-height: var(--_label-line-height);
color: var(--_enabled-label-color);
padding-inline: var(--_label-padding-inline);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.container.multiline .label {
white-space: normal;
}
}
@layer mdc.snackbar.base.icon {
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--_enabled-icon-color);
${t(H)};
}
.container:not(.has-icon) .icon {
display: none;
}
}
@layer mdc.snackbar.base.action {
.action {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: var(--_action-padding-block) var(--_action-padding-inline);
border: none;
background: transparent;
color: var(--_enabled-action-text-color);
font-family: var(--_action-font);
font-size: var(--_action-size);
font-weight: var(--_action-weight);
letter-spacing: var(--_action-tracking);
line-height: var(--_action-line-height);
cursor: pointer;
border-start-start-radius: var(--_action-container-shape-start-start);
border-start-end-radius: var(--_action-container-shape-start-end);
border-end-start-radius: var(--_action-container-shape-end-start);
border-end-end-radius: var(--_action-container-shape-end-end);
outline: none;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
position: relative;
}
.container:not(.has-action) .action {
display: none;
}
.action::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background-color: var(--_hovered-action-state-layer-color);
opacity: 0;
transition: opacity 200ms;
}
.action:hover::before {
opacity: var(--_hovered-action-state-layer-opacity);
}
.action:focus-visible::before {
opacity: var(--_focused-action-state-layer-opacity);
}
.action:active::before {
opacity: var(--_pressed-action-state-layer-opacity);
}
}
@layer mdc.snackbar.base.close-icon {
.close-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--_close-icon-size);
height: var(--_close-icon-size);
padding: var(--_close-icon-padding);
box-sizing: border-box;
border: none;
background: transparent;
color: var(--_enabled-close-icon-color);
cursor: pointer;
border-start-start-radius: var(--_close-icon-shape-start-start);
border-start-end-radius: var(--_close-icon-shape-start-end);
border-end-start-radius: var(--_close-icon-shape-end-start);
border-end-end-radius: var(--_close-icon-shape-end-end);
outline: none;
-webkit-tap-highlight-color: transparent;
}
.container:not(.has-close-icon) .close-icon {
display: none;
}
.close-icon:hover {
background-color: rgba(255, 255, 255, 0.08);
}
}
@layer mdc.snackbar.animation {
/* Fade animation (default) */
:host([animation-mode="fade"]:not([open])) .container {
opacity: 0;
transform: scale(0.8);
}
:host([animation-mode="fade"][open]) .container {
opacity: 1;
transform: scale(1);
transition: transform 250ms ${B},
opacity 150ms ${B};
}
:host([animation-mode="fade"].closing) .container {
opacity: 0;
transform: scale(0.8);
transition: transform 150ms ${V},
opacity 150ms ${V};
}
/* Slide animation */
:host([animation-mode="slide"]:not([open])) .container {
transform: translateY(100%);
opacity: 0;
}
:host([animation-mode="slide"][open]) .container {
transform: translateY(0);
opacity: 1;
transition: transform 250ms ${B},
opacity 150ms ${B};
}
:host([animation-mode="slide"].closing) .container {
transform: translateY(100%);
opacity: 0;
transition: transform 150ms ${V},
opacity 150ms ${V};
}
}
@media (forced-colors: active) {
.container {
border: 1px solid CanvasText;
}
}
`,e`
:host:has(.container.variant-surface) {${x};}
:host:has(.container.variant-inverse-surface) {${C};}
:host:has(.container.variant-primary) {${T};}
:host:has(.container.variant-secondary) {${D};}
:host:has(.container.variant-tertiary) {${k};}
:host:has(.container.variant-error) {${j};}
:host:has(.container.variant-primary-container) {${N};}
:host:has(.container.variant-secondary-container) {${F};}
:host:has(.container.variant-tertiary-container) {${L};}
:host:has(.container.variant-error-container) {${z};}
`];export{U as SnackbarStyles};
//# sourceMappingURL=snackbar.style.js.map