@abstraks-dev/ui-library 1.0.1

package/dist/styles/animation-accessibility.scss

@@ -0,0 +1,96 @@
+/* Animation Accessibility Utilities */
+
+/* 
+ * Utility class for testing reduced motion preferences
+ * Add this class to test how animations behave with motion reduction
+ */
+.motion-reduced {
+	animation: none !important;
+	transition: none !important;
+	transform: none !important;
+}
+
+/* 
+ * High contrast mode support for animations
+ * Ensures animations remain visible in high contrast themes
+ */
+@media (prefers-contrast: high) {
+	.animate__animated {
+		/* Enhance visibility in high contrast mode */
+		border: 1px solid;
+
+		/* Reduce complex animations that may be hard to see */
+		&.animate__flip,
+		&.animate__flipInX,
+		&.animate__flipInY,
+		&.animate__flipOutX,
+		&.animate__flipOutY {
+			animation-duration: 0.3s;
+		}
+	}
+}
+
+/* 
+ * Utility for focus-visible animations
+ * Use for keyboard navigation and screen reader users
+ */
+.animate__animated:focus-visible {
+	outline: 3px solid #0066cc;
+	outline-offset: 2px;
+	animation-play-state: paused;
+}
+
+/* 
+ * Safe animation defaults for accessibility
+ * These provide gentle alternatives to intense animations
+ */
+.animate__gentle-fade {
+	animation-name: gentleFadeIn;
+	animation-duration: 0.3s;
+	animation-timing-function: ease-out;
+}
+
+.animate__gentle-slide {
+	animation-name: gentleSlideIn;
+	animation-duration: 0.4s;
+	animation-timing-function: ease-out;
+}
+
+/* Gentle animation keyframes */
+@keyframes gentleFadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes gentleSlideIn {
+	from {
+		transform: translateY(10px);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+/* 
+ * Animation guidelines for developers
+ * Use these comments as reference for accessible animations:
+ * 
+ * ✅ DO:
+ * - Keep animations under 3 seconds
+ * - Provide pause/stop controls for infinite animations  
+ * - Use subtle movements (under 100px displacement)
+ * - Test with prefers-reduced-motion enabled
+ * - Ensure keyboard focus is visible during animations
+ * 
+ * ❌ DON'T:
+ * - Use rapid flashing (more than 3 flashes per second)
+ * - Create animations that move continuously without user control
+ * - Use animations that cover important content
+ * - Ignore focus management during animated state changes
+ */

package/dist/styles/animation-toggle.scss

@@ -0,0 +1,233 @@
+/* Animation Toggle Component Styles */
+/* Accessible and high contrast mode compatible */
+
+.animation-toggle-wrapper {
+	position: relative;
+	display: inline-block;
+
+	&.disabled {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+}
+
+/* Trigger Button Styles */
+.animation-toggle-trigger {
+	background: var(--button-bg, #007bff);
+	color: var(--button-text, #ffffff);
+	border: 2px solid var(--button-border, transparent);
+	border-radius: var(--button-radius, 4px);
+	padding: var(--button-padding, 8px 16px);
+	font-size: var(--button-font-size, 14px);
+	font-weight: var(--button-font-weight, 500);
+	cursor: pointer;
+	transition: all 0.2s ease-in-out;
+	position: relative;
+	min-height: 44px; /* Touch target size */
+	min-width: 44px; /* Touch target size */
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.animation-toggle-trigger:hover {
+	background: var(--button-bg-hover, #0056b3);
+	transform: translateY(-1px);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.animation-toggle-trigger:focus {
+	outline: 3px solid var(--focus-color, #4d90fe);
+	outline-offset: 2px;
+	background: var(--button-bg-focus, #0056b3);
+}
+
+.animation-toggle-trigger:active {
+	transform: translateY(0);
+	background: var(--button-bg-active, #004085);
+}
+
+.animation-toggle-trigger:disabled {
+	background: var(--button-bg-disabled, #6c757d);
+	cursor: not-allowed;
+	transform: none;
+	box-shadow: none;
+}
+
+/* Content Container */
+.animation-toggle-content {
+	background: var(--content-bg, #ffffff);
+	border: 2px solid var(--content-border, #dee2e6);
+	border-radius: var(--content-radius, 8px);
+	padding: var(--content-padding, 16px);
+	margin-top: var(--content-margin-top, 8px);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	position: relative;
+	max-width: 400px;
+	min-width: 200px;
+}
+
+.animation-toggle-content-body {
+	margin-bottom: 12px;
+}
+
+/* Close Button */
+.animation-toggle-close {
+	background: var(--close-bg, #dc3545);
+	color: var(--close-text, #ffffff);
+	border: 2px solid var(--close-border, transparent);
+	border-radius: var(--close-radius, 4px);
+	padding: var(--close-padding, 6px 12px);
+	font-size: var(--close-font-size, 12px);
+	font-weight: var(--close-font-weight, 500);
+	cursor: pointer;
+	transition: all 0.2s ease-in-out;
+	min-height: 32px;
+	min-width: 60px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.animation-toggle-close:hover {
+	background: var(--close-bg-hover, #c82333);
+	transform: translateY(-1px);
+}
+
+.animation-toggle-close:focus {
+	outline: 3px solid var(--focus-color, #4d90fe);
+	outline-offset: 2px;
+	background: var(--close-bg-focus, #c82333);
+}
+
+.animation-toggle-close:active {
+	transform: translateY(0);
+	background: var(--close-bg-active, #bd2130);
+}
+
+/* Animation Classes */
+.animation-toggle-enter {
+	opacity: 0;
+	transform: scale(0.95) translateY(-10px);
+}
+
+.animation-toggle-enter-active {
+	opacity: 1;
+	transform: scale(1) translateY(0);
+	transition: opacity 300ms ease-out, transform 300ms ease-out;
+}
+
+.animation-toggle-exit {
+	opacity: 1;
+	transform: scale(1) translateY(0);
+}
+
+.animation-toggle-exit-active {
+	opacity: 0;
+	transform: scale(0.95) translateY(-10px);
+	transition: opacity 300ms ease-in, transform 300ms ease-in;
+}
+
+/* Screen Reader Only Content */
+.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: 0 !important;
+}
+
+/* High Contrast Mode Support */
+@media (forced-colors: active) {
+	.animation-toggle-trigger,
+	.animation-toggle-close {
+		border: 2px solid ButtonText;
+		background: ButtonFace;
+		color: ButtonText;
+	}
+
+	.animation-toggle-trigger:focus,
+	.animation-toggle-close:focus {
+		outline: 3px solid Highlight;
+		outline-offset: 2px;
+		background: Highlight;
+		color: HighlightText;
+	}
+
+	.animation-toggle-trigger:hover,
+	.animation-toggle-close:hover {
+		background: Highlight;
+		color: HighlightText;
+		border-color: HighlightText;
+	}
+
+	.animation-toggle-content {
+		border: 2px solid WindowText;
+		background: Window;
+		color: WindowText;
+	}
+
+	.animation-toggle-trigger:disabled {
+		border-color: GrayText;
+		background: Canvas;
+		color: GrayText;
+	}
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+	.animation-toggle-trigger,
+	.animation-toggle-close {
+		transition: none;
+	}
+
+	.animation-toggle-enter-active,
+	.animation-toggle-exit-active {
+		transition: none;
+	}
+
+	.animation-toggle-enter {
+		opacity: 1;
+		transform: none;
+	}
+
+	.animation-toggle-exit {
+		opacity: 0;
+		transform: none;
+	}
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+	.animation-toggle-wrapper {
+		--button-bg: #0d6efd;
+		--button-bg-hover: #0b5ed7;
+		--button-bg-focus: #0b5ed7;
+		--button-bg-active: #0a58ca;
+		--button-text: #ffffff;
+		--content-bg: #212529;
+		--content-border: #495057;
+		--close-bg: #dc3545;
+		--close-bg-hover: #bb2d3b;
+		--close-bg-focus: #bb2d3b;
+		--close-bg-active: #b02a37;
+		--close-text: #ffffff;
+		--focus-color: #86b7fe;
+	}
+}
+
+/* Focus Visible Support */
+.animation-toggle-trigger:focus:not(:focus-visible),
+.animation-toggle-close:focus:not(:focus-visible) {
+	outline: none;
+}
+
+.animation-toggle-trigger:focus-visible,
+.animation-toggle-close:focus-visible {
+	outline: 3px solid var(--focus-color, #4d90fe);
+	outline-offset: 2px;
+}