srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/assets/styles/setup/06.utility-classes/_a11y.css

@@ -0,0 +1,280 @@
+/* ===========================================
+   ACCESSIBILITY UTILITIES
+   Modern a11y helpers and utilities
+   =========================================== */
+
+/* Screen reader only content (modern approach) */
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/* Screen reader only - focusable variant */
+.sr-only-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/* Not screen reader (opposite of sr-only) */
+.not-sr-only {
+  position: static !important;
+  width: auto !important;
+  height: auto !important;
+  padding: inherit !important;
+  margin: inherit !important;
+  overflow: visible !important;
+  clip-path: none !important;
+  white-space: normal !important;
+}
+
+/* Focus management */
+.focus-visible-only {
+  outline: none;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 2px solid var(--focus-color, currentColor);
+  outline-offset: 2px;
+}
+
+.focus-ring {
+  outline: 2px solid var(--focus-color, currentColor);
+  outline-offset: 2px;
+}
+
+.focus-ring-inset {
+  outline: 2px solid var(--focus-color, currentColor);
+  outline-offset: -2px;
+}
+
+.focus-ring-none {
+  outline: none !important;
+}
+
+/* Skip links */
+.skip-link {
+  position: absolute;
+  top: -100vh;
+  left: 0;
+  background: var(--color-text, #000);
+  color: var(--color-background, #fff);
+  padding: var(--space-sm, 1rem);
+  text-decoration: none;
+  font-weight: 600;
+  z-index: var(--z-max, 9999);
+  transform: translateY(0);
+  transition: transform 0.2s ease;
+}
+
+.skip-link:focus {
+  top: 0;
+  transform: translateY(0);
+}
+
+/* High contrast mode utilities */
+@media (prefers-contrast: high) {
+  .high-contrast-hidden {
+    display: none !important;
+  }
+
+  .high-contrast-visible {
+    display: block !important;
+  }
+}
+
+/* Reduced motion utilities */
+@media (prefers-reduced-motion: reduce) {
+  .motion-reduce {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .motion-reduce * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .motion-safe {
+    animation: inherit;
+    transition: inherit;
+  }
+}
+
+/* Color scheme utilities */
+@media (prefers-color-scheme: dark) {
+  .dark-mode-only {
+    display: block !important;
+  }
+
+  .light-mode-only {
+    display: none !important;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .dark-mode-only {
+    display: none !important;
+  }
+
+  .light-mode-only {
+    display: block !important;
+  }
+}
+
+/* Cursor utilities for interaction */
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor-help {
+  cursor: help;
+}
+
+.cursor-wait {
+  cursor: wait;
+}
+
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-grabbing {
+  cursor: grabbing;
+}
+
+/* Interactive state utilities */
+.interactive {
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.interactive:hover {
+  opacity: 0.8;
+}
+
+.interactive:focus-visible {
+  outline: 2px solid var(--focus-color, currentColor);
+  outline-offset: 2px;
+}
+
+.interactive:active {
+  transform: translateY(1px);
+}
+
+.interactive[disabled],
+.interactive[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Text selection utilities */
+.select-none {
+  user-select: none;
+}
+
+.select-text {
+  user-select: text;
+}
+
+.select-all {
+  user-select: all;
+}
+
+.select-auto {
+  user-select: auto;
+}
+
+/* Touch action utilities */
+.touch-auto {
+  touch-action: auto;
+}
+
+.touch-none {
+  touch-action: none;
+}
+
+.touch-pan-x {
+  touch-action: pan-x;
+}
+
+.touch-pan-y {
+  touch-action: pan-y;
+}
+
+.touch-manipulation {
+  touch-action: manipulation;
+}
+
+/* ARIA live region utilities */
+.live-polite {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.live-polite[aria-live="polite"] {
+  position: static;
+  left: auto;
+  width: auto;
+  height: auto;
+  overflow: visible;
+}
+
+/* Content visibility utilities */
+.content-hidden {
+  content-visibility: hidden;
+}
+
+.content-auto {
+  content-visibility: auto;
+}
+
+/* Logical property utilities for RTL support */
+.text-start {
+  text-align: start;
+}
+
+.text-end {
+  text-align: end;
+}
+
+/* Accessibility debug utilities (development only) */
+.a11y-debug * {
+  outline: 1px solid red !important;
+}
+
+.a11y-debug *[role] {
+  outline: 2px solid blue !important;
+}
+
+.a11y-debug *[aria-label],
+.a11y-debug *[aria-labelledby],
+.a11y-debug *[aria-describedby] {
+  outline: 2px solid green !important;
+}

package/app/assets/styles/setup/06.utility-classes/animations/_auto-rotate.css

@@ -0,0 +1,13 @@
+@keyframes autoRotateAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.auto-rotate {
+  animation: autoRotateAnimation;
+  animation-timeline: view();
+}

package/app/assets/styles/setup/06.utility-classes/animations/_entry-exit-blur.css

@@ -0,0 +1,16 @@
+.entry-exit-blur {
+  animation: entryExitBlurAnimation linear both;
+  animation-timeline: view();
+}
+@keyframes entryExitBlurAnimation {
+  0% {
+    filter: blur(40px);
+  }
+  45%,
+  55% {
+    filter: blur(0px);
+  }
+  100% {
+    filter: blur(40px);
+  }
+}

package/app/assets/styles/setup/06.utility-classes/animations/_entry-slide-in.css

@@ -0,0 +1,15 @@
+@keyframes entrySlideInAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(200px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.entry-slide-in {
+  animation: entrySlideInAnimation both;
+  animation-timeline: view(70% 5%);
+}

package/app/assets/styles/setup/06.utility-classes/animations/_entry-zoom-reveal.css

@@ -0,0 +1,15 @@
+@keyframes entryZoomRevealAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(200px) scale(0.3);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.entry-zoom-reveal {
+  animation: entryZoomRevealAnimation both;
+  animation-timeline: view(70% 5%);
+}

package/app/assets/styles/setup/06.utility-classes/animations/index.css

@@ -0,0 +1,4 @@
+@import './_entry-zoom-reveal';
+@import './_entry-slide-in';
+@import './_entry-exit-blur';
+@import './_auto-rotate';

package/app/assets/styles/setup/06.utility-classes/index.css

@@ -0,0 +1,4 @@
+@import "./animations/";
+@import "./spacing/";
+/* @import "./layout/"; */
+@import "./_a11y";

package/app/assets/styles/setup/06.utility-classes/layout/_containers.css

@@ -0,0 +1,96 @@
+/* ===========================================
+   CONTAINER UTILITIES
+   Responsive container system
+   =========================================== */
+
+/* Base container */
+.container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: var(--space-md, 1.5rem);
+}
+
+/* Container sizes */
+.container-xs {
+  max-width: var(--container-xs);
+}
+.container-sm {
+  max-width: var(--container-sm);
+}
+.container-md {
+  max-width: var(--container-md);
+}
+.container-lg {
+  max-width: var(--container-lg);
+}
+.container-xl {
+  max-width: var(--container-xl);
+}
+.container-2xl {
+  max-width: var(--container-2xl);
+}
+.container-3xl {
+  max-width: var(--container-3xl);
+}
+.container-4xl {
+  max-width: var(--container-4xl);
+}
+.container-5xl {
+  max-width: var(--container-5xl);
+}
+.container-6xl {
+  max-width: var(--container-6xl);
+}
+.container-7xl {
+  max-width: var(--container-7xl);
+}
+
+/* Container with no padding */
+.container-flush {
+  padding-inline: 0;
+}
+
+/* Responsive containers */
+@container (width >= 20rem) {
+  .container-xs-up {
+    max-width: var(--container-xs);
+  }
+}
+
+@container (width >= 24rem) {
+  .container-sm-up {
+    max-width: var(--container-sm);
+  }
+}
+
+@container (width >= 28rem) {
+  .container-md-up {
+    max-width: var(--container-md);
+  }
+}
+
+@container (width >= 32rem) {
+  .container-lg-up {
+    max-width: var(--container-lg);
+  }
+}
+
+@container (width >= 36rem) {
+  .container-xl-up {
+    max-width: var(--container-xl);
+  }
+}
+
+/* Full width containers */
+.container-full {
+  max-width: none;
+  width: 100%;
+}
+
+/* Container with specific padding */
+.container-tight {
+  padding-inline: var(--space-sm, 1rem);
+}
+.container-loose {
+  padding-inline: var(--space-lg, 2rem);
+}

package/app/assets/styles/setup/06.utility-classes/layout/_flexbox.css

@@ -0,0 +1,196 @@
+/* ===========================================
+   FLEXBOX UTILITIES
+   Modern Flexbox system
+   =========================================== */
+
+/* Base flex */
+.flex {
+  display: flex;
+}
+.inline-flex {
+  display: inline-flex;
+}
+
+/* Flex direction */
+.flex-row {
+  flex-direction: row;
+}
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+/* Flex wrap */
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+/* Flex grow/shrink */
+.flex-1 {
+  flex: 1 1 0%;
+}
+.flex-auto {
+  flex: 1 1 auto;
+}
+.flex-initial {
+  flex: 0 1 auto;
+}
+.flex-none {
+  flex: none;
+}
+
+.grow {
+  flex-grow: 1;
+}
+.grow-0 {
+  flex-grow: 0;
+}
+.shrink {
+  flex-shrink: 1;
+}
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+/* Justify content */
+.justify-start {
+  justify-content: flex-start;
+}
+.justify-end {
+  justify-content: flex-end;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.justify-around {
+  justify-content: space-around;
+}
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+/* Align items */
+.items-start {
+  align-items: flex-start;
+}
+.items-end {
+  align-items: flex-end;
+}
+.items-center {
+  align-items: center;
+}
+.items-baseline {
+  align-items: baseline;
+}
+.items-stretch {
+  align-items: stretch;
+}
+
+/* Align content */
+.content-start {
+  align-content: flex-start;
+}
+.content-end {
+  align-content: flex-end;
+}
+.content-center {
+  align-content: center;
+}
+.content-between {
+  align-content: space-between;
+}
+.content-around {
+  align-content: space-around;
+}
+.content-evenly {
+  align-content: space-evenly;
+}
+
+/* Align self */
+.self-auto {
+  align-self: auto;
+}
+.self-start {
+  align-self: flex-start;
+}
+.self-end {
+  align-self: flex-end;
+}
+.self-center {
+  align-self: center;
+}
+.self-stretch {
+  align-self: stretch;
+}
+.self-baseline {
+  align-self: baseline;
+}
+
+/* Flex gaps (modern browsers) */
+.flex-gap-0 {
+  gap: 0;
+}
+.flex-gap-1 {
+  gap: var(--space-3xs, 0.25rem);
+}
+.flex-gap-2 {
+  gap: var(--space-2xs, 0.5rem);
+}
+.flex-gap-3 {
+  gap: var(--space-xs, 0.75rem);
+}
+.flex-gap-4 {
+  gap: var(--space-sm, 1rem);
+}
+.flex-gap-5 {
+  gap: var(--space-md, 1.5rem);
+}
+.flex-gap-6 {
+  gap: var(--space-lg, 2rem);
+}
+
+/* Common flex patterns */
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-start {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.flex-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.flex-col-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}