@ecopages/radiant-ui 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/components/ui/toast/toast.css

@@ -1,315 +1,448 @@
-@reference '../../../styles/radiant-ui.css';
-
-/*
- * Fixed toaster host. Stack transforms are written by JS onto `--y`
- * (Sonner-style). CSS only handles enter/exit/swipe and chrome.
- */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 rui-toaster {
-	position: fixed;
-	z-index: var(--z-toast, 50);
-	pointer-events: none;
-	box-sizing: border-box;
-	width: var(--width, 356px);
-	margin: 0;
-	padding: 0;
-}
-
+  position: fixed;
+  z-index: var(--z-toast, 50);
+  pointer-events: none;
+  box-sizing: border-box;
+  width: var(--width, 356px);
+  margin: 0;
+  padding: 0;
+}
 rui-toaster[data-y-position='top'] {
-	top: var(--viewport-offset, 24px);
-	bottom: auto;
+  top: var(--viewport-offset, 24px);
+  bottom: auto;
 }
-
 rui-toaster[data-y-position='bottom'] {
-	bottom: var(--viewport-offset, 24px);
-	top: auto;
+  bottom: var(--viewport-offset, 24px);
+  top: auto;
 }
-
 rui-toaster[data-x-position='end'] {
-	right: var(--viewport-offset, 24px);
-	left: auto;
-	transform: none;
+  right: var(--viewport-offset, 24px);
+  left: auto;
+  transform: none;
 }
-
 rui-toaster[data-x-position='start'] {
-	left: var(--viewport-offset, 24px);
-	right: auto;
-	transform: none;
+  left: var(--viewport-offset, 24px);
+  right: auto;
+  transform: none;
 }
-
 rui-toaster[data-x-position='center'] {
-	left: 50%;
-	right: auto;
-	transform: translateX(-50%);
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
 }
-
 rui-toast {
-	--y: translateY(0);
-	--z-index: 1;
-	position: absolute;
-	left: 0;
-	width: 100%;
-	opacity: 0;
-	transform: var(--y);
-	touch-action: none;
-	box-sizing: border-box;
-	outline: none;
-	overflow-wrap: anywhere;
-	overflow: hidden;
-	pointer-events: auto;
-	z-index: var(--z-index);
-	transition:
-		transform 400ms ease,
+  --y: translateY(0);
+  --z-index: 1;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  transform: var(--y);
+  touch-action: none;
+  box-sizing: border-box;
+  outline: none;
+  overflow-wrap: anywhere;
+  overflow: hidden;
+  pointer-events: auto;
+  z-index: var(--z-index);
+  transition: transform 400ms ease,
 		opacity 400ms ease,
 		height 400ms ease;
 }
-
 rui-toaster[data-y-position='bottom'] rui-toast {
-	bottom: 0;
-	top: auto;
-	transform-origin: center bottom;
+  bottom: 0;
+  top: auto;
+  transform-origin: center bottom;
 }
-
 rui-toaster[data-y-position='top'] rui-toast {
-	top: 0;
-	bottom: auto;
-	transform-origin: center top;
+  top: 0;
+  bottom: auto;
+  transform-origin: center top;
 }
-
-/* Enter from off-screen until JS mounts + patches --y */
 rui-toast:not([data-mounted='true']) {
-	opacity: 0;
+  opacity: 0;
 }
-
 rui-toaster[data-y-position='bottom'] rui-toast:not([data-mounted='true']) {
-	--y: translateY(100%);
+  --y: translateY(100%);
 }
-
 rui-toaster[data-y-position='top'] rui-toast:not([data-mounted='true']) {
-	--y: translateY(-100%);
+  --y: translateY(-100%);
 }
-
 rui-toast[data-mounted='true'] {
-	opacity: 1;
+  opacity: 1;
 }
-
 rui-toast[data-expanded='false'][data-front='false'] {
-	pointer-events: none;
+  pointer-events: none;
 }
-
 rui-toast[data-swiping='true'] {
-	transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
-	transition: none;
+  transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
+  transition: none;
 }
-
 rui-toast[data-removed='true'][data-swipe-out='false'] {
-	opacity: 0;
+  opacity: 0;
 }
-
 rui-toaster[data-y-position='bottom'] rui-toast[data-removed='true'][data-swipe-out='false'] {
-	--y: translateY(100%);
+  --y: translateY(100%);
 }
-
 rui-toaster[data-y-position='top'] rui-toast[data-removed='true'][data-swipe-out='false'] {
-	--y: translateY(-100%);
+  --y: translateY(-100%);
 }
-
 rui-toast[data-swipe-out='true'] {
-	animation-duration: 200ms;
-	animation-timing-function: ease-out;
-	animation-fill-mode: forwards;
+  animation-duration: 200ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
 }
-
 rui-toast[data-swipe-out='true'][data-swipe-direction='left'] {
-	animation-name: rui-toast-swipe-out-left;
+  animation-name: rui-toast-swipe-out-left;
 }
-
 rui-toast[data-swipe-out='true'][data-swipe-direction='right'] {
-	animation-name: rui-toast-swipe-out-right;
+  animation-name: rui-toast-swipe-out-right;
 }
-
 rui-toast[data-swipe-out='true'][data-swipe-direction='up'] {
-	animation-name: rui-toast-swipe-out-up;
+  animation-name: rui-toast-swipe-out-up;
 }
-
 rui-toast[data-swipe-out='true'][data-swipe-direction='down'] {
-	animation-name: rui-toast-swipe-out-down;
+  animation-name: rui-toast-swipe-out-down;
 }
-
-/* Hover bridge between expanded toasts */
 rui-toast[data-expanded='true']::after {
-	content: '';
-	position: absolute;
-	left: 0;
-	width: 100%;
-	height: calc(var(--gap, 14px) + 1px);
-	bottom: 100%;
-}
-
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: calc(var(--gap, 14px) + 1px);
+  bottom: 100%;
+}
 @layer components {
-	.rui-toaster-region {
-		display: contents;
-	}
-
-	.rui-toaster {
-		@apply relative m-0 list-none p-0;
-		width: 100%;
-		outline: none;
-		box-sizing: border-box;
-		pointer-events: auto;
-	}
-
-	rui-toast .rui-toast > * {
-		transition: opacity 400ms ease;
-	}
-
-	rui-toast[data-expanded='false'][data-front='false'] .rui-toast > * {
-		opacity: 0;
-	}
-
-	.rui-toast {
-		@apply relative flex w-full items-center gap-2 rounded-container border px-control-x py-control-y text-sm shadow-md rui-sheen;
-		@apply border-border bg-surface text-on-surface;
-	}
-
-	.rui-toast--info {
-		@apply border-border bg-surface text-on-surface;
-	}
-
-	.rui-toast--success {
-		@apply border-success/40 bg-surface text-success;
-	}
-
-	.rui-toast--warning {
-		@apply border-border bg-surface text-on-surface;
-	}
-
-	.rui-toast--error {
-		@apply border-error/40 bg-surface text-error;
-	}
-
-	.rui-toast--loading {
-		@apply border-border bg-surface text-on-surface;
-	}
-
-	.rui-toast__icon {
-		@apply inline-flex size-5 shrink-0 items-center justify-center text-sm font-semibold;
-	}
-
-	.rui-toast__loader {
-		@apply size-4 rounded-full border-2 border-current border-r-transparent;
-		animation: rui-toast-spin 0.7s linear infinite;
-	}
-
-	.rui-toast__content {
-		@apply flex min-w-0 flex-1 flex-col gap-0.5;
-	}
-
-	.rui-toast__title {
-		@apply font-medium leading-snug text-inherit;
-	}
-
-	.rui-toast__description {
-		@apply text-xs leading-snug opacity-80;
-	}
-
-	.rui-toast__action {
-		@apply shrink-0;
-	}
-
-	.rui-toast__close {
-		@apply absolute -top-2 -left-2 inline-flex size-5 items-center justify-center rounded-full border border-border bg-surface text-xs text-on-surface;
-		@apply cursor-pointer leading-none;
-	}
-
-	.rui-toast__close:hover {
-		@apply bg-background;
-	}
-
-	.rui-toast__close:focus-visible {
-		@apply ring-2 ring-focus-ring outline-hidden;
-	}
-
-	rui-toast:focus-visible .rui-toast {
-		@apply ring-2 ring-focus-ring;
-	}
-}
-
+  .rui-toaster-region {
+    display: contents;
+  }
+  .rui-toaster {
+    position: relative;
+    margin: 0px;
+    list-style-type: none;
+    padding: 0px;
+    width: 100%;
+    outline: none;
+    box-sizing: border-box;
+    pointer-events: auto;
+  }
+  rui-toast .rui-toast > * {
+    transition: opacity 400ms ease;
+  }
+  rui-toast[data-expanded='false'][data-front='false'] .rui-toast > * {
+    opacity: 0;
+  }
+  .rui-toast {
+    position: relative;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: var(--spacing-2, var(--space-2));
+    border-radius: var(--radius-container, var(--radius-container));
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    @media (forced-colors: active) {
+      background-image: none;
+    }
+    background-image: var(--sheen-image);
+    @media (forced-colors: active) {
+      background-image: none;
+    }
+    padding-inline: var(--spacing-control-x, var(--space-control-x));
+    padding-block: var(--spacing-control-y, var(--space-control-y));
+    font-size: var(--text-sm, var(--text-sm));
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+    --tw-shadow: var(--shadow-overlay);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-surface, var(--surface));
+    color: var(--color-on-surface, var(--on-surface));
+  }
+  .rui-toast--info {
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-surface, var(--surface));
+    color: var(--color-on-surface, var(--on-surface));
+  }
+  .rui-toast--success {
+    border-color: var(--color-success, var(--success));
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-success, var(--success)) 40%, transparent);
+    }
+    background-color: var(--color-surface, var(--surface));
+    color: var(--color-success, var(--success));
+  }
+  .rui-toast--warning {
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-surface, var(--surface));
+    color: var(--color-on-surface, var(--on-surface));
+  }
+  .rui-toast--error {
+    border-color: var(--color-error, var(--error));
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-error, var(--error)) 40%, transparent);
+    }
+    background-color: var(--color-surface, var(--surface));
+    color: var(--color-error, var(--error));
+  }
+  .rui-toast--loading {
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-surface, var(--surface));
+    color: var(--color-on-surface, var(--on-surface));
+  }
+  .rui-toast__icon {
+    display: inline-flex;
+    width: var(--spacing-5, var(--space-5));
+    height: var(--spacing-5, var(--space-5));
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-sm, var(--text-sm));
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+    --tw-font-weight: var(--font-weight-semibold, var(--weight-semibold));
+    font-weight: var(--font-weight-semibold, var(--weight-semibold));
+  }
+  .rui-toast__loader {
+    width: var(--spacing-4, var(--space-4));
+    height: var(--spacing-4, var(--space-4));
+    border-radius: var(--radius-full, var(--border-radius-full));
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: currentcolor;
+    border-right-color: transparent;
+    animation: rui-toast-spin 0.7s linear infinite;
+  }
+  .rui-toast__content {
+    display: flex;
+    min-width: 0px;
+    flex: 1;
+    flex-direction: column;
+    gap: calc(var(--spacing, 0.25rem) * 0.5);
+  }
+  .rui-toast__title {
+    --tw-leading: var(--leading-snug, 1.375);
+    line-height: var(--leading-snug, 1.375);
+    --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
+    font-weight: var(--font-weight-medium, var(--weight-medium));
+    color: inherit;
+  }
+  .rui-toast__description {
+    font-size: var(--text-xs, var(--text-xs));
+    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+    --tw-leading: var(--leading-snug, 1.375);
+    line-height: var(--leading-snug, 1.375);
+    opacity: 80%;
+  }
+  .rui-toast__action {
+    flex-shrink: 0;
+  }
+  .rui-toast__close {
+    position: absolute;
+    top: calc(var(--spacing-2, var(--space-2)) * -1);
+    left: calc(var(--spacing-2, var(--space-2)) * -1);
+    display: inline-flex;
+    width: var(--spacing-5, var(--space-5));
+    height: var(--spacing-5, var(--space-5));
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-full, var(--border-radius-full));
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-surface, var(--surface));
+    font-size: var(--text-xs, var(--text-xs));
+    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+    color: var(--color-on-surface, var(--on-surface));
+    cursor: pointer;
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  .rui-toast__close:hover {
+    background-color: var(--color-background, var(--background));
+  }
+  .rui-toast__close:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+  }
+  rui-toast:focus-visible .rui-toast {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
+  }
+}
 @keyframes rui-toast-spin {
-	to {
-		transform: rotate(360deg);
-	}
+  to {
+    transform: rotate(360deg);
+  }
 }
-
 @keyframes rui-toast-swipe-out-left {
-	from {
-		transform: var(--y) translateX(var(--swipe-amount-x));
-		opacity: 1;
-	}
-
-	to {
-		transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
-		opacity: 0;
-	}
-}
-
+  from {
+    transform: var(--y) translateX(var(--swipe-amount-x));
+    opacity: 1;
+  }
+  to {
+    transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
+    opacity: 0;
+  }
+}
 @keyframes rui-toast-swipe-out-right {
-	from {
-		transform: var(--y) translateX(var(--swipe-amount-x));
-		opacity: 1;
-	}
-
-	to {
-		transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
-		opacity: 0;
-	}
-}
-
+  from {
+    transform: var(--y) translateX(var(--swipe-amount-x));
+    opacity: 1;
+  }
+  to {
+    transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
+    opacity: 0;
+  }
+}
 @keyframes rui-toast-swipe-out-up {
-	from {
-		transform: var(--y) translateY(var(--swipe-amount-y));
-		opacity: 1;
-	}
-
-	to {
-		transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
-		opacity: 0;
-	}
-}
-
+  from {
+    transform: var(--y) translateY(var(--swipe-amount-y));
+    opacity: 1;
+  }
+  to {
+    transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
+    opacity: 0;
+  }
+}
 @keyframes rui-toast-swipe-out-down {
-	from {
-		transform: var(--y) translateY(var(--swipe-amount-y));
-		opacity: 1;
-	}
-
-	to {
-		transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
-		opacity: 0;
-	}
-}
-
+  from {
+    transform: var(--y) translateY(var(--swipe-amount-y));
+    opacity: 1;
+  }
+  to {
+    transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
+    opacity: 0;
+  }
+}
 @media (max-width: 600px) {
-	rui-toaster {
-		left: var(--viewport-offset, 16px);
-		right: var(--viewport-offset, 16px);
-		width: auto;
-		transform: none;
-	}
-}
-
+  rui-toaster {
+    left: var(--viewport-offset, 16px);
+    right: var(--viewport-offset, 16px);
+    width: auto;
+    transform: none;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
-	rui-toast,
+  rui-toast,
 	.rui-toast__loader,
 	rui-toast .rui-toast > * {
-		transition: none !important;
-		animation: none !important;
-	}
-
-	rui-toast[data-mounted='true'] {
-		opacity: 1;
-	}
-
-	rui-toast[data-swipe-out='true'] {
-		opacity: 0;
-	}
+    transition: none !important;
+    animation: none !important;
+  }
+  rui-toast[data-mounted='true'] {
+    opacity: 1;
+  }
+  rui-toast[data-swipe-out='true'] {
+    opacity: 0;
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-font-weight: initial;
+      --tw-leading: initial;
+    }
+  }
 }