zenkit-css 1.0.0

package/scss/utilities/_grid-utils.scss

@@ -0,0 +1,151 @@
+// ========================================
+// ZenKit - CSS Grid Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Grid Template Columns
+// ----------------------------------------
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
+.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
+.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
+.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+.grid-cols-none { grid-template-columns: none; }
+
+// ----------------------------------------
+// Grid Template Rows
+// ----------------------------------------
+.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
+.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
+.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
+.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
+.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
+.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
+.grid-rows-none { grid-template-rows: none; }
+
+// ----------------------------------------
+// Grid Column Span
+// ----------------------------------------
+.col-span-1 { grid-column: span 1 / span 1; }
+.col-span-2 { grid-column: span 2 / span 2; }
+.col-span-3 { grid-column: span 3 / span 3; }
+.col-span-4 { grid-column: span 4 / span 4; }
+.col-span-5 { grid-column: span 5 / span 5; }
+.col-span-6 { grid-column: span 6 / span 6; }
+.col-span-7 { grid-column: span 7 / span 7; }
+.col-span-8 { grid-column: span 8 / span 8; }
+.col-span-9 { grid-column: span 9 / span 9; }
+.col-span-10 { grid-column: span 10 / span 10; }
+.col-span-11 { grid-column: span 11 / span 11; }
+.col-span-12 { grid-column: span 12 / span 12; }
+.col-span-full { grid-column: 1 / -1; }
+.col-auto { grid-column: auto; }
+
+// ----------------------------------------
+// Grid Row Span
+// ----------------------------------------
+.row-span-1 { grid-row: span 1 / span 1; }
+.row-span-2 { grid-row: span 2 / span 2; }
+.row-span-3 { grid-row: span 3 / span 3; }
+.row-span-4 { grid-row: span 4 / span 4; }
+.row-span-5 { grid-row: span 5 / span 5; }
+.row-span-6 { grid-row: span 6 / span 6; }
+.row-span-full { grid-row: 1 / -1; }
+.row-auto { grid-row: auto; }
+
+// ----------------------------------------
+// Grid Column Start/End
+// ----------------------------------------
+.col-start-1 { grid-column-start: 1; }
+.col-start-2 { grid-column-start: 2; }
+.col-start-3 { grid-column-start: 3; }
+.col-start-4 { grid-column-start: 4; }
+.col-start-5 { grid-column-start: 5; }
+.col-start-6 { grid-column-start: 6; }
+.col-start-7 { grid-column-start: 7; }
+.col-start-auto { grid-column-start: auto; }
+
+.col-end-1 { grid-column-end: 1; }
+.col-end-2 { grid-column-end: 2; }
+.col-end-3 { grid-column-end: 3; }
+.col-end-4 { grid-column-end: 4; }
+.col-end-5 { grid-column-end: 5; }
+.col-end-6 { grid-column-end: 6; }
+.col-end-7 { grid-column-end: 7; }
+.col-end-auto { grid-column-end: auto; }
+
+// ----------------------------------------
+// Grid Auto Flow
+// ----------------------------------------
+.grid-flow-row { grid-auto-flow: row; }
+.grid-flow-col { grid-auto-flow: column; }
+.grid-flow-row-dense { grid-auto-flow: row dense; }
+.grid-flow-col-dense { grid-auto-flow: column dense; }
+
+// ----------------------------------------
+// Grid Auto Columns
+// ----------------------------------------
+.auto-cols-auto { grid-auto-columns: auto; }
+.auto-cols-min { grid-auto-columns: min-content; }
+.auto-cols-max { grid-auto-columns: max-content; }
+.auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }
+
+// ----------------------------------------
+// Grid Auto Rows
+// ----------------------------------------
+.auto-rows-auto { grid-auto-rows: auto; }
+.auto-rows-min { grid-auto-rows: min-content; }
+.auto-rows-max { grid-auto-rows: max-content; }
+.auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }
+
+// ----------------------------------------
+// Responsive Grid
+// ----------------------------------------
+@include sm {
+  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+}
+
+@include md {
+  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+}
+
+@include lg {
+  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+}
+
+@include xl {
+  .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+}

package/scss/utilities/_helpers.scss

@@ -0,0 +1,479 @@
+// ========================================
+// ZenKit - Helper Utilities
+// Object Fit, Ratio, Stacks, Interactions, etc.
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Object Fit
+// ----------------------------------------
+.object-contain { object-fit: contain; }
+.object-cover { object-fit: cover; }
+.object-fill { object-fit: fill; }
+.object-none { object-fit: none; }
+.object-scale-down { object-fit: scale-down; }
+
+// Object Position
+.object-bottom { object-position: bottom; }
+.object-center { object-position: center; }
+.object-left { object-position: left; }
+.object-left-bottom { object-position: left bottom; }
+.object-left-top { object-position: left top; }
+.object-right { object-position: right; }
+.object-right-bottom { object-position: right bottom; }
+.object-right-top { object-position: right top; }
+.object-top { object-position: top; }
+
+// Responsive Object Fit
+@include sm {
+  .sm\:object-contain { object-fit: contain; }
+  .sm\:object-cover { object-fit: cover; }
+  .sm\:object-fill { object-fit: fill; }
+  .sm\:object-none { object-fit: none; }
+}
+
+@include md {
+  .md\:object-contain { object-fit: contain; }
+  .md\:object-cover { object-fit: cover; }
+  .md\:object-fill { object-fit: fill; }
+  .md\:object-none { object-fit: none; }
+}
+
+@include lg {
+  .lg\:object-contain { object-fit: contain; }
+  .lg\:object-cover { object-fit: cover; }
+  .lg\:object-fill { object-fit: fill; }
+  .lg\:object-none { object-fit: none; }
+}
+
+// ----------------------------------------
+// Aspect Ratio
+// ----------------------------------------
+.ratio {
+  position: relative;
+  width: 100%;
+
+  &::before {
+    display: block;
+    padding-top: var(--aspect-ratio);
+    content: "";
+  }
+
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.ratio-1x1 { --aspect-ratio: 100%; }
+.ratio-4x3 { --aspect-ratio: 75%; }
+.ratio-16x9 { --aspect-ratio: 56.25%; }
+.ratio-21x9 { --aspect-ratio: 42.857143%; }
+
+// Custom aspect ratios
+.aspect-auto { aspect-ratio: auto; }
+.aspect-square { aspect-ratio: 1 / 1; }
+.aspect-video { aspect-ratio: 16 / 9; }
+.aspect-4\/3 { aspect-ratio: 4 / 3; }
+.aspect-3\/2 { aspect-ratio: 3 / 2; }
+.aspect-2\/1 { aspect-ratio: 2 / 1; }
+
+// ----------------------------------------
+// Stacks (Flexbox Shortcuts)
+// ----------------------------------------
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+// ----------------------------------------
+// Vertical Rule
+// ----------------------------------------
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentColor;
+  opacity: 0.25;
+}
+
+// ----------------------------------------
+// Stretched Link
+// ----------------------------------------
+.stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: "";
+}
+
+// ----------------------------------------
+// Interactions
+// ----------------------------------------
+
+// User Select
+.user-select-all { user-select: all; }
+.user-select-auto { user-select: auto; }
+.user-select-none { user-select: none; }
+
+// Pointer Events
+.pe-none { pointer-events: none; }
+.pe-auto { pointer-events: auto; }
+
+// Cursor
+.cursor-auto { cursor: auto; }
+.cursor-default { cursor: default; }
+.cursor-pointer { cursor: pointer; }
+.cursor-wait { cursor: wait; }
+.cursor-text { cursor: text; }
+.cursor-move { cursor: move; }
+.cursor-help { cursor: help; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-none { cursor: none; }
+.cursor-grab { cursor: grab; }
+.cursor-grabbing { cursor: grabbing; }
+
+// ----------------------------------------
+// Link Utilities
+// ----------------------------------------
+.link-primary {
+  color: var(--primary);
+
+  &:hover, &:focus {
+    color: var(--primary-700);
+  }
+}
+
+.link-secondary {
+  color: var(--gray-600);
+
+  &:hover, &:focus {
+    color: var(--gray-800);
+  }
+}
+
+.link-success {
+  color: var(--success);
+
+  &:hover, &:focus {
+    color: var(--success-dark);
+  }
+}
+
+.link-danger {
+  color: var(--danger);
+
+  &:hover, &:focus {
+    color: var(--danger-dark);
+  }
+}
+
+.link-warning {
+  color: var(--warning);
+
+  &:hover, &:focus {
+    color: var(--warning-dark);
+  }
+}
+
+.link-info {
+  color: var(--info);
+
+  &:hover, &:focus {
+    color: var(--info-dark);
+  }
+}
+
+.link-body-emphasis {
+  color: var(--text);
+
+  &:hover, &:focus {
+    color: var(--text);
+  }
+}
+
+// Link Underline
+.link-underline { text-decoration: underline; }
+.link-underline-primary { text-decoration-color: var(--primary); }
+.link-underline-secondary { text-decoration-color: var(--gray-600); }
+.link-underline-success { text-decoration-color: var(--success); }
+.link-underline-danger { text-decoration-color: var(--danger); }
+.link-underline-warning { text-decoration-color: var(--warning); }
+.link-underline-info { text-decoration-color: var(--info); }
+
+// Link Offset
+.link-offset-1 { text-underline-offset: 0.125em; }
+.link-offset-2 { text-underline-offset: 0.25em; }
+.link-offset-3 { text-underline-offset: 0.375em; }
+
+// Link Opacity
+.link-opacity-10 { --link-opacity: 0.1; }
+.link-opacity-25 { --link-opacity: 0.25; }
+.link-opacity-50 { --link-opacity: 0.5; }
+.link-opacity-75 { --link-opacity: 0.75; }
+.link-opacity-100 { --link-opacity: 1; }
+
+// ----------------------------------------
+// Focus Ring
+// ----------------------------------------
+.focus-ring:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
+}
+
+.focus-ring-primary:focus {
+  box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
+}
+
+.focus-ring-secondary:focus {
+  box-shadow: 0 0 0 0.25rem rgba($gray-600, 0.25);
+}
+
+.focus-ring-success:focus {
+  box-shadow: 0 0 0 0.25rem rgba($success, 0.25);
+}
+
+.focus-ring-danger:focus {
+  box-shadow: 0 0 0 0.25rem rgba($danger, 0.25);
+}
+
+.focus-ring-warning:focus {
+  box-shadow: 0 0 0 0.25rem rgba($warning, 0.25);
+}
+
+.focus-ring-info:focus {
+  box-shadow: 0 0 0 0.25rem rgba($info, 0.25);
+}
+
+// ----------------------------------------
+// Text Selection
+// ----------------------------------------
+.text-selection-primary::selection {
+  background-color: var(--primary);
+  color: var(--white);
+}
+
+// ----------------------------------------
+// Touch Action
+// ----------------------------------------
+.touch-none { touch-action: none; }
+.touch-pan-x { touch-action: pan-x; }
+.touch-pan-y { touch-action: pan-y; }
+.touch-manipulation { touch-action: manipulation; }
+
+// ----------------------------------------
+// Scroll Behavior
+// ----------------------------------------
+.scroll-auto { scroll-behavior: auto; }
+.scroll-smooth { scroll-behavior: smooth; }
+
+// ----------------------------------------
+// Scroll Snap
+// ----------------------------------------
+.snap-start { scroll-snap-align: start; }
+.snap-end { scroll-snap-align: end; }
+.snap-center { scroll-snap-align: center; }
+.snap-align-none { scroll-snap-align: none; }
+
+.snap-normal { scroll-snap-stop: normal; }
+.snap-always { scroll-snap-stop: always; }
+
+.snap-none { scroll-snap-type: none; }
+.snap-x { scroll-snap-type: x var(--scroll-snap-strictness, mandatory); }
+.snap-y { scroll-snap-type: y var(--scroll-snap-strictness, mandatory); }
+.snap-both { scroll-snap-type: both var(--scroll-snap-strictness, mandatory); }
+
+.snap-mandatory { --scroll-snap-strictness: mandatory; }
+.snap-proximity { --scroll-snap-strictness: proximity; }
+
+// ----------------------------------------
+// Resize
+// ----------------------------------------
+.resize-none { resize: none; }
+.resize-y { resize: vertical; }
+.resize-x { resize: horizontal; }
+.resize { resize: both; }
+
+// ----------------------------------------
+// Appearance
+// ----------------------------------------
+.appearance-none { appearance: none; }
+.appearance-auto { appearance: auto; }
+
+// ----------------------------------------
+// Will Change (Performance)
+// ----------------------------------------
+.will-change-auto { will-change: auto; }
+.will-change-scroll { will-change: scroll-position; }
+.will-change-contents { will-change: contents; }
+.will-change-transform { will-change: transform; }
+
+// ----------------------------------------
+// Content Visibility (Performance)
+// ----------------------------------------
+.content-auto { content-visibility: auto; }
+.content-hidden { content-visibility: hidden; }
+.content-visible { content-visibility: visible; }
+
+// ----------------------------------------
+// Bootstrap Aliases
+// ----------------------------------------
+
+// Visually Hidden (alias for .sr-only)
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.visually-hidden-focusable {
+  &:not(:focus):not(:focus-within) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+// Text Truncate (alias for .truncate)
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Text Reset - inherit color from parent
+.text-reset {
+  color: inherit !important;
+}
+
+// ----------------------------------------
+// Icon Link
+// ----------------------------------------
+.icon-link {
+  display: inline-flex;
+  gap: 0.375rem;
+  align-items: center;
+  text-decoration-color: rgba($primary, 0.5);
+  text-underline-offset: 0.25em;
+
+  > svg,
+  > .bi {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    fill: currentColor;
+    transition: transform $transition-fast ease-in-out;
+  }
+}
+
+.icon-link-hover:hover > svg,
+.icon-link-hover:hover > .bi,
+.icon-link-hover:focus-visible > svg,
+.icon-link-hover:focus-visible > .bi {
+  transform: translateX(0.25em);
+}
+
+// ----------------------------------------
+// Skip Link (Accessibility)
+// ----------------------------------------
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--primary);
+  color: var(--white);
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius);
+  text-decoration: none;
+  font-weight: $font-weight-semibold;
+  z-index: 9999;
+  transition: top $transition-fast ease-in-out;
+
+  &:focus {
+    top: 1rem;
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+}
+
+// ----------------------------------------
+// Focus Visible Enhancement
+// ----------------------------------------
+.focus-visible-only:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+// ----------------------------------------
+// Backdrop Blur
+// ----------------------------------------
+.backdrop-blur-none { backdrop-filter: blur(0); }
+.backdrop-blur-sm { backdrop-filter: blur(4px); }
+.backdrop-blur { backdrop-filter: blur(8px); }
+.backdrop-blur-md { backdrop-filter: blur(12px); }
+.backdrop-blur-lg { backdrop-filter: blur(16px); }
+.backdrop-blur-xl { backdrop-filter: blur(24px); }
+.backdrop-blur-2xl { backdrop-filter: blur(40px); }
+.backdrop-blur-3xl { backdrop-filter: blur(64px); }
+
+// ----------------------------------------
+// Mix Blend Mode
+// ----------------------------------------
+.mix-blend-normal { mix-blend-mode: normal; }
+.mix-blend-multiply { mix-blend-mode: multiply; }
+.mix-blend-screen { mix-blend-mode: screen; }
+.mix-blend-overlay { mix-blend-mode: overlay; }
+.mix-blend-darken { mix-blend-mode: darken; }
+.mix-blend-lighten { mix-blend-mode: lighten; }
+.mix-blend-color-dodge { mix-blend-mode: color-dodge; }
+.mix-blend-color-burn { mix-blend-mode: color-burn; }
+.mix-blend-hard-light { mix-blend-mode: hard-light; }
+.mix-blend-soft-light { mix-blend-mode: soft-light; }
+.mix-blend-difference { mix-blend-mode: difference; }
+.mix-blend-exclusion { mix-blend-mode: exclusion; }
+.mix-blend-hue { mix-blend-mode: hue; }
+.mix-blend-saturation { mix-blend-mode: saturation; }
+.mix-blend-color { mix-blend-mode: color; }
+.mix-blend-luminosity { mix-blend-mode: luminosity; }
+
+// ----------------------------------------
+// Isolation
+// ----------------------------------------
+.isolate { isolation: isolate; }
+.isolation-auto { isolation: auto; }