nexus-shared 3.0.0 → 3.1.0

package/src/Styles/Nexus.Toast.css

@@ -1,265 +1,263 @@
-@layer nexus.components {
-  /*
-   * Toasts: each one is a manual popover, fixed at its edge and stacked by --nx-toast-offset (set by the Toaster).
-   * The panel is raised like a popover; the tone shows in the icon and in the progress line along the bottom edge,
-   * which pauses while the pointer or the focus is on the toast.
-   */
-  .nx-toaster {
-    display: contents;
-  }
-
-  .nx-toast {
-    --nx-toast-accent: var(--nx-primary);
-    --nx-toast-offset: 0px;
-    --nx-toast-edge: 16px;
-
-    position: fixed;
-    inset: auto;
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    width: min(360px, calc(100% - 2 * var(--nx-toast-edge)));
-    margin: 0;
-    padding: 12px 12px 12px 14px;
-    overflow: hidden;
-    border: 1px solid var(--nx-border);
-    border-radius: var(--nx-radius-lg);
-    background: light-dark(var(--nx-surface), var(--nx-surface-2));
-    color: var(--nx-text);
-    font-size: var(--nx-text-md);
-    box-shadow: var(--nx-shadow);
-    pointer-events: auto;
-    transition:
-      top 220ms cubic-bezier(0.2, 0, 0, 1),
-      bottom 220ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  .nx-toast:popover-open {
-    animation: nx-toast-in 220ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  .nx-toast--closing:popover-open {
-    animation: nx-toast-out 180ms ease-in forwards;
-    pointer-events: none;
-  }
-
-  /* Positions: the offset counts from the chosen edge, newest nearest to it. */
-  .nx-toast--top-right,
-  .nx-toast--top-center,
-  .nx-toast--top-left {
-    top: calc(var(--nx-toast-edge) + var(--nx-toast-offset));
-  }
-
-  .nx-toast--bottom-right,
-  .nx-toast--bottom-center,
-  .nx-toast--bottom-left {
-    bottom: calc(var(--nx-toast-edge) + var(--nx-toast-offset));
-  }
-
-  .nx-toast--top-right,
-  .nx-toast--bottom-right {
-    right: var(--nx-toast-edge);
-  }
-
-  /* Minimized popups wait at the bottom right; toasts there stack above them (the dock sets --nx-dock-space). */
-  .nx-toast--bottom-right {
-    bottom: calc(var(--nx-toast-edge) + var(--nx-toast-offset) + var(--nx-dock-space, 0px));
-  }
-
-  .nx-toast--top-left,
-  .nx-toast--bottom-left {
-    left: var(--nx-toast-edge);
-  }
-
-  .nx-toast--top-center,
-  .nx-toast--bottom-center {
-    left: 50%;
-    translate: -50% 0;
-  }
-
-  @keyframes nx-toast-in {
-    from {
-      opacity: 0;
-      transform: translateY(-8px) scale(0.98);
-    }
-  }
-
-  .nx-toast--bottom-right:popover-open,
-  .nx-toast--bottom-center:popover-open,
-  .nx-toast--bottom-left:popover-open {
-    animation-name: nx-toast-in-up;
-  }
-
-  @keyframes nx-toast-in-up {
-    from {
-      opacity: 0;
-      transform: translateY(8px) scale(0.98);
-    }
-  }
-
-  @keyframes nx-toast-out {
-    to {
-      opacity: 0;
-      transform: scale(0.96);
-    }
-  }
-
-  .nx-toast--closing.nx-toast--bottom-right:popover-open,
-  .nx-toast--closing.nx-toast--bottom-center:popover-open,
-  .nx-toast--closing.nx-toast--bottom-left:popover-open {
-    animation-name: nx-toast-out;
-  }
-
-  /* Tones */
-  .nx-toast--info {
-    --nx-toast-accent: var(--nx-info);
-  }
-
-  .nx-toast--success {
-    --nx-toast-accent: var(--nx-success);
-  }
-
-  .nx-toast--warning {
-    --nx-toast-accent: var(--nx-warning);
-  }
-
-  .nx-toast--danger {
-    --nx-toast-accent: var(--nx-danger);
-  }
-
-  .nx-toast__icon {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: 20px;
-    height: 20px;
-    margin-top: 1px;
-    color: var(--nx-toast-accent);
-  }
-
-  .nx-toast__icon .nx-icon {
-    width: 20px;
-    height: 20px;
-    vertical-align: 0;
-  }
-
-  .nx-toast--neutral .nx-toast__icon {
-    color: var(--nx-text-muted);
-  }
-
-  .nx-toast__body {
-    flex: 1 1 auto;
-    min-width: 0;
-    padding-top: 1px;
-  }
-
-  .nx-toast__title {
-    font-weight: 600;
-    line-height: 1.35;
-    overflow-wrap: anywhere;
-  }
-
-  .nx-toast__message {
-    margin-top: 2px;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-    line-height: 1.45;
-    overflow-wrap: anywhere;
-  }
-
-  .nx-toast__action {
-    flex-shrink: 0;
-    align-self: center;
-    height: 28px;
-    margin: 0;
-    padding: 0 10px;
-    border: 1px solid var(--nx-border-strong);
-    border-radius: var(--nx-radius);
-    background: var(--nx-surface);
-    color: var(--nx-text);
-    font: inherit;
-    font-size: var(--nx-text-sm);
-    font-weight: 500;
-    white-space: nowrap;
-    cursor: pointer;
-  }
-
-  .nx-toast__action:hover {
-    border-color: var(--nx-toast-accent);
-    color: var(--nx-toast-accent);
-  }
-
-  .nx-toast__action:focus-visible {
-    outline: none;
-    box-shadow: var(--nx-focus-ring);
-  }
-
-  .nx-toast__close {
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: 24px;
-    height: 24px;
-    margin: -2px -2px 0 0;
-    padding: 0;
-    border: 0;
-    border-radius: var(--nx-radius-sm);
-    background: none;
-    color: var(--nx-text-subtle);
-    cursor: pointer;
-  }
-
-  .nx-toast__close:hover {
-    background: var(--nx-surface-hover);
-    color: var(--nx-text);
-  }
-
-  .nx-toast__close:focus-visible {
-    outline: none;
-    box-shadow: var(--nx-focus-ring);
-  }
-
-  .nx-toast__close .nx-icon {
-    width: 16px;
-    height: 16px;
-    vertical-align: 0;
-  }
-
-  /* The time left, shrinking along the bottom edge; its end closes the toast. */
-  .nx-toast__progress {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 3px;
-    background: var(--nx-toast-accent);
-    opacity: 0.7;
-    transform-origin: left;
-    animation: nx-toast-progress linear forwards;
-  }
-
-  .nx-toast:is(:hover, :focus-within) .nx-toast__progress {
-    animation-play-state: paused;
-  }
-
-  @keyframes nx-toast-progress {
-    from {
-      transform: scaleX(1);
-    }
-
-    to {
-      transform: scaleX(0);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .nx-toast {
-      transition: none;
-    }
-
-    .nx-toast:popover-open,
-    .nx-toast--closing:popover-open {
-      animation: none;
-    }
-  }
-}
+@layer nexus.components {
+  /*
+   * Toasts: each one is a manual popover, fixed at its edge and stacked by --nx-toast-offset (set by the Toaster).
+   * The panel is raised like a popover; the tone shows in the icon and in the progress line along the bottom edge,
+   * which pauses while the pointer or the focus is on the toast.
+   */
+  .nx-toaster {
+    display: contents;
+  }
+
+  .nx-toast {
+    --nx-toast-accent: var(--nx-primary);
+    --nx-toast-offset: 0px;
+    --nx-toast-edge: 16px;
+
+    position: fixed;
+    inset: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    width: min(360px, calc(100% - 2 * var(--nx-toast-edge)));
+    margin: 0;
+    padding: 12px 12px 12px 14px;
+    overflow: hidden;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    color: var(--nx-text);
+    font-size: var(--nx-text-md);
+    box-shadow: var(--nx-shadow);
+    pointer-events: auto;
+    transition:
+      top 220ms cubic-bezier(0.2, 0, 0, 1),
+      bottom 220ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-toast:popover-open {
+    animation: nx-toast-in 220ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-toast--closing:popover-open {
+    animation: nx-toast-out 180ms ease-in forwards;
+    pointer-events: none;
+  }
+
+  /* Positions: the offset counts from the chosen edge, newest nearest to it. */
+  .nx-toast--top-right,
+  .nx-toast--top-center,
+  .nx-toast--top-left {
+    top: calc(var(--nx-toast-edge) + var(--nx-toast-offset));
+  }
+
+  .nx-toast--bottom-right,
+  .nx-toast--bottom-center,
+  .nx-toast--bottom-left {
+    bottom: calc(var(--nx-toast-edge) + var(--nx-toast-offset));
+  }
+
+  .nx-toast--top-right,
+  .nx-toast--bottom-right {
+    right: var(--nx-toast-edge);
+  }
+
+  /* Minimized popups wait at the bottom right; toasts there stack above them (the dock sets --nx-dock-space). */
+  .nx-toast--bottom-right {
+    bottom: calc(var(--nx-toast-edge) + var(--nx-toast-offset) + var(--nx-dock-space, 0px));
+  }
+
+  .nx-toast--top-left,
+  .nx-toast--bottom-left {
+    left: var(--nx-toast-edge);
+  }
+
+  .nx-toast--top-center,
+  .nx-toast--bottom-center {
+    left: 50%;
+    translate: -50% 0;
+  }
+
+  @keyframes nx-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(-8px) scale(0.98);
+    }
+  }
+
+  .nx-toast--bottom-right:popover-open,
+  .nx-toast--bottom-center:popover-open,
+  .nx-toast--bottom-left:popover-open {
+    animation-name: nx-toast-in-up;
+  }
+
+  @keyframes nx-toast-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+    }
+  }
+
+  @keyframes nx-toast-out {
+    to {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+
+  .nx-toast--closing.nx-toast--bottom-right:popover-open,
+  .nx-toast--closing.nx-toast--bottom-center:popover-open,
+  .nx-toast--closing.nx-toast--bottom-left:popover-open {
+    animation-name: nx-toast-out;
+  }
+
+  /* Tones */
+  .nx-toast--info {
+    --nx-toast-accent: var(--nx-info);
+  }
+
+  .nx-toast--success {
+    --nx-toast-accent: var(--nx-success);
+  }
+
+  .nx-toast--warning {
+    --nx-toast-accent: var(--nx-warning);
+  }
+
+  .nx-toast--danger {
+    --nx-toast-accent: var(--nx-danger);
+  }
+
+  .nx-toast__icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 20px;
+    height: 20px;
+    margin-top: 1px;
+    color: var(--nx-toast-accent);
+  }
+
+  .nx-toast__icon .nx-icon {
+    width: 20px;
+    height: 20px;
+    vertical-align: 0;
+  }
+
+  .nx-toast--neutral .nx-toast__icon {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-toast__body {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-top: 1px;
+  }
+
+  .nx-toast__title {
+    font-weight: 600;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-toast__message {
+    margin-top: 2px;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-toast__action {
+    flex-shrink: 0;
+    align-self: center;
+    height: 28px;
+    margin: 0;
+    padding: 0 10px;
+    border: 1px solid var(--nx-border-strong);
+    border-radius: var(--nx-radius);
+    background: var(--nx-surface);
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .nx-toast__action:hover {
+    border-color: var(--nx-toast-accent);
+    color: var(--nx-toast-accent);
+  }
+
+  .nx-toast__action:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-toast__close {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    margin: -2px -2px 0 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-subtle);
+    cursor: pointer;
+  }
+
+  .nx-toast__close:hover {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-toast__close:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-toast__close .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  /* The time left, shrinking along the bottom edge; its end closes the toast. */
+  .nx-toast__progress {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    background: var(--nx-toast-accent);
+    opacity: 0.7;
+    transform-origin: left;
+    animation: nx-toast-progress linear forwards;
+  }
+
+  .nx-toast:is(:hover, :focus-within) .nx-toast__progress {
+    animation-play-state: paused;
+  }
+
+  @keyframes nx-toast-progress {
+    from {
+      transform: scaleX(1);
+    }
+
+    to {
+      transform: scaleX(0);
+    }
+  }
+
+  [data-nx-motion="reduce"] .nx-toast {
+    transition: none;
+  }
+
+  [data-nx-motion="reduce"] .nx-toast:popover-open,
+  [data-nx-motion="reduce"] .nx-toast--closing:popover-open {
+    animation: none;
+  }
+}