zenkit-css 1.2.2 → 1.3.0

package/scss/utilities/_accessibility.scss

@@ -0,0 +1,470 @@
+// ========================================
+// ZenKit - Accessibility Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Reduced Motion
+// ----------------------------------------
+// Disable animations and transitions for users who prefer reduced motion
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  // Specific component animations to disable
+  .spinner,
+  .spinner-border,
+  .spinner-grow,
+  .toast-progress,
+  .progress-bar-animated,
+  .skeleton,
+  .skeleton-wave,
+  .placeholder-wave,
+  .carousel-item,
+  .collapse,
+  .modal,
+  .offcanvas,
+  .dropdown-menu,
+  .tooltip,
+  .popover,
+  .toast,
+  .alert,
+  .accordion-collapse {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  // Disable transform animations
+  .card-hover:hover,
+  .card-clickable:hover,
+  .btn:hover,
+  .nav-link:hover {
+    transform: none !important;
+  }
+}
+
+// Class to force reduced motion
+.reduce-motion {
+  animation: none !important;
+  transition: none !important;
+}
+
+// Class to respect motion preference
+.motion-safe {
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+// ----------------------------------------
+// Screen Reader Only
+// ----------------------------------------
+.sr-only,
+.visually-hidden {
+  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;
+}
+
+// Focusable visually hidden (show on focus)
+.sr-only-focusable:not(:focus):not(:focus-within),
+.visually-hidden-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: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+// ----------------------------------------
+// Skip Links
+// ----------------------------------------
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  z-index: 9999;
+  padding: 0.75rem 1.5rem;
+  font-weight: $font-weight-semibold;
+  color: var(--white);
+  background-color: var(--primary);
+  text-decoration: none;
+  border-radius: 0 0 var(--radius) 0;
+  transition: top 0.2s ease-in-out;
+
+  &:focus {
+    top: 0;
+    outline: none;
+  }
+}
+
+// ----------------------------------------
+// Focus Styles
+// ----------------------------------------
+// Default focus visible
+:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+// Focus ring utility
+.focus-ring {
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba($primary, 0.25);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba($primary, 0.25);
+  }
+}
+
+// Remove focus outline (use with caution)
+.focus-none {
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+// ----------------------------------------
+// High Contrast Mode
+// ----------------------------------------
+@media (prefers-contrast: more) {
+  :root {
+    --border: #000;
+    --border-dark: #000;
+  }
+
+  // Increase border widths
+  .btn,
+  .form-control,
+  .form-select,
+  .card,
+  .alert,
+  .badge,
+  .modal-content {
+    border-width: 2px;
+  }
+
+  // Ensure sufficient contrast
+  .text-muted {
+    color: var(--gray-700) !important;
+  }
+
+  // Make focus states more visible
+  :focus-visible {
+    outline-width: 3px;
+    outline-style: solid;
+  }
+
+  // Increase button contrast
+  .btn-outline-primary,
+  .btn-outline-secondary,
+  .btn-outline-success,
+  .btn-outline-danger,
+  .btn-outline-warning,
+  .btn-outline-info {
+    border-width: 2px;
+  }
+}
+
+// Forced colors mode (Windows High Contrast)
+@media (forced-colors: active) {
+  .btn {
+    border: 2px solid ButtonText;
+  }
+
+  .form-control,
+  .form-select {
+    border: 2px solid ButtonText;
+  }
+
+  :focus-visible {
+    outline: 3px solid Highlight;
+  }
+
+  .badge {
+    border: 1px solid currentColor;
+  }
+}
+
+// ----------------------------------------
+// Color Blind Friendly
+// ----------------------------------------
+// Add patterns/icons in addition to color
+.status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+}
+
+.status-success::before {
+  background-color: var(--success);
+}
+
+.status-danger::before {
+  background-color: var(--danger);
+}
+
+.status-warning::before {
+  background-color: var(--warning);
+}
+
+.status-info::before {
+  background-color: var(--info);
+}
+
+// ----------------------------------------
+// Touch Target Sizes
+// ----------------------------------------
+// Ensure minimum 44x44px touch targets
+.touch-target {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.touch-target-sm {
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.touch-target-lg {
+  min-width: 48px;
+  min-height: 48px;
+}
+
+// ----------------------------------------
+// Print Styles
+// ----------------------------------------
+@media print {
+  // Hide non-essential elements
+  .no-print,
+  .navbar,
+  .sidebar,
+  .footer,
+  .btn,
+  .modal,
+  .toast,
+  .tooltip,
+  .popover,
+  .dropdown-menu,
+  .offcanvas,
+  .scroll-to-top,
+  .cookie-banner,
+  .chat-widget,
+  nav,
+  aside {
+    display: none !important;
+  }
+
+  // Reset backgrounds and shadows
+  *,
+  *::before,
+  *::after {
+    background: transparent !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  // Ensure text is readable
+  body {
+    font-size: 12pt;
+    line-height: 1.5;
+    color: #000 !important;
+  }
+
+  // Links
+  a,
+  a:visited {
+    color: #000 !important;
+    text-decoration: underline;
+  }
+
+  // Show URLs after links
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.8em;
+    color: #666;
+  }
+
+  // Don't show URL for internal links or javascript
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  // Abbreviations
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  // Images
+  img {
+    max-width: 100% !important;
+    page-break-inside: avoid;
+  }
+
+  // Tables
+  table {
+    border-collapse: collapse !important;
+  }
+
+  th,
+  td {
+    border: 1px solid #ddd !important;
+    padding: 0.5rem !important;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr {
+    page-break-inside: avoid;
+  }
+
+  // Headings
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+    page-break-inside: avoid;
+  }
+
+  // Paragraphs
+  p {
+    orphans: 3;
+    widows: 3;
+  }
+
+  // Cards
+  .card {
+    border: 1px solid #ddd !important;
+    page-break-inside: avoid;
+  }
+
+  // Alerts
+  .alert {
+    border: 1px solid currentColor !important;
+    page-break-inside: avoid;
+  }
+
+  // Code blocks
+  pre,
+  code {
+    border: 1px solid #ddd !important;
+    background-color: #f5f5f5 !important;
+    color: #000 !important;
+  }
+
+  // Page breaks
+  .page-break-before {
+    page-break-before: always;
+  }
+
+  .page-break-after {
+    page-break-after: always;
+  }
+
+  .page-break-avoid {
+    page-break-inside: avoid;
+  }
+}
+
+// Print-specific utilities
+.print-only {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+}
+
+.print-inline {
+  display: none !important;
+
+  @media print {
+    display: inline !important;
+  }
+}
+
+// ----------------------------------------
+// Dark Mode Preference
+// ----------------------------------------
+@media (prefers-color-scheme: dark) {
+  .auto-dark {
+    // Apply dark theme variables
+    --bg: var(--gray-900);
+    --bg-muted: var(--gray-800);
+    --text: var(--gray-100);
+    --text-muted: var(--gray-400);
+    --border: var(--gray-700);
+  }
+}
+
+// ----------------------------------------
+// Text Spacing (for dyslexia)
+// ----------------------------------------
+.text-spacing-relaxed {
+  letter-spacing: 0.12em;
+  word-spacing: 0.16em;
+  line-height: 1.8;
+}
+
+// ----------------------------------------
+// ARIA Live Regions
+// ----------------------------------------
+.live-region {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// ----------------------------------------
+// Keyboard Navigation Indicator
+// ----------------------------------------
+.keyboard-nav-active {
+  :focus:not(:focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+}

package/scss/zenkit.scss

@@ -116,6 +116,85 @@
 @use 'components/fieldset';
 @use 'components/pininput';
 @use 'components/editable';
+@use 'components/sheet';
+@use 'components/daterange';
+@use 'components/snippet';
+@use 'components/imagelist';
+
+// ----------------------------------------
+// 5b. Additional Components (Phase 5-7)
+// ----------------------------------------
+@use 'components/angleslider';
+@use 'components/appbar';
+@use 'components/appshell';
+@use 'components/backdrop';
+@use 'components/blockquote';
+@use 'components/center';
+@use 'components/chart';
+@use 'components/checkboxcard';
+@use 'components/checkboxgroup';
+@use 'components/collapse';
+@use 'components/colorinput';
+@use 'components/colorswatch';
+@use 'components/combobox';
+@use 'components/contextmenu';
+@use 'components/copybutton';
+@use 'components/datagrid';
+@use 'components/datetimepicker';
+@use 'components/dialog';
+@use 'components/dropzone';
+@use 'components/fileinput';
+@use 'components/gauge';
+@use 'components/heading';
+@use 'components/highlight';
+@use 'components/indicator';
+@use 'components/infinitescroll';
+@use 'components/jsoninput';
+@use 'components/label';
+@use 'components/loadingoverlay';
+@use 'components/monthpicker';
+@use 'components/multiselect';
+@use 'components/navlink';
+@use 'components/paper';
+@use 'components/radiocard';
+@use 'components/rangeslider';
+@use 'components/richtexteditor';
+@use 'components/ringprogress';
+@use 'components/scrollshadow';
+@use 'components/semicircleprogress';
+@use 'components/separator';
+@use 'components/simplegrid';
+@use 'components/slider';
+@use 'components/sortable';
+@use 'components/sparkline';
+@use 'components/splitbutton';
+@use 'components/spoiler';
+@use 'components/stepper';
+@use 'components/tableofcontents';
+@use 'components/tagsinput';
+@use 'components/textcomponent';
+@use 'components/themeicon';
+@use 'components/togglegroup';
+@use 'components/toolbar';
+@use 'components/virtuallist';
+@use 'components/yearpicker';
+
+// ----------------------------------------
+// 5c. Phase 7 Components (Library Parity)
+// ----------------------------------------
+@use 'components/group';
+@use 'components/overlay';
+@use 'components/actionicon';
+@use 'components/unstyledbutton';
+@use 'components/filebutton';
+@use 'components/floatingindicator';
+@use 'components/pill';
+@use 'components/mark';
+@use 'components/user';
+@use 'components/datalist';
+@use 'components/backgroundimage';
+@use 'components/skipnavlink';
+@use 'components/floatcomponent';
 
 // ----------------------------------------
 // 6. Components - JavaScript Enhanced
@@ -150,3 +229,4 @@
 @use 'utilities/animations';
 @use 'utilities/transforms';
 @use 'utilities/filters';
+@use 'utilities/accessibility';