tailjng 0.1.6 → 0.1.7

package/src/lib/components/alert/alert-toast/toast-alert.component.css

@@ -1,34 +1,646 @@
-@media (max-width: 450px) {
-  .j-toast {
-    width: calc(100vw - 2rem) !important;
+:host {
+  display: contents;
+}
+
+.j-alert-toast-stack {
+  --j-toast-stack-peek: 0.625rem;
+  --j-toast-stack-card-min: 4.5rem;
+  --j-toast-stack-visible: 4;
+  --j-toast-stack-fade: 2.5rem;
+  --j-toast-stack-scrollbar: 2px;
+  --j-toast-stack-scrollbar-gutter: var(--j-toast-stack-scrollbar);
+  --j-toast-scrollbar-idle: color-mix(in srgb, var(--color-foreground) 7%, transparent);
+  --j-toast-scrollbar-active: color-mix(in srgb, var(--color-foreground) 28%, transparent);
+  --j-toast-stack-collapsed-height: calc(
+    var(--j-toast-stack-card-min) +
+      (var(--j-toast-stack-visible) - 1) * var(--j-toast-stack-peek)
+  );
+  --j-toast-timeline-height: 0.25rem;
+
+  position: fixed;
+  z-index: 1000;
+  width: 100%;
+  max-width: 22rem;
+  padding: 0.25rem;
+  pointer-events: none;
+}
+
+.j-alert-toast-stack--stackable {
+  pointer-events: auto;
+}
+
+.j-alert-toast-stack--stackable.j-alert-toast-stack--expanded.j-alert-toast-stack--has-scroll {
+  max-width: calc(22rem + var(--j-toast-stack-scrollbar-gutter));
+}
+
+.j-alert-toast-stack--bottom-right.j-alert-toast-stack--expanded.j-alert-toast-stack--has-scroll {
+  right: calc(1rem - var(--j-toast-stack-scrollbar-gutter));
+}
+
+.j-alert-toast-stack--top-right.j-alert-toast-stack--expanded.j-alert-toast-stack--has-scroll {
+  right: calc(0.75rem - var(--j-toast-stack-scrollbar-gutter));
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .j-alert-toast-stack--stackable.j-alert-toast-stack--expanded.j-alert-toast-stack--has-scroll {
+    max-width: 22rem;
+  }
+
+  .j-alert-toast-stack--bottom-right.j-alert-toast-stack--expanded.j-alert-toast-stack--has-scroll {
+    right: 1rem;
+  }
+
+  .j-alert-toast-stack--top-right.j-alert-toast-stack--expanded.j-alert-toast-stack--has-scroll {
+    right: 0.75rem;
   }
 }
 
-.j-toast {
+.j-alert-toast-stack-inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.j-alert-toast-stack-inner--stackable {
+  min-height: var(--j-toast-stack-collapsed-height);
+  max-height: var(--j-toast-stack-collapsed-height);
+  overflow: visible;
+  transition:
+    max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
+    min-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
+    gap 0.24s ease,
+    overflow-y 0s linear 0.32s;
+}
+
+.j-alert-toast-scroll-shell {
+  position: relative;
+  width: 100%;
+  transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.j-alert-toast-scroll-shell--expanded {
+  max-height: min(70vh, 28rem);
+}
+
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded {
+  min-height: 0;
+  max-height: min(70vh, 28rem);
+  gap: 0.75rem;
+  overflow: hidden;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  transition:
+    max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
+    min-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
+    gap 0.24s ease,
+    mask-image 0.2s ease,
+    -webkit-mask-image 0.2s ease,
+    overflow 0s linear 0.32s;
+}
+
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scroll-ready {
+  overflow-x: hidden;
+  overflow-y: hidden;
+  scrollbar-gutter: auto;
+  transition:
+    max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
+    min-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
+    gap 0.24s ease,
+    mask-image 0.2s ease,
+    -webkit-mask-image 0.2s ease,
+    overflow 0s;
+}
+
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: var(--j-toast-scrollbar-idle) transparent;
+}
+
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable.j-alert-toast-stack-inner--scroll-active,
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable:hover {
+  scrollbar-color: var(--j-toast-scrollbar-active) transparent;
+}
+
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable::-webkit-scrollbar {
+  width: var(--j-toast-stack-scrollbar);
+}
+
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  min-height: 2.5rem;
+  background: var(--j-toast-scrollbar-idle);
+  transition: background 0.45s ease;
+}
+
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable.j-alert-toast-stack-inner--scroll-active::-webkit-scrollbar-thumb,
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable:hover::-webkit-scrollbar-thumb {
+  background: var(--j-toast-scrollbar-active);
+  transition: background 0.12s ease;
+}
+
+.j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+:host-context(.dark) .j-alert-toast-stack,
+:host-context(html.dark) .j-alert-toast-stack {
+  --j-toast-scrollbar-idle: color-mix(in srgb, var(--color-dark-foreground) 10%, transparent);
+  --j-toast-scrollbar-active: color-mix(in srgb, var(--color-dark-foreground) 34%, transparent);
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable {
+    scrollbar-width: none;
+  }
+
+  .j-alert-toast-stack-inner--stackable.j-alert-toast-stack-inner--expanded.j-alert-toast-stack-inner--scrollable::-webkit-scrollbar {
+    display: none;
+    width: 0;
+  }
+}
+
+.j-alert-toast-stack--stackable:not(.j-alert-toast-stack--expanded) .j-alert-toast-stack-inner--stackable .j-alert-toast-card--in-pile {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  margin: 0;
+  transition:
+    top 0.28s cubic-bezier(0.16, 1, 0.3, 1),
+    bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 0.24s ease,
+    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.j-alert-toast-stack--stackable:not(.j-alert-toast-stack--expanded) .j-alert-toast-stack-inner--stackable .j-alert-toast-card--in-pile:not(.j-alert-toast-card--pile-top) {
+  box-shadow: 0 -4px 14px rgb(0 0 0 / 0.08);
+}
+
+.j-alert-toast-stack--stackable:not(.j-alert-toast-stack--expanded) .j-alert-toast-card--pile-hidden {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.24s ease, visibility 0.24s ease;
+}
+
+.j-alert-toast-stack--stackable.j-alert-toast-stack--expanded .j-alert-toast-stack-inner--stackable .j-alert-toast-card {
+  position: relative;
+  top: auto !important;
+  bottom: auto !important;
+  transform: none;
+  transition:
+    top 0.28s cubic-bezier(0.16, 1, 0.3, 1),
+    bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 0.24s ease,
+    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 0.24s ease;
+}
+
+.j-alert-toast-stack-hint {
+  position: absolute;
+  top: -0.35rem;
+  right: -0.35rem;
+  z-index: 50;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.3rem;
+  border-radius: 999px;
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground, #fff);
+  font-size: 0.625rem;
+  font-weight: 700;
+  line-height: 1;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.85);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.j-alert-toast-stack--bottom-left .j-alert-toast-stack-hint,
+.j-alert-toast-stack--top-left .j-alert-toast-stack-hint {
+  right: auto;
+  left: -0.35rem;
+}
+
+.j-alert-toast-stack--stackable:not(.j-alert-toast-stack--expanded) .j-alert-toast-stack-hint {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.j-alert-toast-stack--stackable.j-alert-toast-stack--expanded .j-alert-toast-stack-hint {
+  opacity: 0;
+  transform: scale(0.85);
+}
+
+.j-alert-toast-stack--top-left {
+  top: 4.5rem;
+  left: 0.75rem;
+}
+
+.j-alert-toast-stack--top-right {
+  top: 4.5rem;
+  right: 0.75rem;
+}
+
+.j-alert-toast-stack--bottom-left {
+  bottom: 1rem;
+  left: 1rem;
+}
+
+.j-alert-toast-stack--bottom-right {
+  bottom: 1rem;
+  right: 1rem;
+}
+
+.j-alert-toast-card {
+  position: relative;
+  width: 100%;
   min-height: 4.5rem;
+  margin-left: auto;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
+  border-radius: 0.75rem;
+  background-color: color-mix(in srgb, var(--color-background) 92%, transparent);
+  box-shadow: 0 12px 32px rgb(0 0 0 / 0.1);
+  backdrop-filter: blur(16px);
+  pointer-events: auto;
+}
+
+:host-context(.dark) .j-alert-toast-card,
+:host-context(html.dark) .j-alert-toast-card {
+  border-color: color-mix(in srgb, var(--color-dark-border) 70%, transparent);
+  background-color: color-mix(in srgb, var(--color-dark-background) 92%, transparent);
+  box-shadow: 0 16px 40px rgb(0 0 0 / 0.35);
+}
+
+.j-alert-toast-card--mono {
+  background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
+}
+
+:host-context(.dark) .j-alert-toast-card--mono,
+:host-context(html.dark) .j-alert-toast-card--mono {
+  background-color: color-mix(in srgb, var(--color-dark-background) 95%, transparent);
+}
+
+.j-alert-toast-card--success {
+  background-color: color-mix(in srgb, #22c55e 9%, var(--color-background));
+}
+
+.j-alert-toast-card--error {
+  background-color: color-mix(in srgb, #ef4444 9%, var(--color-background));
+}
+
+.j-alert-toast-card--warning {
+  background-color: color-mix(in srgb, #eab308 10%, var(--color-background));
+}
+
+.j-alert-toast-card--info {
+  background-color: color-mix(in srgb, #3b82f6 9%, var(--color-background));
+}
+
+.j-alert-toast-card--question {
+  background-color: color-mix(in srgb, #a855f7 9%, var(--color-background));
+}
+
+.j-alert-toast-card--loading {
+  background-color: color-mix(in srgb, var(--color-muted) 22%, var(--color-background));
+}
+
+:host-context(.dark) .j-alert-toast-card--success,
+:host-context(html.dark) .j-alert-toast-card--success {
+  background-color: color-mix(in srgb, #22c55e 14%, var(--color-dark-background));
+}
+
+:host-context(.dark) .j-alert-toast-card--error,
+:host-context(html.dark) .j-alert-toast-card--error {
+  background-color: color-mix(in srgb, #ef4444 14%, var(--color-dark-background));
+}
+
+:host-context(.dark) .j-alert-toast-card--warning,
+:host-context(html.dark) .j-alert-toast-card--warning {
+  background-color: color-mix(in srgb, #eab308 14%, var(--color-dark-background));
+}
+
+:host-context(.dark) .j-alert-toast-card--info,
+:host-context(html.dark) .j-alert-toast-card--info {
+  background-color: color-mix(in srgb, #3b82f6 14%, var(--color-dark-background));
+}
+
+:host-context(.dark) .j-alert-toast-card--question,
+:host-context(html.dark) .j-alert-toast-card--question {
+  background-color: color-mix(in srgb, #a855f7 14%, var(--color-dark-background));
+}
+
+:host-context(.dark) .j-alert-toast-card--loading,
+:host-context(html.dark) .j-alert-toast-card--loading {
+  background-color: color-mix(in srgb, var(--color-dark-muted) 28%, var(--color-dark-background));
+}
+
+.j-alert-toast-accent {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  width: 0.25rem;
+}
+
+.j-alert-toast-accent--with-timeline {
+  bottom: var(--j-toast-timeline-height);
 }
 
-.j-toast-watermark--lg {
+.j-alert-toast-accent--mono {
+  background-color: var(--color-primary);
+}
+
+.j-alert-toast-accent--success {
+  background-color: #22c55e;
+}
+
+.j-alert-toast-accent--error {
+  background-color: #ef4444;
+}
+
+.j-alert-toast-accent--warning {
+  background-color: #eab308;
+}
+
+.j-alert-toast-accent--info {
+  background-color: #3b82f6;
+}
+
+.j-alert-toast-accent--question {
+  background-color: #a855f7;
+}
+
+.j-alert-toast-accent--loading {
+  background-color: var(--color-muted-foreground);
+}
+
+.j-alert-toast-watermark {
+  position: absolute;
+  z-index: 0;
+  pointer-events: none;
+  user-select: none;
+  opacity: 0.22;
   filter: blur(0.15px);
 }
 
-.j-toast-watermark--sm {
+.j-alert-toast-watermark--subtle {
+  opacity: 0.12;
   filter: blur(0.1px);
 }
 
-.j-toast-timeline {
-  border-bottom-left-radius: 0.75rem;
-  border-bottom-right-radius: 0.75rem;
+.j-alert-toast-watermark--lg {
+  bottom: -2rem;
+  left: -1.25rem;
+}
+
+.j-alert-toast-watermark--sm {
+  top: 0.5rem;
+  right: 0.75rem;
+}
+
+.j-alert-toast-watermark--with-close {
+  right: 2.25rem;
+}
+
+.j-alert-toast-watermark--mono {
+  color: var(--color-primary);
+}
+
+.j-alert-toast-watermark--success {
+  color: #22c55e;
+}
+
+.j-alert-toast-watermark--error {
+  color: #ef4444;
+}
+
+.j-alert-toast-watermark--warning {
+  color: #eab308;
+}
+
+.j-alert-toast-watermark--info {
+  color: #3b82f6;
+}
+
+.j-alert-toast-watermark--question {
+  color: #a855f7;
+}
+
+.j-alert-toast-watermark--loading {
+  color: var(--color-muted-foreground);
+}
+
+.j-alert-toast-watermark--spin {
+  animation: j-alert-toast-spin 1s linear infinite;
+}
+
+@keyframes j-alert-toast-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.j-alert-toast-body {
+  position: relative;
+  z-index: 10;
+  padding: 0.875rem 1rem 0.875rem 1.25rem;
+}
+
+.j-alert-toast-body--closable {
+  padding-right: 2.5rem;
+}
+
+.j-alert-toast-body--with-actions {
+  padding-bottom: 0.5rem;
+}
+
+.j-alert-toast-body--with-timeline {
+  padding-bottom: calc(0.875rem + var(--j-toast-timeline-height));
+}
+
+.j-alert-toast-body--with-actions-timeline {
+  padding-bottom: calc(0.5rem + var(--j-toast-timeline-height));
+}
+
+.j-alert-toast-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--color-foreground);
+}
+
+:host-context(.dark) .j-alert-toast-title,
+:host-context(html.dark) .j-alert-toast-title {
+  color: var(--color-dark-foreground);
+}
+
+.j-alert-toast-description {
+  margin: 0.25rem 0 0;
+  font-size: 0.75rem;
+  line-height: 1.55;
+  color: var(--color-muted-foreground);
+}
+
+.j-alert-toast-description :is(b, strong) {
+  font-weight: 600;
+  color: var(--color-foreground);
+}
+
+:host-context(.dark) .j-alert-toast-description,
+:host-context(html.dark) .j-alert-toast-description {
+  color: var(--color-dark-muted-foreground);
+}
+
+:host-context(.dark) .j-alert-toast-description :is(b, strong),
+:host-context(html.dark) .j-alert-toast-description :is(b, strong) {
+  color: var(--color-dark-foreground);
+}
+
+.j-alert-toast-close {
+  position: absolute;
+  top: 0.625rem;
+  right: 0.625rem;
+  z-index: 20;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0.5rem;
+  background-color: transparent;
+  color: var(--color-muted-foreground);
+  line-height: 0;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.j-alert-toast-close:hover {
+  color: var(--color-foreground);
+  background-color: color-mix(in srgb, var(--color-muted) 45%, transparent);
+}
+
+.j-alert-toast-close:active {
+  transform: scale(0.94);
+}
+
+.j-alert-toast-close:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+:host-context(.dark) .j-alert-toast-close,
+:host-context(html.dark) .j-alert-toast-close {
+  color: var(--color-dark-muted-foreground);
+}
+
+:host-context(.dark) .j-alert-toast-close:hover,
+:host-context(html.dark) .j-alert-toast-close:hover {
+  color: var(--color-dark-foreground);
+  background-color: color-mix(in srgb, var(--color-dark-muted) 45%, transparent);
+}
+
+.j-alert-toast-actions {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  padding: 0 1rem 0.875rem 1.25rem;
+}
+
+.j-alert-toast-actions--with-timeline {
+  padding-bottom: calc(0.875rem + var(--j-toast-timeline-height));
+}
+
+.j-alert-toast-timeline {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 30;
+  height: var(--j-toast-timeline-height);
+  margin: 0;
   overflow: hidden;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  background-color: color-mix(in srgb, var(--color-muted) 35%, transparent);
 }
 
-.j-toast-progress {
-  animation-name: j-toast-progress-shrink;
+:host-context(.dark) .j-alert-toast-timeline,
+:host-context(html.dark) .j-alert-toast-timeline {
+  background-color: color-mix(in srgb, var(--color-dark-muted) 40%, transparent);
+}
+
+.j-alert-toast-progress {
+  width: 100%;
+  height: 100%;
+  transform-origin: left center;
+  animation-name: j-alert-toast-progress-shrink;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
 }
 
-@keyframes j-toast-progress-shrink {
+.j-alert-toast-progress--mono {
+  background-color: var(--color-primary);
+}
+
+.j-alert-toast-progress--success {
+  background-color: #22c55e;
+}
+
+.j-alert-toast-progress--error {
+  background-color: #ef4444;
+}
+
+.j-alert-toast-progress--warning {
+  background-color: #eab308;
+}
+
+.j-alert-toast-progress--info {
+  background-color: #3b82f6;
+}
+
+.j-alert-toast-progress--question {
+  background-color: #a855f7;
+}
+
+.j-alert-toast-progress--loading {
+  background-color: var(--color-muted-foreground);
+}
+
+@keyframes j-alert-toast-progress-shrink {
   from {
     transform: scaleX(1);
   }
@@ -37,3 +649,9 @@
     transform: scaleX(0);
   }
 }
+
+@media (max-width: 450px) {
+  .j-alert-toast-stack {
+    max-width: calc(100vw - 2rem);
+  }
+}