atomicuilibrary 0.0.1

package/dist/collection/components/button-toggle-group/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/callout-banner/callout-banner.css

@@ -0,0 +1,684 @@
+@charset "UTF-8";
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  :host(.variant-info) .callout-inner {
+    --callout-bg: #1e293b;
+    --callout-text: #60a5fa;
+    --callout-border: rgba(59, 130, 246, 0.35);
+    --callout-icon-bg: rgba(59, 130, 246, 0.18);
+    --callout-shadow: rgba(59, 130, 246, 0.13);
+  }
+  :host(.variant-success) .callout-inner {
+    --callout-bg: #052e16;
+    --callout-text: #4ade80;
+    --callout-border: rgba(34,197,94,0.35);
+    --callout-icon-bg: rgba(34,197,94,0.18);
+    --callout-shadow: rgba(34,197,94,0.13);
+  }
+  :host(.variant-warning) .callout-inner {
+    --callout-bg: #78350f;
+    --callout-text: #facc15;
+    --callout-border: rgba(251,191,36,0.35);
+    --callout-icon-bg: rgba(251,191,36,0.18);
+    --callout-shadow: rgba(251,191,36,0.13);
+  }
+  :host(.variant-danger) .callout-inner {
+    --callout-bg: #7f1d1d;
+    --callout-text: #f87171;
+    --callout-border: rgba(239,68,68,0.35);
+    --callout-icon-bg: rgba(239,68,68,0.18);
+    --callout-shadow: rgba(239,68,68,0.13);
+  }
+  :host(.variant-neutral) .callout-inner {
+    --callout-bg: #0f172a;
+    --callout-text: #f1f5f9;
+    --callout-border: rgba(148,163,184,0.25);
+    --callout-icon-bg: rgba(148,163,184,0.13);
+    --callout-shadow: rgba(148,163,184,0.09);
+  }
+}
+/* ── Clickable (link) ───────────────────── */
+a[part=callout] {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  transition: box-shadow 0.15s, filter 0.15s;
+}
+
+a[part=callout]:hover,
+a[part=callout]:focus-visible {
+  filter: brightness(1.04);
+  box-shadow: 0 6px 24px var(--callout-shadow, rgba(15, 23, 42, 0.13));
+}
+
+a[part=callout]:active {
+  filter: brightness(0.98);
+}
+
+@keyframes callout-slide-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(-16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes callout-slide-out-top {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 200px;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-16px);
+    max-height: 0;
+    padding: 0;
+    margin: 0;
+  }
+}
+@keyframes callout-slide-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes callout-slide-out-bottom {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 200px;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(16px);
+    max-height: 0;
+    padding: 0;
+    margin: 0;
+  }
+}
+@keyframes callout-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-32px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes callout-slide-out-left {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+    max-width: 600px;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-32px);
+    max-width: 0;
+    padding: 0;
+    margin: 0;
+  }
+}
+@keyframes callout-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(32px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes callout-slide-out-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+    max-width: 600px;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(32px);
+    max-width: 0;
+    padding: 0;
+    margin: 0;
+  }
+}
+@keyframes callout-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes callout-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes callout-progress {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+@keyframes callout-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes callout-pulse {
+  0% {
+    box-shadow: 0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 0 var(--callout-border);
+  }
+  70% {
+    box-shadow: 0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 7px transparent;
+  }
+  100% {
+    box-shadow: 0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 0 transparent;
+  }
+}
+:host {
+  display: block;
+  width: 100%;
+}
+
+:host(.enter-top) {
+  animation: callout-slide-in-top 0.25s ease both;
+}
+
+:host(.enter-bottom) {
+  animation: callout-slide-in-bottom 0.25s ease both;
+}
+
+:host(.enter-left) {
+  animation: callout-slide-in-left 0.25s ease both;
+}
+
+:host(.enter-right) {
+  animation: callout-slide-in-right 0.25s ease both;
+}
+
+:host(.enter-fade) {
+  animation: callout-fade-in 0.25s ease both;
+}
+
+:host(.closing.enter-top) {
+  animation: callout-slide-out-top 0.25s ease both;
+  pointer-events: none;
+}
+
+:host(.closing.enter-bottom) {
+  animation: callout-slide-out-bottom 0.25s ease both;
+  pointer-events: none;
+}
+
+:host(.closing.enter-left) {
+  animation: callout-slide-out-left 0.25s ease both;
+  pointer-events: none;
+}
+
+:host(.closing.enter-right) {
+  animation: callout-slide-out-right 0.25s ease both;
+  pointer-events: none;
+}
+
+:host(.closing.enter-fade) {
+  animation: callout-fade-out 0.25s ease both;
+  pointer-events: none;
+}
+
+:host(.banner) {
+  border-radius: 0;
+}
+
+.callout-inner {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 12px;
+  align-items: center;
+  padding: 14px 18px;
+  border-radius: 14px;
+  position: relative;
+  background: var(--callout-bg, #eff6ff);
+  color: var(--callout-text, #1e3a8a);
+  border: 1px solid var(--callout-border, transparent);
+  box-shadow: 0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07));
+  overflow: hidden;
+}
+
+/* ── Compact layout ───────────────────────── */
+:host(.compact) .callout-inner {
+  padding: 8px 14px;
+  gap: 10px;
+  border-radius: 999px;
+  align-items: center;
+  grid-template-columns: auto auto 1fr auto;
+}
+
+/* ── Size scale ───────────────────────────── */
+:host(.size-sm) .callout-inner {
+  padding: 6px 10px;
+  border-radius: 8px;
+  gap: 7px;
+}
+
+:host(.size-sm) .callout-title,
+:host(.size-sm) .callout-message,
+:host(.size-sm) .callout-inline-message {
+  font-size: 0.78rem;
+}
+
+:host(.size-sm) .callout-icon {
+  width: 22px;
+  height: 22px;
+  font-size: 1em;
+}
+
+:host(.size-md) .callout-inner {
+  padding: 14px 18px;
+  border-radius: 14px;
+  gap: 12px;
+}
+
+:host(.size-md) .callout-title,
+:host(.size-md) .callout-message,
+:host(.size-md) .callout-inline-message {
+  font-size: 0.95rem;
+}
+
+:host(.size-md) .callout-icon {
+  width: 38px;
+  height: 38px;
+  font-size: 1.25em;
+}
+
+:host(.size-lg) .callout-inner {
+  padding: 22px 28px;
+  border-radius: 22px;
+  gap: 18px;
+}
+
+:host(.size-lg) .callout-title,
+:host(.size-lg) .callout-message,
+:host(.size-lg) .callout-inline-message {
+  font-size: 1.15rem;
+}
+
+:host(.size-lg) .callout-icon {
+  width: 54px;
+  height: 54px;
+  font-size: 1.5em;
+}
+
+:host(.compact) .callout-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+}
+
+:host(.compact) .callout-title {
+  font-size: 0.85rem;
+}
+
+.callout-inline-message {
+  font-size: 0.85rem;
+  opacity: 0.8;
+  flex: 1;
+}
+
+/* ── Banner layout (no radius) ────────────── */
+:host(.banner) .callout-inner {
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  box-shadow: none;
+}
+
+/* ── Icon container ───────────────────────── */
+.callout-icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--callout-icon-bg, rgba(255, 255, 255, 0.5));
+}
+
+/* ── Content ──────────────────────────────── */
+.callout-content {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.callout-title {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  font-size: 0.95rem;
+  line-height: 1.3;
+}
+
+.callout-message {
+  font-size: 0.875rem;
+  opacity: 0.85;
+  line-height: 1.5;
+}
+
+.callout-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 6px;
+}
+
+/* ── Close button ─────────────────────────── */
+.callout-close {
+  background: transparent;
+  border: none;
+  padding: 5px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity 0.15s ease, background 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.callout-close:hover {
+  opacity: 1;
+  background: rgba(15, 23, 42, 0.08);
+}
+
+.callout-close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* ── Auto-close progress bar ──────────────── */
+.callout-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: currentColor;
+  opacity: 0.3;
+  transform-origin: left center;
+  animation: callout-progress linear both;
+}
+
+/* ── Outlined modifier ────────────────────── */
+:host(.outlined) .callout-inner {
+  box-shadow: none;
+  background: transparent;
+  border-color: var(--callout-text, currentColor) !important;
+}
+
+/* ── Variants ─────────────────────────────── */
+:host(.variant-info) .callout-inner {
+  --callout-bg: #eff6ff;
+  --callout-text: #1d4ed8;
+  --callout-border: rgba(59, 130, 246, 0.3);
+  --callout-icon-bg: rgba(59, 130, 246, 0.12);
+  --callout-shadow: rgba(59, 130, 246, 0.08);
+}
+
+:host(.variant-success) .callout-inner {
+  --callout-bg: #f0fdf4;
+  --callout-text: #15803d;
+  --callout-border: rgba(22, 163, 74, 0.3);
+  --callout-icon-bg: rgba(22, 163, 74, 0.12);
+  --callout-shadow: rgba(22, 163, 74, 0.08);
+}
+
+:host(.variant-warning) .callout-inner {
+  --callout-bg: #fffbeb;
+  --callout-text: #b45309;
+  --callout-border: rgba(217, 119, 6, 0.3);
+  --callout-icon-bg: rgba(217, 119, 6, 0.12);
+  --callout-shadow: rgba(217, 119, 6, 0.08);
+}
+
+:host(.variant-danger) .callout-inner {
+  --callout-bg: #fef2f2;
+  --callout-text: #dc2626;
+  --callout-border: rgba(220, 38, 38, 0.3);
+  --callout-icon-bg: rgba(220, 38, 38, 0.12);
+  --callout-shadow: rgba(220, 38, 38, 0.08);
+}
+
+:host(.variant-neutral) .callout-inner {
+  --callout-bg: #f8fafc;
+  --callout-text: #334155;
+  --callout-border: rgba(100, 116, 139, 0.25);
+  --callout-icon-bg: rgba(100, 116, 139, 0.1);
+  --callout-shadow: rgba(15, 23, 42, 0.06);
+}
+
+/* ── Responsive ───────────────────────────── */
+@media (max-width: 640px) {
+  .callout-inner {
+    grid-template-columns: auto 1fr auto;
+    padding: 12px 14px;
+  }
+}
+/* ── Loading spinner ──────────────────────── */
+.callout-spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2.5px solid var(--callout-icon-bg, rgba(255, 255, 255, 0.3));
+  border-top-color: var(--callout-text, currentColor);
+  border-radius: 50%;
+  animation: callout-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+/* ── No-icon layout ───────────────────────── */
+:host(.no-icon) .callout-inner {
+  grid-template-columns: 1fr auto;
+}
+
+:host(.compact.no-icon) .callout-inner {
+  grid-template-columns: auto 1fr auto;
+}
+
+/* ── Pulse attention ring ─────────────────── */
+:host(.pulse) .callout-inner {
+  animation: callout-pulse 1.8s ease-in-out infinite;
+}
+
+/* ── Solid variants ───────────────────────── */
+:host(.solid) .callout-close:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+:host(.solid.variant-info) .callout-inner {
+  --callout-bg: #1d4ed8;
+  --callout-text: #ffffff;
+  --callout-border: transparent;
+  --callout-icon-bg: rgba(255, 255, 255, 0.2);
+  --callout-shadow: rgba(29, 78, 216, 0.3);
+}
+
+:host(.solid.variant-success) .callout-inner {
+  --callout-bg: #15803d;
+  --callout-text: #ffffff;
+  --callout-border: transparent;
+  --callout-icon-bg: rgba(255, 255, 255, 0.2);
+  --callout-shadow: rgba(21, 128, 61, 0.3);
+}
+
+:host(.solid.variant-warning) .callout-inner {
+  --callout-bg: #d97706;
+  --callout-text: #ffffff;
+  --callout-border: transparent;
+  --callout-icon-bg: rgba(255, 255, 255, 0.2);
+  --callout-shadow: rgba(217, 119, 6, 0.3);
+}
+
+:host(.solid.variant-danger) .callout-inner {
+  --callout-bg: #dc2626;
+  --callout-text: #ffffff;
+  --callout-border: transparent;
+  --callout-icon-bg: rgba(255, 255, 255, 0.2);
+  --callout-shadow: rgba(220, 38, 38, 0.3);
+}
+
+:host(.solid.variant-neutral) .callout-inner {
+  --callout-bg: #334155;
+  --callout-text: #ffffff;
+  --callout-border: transparent;
+  --callout-icon-bg: rgba(255, 255, 255, 0.15);
+  --callout-shadow: rgba(51, 65, 85, 0.3);
+}
+
+/* ── Accent bar ───────────────────────────── */
+:host(.accent-bar) .callout-inner {
+  border-left: 4px solid var(--callout-text, currentColor);
+  border-radius: 0 14px 14px 0;
+  padding-left: 14px;
+}
+
+:host(.accent-bar.banner) .callout-inner {
+  border-radius: 0;
+}
+
+:host(.accent-bar.compact) .callout-inner {
+  border-radius: 0 999px 999px 0;
+}
+
+/* ── Sticky ───────────────────────────────── */
+:host(.sticky) {
+  position: sticky;
+  top: 0;
+  z-index: 200;
+}
+
+/* ── Pause on hover ───────────────────────── */
+.callout-progress.paused,
+:host(.paused) .callout-marquee-content {
+  animation-play-state: paused;
+}
+
+/* ── Truncate message ─────────────────────── */
+.callout-message.truncated {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--callout-truncate-lines, 3);
+  line-clamp: var(--callout-truncate-lines, 3);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.callout-show-more {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-top: 4px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--callout-text, currentColor);
+  cursor: pointer;
+  opacity: 0.75;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  display: inline-block;
+  line-height: 1.4;
+}
+.callout-show-more:hover {
+  opacity: 1;
+}
+.callout-show-more:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* ── Marquee / ticker ─────────────────────── */
+:host(.marquee) .callout-inner {
+  overflow: hidden;
+}
+
+.callout-marquee-track {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
+  gap: 3rem; /* Hardware ticker spacing */
+}
+
+.callout-marquee-group {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 3rem;
+  min-width: 100%;
+  animation: callout-scroll var(--marquee-speed, 18s) linear infinite;
+  will-change: transform;
+}
+
+.callout-marquee-item {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+@keyframes callout-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - 3rem));
+  }
+}
+:host(.paused) .callout-marquee-group {
+  animation-play-state: paused;
+}
+
+:host(.marquee) .callout-message {
+  overflow: hidden;
+}