@attrus-ds/core 0.2.0 → 1.0.0

package/dist/css/components/toast.css

@@ -1,243 +1,243 @@
-/* ============================================================
-   TOAST COMPONENT — ATTRUS Design System
-   Ephemeral feedback after an action. Auto-dismiss, non-blocking.
-   All values from tokens.
-   ============================================================ */
-
-.toast {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: flex-start;
-  gap: var(--space-3);
-  min-width: 320px;
-  max-width: 480px;
-  padding: var(--space-4) var(--space-5);
-  background: var(--glass-white);
-  -webkit-backdrop-filter: var(--glass-blur);
-  backdrop-filter: var(--glass-blur);
-  border: var(--glass-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-glass), var(--shadow-lg);
-  font-family: var(--font-sans);
-  font-size: var(--fs-sm);
-  line-height: var(--lh-normal);
-  color: var(--color-foreground-default);
-  position: relative;
-  overflow: hidden;
-}
-
-/* Fallback for browsers without backdrop-filter — go back to a solid
-   surface so text never loses contrast. */
-@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-  .toast { background: var(--color-background-surface); box-shadow: var(--shadow-lg); }
-}
-
-/* Leading icon container */
-.toast-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--icon-md);
-  height: var(--icon-md);
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-.toast-icon i, .toast-icon svg {
-  width: var(--icon-md);
-  height: var(--icon-md);
-  stroke-width: var(--icon-stroke);
-}
-
-/* Body — title + description */
-.toast-body {
-  min-width: 0;
-}
-.toast-title {
-  font-size: var(--fs-sm);
-  font-weight: var(--w-semibold);
-  color: var(--color-foreground-default);
-  margin: 0 0 var(--space-1);
-  letter-spacing: var(--ls-tight);
-}
-.toast-desc {
-  font-size: var(--fs-sm);
-  color: var(--color-foreground-secondary);
-  line-height: var(--lh-relaxed);
-  margin: 0;
-}
-
-/* Inline action link */
-.toast-action {
-  display: inline-block;
-  margin-top: var(--space-2);
-  background: transparent;
-  border: 0;
-  padding: 0;
-  font: inherit;
-  font-weight: var(--w-semibold);
-  color: var(--color-foreground-accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  cursor: pointer;
-}
-.toast-action:hover { color: var(--color-brand-secondary-700); }
-.toast-action:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus);
-  border-radius: var(--radius-xs);
-}
-
-/* Close button */
-.toast-close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px; height: 24px;
-  border-radius: var(--radius-xs);
-  background: transparent;
-  border: 0;
-  color: var(--color-foreground-muted);
-  cursor: pointer;
-  flex-shrink: 0;
-  margin-top: -2px;
-  transition: var(--transition-fast);
-}
-.toast-close:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
-.toast-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
-.toast-close i, .toast-close svg { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); }
-
-/* Progress (auto-dismiss countdown) — bottom hairline */
-.toast-progress {
-  position: absolute;
-  bottom: 0; left: 0; right: 0;
-  height: 2px;
-  background: var(--color-border-subtle);
-  overflow: hidden;
-}
-.toast-progress::after {
-  content: "";
-  position: block;
-  display: block;
-  height: 100%;
-  width: 100%;
-  background: var(--color-foreground-muted);
-  transform-origin: left;
-  animation: toast-progress var(--toast-duration, 5000ms) linear forwards;
-}
-
-@keyframes toast-progress {
-  from { transform: scaleX(1); }
-  to   { transform: scaleX(0); }
-}
-
-/* Auto-dismiss must pause while the user inspects (doc a11y contract) */
-.toast:hover .toast-progress::after,
-.toast:focus-within .toast-progress::after { animation-play-state: paused; }
-
-/* ============================================================
-   VARIANTS — semantic
-   ============================================================ */
-
-/* Default (neutral, plain) — uses defaults above */
-
-/* Success */
-.toast-success { border-left: 3px solid var(--color-feedback-success-border); }
-.toast-success .toast-icon { color: var(--color-feedback-success-foreground); }
-.toast-success .toast-progress::after { background: var(--color-feedback-success-foreground); }
-
-/* Warning */
-.toast-warning { border-left: 3px solid var(--color-feedback-warning-border); }
-.toast-warning .toast-icon { color: var(--color-feedback-warning-foreground); }
-.toast-warning .toast-progress::after { background: var(--color-feedback-warning-foreground); }
-
-/* Danger */
-.toast-danger { border-left: 3px solid var(--color-feedback-danger-border); }
-.toast-danger .toast-icon { color: var(--color-feedback-danger-foreground); }
-.toast-danger .toast-progress::after { background: var(--color-feedback-danger-foreground); }
-
-/* Info */
-.toast-info { border-left: 3px solid var(--color-feedback-info-border); }
-.toast-info .toast-icon { color: var(--color-feedback-info-foreground); }
-.toast-info .toast-progress::after { background: var(--color-feedback-info-foreground); }
-
-/* Brand (announcement / non-feedback messages) */
-.toast-brand { border-left: 3px solid var(--color-brand-secondary-300); }
-.toast-brand .toast-icon { color: var(--color-foreground-accent); }
-.toast-brand .toast-progress::after { background: var(--color-foreground-accent); }
-
-/* Inverse (over photo, dark hero, etc.) */
-.toast-inverse {
-  background: var(--glass-ink);
-  -webkit-backdrop-filter: var(--glass-blur);
-  backdrop-filter: var(--glass-blur);
-  border: var(--glass-border-dark);
-  box-shadow: var(--shadow-glass-dark), var(--shadow-2xl);
-}
-@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-  .toast-inverse { background: var(--color-background-inverse); box-shadow: var(--shadow-2xl); }
-}
-.toast-inverse .toast-title { color: var(--color-foreground-inverse-default); }
-.toast-inverse .toast-desc  { color: var(--color-foreground-inverse-muted); }
-.toast-inverse .toast-close { color: var(--color-foreground-inverse-muted); }
-.toast-inverse .toast-close:hover { background: var(--color-background-inverse-hover); color: var(--color-foreground-inverse-default); }
-.toast-inverse .toast-action { color: var(--color-foreground-on-solid); }
-.toast-inverse .toast-action:hover { color: var(--color-brand-secondary-100); }
-
-/* ============================================================
-   STACK — viewport positioning
-   ============================================================ */
-
-.toast-stack {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  z-index: 9000;
-  pointer-events: none;
-}
-.toast-stack > .toast { pointer-events: auto; }
-
-.toast-stack-tr { top: var(--space-6); right: var(--space-6); align-items: flex-end; }
-.toast-stack-tl { top: var(--space-6); left:  var(--space-6); align-items: flex-start; }
-.toast-stack-tc { top: var(--space-6); left: 50%; transform: translateX(-50%); align-items: center; }
-.toast-stack-br { bottom: var(--space-6); right: var(--space-6); align-items: flex-end; flex-direction: column-reverse; }
-.toast-stack-bl { bottom: var(--space-6); left:  var(--space-6); align-items: flex-start; flex-direction: column-reverse; }
-.toast-stack-bc { bottom: var(--space-6); left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
-
-/* ============================================================
-   ENTER / EXIT animations
-   ============================================================ */
-
-@keyframes toast-enter-right {
-  from { opacity: 0; transform: translateX(16px); }
-  to   { opacity: 1; transform: translateX(0); }
-}
-@keyframes toast-enter-left {
-  from { opacity: 0; transform: translateX(-16px); }
-  to   { opacity: 1; transform: translateX(0); }
-}
-@keyframes toast-enter-down {
-  from { opacity: 0; transform: translateY(-12px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-@keyframes toast-enter-up {
-  from { opacity: 0; transform: translateY(12px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.toast-stack-tr > .toast, .toast-stack-br > .toast { animation: toast-enter-right var(--duration-base) var(--ease-emphasis) both; }
-.toast-stack-tl > .toast, .toast-stack-bl > .toast { animation: toast-enter-left  var(--duration-base) var(--ease-emphasis) both; }
-.toast-stack-tc > .toast { animation: toast-enter-down var(--duration-base) var(--ease-emphasis) both; }
-.toast-stack-bc > .toast { animation: toast-enter-up   var(--duration-base) var(--ease-emphasis) both; }
-
-/* Exit — applied via .is-leaving class set by JS before removing */
-.toast.is-leaving { animation: toast-exit var(--duration-fast) var(--ease-standard) both; }
-@keyframes toast-exit {
-  from { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
-  to   { opacity: 0; transform: translateY(-4px) scale(0.96); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .toast-stack > .toast { animation: none; }
-  .toast-progress::after { animation: none; }
-}
+/* ============================================================
+   TOAST COMPONENT — ATTRUS Design System
+   Ephemeral feedback after an action. Auto-dismiss, non-blocking.
+   All values from tokens.
+   ============================================================ */
+
+.toast {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: flex-start;
+  gap: var(--space-3);
+  min-width: 320px;
+  max-width: 480px;
+  padding: var(--space-4) var(--space-5);
+  background: var(--glass-white);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border: var(--glass-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-glass), var(--shadow-lg);
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  line-height: var(--lh-normal);
+  color: var(--color-foreground-default);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Fallback for browsers without backdrop-filter — go back to a solid
+   surface so text never loses contrast. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .toast { background: var(--color-background-surface); box-shadow: var(--shadow-lg); }
+}
+
+/* Leading icon container */
+.toast-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-md);
+  height: var(--icon-md);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.toast-icon i, .toast-icon svg {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  stroke-width: var(--icon-stroke);
+}
+
+/* Body — title + description */
+.toast-body {
+  min-width: 0;
+}
+.toast-title {
+  font-size: var(--fs-sm);
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-default);
+  margin: 0 0 var(--space-1);
+  letter-spacing: var(--ls-tight);
+}
+.toast-desc {
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-secondary);
+  line-height: var(--lh-relaxed);
+  margin: 0;
+}
+
+/* Inline action link */
+.toast-action {
+  display: inline-block;
+  margin-top: var(--space-2);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.toast-action:hover { color: var(--color-brand-secondary-700); }
+.toast-action:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+  border-radius: var(--radius-xs);
+}
+
+/* Close button */
+.toast-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px; height: 24px;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  border: 0;
+  color: var(--color-foreground-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-top: -2px;
+  transition: var(--transition-fast);
+}
+.toast-close:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.toast-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.toast-close i, .toast-close svg { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); }
+
+/* Progress (auto-dismiss countdown) — bottom hairline */
+.toast-progress {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 2px;
+  background: var(--color-border-subtle);
+  overflow: hidden;
+}
+.toast-progress::after {
+  content: "";
+  position: block;
+  display: block;
+  height: 100%;
+  width: 100%;
+  background: var(--color-foreground-muted);
+  transform-origin: left;
+  animation: toast-progress var(--toast-duration, 5000ms) linear forwards;
+}
+
+@keyframes toast-progress {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+
+/* Auto-dismiss must pause while the user inspects (doc a11y contract) */
+.toast:hover .toast-progress::after,
+.toast:focus-within .toast-progress::after { animation-play-state: paused; }
+
+/* ============================================================
+   VARIANTS — semantic
+   ============================================================ */
+
+/* Default (neutral, plain) — uses defaults above */
+
+/* Success */
+.toast-success { border-left: 3px solid var(--color-feedback-success-border); }
+.toast-success .toast-icon { color: var(--color-feedback-success-foreground); }
+.toast-success .toast-progress::after { background: var(--color-feedback-success-foreground); }
+
+/* Warning */
+.toast-warning { border-left: 3px solid var(--color-feedback-warning-border); }
+.toast-warning .toast-icon { color: var(--color-feedback-warning-foreground); }
+.toast-warning .toast-progress::after { background: var(--color-feedback-warning-foreground); }
+
+/* Danger */
+.toast-danger { border-left: 3px solid var(--color-feedback-danger-border); }
+.toast-danger .toast-icon { color: var(--color-feedback-danger-foreground); }
+.toast-danger .toast-progress::after { background: var(--color-feedback-danger-foreground); }
+
+/* Info */
+.toast-info { border-left: 3px solid var(--color-feedback-info-border); }
+.toast-info .toast-icon { color: var(--color-feedback-info-foreground); }
+.toast-info .toast-progress::after { background: var(--color-feedback-info-foreground); }
+
+/* Brand (announcement / non-feedback messages) */
+.toast-brand { border-left: 3px solid var(--color-brand-secondary-300); }
+.toast-brand .toast-icon { color: var(--color-foreground-accent); }
+.toast-brand .toast-progress::after { background: var(--color-foreground-accent); }
+
+/* Inverse (over photo, dark hero, etc.) */
+.toast-inverse {
+  background: var(--glass-ink);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border: var(--glass-border-dark);
+  box-shadow: var(--shadow-glass-dark), var(--shadow-2xl);
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .toast-inverse { background: var(--color-background-inverse); box-shadow: var(--shadow-2xl); }
+}
+.toast-inverse .toast-title { color: var(--color-foreground-inverse-default); }
+.toast-inverse .toast-desc  { color: var(--color-foreground-inverse-muted); }
+.toast-inverse .toast-close { color: var(--color-foreground-inverse-muted); }
+.toast-inverse .toast-close:hover { background: var(--color-background-inverse-hover); color: var(--color-foreground-inverse-default); }
+.toast-inverse .toast-action { color: var(--color-foreground-on-solid); }
+.toast-inverse .toast-action:hover { color: var(--color-brand-secondary-100); }
+
+/* ============================================================
+   STACK — viewport positioning
+   ============================================================ */
+
+.toast-stack {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  z-index: 9000;
+  pointer-events: none;
+}
+.toast-stack > .toast { pointer-events: auto; }
+
+.toast-stack-tr { top: var(--space-6); right: var(--space-6); align-items: flex-end; }
+.toast-stack-tl { top: var(--space-6); left:  var(--space-6); align-items: flex-start; }
+.toast-stack-tc { top: var(--space-6); left: 50%; transform: translateX(-50%); align-items: center; }
+.toast-stack-br { bottom: var(--space-6); right: var(--space-6); align-items: flex-end; flex-direction: column-reverse; }
+.toast-stack-bl { bottom: var(--space-6); left:  var(--space-6); align-items: flex-start; flex-direction: column-reverse; }
+.toast-stack-bc { bottom: var(--space-6); left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
+
+/* ============================================================
+   ENTER / EXIT animations
+   ============================================================ */
+
+@keyframes toast-enter-right {
+  from { opacity: 0; transform: translateX(16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes toast-enter-left {
+  from { opacity: 0; transform: translateX(-16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes toast-enter-down {
+  from { opacity: 0; transform: translateY(-12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes toast-enter-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.toast-stack-tr > .toast, .toast-stack-br > .toast { animation: toast-enter-right var(--duration-base) var(--ease-emphasis) both; }
+.toast-stack-tl > .toast, .toast-stack-bl > .toast { animation: toast-enter-left  var(--duration-base) var(--ease-emphasis) both; }
+.toast-stack-tc > .toast { animation: toast-enter-down var(--duration-base) var(--ease-emphasis) both; }
+.toast-stack-bc > .toast { animation: toast-enter-up   var(--duration-base) var(--ease-emphasis) both; }
+
+/* Exit — applied via .is-leaving class set by JS before removing */
+.toast.is-leaving { animation: toast-exit var(--duration-fast) var(--ease-standard) both; }
+@keyframes toast-exit {
+  from { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(-4px) scale(0.96); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast-stack > .toast { animation: none; }
+  .toast-progress::after { animation: none; }
+}