@class-kit/react 0.1.0

package/dist/styles/base.css

@@ -0,0 +1,455 @@
+:root {
+  --cc-font-family:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  --cc-radius-sm: 4px;
+  --cc-radius-md: 8px;
+  --cc-radius-lg: 10px;
+  --cc-radius-pill: 999px;
+  --cc-color-text: #111111;
+  --cc-color-muted: #626262;
+  --cc-color-border: #d8d8d8;
+  --cc-color-border-hover: #a3a3a3;
+  --cc-color-border-focus: #111111;
+  --cc-color-divider: #e9e9e9;
+  --cc-color-surface: #ffffff;
+  --cc-color-surface-soft: #f7f7f7;
+  --cc-color-danger: #b91c1c;
+  --cc-color-success: #166534;
+  --cc-color-warning: #92400e;
+  --cc-color-accent: #111111;
+  --cc-color-accent-hover: #000000;
+  --cc-color-accent-contrast: #ffffff;
+  --cc-shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.18);
+  --cc-shadow-floating: 0 22px 64px rgba(124, 58, 237, 0.2);
+  --cc-form-gap: 16px;
+  --cc-form-control-height: 40px;
+  --cc-form-control-radius: var(--cc-radius-md);
+  --cc-form-control-background: transparent;
+  --cc-form-control-hover-background: transparent;
+  --cc-form-control-focus-background: transparent;
+  --cc-form-control-readonly-background: transparent;
+  --cc-form-control-disabled-background: transparent;
+  --cc-form-placeholder-color: var(--cc-color-muted);
+  --cc-form-placeholder-font-size: inherit;
+  --cc-form-font: var(--cc-font-family);
+  --cc-form-color-text: var(--cc-color-text);
+  --cc-form-color-muted: var(--cc-color-muted);
+  --cc-form-color-border: var(--cc-color-border);
+  --cc-form-color-border-hover: var(--cc-color-border-hover);
+  --cc-form-color-border-focus: var(--cc-color-border-focus);
+  --cc-form-color-divider: var(--cc-color-divider);
+  --cc-form-color-surface: var(--cc-color-surface);
+  --cc-form-color-surface-soft: var(--cc-color-surface-soft);
+  --cc-form-color-danger: var(--cc-color-danger);
+  --cc-form-color-success: var(--cc-color-success);
+  --cc-form-color-accent: var(--cc-color-accent);
+  --cc-form-color-accent-hover: var(--cc-color-accent-hover);
+  --cc-form-color-accent-contrast: var(--cc-color-accent-contrast);
+  --cc-form-color-warning: var(--cc-color-warning);
+  --cc-form-shadow-focus: var(--cc-shadow-focus);
+  --cc-form-shadow-floating: var(--cc-shadow-floating);
+  --cc-form-disabled-background: var(--cc-form-control-disabled-background);
+  --cc-form-disabled-border-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 42%,
+    var(--cc-form-color-border)
+  );
+  --cc-form-disabled-color: var(--cc-form-color-muted);
+  --cc-form-disabled-opacity: 0.58;
+  --cc-form-readonly-background: var(--cc-form-control-readonly-background);
+  --cc-form-readonly-border-color: var(--cc-form-color-border);
+  --cc-form-readonly-color: var(--cc-form-color-text);
+  --cc-select-menu-radius: var(--cc-form-control-radius);
+  --cc-select-menu-background: var(--cc-form-color-surface);
+  --cc-select-menu-border-color: var(--cc-form-color-border);
+  --cc-select-menu-text-color: var(--cc-form-color-text);
+  --cc-select-menu-shadow: var(--cc-form-shadow-floating);
+  --cc-select-option-hover-color: var(--cc-form-color-surface-soft);
+  --cc-select-option-selected-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 12%,
+    transparent
+  );
+  --cc-select-option-selected-text-color: var(--cc-form-color-accent);
+  --cc-select-check-color: var(--cc-form-color-accent);
+  --cc-select-placeholder-color: var(--cc-form-placeholder-color);
+  --cc-virtual-select-menu-height: 260px;
+  --cc-virtual-select-search-background: var(--cc-form-control-background);
+  --cc-virtual-select-empty-color: var(--cc-form-color-muted);
+  --cc-choice-background: var(--cc-form-control-background);
+  --cc-choice-border-color: var(--cc-form-color-border);
+  --cc-choice-border-hover-color: var(--cc-form-color-border-hover);
+  --cc-choice-checked-background: var(--cc-form-color-accent);
+  --cc-choice-checked-border-color: var(--cc-form-color-accent);
+  --cc-choice-check-color: var(--cc-form-color-accent-contrast);
+  --cc-switch-track-background: var(--cc-form-color-border);
+  --cc-switch-track-checked-background: var(--cc-form-color-accent);
+  --cc-switch-thumb-background: var(--cc-form-color-surface);
+  --cc-switch-thumb-shadow: 0 1px 3px rgba(23, 32, 38, 0.24);
+  --cc-rating-star-color: var(--cc-form-color-border);
+  --cc-rating-star-active-color: var(--cc-form-color-accent);
+  --cc-canvas-editor-background: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 5%,
+    var(--cc-form-color-surface)
+  );
+  --cc-canvas-editor-card-background: var(--cc-form-color-surface);
+  --cc-canvas-editor-card-border-color: var(--cc-form-color-border);
+  --cc-canvas-editor-card-shadow: 0 10px 24px rgba(49, 32, 88, 0.08);
+  --cc-canvas-editor-line-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 48%,
+    var(--cc-form-color-border)
+  );
+  --cc-canvas-editor-muted-color: var(--cc-form-color-muted);
+  --cc-canvas-editor-text-color: var(--cc-form-color-text);
+  --cc-canvas-editor-grid-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 10%,
+    transparent
+  );
+  --cc-canvas-editor-selection-ring: 0 0 0 2px
+    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  --cc-canvas-editor-control-active-background: var(--cc-form-color-accent);
+  --cc-canvas-editor-control-active-border-color: var(--cc-form-color-accent);
+  --cc-canvas-editor-control-active-color: var(--cc-form-color-accent-contrast);
+  --cc-canvas-editor-control-hover-border-color: var(--cc-form-color-accent);
+  --cc-canvas-editor-document-accent-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 8%,
+    transparent
+  );
+  --cc-canvas-editor-node-border-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 14%,
+    transparent
+  );
+  --cc-canvas-editor-node-editing-border-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 42%,
+    transparent
+  );
+  --cc-canvas-editor-input-focus-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--cc-form-color-accent) 22%, transparent);
+  --cc-canvas-editor-mind-glow: radial-gradient(
+    circle at 50% 45%,
+    color-mix(in srgb, var(--cc-form-color-accent) 8%, transparent),
+    transparent 44%
+  );
+  --cc-canvas-editor-card-selected-border-color: var(--cc-form-color-accent);
+  --cc-canvas-editor-card-selected-shadow: 0 12px 30px
+    color-mix(in srgb, var(--cc-form-color-accent) 12%, transparent);
+  --cc-color-picker-swatch-radius: var(--cc-radius-md);
+  --cc-date-picker-panel-radius: var(--cc-radius-lg);
+  --cc-date-picker-panel-shadow: var(--cc-form-shadow-floating);
+  --cc-date-picker-day-hover-background: var(--cc-form-color-surface-soft);
+  --cc-date-picker-day-selected-background: var(--cc-form-color-accent);
+  --cc-date-picker-day-selected-color: var(--cc-form-color-accent-contrast);
+  --cc-date-picker-day-today-ring: inset 0 0 0 1px var(--cc-form-color-accent);
+  --cc-date-range-summary-active-border-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 48%,
+    var(--cc-form-color-border)
+  );
+  --cc-date-range-day-in-range-background: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 12%,
+    transparent
+  );
+  --cc-calendar-day-hover-background: var(
+    --cc-date-picker-day-hover-background
+  );
+  --cc-calendar-day-selected-background: var(--cc-form-color-accent);
+  --cc-calendar-day-selected-color: var(--cc-form-color-accent-contrast);
+  --cc-calendar-day-today-ring: inset 0 0 0 1px var(--cc-form-color-accent);
+  --cc-countdown-color: var(--cc-form-color-accent);
+  --cc-countdown-done-color: var(--cc-form-color-muted);
+  --cc-verification-code-size: 42px;
+  --cc-verification-code-radius: var(--cc-radius-md);
+  --cc-verification-code-border: var(--cc-form-color-border);
+  --cc-verification-code-focus-border: var(--cc-form-color-accent);
+  --cc-verification-code-focus-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--cc-form-color-accent) 18%, transparent);
+  --cc-slide-captcha-radius: var(--cc-radius-lg);
+  --cc-slide-captcha-border-color: var(--cc-form-color-border);
+  --cc-slide-captcha-track-background: var(--cc-form-color-surface-soft);
+  --cc-slide-captcha-track-fill: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 18%,
+    transparent
+  );
+  --cc-slide-captcha-thumb-background: var(--cc-form-color-accent);
+  --cc-slide-captcha-thumb-color: var(--cc-form-color-accent-contrast);
+  --cc-slide-captcha-success-color: var(--cc-form-color-success);
+  --cc-slide-captcha-error-color: var(--cc-form-color-danger);
+  --cc-marquee-background: transparent;
+  --cc-marquee-border-color: transparent;
+  --cc-marquee-radius: var(--cc-radius-lg);
+  --cc-marquee-padding: 10px 14px;
+  --cc-marquee-gap: 32px;
+  --cc-marquee-duration: 18000ms;
+  --cc-marquee-item-height: 28px;
+  --cc-marquee-step-animation-duration: 420ms;
+  --cc-marquee-focus-outline-color: var(--cc-form-color-accent);
+  --cc-code-radius: var(--cc-radius-lg);
+  --cc-code-background: transparent;
+  --cc-code-border-color: transparent;
+  --cc-code-text-color: var(--cc-form-color-text);
+  --cc-code-padding: 10px;
+  --cc-qr-code-logo-shadow: 0 4px 14px rgba(49, 32, 88, 0.16);
+  --cc-lazy-image-radius: var(--cc-radius-lg);
+  --cc-lazy-image-border-color: transparent;
+  --cc-lazy-image-placeholder-background: transparent;
+  --cc-lazy-image-placeholder-color: var(--cc-form-color-muted);
+  --cc-lazy-image-skeleton-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 16%,
+    transparent
+  );
+  --cc-lazy-image-skeleton-highlight-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 16%,
+    transparent
+  );
+  --cc-lazy-image-error-color: var(--cc-form-color-danger);
+  --cc-lazy-image-transition-duration: var(--cc-animation-duration);
+  --cc-tilt-card-background: var(--cc-form-color-surface);
+  --cc-tilt-card-border-color: var(--cc-form-color-border);
+  --cc-tilt-card-color: var(--cc-form-color-text);
+  --cc-tilt-card-radius: var(--cc-radius-lg);
+  --cc-tilt-card-shadow: 0 18px 42px rgba(49, 32, 88, 0.14);
+  --cc-tilt-card-shadow-active: 0 24px 64px rgba(124, 58, 237, 0.22);
+  --cc-tilt-card-glare-color: rgba(255, 255, 255, 0.55);
+  --cc-gradient-text-background: linear-gradient(
+    90deg,
+    var(--cc-form-color-accent),
+    #ec4899,
+    #22d3ee
+  );
+  --cc-gradient-text-background-size: 200% 100%;
+  --cc-gradient-text-duration: 3600ms;
+  --cc-gradient-text-easing: cubic-bezier(0.22, 0.8, 0.28, 1);
+  --cc-gradient-text-font-weight: 700;
+  --cc-design-effect-color-1: var(--cc-form-color-accent);
+  --cc-design-effect-color-2: #ec4899;
+  --cc-design-effect-color-3: #22d3ee;
+  --cc-design-effect-alpha: 0.72;
+  --cc-design-effect-radius: var(--cc-radius-lg);
+  --cc-design-effect-border-color: color-mix(
+    in srgb,
+    var(--cc-design-effect-color-1) 34%,
+    var(--cc-form-color-border)
+  );
+  --cc-design-effect-background: color-mix(
+    in srgb,
+    var(--cc-form-color-surface) 88%,
+    transparent
+  );
+  --cc-design-effect-shadow: 0 18px 48px
+    color-mix(in srgb, var(--cc-design-effect-color-1) 18%, transparent);
+  --cc-typewriter-loading-color: var(--cc-form-color-accent);
+  --cc-typewriter-cursor-color: var(--cc-form-color-accent);
+  --cc-video-player-radius: var(--cc-radius-lg);
+  --cc-video-player-controls-background: color-mix(
+    in srgb,
+    var(--cc-form-color-surface) 88%,
+    transparent
+  );
+  --cc-video-player-controls-color: var(--cc-form-color-text);
+  --cc-business-surface: color-mix(
+    in srgb,
+    var(--cc-form-color-surface) 92%,
+    transparent
+  );
+  --cc-business-border-color: color-mix(
+    in srgb,
+    var(--cc-form-color-border) 82%,
+    transparent
+  );
+  --cc-business-text-color: var(--cc-form-color-text);
+  --cc-business-muted-color: var(--cc-form-color-muted);
+  --cc-danmaku-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
+  --cc-drag-drop-slot-dragging-background: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 8%,
+    transparent
+  );
+  --cc-drag-drop-slot-dragging-border-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 38%,
+    transparent
+  );
+  --cc-drag-drop-slot-over-background: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 10%,
+    transparent
+  );
+  --cc-drag-drop-slot-over-border-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 46%,
+    transparent
+  );
+  --cc-drag-drop-preview-shadow: 0 18px 42px
+    color-mix(in srgb, var(--cc-form-color-accent) 26%, transparent);
+  --cc-progress-track-color: color-mix(
+    in srgb,
+    var(--cc-form-color-border) 70%,
+    transparent
+  );
+  --cc-progress-fill-color: var(--cc-form-color-accent);
+  --cc-progress-thumb-color: var(--cc-form-color-surface);
+  --cc-progress-thumb-shadow: 0 0 0 4px
+    color-mix(in srgb, var(--cc-form-color-accent) 16%, transparent);
+  --cc-signature-border-color: var(--cc-form-color-border);
+  --cc-signature-border-radius: var(--cc-radius-lg);
+  --cc-signature-action-bg: var(--cc-form-color-surface);
+  --cc-signature-action-color: var(--cc-form-color-text);
+  --cc-signature-action-hover-bg: var(--cc-form-color-hover);
+  --cc-signature-action-disabled-color: var(--cc-form-color-placeholder);
+  --cc-signature-guide-color: color-mix(
+    in srgb,
+    var(--cc-form-color-muted) 26%,
+    transparent
+  );
+  --cc-timeline-color: var(--cc-form-color-text);
+  --cc-timeline-muted-color: var(--cc-form-color-muted);
+  --cc-timeline-line-color: var(--cc-form-color-border);
+  --cc-timeline-active-color: var(--cc-form-color-accent);
+  --cc-floating-ball-background: var(--cc-form-color-accent);
+  --cc-floating-ball-color: var(--cc-form-color-accent-contrast);
+  --cc-picker-option-height: 38px;
+  --cc-picker-active-color: var(--cc-form-color-accent);
+  --cc-picker-indicator-border-color: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 42%,
+    var(--cc-form-color-border)
+  );
+  --cc-picker-mask-background: var(--cc-form-color-surface);
+  --cc-swiper-radius: var(--cc-radius-lg);
+  --cc-swiper-arrow-background: rgba(255, 255, 255, 0.76);
+  --cc-swiper-dot-color: var(--cc-form-color-accent);
+  --cc-swiper-inactive-opacity: 0.52;
+  --cc-virtual-list-radius: var(--cc-radius-lg);
+  --cc-virtual-list-text-color: var(--cc-form-color-text);
+  --cc-masonry-virtual-list-radius: var(--cc-radius-lg);
+  --cc-masonry-virtual-list-text-color: var(--cc-form-color-text);
+  --cc-chat-virtual-list-radius: var(--cc-radius-lg);
+  --cc-chat-virtual-list-text-color: var(--cc-form-color-text);
+  --cc-button-radius: var(--cc-form-control-radius);
+  --cc-button-shadow: 0 1px 2px rgba(49, 32, 88, 0.08);
+  --cc-button-primary-background: var(--cc-form-color-accent);
+  --cc-button-primary-background-hover: var(--cc-form-color-accent-hover);
+  --cc-button-primary-color: var(--cc-form-color-accent-contrast);
+  --cc-button-primary-shadow-hover: 0 8px 20px
+    color-mix(in srgb, var(--cc-form-color-accent) 22%, transparent);
+  --cc-button-secondary-background: var(--cc-form-color-surface-soft);
+  --cc-button-secondary-border-color: var(--cc-form-color-border);
+  --cc-button-secondary-color: var(--cc-form-color-text);
+  --cc-button-ghost-color: var(--cc-form-color-accent);
+  --cc-button-danger-background: var(--cc-form-color-danger);
+  --cc-button-danger-color: #fff;
+  --cc-modal-overlay-background: rgba(31, 26, 46, 0.52);
+  --cc-modal-radius: var(--cc-radius-lg);
+  --cc-modal-background: var(--cc-form-color-surface);
+  --cc-modal-color: var(--cc-form-color-text);
+  --cc-modal-shadow: var(--cc-form-shadow-floating);
+  --cc-modal-header-background: linear-gradient(
+    180deg,
+    var(--cc-form-color-surface) 0%,
+    var(--cc-form-color-surface-soft) 100%
+  );
+  --cc-modal-header-border-color: var(--cc-form-color-divider);
+  --cc-modal-header-color: var(--cc-form-color-text);
+  --cc-modal-overlay-enter-opacity: 1;
+  --cc-modal-overlay-exit-opacity: 0;
+  --cc-modal-panel-enter-scale: 0.9;
+  --cc-modal-panel-active-scale: 1;
+  --cc-popup-overlay-background: var(--cc-modal-overlay-background);
+  --cc-popup-radius: var(--cc-radius-lg);
+  --cc-popup-background: var(--cc-form-color-surface);
+  --cc-popup-color: var(--cc-form-color-text);
+  --cc-popup-shadow: var(--cc-form-shadow-floating);
+  --cc-popup-header-background: var(--cc-modal-header-background);
+  --cc-popup-header-border-color: var(--cc-form-color-divider);
+  --cc-popup-header-color: var(--cc-form-color-text);
+  --cc-popup-max-size: min(420px, 86vw);
+  --cc-popup-slide-distance: 100%;
+  --cc-popup-overlay-enter-opacity: 1;
+  --cc-popup-overlay-exit-opacity: 0;
+  --cc-tooltip-background: #2f2450;
+  --cc-tooltip-color: #fff;
+  --cc-tooltip-radius: var(--cc-radius-md);
+  --cc-tooltip-shadow: 0 10px 24px rgba(49, 32, 88, 0.2);
+  --cc-toast-radius: var(--cc-radius-lg);
+  --cc-toast-background: var(--cc-form-color-surface);
+  --cc-toast-border-color: var(--cc-form-color-border);
+  --cc-toast-accent-color: var(--cc-form-color-accent);
+  --cc-toast-shadow: 0 12px 30px rgba(49, 32, 88, 0.16);
+  --cc-toast-slide-distance: 16px;
+  --cc-toast-scale-enter: 0.9;
+  --cc-toast-scale-active: 1;
+  --cc-tabs-radius: var(--cc-radius-lg);
+  --cc-tabs-list-border-color: var(--cc-form-color-border);
+  --cc-tabs-tab-color: var(--cc-form-color-muted);
+  --cc-tabs-tab-active-color: var(--cc-form-color-accent);
+  --cc-animation-duration: 180ms;
+  --cc-animation-easing: cubic-bezier(0.22, 0.8, 0.28, 1);
+  --cc-theme-backdrop-filter: none;
+  --cc-theme-glass-highlight: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.72),
+    rgba(255, 255, 255, 0.36)
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cc-chat-virtual-list__top-loading {
+    transition-duration: 1ms;
+  }
+
+  .cc-chat-virtual-list__top-loading::before {
+    animation: none;
+  }
+
+  .cc-rolling-number__track {
+    transition-duration: 1ms;
+  }
+
+  .cc-marquee__track {
+    animation-play-state: paused;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --cc-animation-duration: 1ms;
+  }
+
+  .cc-modal__overlay,
+  .cc-modal__panel,
+  .cc-popup__overlay,
+  .cc-popup__panel,
+  .cc-tooltip__content,
+  .cc-tilt-card,
+  .cc-tilt-card__surface,
+  .cc-tilt-card__glare,
+  .cc-design-effect,
+  .cc-typewriter-text__cursor,
+  .cc-gradient-text,
+  .cc-toast {
+    transition-duration: 1ms;
+  }
+
+  .cc-gradient-text,
+  .cc-design-effect,
+  .cc-design-effect__overlay,
+  .cc-design-effect::after,
+  .cc-typewriter-text__cursor {
+    animation: none;
+  }
+
+  .cc-tabs__panel[data-animation] {
+    animation-duration: 1ms;
+  }
+}

package/dist/styles/components/affix.css

@@ -0,0 +1,15 @@
+@import "../base.css";
+
+.cc-affix[data-target="element"] {
+  position: sticky;
+  z-index: 50;
+}
+
+.cc-affix__inner {
+  position: relative;
+}
+
+.cc-affix[data-target="window"] .cc-affix__inner {
+  z-index: 50;
+}
+

package/dist/styles/components/backtop.css

@@ -0,0 +1,67 @@
+@import "../base.css";
+
+.cc-backtop {
+  align-items: center;
+  appearance: none;
+  background: var(--cc-form-color-accent);
+  border: 0;
+  border-radius: var(--cc-radius-pill);
+  bottom: 28px;
+  box-shadow: var(
+    --cc-backtop-shadow,
+    0 10px 24px color-mix(in srgb, var(--cc-form-color-accent) 24%, transparent)
+  );
+  color: var(--cc-backtop-color, var(--cc-form-color-accent-contrast));
+  contain: layout paint style;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 18px;
+  height: 42px;
+  justify-content: center;
+  line-height: 1;
+  outline: none;
+  padding: 0;
+  position: fixed;
+  right: 28px;
+  transform: translateZ(0);
+  transition:
+    background-color 180ms ease,
+    box-shadow 180ms ease,
+    color 180ms ease,
+    opacity 180ms ease;
+  user-select: none;
+  width: 42px;
+  isolation: isolate;
+  will-change: box-shadow;
+  z-index: 900;
+}
+
+.cc-backtop:hover {
+  background: var(
+    --cc-backtop-background-hover,
+    var(--cc-form-color-accent-hover)
+  );
+  box-shadow: var(
+    --cc-backtop-shadow-hover,
+    0 14px 30px color-mix(in srgb, var(--cc-form-color-accent) 30%, transparent)
+  );
+}
+
+.cc-backtop:focus-visible {
+  box-shadow:
+    var(--cc-form-shadow-focus),
+    var(
+      --cc-backtop-shadow-hover,
+      0 14px 30px
+        color-mix(in srgb, var(--cc-form-color-accent) 30%, transparent)
+    );
+}
+
+.cc-backtop:active {
+  background: var(
+    --cc-backtop-background-hover,
+    var(--cc-form-color-accent-hover)
+  );
+}
+

package/dist/styles/components/badge.css

@@ -0,0 +1,33 @@
+@import "../base.css";
+
+.cc-badge {
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+}
+
+.cc-badge sup {
+  align-items: center;
+  background: var(--cc-form-color-danger);
+  border-radius: var(--cc-radius-pill);
+  color: #fff;
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 700;
+  justify-content: center;
+  line-height: 1;
+  min-width: 18px;
+  padding: 3px 6px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(50%, -50%);
+}
+
+.cc-badge[data-dot="true"] sup {
+  height: 8px;
+  min-width: 0;
+  padding: 0;
+  width: 8px;
+}
+

package/dist/styles/components/barcode.css

@@ -0,0 +1,33 @@
+@import "../base.css";
+
+.cc-code {
+  align-items: center;
+  background: var(--cc-code-background);
+  border: 1px solid var(--cc-code-border-color);
+  border-radius: var(--cc-code-radius);
+  color: var(--cc-code-text-color);
+  display: inline-flex;
+  justify-content: center;
+  max-width: 100%;
+  overflow: hidden;
+  padding: var(--cc-code-padding);
+}
+
+.cc-code svg {
+  display: block;
+  max-width: 100%;
+}
+
+.cc-code__error {
+  align-items: center;
+  color: var(--cc-form-color-danger);
+  display: inline-flex;
+  font-size: 13px;
+  min-height: 40px;
+  text-align: center;
+}
+
+.cc-barcode {
+  min-height: 112px;
+}
+

package/dist/styles/components/breadcrumb.css

@@ -0,0 +1,15 @@
+@import "../base.css";
+
+.cc-breadcrumb {
+  align-items: center;
+  color: var(--cc-form-color-muted);
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.cc-breadcrumb a {
+  color: var(--cc-form-color-accent);
+  text-decoration: none;
+}
+