@simai-studio/ui 5.20261020.2008 → 5.20261020.2238

package/distr/component/modal/css/modal.min.css

@@ -1 +1 @@
-@layer sf.components{.sf-modal-focus-guard{position:fixed;width:0;inline-size:0;height:0;block-size:0;overflow:hidden;pointer-events:none}[data-sf-overlay-container]{contain:layout}.sf-modal{--sf-modal-overlay-background: var(--sf-black, #000);--sf-modal-overlay-opacity: var(--sf-opacity-60, 0.6);--sf-modal-iframe-min-height: var(--sf-g2)}.sf-modal[data-sf-modal-position=left],.sf-modal[data-sf-modal-position=right],.sf-modal[data-sf-modal-position=inline-start],.sf-modal[data-sf-modal-position=inline-end]{align-items:stretch;padding:0}.sf-modal[data-sf-modal-position=left]{justify-content:flex-start}.sf-modal[data-sf-modal-position=right]{justify-content:flex-end}.sf-modal[data-sf-modal-position=inline-start]{justify-content:flex-start}.sf-modal[data-sf-modal-position=inline-end]{justify-content:flex-end}.sf-modal[data-sf-modal-position=top],.sf-modal[data-sf-modal-position=bottom]{justify-content:stretch;padding:0}.sf-modal[data-sf-modal-position=top]{align-items:flex-start}.sf-modal[data-sf-modal-position=bottom]{align-items:flex-end}.sf-modal[data-sf-modal-position=left] [data-sf-modal-panel],.sf-modal[data-sf-modal-position=right] [data-sf-modal-panel],.sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-panel],.sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-panel]{display:flex;max-width:min(100%,auto);max-width:min(100%,var(--sf-modal-drawer-width, auto));min-height:100%;width:auto;width:var(--sf-modal-drawer-width, auto)}.sf-modal[data-sf-modal-position=top] [data-sf-modal-panel],.sf-modal[data-sf-modal-position=bottom] [data-sf-modal-panel]{display:flex;max-height:min(100%,100vh);max-height:min(100%,var(--sf-modal-drawer-height, 100vh));min-width:100%}.sf-modal[data-sf-modal-position=left] [data-sf-modal-surface],.sf-modal[data-sf-modal-position=right] [data-sf-modal-surface],.sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-surface],.sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-surface],.sf-modal[data-sf-modal-position=top] [data-sf-modal-surface],.sf-modal[data-sf-modal-position=bottom] [data-sf-modal-surface]{flex:1}.sf-modal-header{--sf-modal-header-gap: var(--sf-space-1);gap:var(--sf-modal-header-gap)}.sf-modal-surface{--sf-modal-surface-bg: var(--sf-modal-background-color, var(--sf-surface-1, #fff));--sf-modal-surface-border-color: var(--sf-modal-border-color, var(--sf-outline-variant, transparent));--sf-modal-surface-border-style: solid;--sf-modal-surface-border-width: var(--sf-modal-border-width, var(--sf-border-width, var(--sf-px)));--sf-modal-surface-gap: var(--sf-modal-gap, var(--sf-space-1));--sf-modal-surface-padding: var(--sf-modal-padding-block, var(--sf-space-2)) var(--sf-modal-padding-inline, var(--sf-space-2));--sf-modal-surface-radius: var(--sf-modal-radius, var(--sf-radius--surface));--sf-modal-surface-shadow: none;background-color:var(--sf-modal-surface-bg);border:var(--sf-modal-surface-border-width) var(--sf-modal-surface-border-style) var(--sf-modal-surface-border-color);border-radius:var(--sf-modal-surface-radius);box-shadow:var(--sf-modal-surface-shadow);gap:var(--sf-modal-surface-gap);min-width:0;padding:var(--sf-modal-surface-padding)}.sf-modal-surface--elevated{--sf-modal-surface-bg: var(--sf-modal-background-color, var(--sf-elevation-3--surface));--sf-on-surface-variant: var(--sf-on-elevation-3--variant);--sf-modal-surface-shadow: var(--sf-elevation-3--shadow)}.sf-modal [data-sf-modal-overlay]{background-color:var(--sf-modal-overlay-background);opacity:var(--sf-modal-overlay-opacity);transition:opacity var(--sf-duration-normal) var(--sf-animation)}.sf-modal[data-sf-modal-state=opening] [data-sf-modal-overlay]{opacity:0}.sf-modal[data-sf-modal-state=closing] [data-sf-modal-overlay]{opacity:0}.sf-modal[data-sf-modal-hidden=true]{pointer-events:none}.sf-modal[data-sf-modal-hidden=true] [data-sf-modal-overlay]{opacity:0;pointer-events:none}.sf-modal [data-sf-modal-panel]{opacity:0}.sf-modal.animate [data-sf-modal-panel]{transition:opacity var(--sf-duration-normal) var(--sf-animation),-webkit-transform var(--sf-duration-normal) var(--sf-animation);transition:transform var(--sf-duration-normal) var(--sf-animation),opacity var(--sf-duration-normal) var(--sf-animation);transition:transform var(--sf-duration-normal) var(--sf-animation),opacity var(--sf-duration-normal) var(--sf-animation),-webkit-transform var(--sf-duration-normal) var(--sf-animation);will-change:transform,opacity}.sf-modal[data-sf-modal-position=left] [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-position=right] [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-position=inline-start]:dir(rtl) [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-position=inline-end]:dir(rtl) [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-position=top] [data-sf-modal-panel]{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.sf-modal[data-sf-modal-position=bottom] [data-sf-modal-panel]{-webkit-transform:translateY(100%);transform:translateY(100%)}.sf-modal[data-sf-modal-position=center] [data-sf-modal-panel]{-webkit-transform:translateY(var(--sf-space-1\/2)) scale(0.98);transform:translateY(var(--sf-space-1\/2)) scale(0.98)}.sf-modal[data-sf-modal-state=opening] [data-sf-modal-panel]{opacity:0}.sf-modal[data-sf-modal-state=open] [data-sf-modal-panel]{opacity:1;-webkit-transform:translate(0, 0) scale(1);transform:translate(0, 0) scale(1)}.sf-modal[data-sf-modal-state=closing] [data-sf-modal-panel]{opacity:0}.sf-modal[data-sf-modal-state=inline] [data-sf-modal-panel]{opacity:1;-webkit-transform:translate(0, 0) scale(1);transform:translate(0, 0) scale(1)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=left] [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=right] [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-start] [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-end] [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-start]:dir(rtl) [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-end]:dir(rtl) [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=top] [data-sf-modal-panel]{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=bottom] [data-sf-modal-panel]{-webkit-transform:translateY(100%);transform:translateY(100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=center] [data-sf-modal-panel]{-webkit-transform:translateY(var(--sf-space-1\/2)) scale(0.98);transform:translateY(var(--sf-space-1\/2)) scale(0.98)}.sf-modal[data-sf-modal-state][data-sf-modal-hidden=true] [data-sf-modal-panel]{opacity:0;pointer-events:none;-webkit-transform:translateY(var(--sf-space-1\/2)) scale(0.98);transform:translateY(var(--sf-space-1\/2)) scale(0.98)}.sf-modal [data-sf-modal-panel][data-sf-modal-has-width]{max-width:min(100%,var(--sf-modal-width));width:var(--sf-modal-width)}.sf-modal [data-sf-modal-panel][data-sf-modal-has-height]{display:flex;height:var(--sf-modal-height);max-height:min(100%,var(--sf-modal-height))}.sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-surface]{flex:1;min-height:0}.sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body],.sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body-viewport]{flex:1;min-height:0}.sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body-scroll]{flex:1;max-height:none}.sf-modal[data-sf-modal-fullscreen=true]{align-items:stretch;justify-content:stretch;padding:0}.sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-panel]{display:flex;height:100%;max-height:100%;max-width:100%;width:100%}.sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-surface]{border-radius:0;flex:1;min-height:0}.sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body],.sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body-viewport]{flex:1;min-height:0}.sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body-scroll]{flex:1;max-height:none}@media(prefers-reduced-motion: reduce){.sf-modal.animate [data-sf-modal-panel],.sf-modal [data-sf-modal-overlay]{transition:none;will-change:auto}}}@layer sf.components{.sf-modal-loading .sf-modal-spinner{--sf-loader-svg-width: var(--sf-text-height-3);--sf-loader-svg-height: var(--sf-text-height-3);display:inline-flex;flex:none;width:var(--sf-text-height-3);inline-size:var(--sf-text-height-3);height:var(--sf-text-height-3);block-size:var(--sf-text-height-3);color:currentColor;color:var(--sf-loader--color, currentColor)}.sf-modal-loading .sf-modal-spinner .sf-loader--loading-indicator{display:block;width:100%;inline-size:100%;height:100%;block-size:100%}.sf-modal-loading .sf-modal-spinner .sf-loader-svg{display:block;width:100%;inline-size:100%;height:100%;block-size:100%}}@layer sf.components{.sf-modal-header-content{flex:1 1 auto;min-width:0;word-wrap:anywhere}.sf-modal-header-action{align-items:center;display:flex;flex:0 0 auto;justify-content:center;min-height:var(--sf-ui-1\/3--control-height);min-block-size:var(--sf-ui-1\/3--control-height);min-width:var(--sf-ui-1\/3--control-height);min-inline-size:var(--sf-ui-1\/3--control-height)}.sf-modal-close-button{--sf-modal-close-right: var(--sf-space-1\/3);--sf-modal-close-top: var(--sf-space-1\/3);right:var(--sf-modal-close-right);top:var(--sf-modal-close-top);left:var(--sf-modal-close-left);bottom:var(--sf-modal-close-bottom)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-modal-close-button--inline-end{right:var(--sf-modal-close-right);right:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-modal-close-button--inline-end{right:var(--sf-modal-close-right);right:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}}.sf-modal-close-button--inline-end:where(:dir(ltr)){right:var(--sf-modal-close-right);right:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}_:-ms-input-placeholder, [dir="rtl"] .sf-modal-close-button--inline-end{left:var(--sf-modal-close-right);left:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-modal-close-button--inline-end{left:var(--sf-modal-close-right);left:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}}.sf-modal-close-button--inline-end:where(:dir(rtl)){left:var(--sf-modal-close-right);left:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}.sf-modal-close-button--inline-end{left:auto;right:auto;inset-inline-end:var(--sf-modal-close-right);inset-inline-end:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}.sf-modal-hide-button{--sf-modal-hide-right: var(--sf-space-2);--sf-modal-hide-top: var(--sf-space-1\/3);right:var(--sf-modal-hide-right);top:var(--sf-modal-hide-top);left:var(--sf-modal-hide-left);bottom:var(--sf-modal-hide-bottom)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-modal-hide-button--inline-end{right:var(--sf-modal-hide-right);right:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-modal-hide-button--inline-end{right:var(--sf-modal-hide-right);right:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}}.sf-modal-hide-button--inline-end:where(:dir(ltr)){right:var(--sf-modal-hide-right);right:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}_:-ms-input-placeholder, [dir="rtl"] .sf-modal-hide-button--inline-end{left:var(--sf-modal-hide-right);left:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-modal-hide-button--inline-end{left:var(--sf-modal-hide-right);left:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}}.sf-modal-hide-button--inline-end:where(:dir(rtl)){left:var(--sf-modal-hide-right);left:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}.sf-modal-hide-button--inline-end{left:auto;right:auto;inset-inline-end:var(--sf-modal-hide-right);inset-inline-end:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}.sf-modal-hide-icon{background-color:currentColor;display:block;height:2px;height:var(--sf-border-width-2, 2px);width:var(--sf-space-1)}}
+@layer sf.components{.sf-modal-focus-guard{position:fixed;width:0;inline-size:0;height:0;block-size:0;overflow:hidden;pointer-events:none}[data-sf-overlay-container]{contain:layout}.sf-modal{--sf-modal-overlay-background: var(--sf-black, #000);--sf-modal-overlay-opacity: var(--sf-opacity-60, 0.6);--sf-modal-iframe-min-height: var(--sf-g2)}.sf-modal[data-sf-modal-position=left],.sf-modal[data-sf-modal-position=right],.sf-modal[data-sf-modal-position=inline-start],.sf-modal[data-sf-modal-position=inline-end]{align-items:stretch;padding:0}.sf-modal[data-sf-modal-position=left]{justify-content:flex-start}.sf-modal[data-sf-modal-position=right]{justify-content:flex-end}.sf-modal[data-sf-modal-position=inline-start]{justify-content:flex-start}.sf-modal[data-sf-modal-position=inline-end]{justify-content:flex-end}.sf-modal[data-sf-modal-position=top],.sf-modal[data-sf-modal-position=bottom]{justify-content:stretch;padding:0}.sf-modal[data-sf-modal-position=top]{align-items:flex-start}.sf-modal[data-sf-modal-position=bottom]{align-items:flex-end}.sf-modal[data-sf-modal-position=left] [data-sf-modal-panel],.sf-modal[data-sf-modal-position=right] [data-sf-modal-panel],.sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-panel],.sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-panel]{display:flex;max-width:min(100%,auto);max-width:min(100%,var(--sf-modal-drawer-width, auto));min-height:100%;width:auto;width:var(--sf-modal-drawer-width, auto)}.sf-modal[data-sf-modal-position=top] [data-sf-modal-panel],.sf-modal[data-sf-modal-position=bottom] [data-sf-modal-panel]{display:flex;max-height:min(100%,100vh);max-height:min(100%,var(--sf-modal-drawer-height, 100vh));min-width:100%}.sf-modal[data-sf-modal-position=left] [data-sf-modal-surface],.sf-modal[data-sf-modal-position=right] [data-sf-modal-surface],.sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-surface],.sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-surface],.sf-modal[data-sf-modal-position=top] [data-sf-modal-surface],.sf-modal[data-sf-modal-position=bottom] [data-sf-modal-surface]{flex:1}.sf-modal-header{--sf-modal-header-gap: var(--sf-space-1);gap:var(--sf-modal-header-gap)}.sf-modal-surface{--sf-modal-surface-bg: var(--sf-modal-background-color, var(--sf-surface-1, #fff));--sf-modal-surface-border-color: var(--sf-modal-border-color, var(--sf-outline-variant, transparent));--sf-modal-surface-border-style: solid;--sf-modal-surface-border-width: var(--sf-modal-border-width, var(--sf-border-width, var(--sf-px)));--sf-modal-surface-gap: var(--sf-modal-gap, var(--sf-space-1));--sf-modal-surface-padding: var(--sf-modal-padding-block, var(--sf-space-2)) var(--sf-modal-padding-inline, var(--sf-space-2));--sf-modal-surface-radius: var(--sf-modal-radius, var(--sf-radius--surface));--sf-modal-surface-shadow: none;background-color:var(--sf-modal-surface-bg);--sf-badge--surface: var(--sf-modal-surface-bg);border:var(--sf-modal-surface-border-width) var(--sf-modal-surface-border-style) var(--sf-modal-surface-border-color);border-radius:var(--sf-modal-surface-radius);box-shadow:var(--sf-modal-surface-shadow);gap:var(--sf-modal-surface-gap);min-width:0;padding:var(--sf-modal-surface-padding)}.sf-modal-surface--elevated{--sf-modal-surface-bg: var(--sf-modal-background-color, var(--sf-elevation-3--surface));--sf-on-surface-variant: var(--sf-on-elevation-3--variant);--sf-modal-surface-shadow: var(--sf-elevation-3--shadow)}.sf-modal [data-sf-modal-overlay]{background-color:var(--sf-modal-overlay-background);opacity:var(--sf-modal-overlay-opacity);transition:opacity var(--sf-duration-normal) var(--sf-animation)}.sf-modal[data-sf-modal-state=opening] [data-sf-modal-overlay]{opacity:0}.sf-modal[data-sf-modal-state=closing] [data-sf-modal-overlay]{opacity:0}.sf-modal[data-sf-modal-hidden=true]{pointer-events:none}.sf-modal[data-sf-modal-hidden=true] [data-sf-modal-overlay]{opacity:0;pointer-events:none}.sf-modal [data-sf-modal-panel]{opacity:0}.sf-modal.animate [data-sf-modal-panel]{transition:opacity var(--sf-duration-normal) var(--sf-animation),-webkit-transform var(--sf-duration-normal) var(--sf-animation);transition:transform var(--sf-duration-normal) var(--sf-animation),opacity var(--sf-duration-normal) var(--sf-animation);transition:transform var(--sf-duration-normal) var(--sf-animation),opacity var(--sf-duration-normal) var(--sf-animation),-webkit-transform var(--sf-duration-normal) var(--sf-animation);will-change:transform,opacity}.sf-modal[data-sf-modal-position=left] [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-position=right] [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-position=inline-start]:dir(rtl) [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-position=inline-end]:dir(rtl) [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-position=top] [data-sf-modal-panel]{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.sf-modal[data-sf-modal-position=bottom] [data-sf-modal-panel]{-webkit-transform:translateY(100%);transform:translateY(100%)}.sf-modal[data-sf-modal-position=center] [data-sf-modal-panel]{-webkit-transform:translateY(var(--sf-space-1\/2)) scale(0.98);transform:translateY(var(--sf-space-1\/2)) scale(0.98)}.sf-modal[data-sf-modal-state=opening] [data-sf-modal-panel]{opacity:0}.sf-modal[data-sf-modal-state=open] [data-sf-modal-panel]{opacity:1;-webkit-transform:translate(0, 0) scale(1);transform:translate(0, 0) scale(1)}.sf-modal[data-sf-modal-state=closing] [data-sf-modal-panel]{opacity:0}.sf-modal[data-sf-modal-state=inline] [data-sf-modal-panel]{opacity:1;-webkit-transform:translate(0, 0) scale(1);transform:translate(0, 0) scale(1)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=left] [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=right] [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-start] [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-end] [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-start]:dir(rtl) [data-sf-modal-panel]{-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-end]:dir(rtl) [data-sf-modal-panel]{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=top] [data-sf-modal-panel]{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=bottom] [data-sf-modal-panel]{-webkit-transform:translateY(100%);transform:translateY(100%)}.sf-modal[data-sf-modal-state=closing][data-sf-modal-position=center] [data-sf-modal-panel]{-webkit-transform:translateY(var(--sf-space-1\/2)) scale(0.98);transform:translateY(var(--sf-space-1\/2)) scale(0.98)}.sf-modal[data-sf-modal-state][data-sf-modal-hidden=true] [data-sf-modal-panel]{opacity:0;pointer-events:none;-webkit-transform:translateY(var(--sf-space-1\/2)) scale(0.98);transform:translateY(var(--sf-space-1\/2)) scale(0.98)}.sf-modal [data-sf-modal-panel][data-sf-modal-has-width]{max-width:min(100%,var(--sf-modal-width));width:var(--sf-modal-width)}.sf-modal [data-sf-modal-panel][data-sf-modal-has-height]{display:flex;height:var(--sf-modal-height);max-height:min(100%,var(--sf-modal-height))}.sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-surface]{flex:1;min-height:0}.sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body],.sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body-viewport]{flex:1;min-height:0}.sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body-scroll]{flex:1;max-height:none}.sf-modal[data-sf-modal-fullscreen=true]{align-items:stretch;justify-content:stretch;padding:0}.sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-panel]{display:flex;height:100%;max-height:100%;max-width:100%;width:100%}.sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-surface]{border-radius:0;flex:1;min-height:0}.sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body],.sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body-viewport]{flex:1;min-height:0}.sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body-scroll]{flex:1;max-height:none}@media(prefers-reduced-motion: reduce){.sf-modal.animate [data-sf-modal-panel],.sf-modal [data-sf-modal-overlay]{transition:none;will-change:auto}}}@layer sf.components{.sf-modal-loading .sf-modal-spinner{--sf-loader-svg-width: var(--sf-text-height-3);--sf-loader-svg-height: var(--sf-text-height-3);display:inline-flex;flex:none;width:var(--sf-text-height-3);inline-size:var(--sf-text-height-3);height:var(--sf-text-height-3);block-size:var(--sf-text-height-3);color:currentColor;color:var(--sf-loader--color, currentColor)}.sf-modal-loading .sf-modal-spinner .sf-loader--loading-indicator{display:block;width:100%;inline-size:100%;height:100%;block-size:100%}.sf-modal-loading .sf-modal-spinner .sf-loader-svg{display:block;width:100%;inline-size:100%;height:100%;block-size:100%}}@layer sf.components{.sf-modal-header-content{flex:1 1 auto;min-width:0;word-wrap:anywhere}.sf-modal-header-action{align-items:center;display:flex;flex:0 0 auto;justify-content:center;min-height:var(--sf-ui-1\/3--control-height);min-block-size:var(--sf-ui-1\/3--control-height);min-width:var(--sf-ui-1\/3--control-height);min-inline-size:var(--sf-ui-1\/3--control-height)}.sf-modal-close-button{--sf-modal-close-right: var(--sf-space-1\/3);--sf-modal-close-top: var(--sf-space-1\/3);right:var(--sf-modal-close-right);top:var(--sf-modal-close-top);left:var(--sf-modal-close-left);bottom:var(--sf-modal-close-bottom)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-modal-close-button--inline-end{right:var(--sf-modal-close-right);right:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-modal-close-button--inline-end{right:var(--sf-modal-close-right);right:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}}.sf-modal-close-button--inline-end:where(:dir(ltr)){right:var(--sf-modal-close-right);right:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}_:-ms-input-placeholder, [dir="rtl"] .sf-modal-close-button--inline-end{left:var(--sf-modal-close-right);left:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-modal-close-button--inline-end{left:var(--sf-modal-close-right);left:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}}.sf-modal-close-button--inline-end:where(:dir(rtl)){left:var(--sf-modal-close-right);left:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}.sf-modal-close-button--inline-end{left:auto;right:auto;inset-inline-end:var(--sf-modal-close-right);inset-inline-end:var(--sf-modal-close-inline-end, var(--sf-modal-close-right))}.sf-modal-hide-button{--sf-modal-hide-right: var(--sf-space-2);--sf-modal-hide-top: var(--sf-space-1\/3);right:var(--sf-modal-hide-right);top:var(--sf-modal-hide-top);left:var(--sf-modal-hide-left);bottom:var(--sf-modal-hide-bottom)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-modal-hide-button--inline-end{right:var(--sf-modal-hide-right);right:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-modal-hide-button--inline-end{right:var(--sf-modal-hide-right);right:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}}.sf-modal-hide-button--inline-end:where(:dir(ltr)){right:var(--sf-modal-hide-right);right:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}_:-ms-input-placeholder, [dir="rtl"] .sf-modal-hide-button--inline-end{left:var(--sf-modal-hide-right);left:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-modal-hide-button--inline-end{left:var(--sf-modal-hide-right);left:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}}.sf-modal-hide-button--inline-end:where(:dir(rtl)){left:var(--sf-modal-hide-right);left:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}.sf-modal-hide-button--inline-end{left:auto;right:auto;inset-inline-end:var(--sf-modal-hide-right);inset-inline-end:var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right))}.sf-modal-hide-icon{background-color:currentColor;display:block;height:2px;height:var(--sf-border-width-2, 2px);width:var(--sf-space-1)}}

package/distr/component/toast/css/toast.min.css

@@ -1 +1 @@
-@layer sf.components{_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}@supports not (border-end-end-radius: initial){html:not([dir="rtl"]) .sf-toast{border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(ltr)){border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}@supports not (border-end-end-radius: initial){[dir="rtl"] .sf-toast{border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(rtl)){border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}@supports not (border-end-start-radius: initial){html:not([dir="rtl"]) .sf-toast{border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(ltr)){border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}@supports not (border-end-start-radius: initial){[dir="rtl"] .sf-toast{border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(rtl)){border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}@supports not (border-start-end-radius: initial){html:not([dir="rtl"]) .sf-toast{border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(ltr)){border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}@supports not (border-start-end-radius: initial){[dir="rtl"] .sf-toast{border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(rtl)){border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}@supports not (border-start-start-radius: initial){html:not([dir="rtl"]) .sf-toast{border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(ltr)){border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}@supports not (border-start-start-radius: initial){[dir="rtl"] .sf-toast{border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(rtl)){border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-toast{padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}}.sf-toast:where(:dir(ltr)){padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-toast{padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}}.sf-toast:where(:dir(rtl)){padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-toast{padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}}.sf-toast:where(:dir(ltr)){padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-toast{padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}}.sf-toast:where(:dir(rtl)){padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}.sf-toast{box-sizing:border-box;min-width:var(--sf-0);min-inline-size:var(--sf-0);max-width:100%;max-inline-size:100%;border:var(--sf-px) solid var(--sf-outline-variant);border:var(--sf-toast-border-width, var(--sf-px)) solid var(--sf-toast-border-color, var(--sf-toast--border-color, var(--sf-outline-variant)));border-end-end-radius:var(--sf-radius--surface);border-end-end-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)));border-end-start-radius:var(--sf-radius--surface);border-end-start-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)));border-start-end-radius:var(--sf-radius--surface);border-start-end-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)));border-start-start-radius:var(--sf-radius--surface);border-start-start-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)));gap:var(--sf-space-1\/2);gap:var(--sf-toast-gap, var(--sf-toast--gap, var(--sf-space-1\/2)));padding-bottom:var(--sf-space-1);padding-bottom:var(--sf-toast-padding-block, var(--sf-toast--padding-bottom, var(--sf-space-1)));-webkit-padding-end:var(--sf-space-1);padding-inline-end:var(--sf-space-1);-webkit-padding-end:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));padding-inline-end:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));-webkit-padding-start:var(--sf-space-1);padding-inline-start:var(--sf-space-1);-webkit-padding-start:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));padding-inline-start:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));padding-top:var(--sf-space-1);padding-top:var(--sf-toast-padding-block, var(--sf-toast--padding-top, var(--sf-space-1)));background-color:var(--sf-elevation-3--surface);--sf-on-surface-variant: var(--sf-on-elevation-3--variant);background-image:linear-gradient(var(--sf-toast--background-color), var(--sf-toast--background-color));box-shadow:var(--sf-elevation-3--shadow);color:var(--sf-on-surface);color:var(--sf-toast--content-color, var(--sf-on-surface));opacity:1;-webkit-transform:translateY(var(--sf-0));transform:translateY(var(--sf-0));transition:opacity var(--sf-duration-normal) var(--sf-ease-enter),-webkit-transform var(--sf-duration-normal) var(--sf-ease-enter);transition:opacity var(--sf-duration-normal) var(--sf-ease-enter),transform var(--sf-duration-normal) var(--sf-ease-enter);transition:opacity var(--sf-duration-normal) var(--sf-ease-enter),transform var(--sf-duration-normal) var(--sf-ease-enter),-webkit-transform var(--sf-duration-normal) var(--sf-ease-enter)}.sf-toast.closing{transition-timing-function:var(--sf-ease-exit);opacity:0;-webkit-transform:translateY(var(--sf-space-1\/2));transform:translateY(var(--sf-space-1\/2))}.sf-toast .sf-close-icon{background-color:var(--sf-close-icon--background-color);border-color:transparent;border-color:var(--sf-close-icon--border-color, transparent)}.sf-toast .sf-icon{--sf-icon--font-size: var(--sf-text-size-3);--sf-icon--height: var(--sf-text-size-3);--sf-icon--width: var(--sf-text-size-3);color:var(--sf-on-surface-variant);color:var(--sf-icon--color, var(--sf-on-surface-variant));font-size:var(--sf-icon--font-size);height:var(--sf-icon--height);width:var(--sf-icon--width)}.sf-toast .sf-toast-container{--sf-toast-container--background-color: transparent;--sf-toast-container--gap: var(--sf-space-1\/2);background-color:var(--sf-toast-container--background-color);gap:var(--sf-toast-container--gap);min-width:var(--sf-0);min-inline-size:var(--sf-0)}.sf-toast .sf-toast-bottom{--sf-toast-bottom--background-color: transparent;background-color:var(--sf-toast-bottom--background-color);flex-wrap:wrap;gap:var(--sf-b1)}.sf-toast .sf-toast-wrap{--sf-toast-wrap--background-color: transparent;--sf-toast-wrap--gap: var(--sf-space-1\/4);background-color:var(--sf-toast-wrap--background-color);gap:var(--sf-toast-wrap--gap)}.sf-toast .sf-toast-supporting-text{--sf-toast-supporting-text--font-family: var(--sf-text--family);--sf-toast-supporting-text--font-size: var(--sf-text-size-1);--sf-toast-supporting-text--font-weight: var(--sf-font-weight-regular);--sf-toast-supporting-text--line-height: var(--sf-text-height-1);color:var(--sf-toast-supporting-text--color);font-family:var(--sf-toast-supporting-text--font-family);font-size:var(--sf-toast-supporting-text--font-size);font-weight:var(--sf-toast-supporting-text--font-weight);line-height:var(--sf-toast-supporting-text--line-height);word-wrap:anywhere}.sf-toast .sf-toast-text{--sf-toast-text--font-family: var(--sf-text--family);--sf-toast-text--font-size: var(--sf-text-size-1);--sf-toast-text--font-weight: var(--sf-font-weight-medium);--sf-toast-text--line-height: var(--sf-text-height-1);color:var(--sf-toast-text--color);font-family:var(--sf-toast-text--font-family);font-size:var(--sf-toast-text--font-size);font-weight:var(--sf-toast-text--font-weight);line-height:var(--sf-toast-text--line-height);word-wrap:anywhere}.sf-toast.sf-toast--neutral .sf-icon{--sf-icon--color: var(--sf-on-surface)}.sf-toast.sf-toast--default .sf-icon{--sf-icon--color: var(--sf-on-surface)}.sf-toast.sf-toast--neutral .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-surface))}.sf-toast.sf-toast--default .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-surface))}.sf-toast.sf-toast--neutral .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-surface))}.sf-toast.sf-toast--default .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-surface))}.sf-toast.sf-toast--info .sf-icon{--sf-icon--color: var(--sf-on-primary-container-graphic)}.sf-toast.sf-toast--primary .sf-icon{--sf-icon--color: var(--sf-on-primary-container-graphic)}.sf-toast.sf-toast--info>.sf-icon-button.sf-icon-button--link>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-primary-container)}.sf-toast.sf-toast--primary>.sf-icon-button.sf-icon-button--link>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-primary-container)}.sf-toast.sf-toast--info .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-primary-container))}.sf-toast.sf-toast--primary .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-primary-container))}.sf-toast.sf-toast--info .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-primary-container))}.sf-toast.sf-toast--primary .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-primary-container))}.sf-toast.sf-toast--error .sf-icon{--sf-icon--color: var(--sf-on-error-container-graphic)}.sf-toast.sf-toast--error>.sf-icon-button.sf-icon-button--link>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-error-container)}.sf-toast.sf-toast--error .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-error-container))}.sf-toast.sf-toast--error .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-error-container))}.sf-toast.sf-toast--warning .sf-icon{--sf-icon--color: var(--sf-on-warning-container-graphic)}.sf-toast.sf-toast--warning>.sf-icon-button.sf-icon-button--link>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-warning-container)}.sf-toast.sf-toast--warning .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-warning-container))}.sf-toast.sf-toast--warning .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-warning-container))}.sf-toast.sf-toast--success .sf-icon{--sf-icon--color: var(--sf-on-success-container-graphic)}.sf-toast.sf-toast--success>.sf-icon-button.sf-icon-button--link>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-success-container)}.sf-toast.sf-toast--success .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-success-container))}.sf-toast.sf-toast--success .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-success-container))}.sf-toast--neutral{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-surface-container));--sf-on-surface-variant: var(--sf-on-surface-container--variant);--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-surface));--sf-close-icon--background-color: var(--sf-on-surface)}.sf-toast--default{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-surface-container));--sf-on-surface-variant: var(--sf-on-surface-container--variant);--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-surface));--sf-close-icon--background-color: var(--sf-on-surface)}.sf-toast--info{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-primary-container));--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-primary-container));--sf-close-icon--background-color: var(--sf-on-primary-container)}.sf-toast--primary{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-primary-container));--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-primary-container));--sf-close-icon--background-color: var(--sf-on-primary-container)}.sf-toast--error{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-error-container));--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-error-container));--sf-close-icon--background-color: var(--sf-on-error-container)}.sf-toast--warning{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-warning-container));--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-warning-container));--sf-close-icon--background-color: var(--sf-on-warning-container)}.sf-toast--success{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-success-container));--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-success-container));--sf-close-icon--background-color: var(--sf-on-success-container)}@media(prefers-reduced-motion: reduce){.sf-toast{transition:none}}@media(forced-colors: active){.sf-toast{border-color:CanvasText}}}@layer sf.components{.sf-notifications{position:fixed;top:auto;right:auto;bottom:auto;left:auto;inset:auto;margin:0;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;overflow:visible;display:flex;flex-direction:column;gap:var(--sf-space-1\/2);width:min(var(--sf-g4),100vw - 2*var(--sf-space-1));inline-size:min(var(--sf-g4),100vw - 2*var(--sf-space-1));max-height:calc(100vh - 2*var(--sf-space-1));max-block-size:calc(100vh - 2*var(--sf-space-1));pointer-events:none;z-index:var(--sf-z-index-9)}.sf-notifications:not(:popover-open)[popover]{display:none}.sf-notifications>*{pointer-events:auto}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-notifications[data-placement$=end]{right:var(--sf-space-1)}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-notifications[data-placement$=end]{right:var(--sf-space-1)}}.sf-notifications[data-placement$=end]:where(:dir(ltr)){right:var(--sf-space-1)}_:-ms-input-placeholder, [dir="rtl"] .sf-notifications[data-placement$=end]{left:var(--sf-space-1)}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-notifications[data-placement$=end]{left:var(--sf-space-1)}}.sf-notifications[data-placement$=end]:where(:dir(rtl)){left:var(--sf-space-1)}.sf-notifications[data-placement$=end]{inset-inline-end:var(--sf-space-1)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-notifications[data-placement$=start]{left:var(--sf-space-1)}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-notifications[data-placement$=start]{left:var(--sf-space-1)}}.sf-notifications[data-placement$=start]:where(:dir(ltr)){left:var(--sf-space-1)}_:-ms-input-placeholder, [dir="rtl"] .sf-notifications[data-placement$=start]{right:var(--sf-space-1)}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-notifications[data-placement$=start]{right:var(--sf-space-1)}}.sf-notifications[data-placement$=start]:where(:dir(rtl)){right:var(--sf-space-1)}.sf-notifications[data-placement$=start]{inset-inline-start:var(--sf-space-1)}.sf-notifications[data-placement^=top]{top:var(--sf-space-1);inset-block-start:var(--sf-space-1)}.sf-notifications[data-placement^=bottom]{bottom:var(--sf-space-1);inset-block-end:var(--sf-space-1)}.sf-notifications .sf-toast[data-count]{position:relative}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-notifications .sf-toast[data-count]::before{left:calc(-1*var(--sf-space-1\/4))}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-notifications .sf-toast[data-count]::before{left:calc(-1*var(--sf-space-1\/4))}}.sf-notifications .sf-toast[data-count]::before:where(:dir(ltr)){left:calc(-1*var(--sf-space-1\/4))}_:-ms-input-placeholder, [dir="rtl"] .sf-notifications .sf-toast[data-count]::before{right:calc(-1*var(--sf-space-1\/4))}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-notifications .sf-toast[data-count]::before{right:calc(-1*var(--sf-space-1\/4))}}.sf-notifications .sf-toast[data-count]::before:where(:dir(rtl)){right:calc(-1*var(--sf-space-1\/4))}.sf-notifications .sf-toast[data-count]::before{content:"×" attr(data-count);position:absolute;top:calc(-1*var(--sf-space-1\/4));inset-block-start:calc(-1*var(--sf-space-1\/4));inset-inline-start:calc(-1*var(--sf-space-1\/4));padding-left:var(--sf-space-1\/4);padding-right:var(--sf-space-1\/4);padding-inline:var(--sf-space-1\/4);border-radius:var(--sf-radius-circle);background-color:var(--sf-on-surface);color:var(--sf-surface-0);font-size:var(--sf-text-size-1\/3);line-height:var(--sf-text-height-1\/3)}}
+@layer sf.components{_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}@supports not (border-end-end-radius: initial){html:not([dir="rtl"]) .sf-toast{border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(ltr)){border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}@supports not (border-end-end-radius: initial){[dir="rtl"] .sf-toast{border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(rtl)){border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}@supports not (border-end-start-radius: initial){html:not([dir="rtl"]) .sf-toast{border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(ltr)){border-bottom-left-radius:var(--sf-radius--surface);border-bottom-left-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}@supports not (border-end-start-radius: initial){[dir="rtl"] .sf-toast{border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(rtl)){border-bottom-right-radius:var(--sf-radius--surface);border-bottom-right-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}@supports not (border-start-end-radius: initial){html:not([dir="rtl"]) .sf-toast{border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(ltr)){border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}@supports not (border-start-end-radius: initial){[dir="rtl"] .sf-toast{border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(rtl)){border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}@supports not (border-start-start-radius: initial){html:not([dir="rtl"]) .sf-toast{border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(ltr)){border-top-left-radius:var(--sf-radius--surface);border-top-left-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}@supports not (border-start-start-radius: initial){[dir="rtl"] .sf-toast{border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}}.sf-toast:where(:dir(rtl)){border-top-right-radius:var(--sf-radius--surface);border-top-right-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-toast{padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}}.sf-toast:where(:dir(ltr)){padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-toast{padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}}.sf-toast:where(:dir(rtl)){padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-toast{padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-toast{padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}}.sf-toast:where(:dir(ltr)){padding-left:var(--sf-space-1);padding-left:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}_:-ms-input-placeholder, [dir="rtl"] .sf-toast{padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-toast{padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}}.sf-toast:where(:dir(rtl)){padding-right:var(--sf-space-1);padding-right:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)))}.sf-toast{box-sizing:border-box;min-width:var(--sf-0);min-inline-size:var(--sf-0);max-width:100%;max-inline-size:100%;border:var(--sf-px) solid var(--sf-outline-variant);border:var(--sf-toast-border-width, var(--sf-px)) solid var(--sf-toast-border-color, var(--sf-toast--border-color, var(--sf-outline-variant)));border-end-end-radius:var(--sf-radius--surface);border-end-end-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-right-radius, var(--sf-radius--surface)));border-end-start-radius:var(--sf-radius--surface);border-end-start-radius:var(--sf-toast-radius, var(--sf-toast--border-bottom-left-radius, var(--sf-radius--surface)));border-start-end-radius:var(--sf-radius--surface);border-start-end-radius:var(--sf-toast-radius, var(--sf-toast--border-top-right-radius, var(--sf-radius--surface)));border-start-start-radius:var(--sf-radius--surface);border-start-start-radius:var(--sf-toast-radius, var(--sf-toast--border-top-left-radius, var(--sf-radius--surface)));gap:var(--sf-space-1\/2);gap:var(--sf-toast-gap, var(--sf-toast--gap, var(--sf-space-1\/2)));padding-bottom:var(--sf-space-1);padding-bottom:var(--sf-toast-padding-block, var(--sf-toast--padding-bottom, var(--sf-space-1)));-webkit-padding-end:var(--sf-space-1);padding-inline-end:var(--sf-space-1);-webkit-padding-end:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));padding-inline-end:var(--sf-toast-padding-inline, var(--sf-toast--padding-right, var(--sf-space-1)));-webkit-padding-start:var(--sf-space-1);padding-inline-start:var(--sf-space-1);-webkit-padding-start:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));padding-inline-start:var(--sf-toast-padding-inline, var(--sf-toast--padding-left, var(--sf-space-1)));padding-top:var(--sf-space-1);padding-top:var(--sf-toast-padding-block, var(--sf-toast--padding-top, var(--sf-space-1)));background-color:var(--sf-elevation-3--surface);--sf-on-surface-variant: var(--sf-on-elevation-3--variant);--sf-badge--surface: var(--sf-elevation-3--surface);background-image:linear-gradient(var(--sf-toast--background-color), var(--sf-toast--background-color));box-shadow:var(--sf-elevation-3--shadow);color:var(--sf-on-surface);color:var(--sf-toast--content-color, var(--sf-on-surface));opacity:1;-webkit-transform:translateY(var(--sf-0));transform:translateY(var(--sf-0));transition:opacity var(--sf-duration-normal) var(--sf-ease-enter),-webkit-transform var(--sf-duration-normal) var(--sf-ease-enter);transition:opacity var(--sf-duration-normal) var(--sf-ease-enter),transform var(--sf-duration-normal) var(--sf-ease-enter);transition:opacity var(--sf-duration-normal) var(--sf-ease-enter),transform var(--sf-duration-normal) var(--sf-ease-enter),-webkit-transform var(--sf-duration-normal) var(--sf-ease-enter)}.sf-toast.closing{transition-timing-function:var(--sf-ease-exit);opacity:0;-webkit-transform:translateY(var(--sf-space-1\/2));transform:translateY(var(--sf-space-1\/2))}.sf-toast .sf-close-icon{background-color:var(--sf-close-icon--background-color);border-color:transparent;border-color:var(--sf-close-icon--border-color, transparent)}.sf-toast .sf-icon{--sf-icon--font-size: var(--sf-text-size-3);--sf-icon--height: var(--sf-text-size-3);--sf-icon--width: var(--sf-text-size-3);color:var(--sf-on-surface-variant);color:var(--sf-icon--color, var(--sf-on-surface-variant));font-size:var(--sf-icon--font-size);height:var(--sf-icon--height);width:var(--sf-icon--width)}.sf-toast .sf-toast-container{--sf-toast-container--background-color: transparent;--sf-toast-container--gap: var(--sf-space-1\/2);background-color:var(--sf-toast-container--background-color);gap:var(--sf-toast-container--gap);min-width:var(--sf-0);min-inline-size:var(--sf-0)}.sf-toast .sf-toast-bottom{--sf-toast-bottom--background-color: transparent;background-color:var(--sf-toast-bottom--background-color);flex-wrap:wrap;gap:var(--sf-b1)}.sf-toast .sf-toast-wrap{--sf-toast-wrap--background-color: transparent;--sf-toast-wrap--gap: var(--sf-space-1\/4);background-color:var(--sf-toast-wrap--background-color);gap:var(--sf-toast-wrap--gap)}.sf-toast .sf-toast-supporting-text{--sf-toast-supporting-text--font-family: var(--sf-text--family);--sf-toast-supporting-text--font-size: var(--sf-text-size-1);--sf-toast-supporting-text--font-weight: var(--sf-font-weight-regular);--sf-toast-supporting-text--line-height: var(--sf-text-height-1);color:var(--sf-toast-supporting-text--color);font-family:var(--sf-toast-supporting-text--font-family);font-size:var(--sf-toast-supporting-text--font-size);font-weight:var(--sf-toast-supporting-text--font-weight);line-height:var(--sf-toast-supporting-text--line-height);word-wrap:anywhere}.sf-toast .sf-toast-text{--sf-toast-text--font-family: var(--sf-text--family);--sf-toast-text--font-size: var(--sf-text-size-1);--sf-toast-text--font-weight: var(--sf-font-weight-medium);--sf-toast-text--line-height: var(--sf-text-height-1);color:var(--sf-toast-text--color);font-family:var(--sf-toast-text--font-family);font-size:var(--sf-toast-text--font-size);font-weight:var(--sf-toast-text--font-weight);line-height:var(--sf-toast-text--line-height);word-wrap:anywhere}.sf-toast.sf-toast--neutral .sf-icon{--sf-icon--color: var(--sf-on-surface)}.sf-toast.sf-toast--default .sf-icon{--sf-icon--color: var(--sf-on-surface)}.sf-toast.sf-toast--neutral .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-surface))}.sf-toast.sf-toast--default .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-surface))}.sf-toast.sf-toast--neutral .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-surface))}.sf-toast.sf-toast--default .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-surface))}.sf-toast.sf-toast--info .sf-icon{--sf-icon--color: var(--sf-on-primary-container-graphic)}.sf-toast.sf-toast--primary .sf-icon{--sf-icon--color: var(--sf-on-primary-container-graphic)}.sf-toast.sf-toast--info>.sf-icon-button.sf-icon-button--link>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-primary-container)}.sf-toast.sf-toast--primary>.sf-icon-button.sf-icon-button--link>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-primary-container)}.sf-toast.sf-toast--info .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-primary-container))}.sf-toast.sf-toast--primary .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-primary-container))}.sf-toast.sf-toast--info .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-primary-container))}.sf-toast.sf-toast--primary .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-primary-container))}.sf-toast.sf-toast--error .sf-icon{--sf-icon--color: var(--sf-on-error-container-graphic)}.sf-toast.sf-toast--error>.sf-icon-button.sf-icon-button--link>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-error-container)}.sf-toast.sf-toast--error .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-error-container))}.sf-toast.sf-toast--error .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-error-container))}.sf-toast.sf-toast--warning .sf-icon{--sf-icon--color: var(--sf-on-warning-container-graphic)}.sf-toast.sf-toast--warning>.sf-icon-button.sf-icon-button--link>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-warning-container)}.sf-toast.sf-toast--warning .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-warning-container))}.sf-toast.sf-toast--warning .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-warning-container))}.sf-toast.sf-toast--success .sf-icon{--sf-icon--color: var(--sf-on-success-container-graphic)}.sf-toast.sf-toast--success>.sf-icon-button.sf-icon-button--link>.sf-close>.sf-close-icon{--sf-close-icon--background-color: var(--sf-on-success-container)}.sf-toast.sf-toast--success .sf-toast-supporting-text{--sf-toast-supporting-text--color: var(--sf-toast-color, var(--sf-on-success-container))}.sf-toast.sf-toast--success .sf-toast-text{--sf-toast-text--color: var(--sf-toast-color, var(--sf-on-success-container))}.sf-toast--neutral{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-surface-container));--sf-on-surface-variant: var(--sf-on-surface-container--variant);--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-surface));--sf-close-icon--background-color: var(--sf-on-surface)}.sf-toast--default{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-surface-container));--sf-on-surface-variant: var(--sf-on-surface-container--variant);--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-surface));--sf-close-icon--background-color: var(--sf-on-surface)}.sf-toast--info{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-primary-container));--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-primary-container));--sf-close-icon--background-color: var(--sf-on-primary-container)}.sf-toast--primary{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-primary-container));--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-primary-container));--sf-close-icon--background-color: var(--sf-on-primary-container)}.sf-toast--error{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-error-container));--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-error-container));--sf-close-icon--background-color: var(--sf-on-error-container)}.sf-toast--warning{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-warning-container));--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-warning-container));--sf-close-icon--background-color: var(--sf-on-warning-container)}.sf-toast--success{--sf-toast--background-color: var(--sf-toast-background-color, var(--sf-success-container));--sf-toast--content-color: var(--sf-toast-color, var(--sf-on-success-container));--sf-close-icon--background-color: var(--sf-on-success-container)}@media(prefers-reduced-motion: reduce){.sf-toast{transition:none}}@media(forced-colors: active){.sf-toast{border-color:CanvasText}}}@layer sf.components{.sf-notifications{position:fixed;top:auto;right:auto;bottom:auto;left:auto;inset:auto;margin:0;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;overflow:visible;display:flex;flex-direction:column;gap:var(--sf-space-1\/2);width:min(var(--sf-g4),100vw - 2*var(--sf-space-1));inline-size:min(var(--sf-g4),100vw - 2*var(--sf-space-1));max-height:calc(100vh - 2*var(--sf-space-1));max-block-size:calc(100vh - 2*var(--sf-space-1));pointer-events:none;z-index:var(--sf-z-index-9)}.sf-notifications:not(:popover-open)[popover]{display:none}.sf-notifications>*{pointer-events:auto}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-notifications[data-placement$=end]{right:var(--sf-space-1)}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-notifications[data-placement$=end]{right:var(--sf-space-1)}}.sf-notifications[data-placement$=end]:where(:dir(ltr)){right:var(--sf-space-1)}_:-ms-input-placeholder, [dir="rtl"] .sf-notifications[data-placement$=end]{left:var(--sf-space-1)}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-notifications[data-placement$=end]{left:var(--sf-space-1)}}.sf-notifications[data-placement$=end]:where(:dir(rtl)){left:var(--sf-space-1)}.sf-notifications[data-placement$=end]{inset-inline-end:var(--sf-space-1)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-notifications[data-placement$=start]{left:var(--sf-space-1)}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-notifications[data-placement$=start]{left:var(--sf-space-1)}}.sf-notifications[data-placement$=start]:where(:dir(ltr)){left:var(--sf-space-1)}_:-ms-input-placeholder, [dir="rtl"] .sf-notifications[data-placement$=start]{right:var(--sf-space-1)}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-notifications[data-placement$=start]{right:var(--sf-space-1)}}.sf-notifications[data-placement$=start]:where(:dir(rtl)){right:var(--sf-space-1)}.sf-notifications[data-placement$=start]{inset-inline-start:var(--sf-space-1)}.sf-notifications[data-placement^=top]{top:var(--sf-space-1);inset-block-start:var(--sf-space-1)}.sf-notifications[data-placement^=bottom]{bottom:var(--sf-space-1);inset-block-end:var(--sf-space-1)}.sf-notifications .sf-toast[data-count]{position:relative}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-notifications .sf-toast[data-count]::before{left:calc(-1*var(--sf-space-1\/4))}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-notifications .sf-toast[data-count]::before{left:calc(-1*var(--sf-space-1\/4))}}.sf-notifications .sf-toast[data-count]::before:where(:dir(ltr)){left:calc(-1*var(--sf-space-1\/4))}_:-ms-input-placeholder, [dir="rtl"] .sf-notifications .sf-toast[data-count]::before{right:calc(-1*var(--sf-space-1\/4))}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-notifications .sf-toast[data-count]::before{right:calc(-1*var(--sf-space-1\/4))}}.sf-notifications .sf-toast[data-count]::before:where(:dir(rtl)){right:calc(-1*var(--sf-space-1\/4))}.sf-notifications .sf-toast[data-count]::before{content:"×" attr(data-count);position:absolute;top:calc(-1*var(--sf-space-1\/4));inset-block-start:calc(-1*var(--sf-space-1\/4));inset-inline-start:calc(-1*var(--sf-space-1\/4));padding-left:var(--sf-space-1\/4);padding-right:var(--sf-space-1\/4);padding-inline:var(--sf-space-1\/4);border-radius:var(--sf-radius-circle);background-color:var(--sf-on-surface);color:var(--sf-surface-0);font-size:var(--sf-text-size-1\/3);line-height:var(--sf-text-height-1\/3)}}

package/distr/core/contracts/public-js-api.json

@@ -392,6 +392,18 @@
       "loaded_by": "component/admin-menu",
       "summary": "The AdminMenu component's script API, loaded with the component (component/admin-menu); its methods are the component's documentation."
     },
+    {
+      "name": "SF.AnchoredBadge",
+      "status": "public",
+      "kind": "object",
+      "loaded_by": "component/badges",
+      "summary": "The counts and dots of component/badges kept from markup (simai/ui-source#12): a .sf-badge with data-count or data-dot is drawn, capped, hidden at 0 and named by the runtime as soon as it is in the page. init(scope) takes a subtree at once, update(badge) one badge, state({count, dot, cap, label}, node) answers what a badge shows and says without touching the page.",
+      "members": [
+        "init",
+        "update",
+        "state"
+      ]
+    },
     {
       "name": "SF.Ajax",
       "status": "internal",

package/distr/core/contracts/public-variables.v1.json

@@ -86,6 +86,13 @@
           "summary": "Space between the icon and the text.",
           "default": "var(--sf-space-1/4)",
           "since": "2026-10-13"
+        },
+        {
+          "name": "--sf-badge-ring-color",
+          "role": "ring-color",
+          "summary": "The ring that separates a badge anchored on an avatar, an icon or an icon button from its anchor: the colour of the surface the anchor sits on. Framework surfaces (menus, lists, drawers, modals, toasts) say their own; set it where a page paints a surface of its own.",
+          "default": "var(--sf-surface-0)",
+          "since": "2026-10-21"
         }
       ]
     },

package/distr/core/contracts/public-variables.v1.schema.json

@@ -86,7 +86,8 @@
                     "gap",
                     "size",
                     "indicator-color",
-                    "indicator-width"
+                    "indicator-width",
+                    "ring-color"
                   ]
                 },
                 "summary": {

package/distr/core/js/core-rules.js

@@ -3443,8 +3443,12 @@ SF.RuleLoader['cl-avatar'] = {
   type: 'smart',
   mode: 'smart',
   js: true,
+  // The badge sheet places a count or a dot on the avatar
+  // (simai/ui-source#12).
   relation: [{
     name: 'avatars'
+  }, {
+    name: 'badges'
   }]
 };
 
@@ -3886,6 +3890,9 @@ SF.RuleLoader['cl-icon-buttons'] = {
     name: 'cl-close'
   }, {
     name: 'pointer-events/default'
+  }, // The badge sheet places a count or a dot on the button (simai/ui-source#12).
+  {
+    name: 'badges'
   }, // The spinner a loading icon button shows, fetched after the page is ready.
   {
     name: 'spinner',
@@ -3903,8 +3910,14 @@ SF.RuleLoader['cl-icons'] = {
   type: 'smart',
   mode: 'smart',
   js: true,
+  // The badge sheet places a count or a dot on an icon (simai/ui-source#12).
+  // Icons are everywhere and badges on them are few: it is fetched when the
+  // page is idle, or at once by an icon that has a badge to show.
   relation: [{
     name: 'icons'
+  }, {
+    name: 'badges',
+    lazy: true
   }]
 };