zenkit-css 1.0.0

package/scss/utilities/_interactions.scss

@@ -0,0 +1,249 @@
+// ========================================
+// ZenKit - Interaction Utilities
+// (Cursor, User Select, Pointer Events, Z-Index, Vertical Align, Object Fit, Aspect Ratio)
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// 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-grab { cursor: grab; }
+.cursor-grabbing { cursor: grabbing; }
+.cursor-help { cursor: help; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-none { cursor: none; }
+.cursor-progress { cursor: progress; }
+.cursor-cell { cursor: cell; }
+.cursor-crosshair { cursor: crosshair; }
+.cursor-zoom-in { cursor: zoom-in; }
+.cursor-zoom-out { cursor: zoom-out; }
+.cursor-col-resize { cursor: col-resize; }
+.cursor-row-resize { cursor: row-resize; }
+.cursor-n-resize { cursor: n-resize; }
+.cursor-e-resize { cursor: e-resize; }
+.cursor-s-resize { cursor: s-resize; }
+.cursor-w-resize { cursor: w-resize; }
+.cursor-ne-resize { cursor: ne-resize; }
+.cursor-nw-resize { cursor: nw-resize; }
+.cursor-se-resize { cursor: se-resize; }
+.cursor-sw-resize { cursor: sw-resize; }
+.cursor-ew-resize { cursor: ew-resize; }
+.cursor-ns-resize { cursor: ns-resize; }
+
+// ----------------------------------------
+// User Select
+// ----------------------------------------
+.user-select-none { user-select: none; }
+.user-select-text { user-select: text; }
+.user-select-all { user-select: all; }
+.user-select-auto { user-select: auto; }
+
+// Short aliases
+.select-none { user-select: none; }
+.select-text { user-select: text; }
+.select-all { user-select: all; }
+.select-auto { user-select: auto; }
+
+// ----------------------------------------
+// Pointer Events
+// ----------------------------------------
+.pointer-events-none { pointer-events: none; }
+.pointer-events-auto { pointer-events: auto; }
+
+// Short aliases
+.pe-none { pointer-events: none; }
+.pe-auto { pointer-events: auto; }
+
+// ----------------------------------------
+// Touch Action
+// ----------------------------------------
+.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-pan-left { touch-action: pan-left; }
+.touch-pan-right { touch-action: pan-right; }
+.touch-pan-up { touch-action: pan-up; }
+.touch-pan-down { touch-action: pan-down; }
+.touch-pinch-zoom { touch-action: pinch-zoom; }
+.touch-manipulation { touch-action: manipulation; }
+
+// ----------------------------------------
+// Resize
+// ----------------------------------------
+.resize-none { resize: none; }
+.resize { resize: both; }
+.resize-x { resize: horizontal; }
+.resize-y { resize: vertical; }
+
+// ----------------------------------------
+// Z-Index
+// ----------------------------------------
+.z-0 { z-index: 0; }
+.z-10 { z-index: 10; }
+.z-20 { z-index: 20; }
+.z-30 { z-index: 30; }
+.z-40 { z-index: 40; }
+.z-50 { z-index: 50; }
+.z-auto { z-index: auto; }
+
+// Negative z-index
+.-z-10 { z-index: -10; }
+.-z-1 { z-index: -1; }
+
+// Framework z-index values
+.z-dropdown { z-index: $z-dropdown; }
+.z-sticky { z-index: $z-sticky; }
+.z-fixed { z-index: $z-fixed; }
+.z-modal-backdrop { z-index: $z-modal-backdrop; }
+.z-modal { z-index: $z-modal; }
+.z-popover { z-index: $z-popover; }
+.z-tooltip { z-index: $z-tooltip; }
+.z-toast { z-index: $z-toast; }
+
+// ----------------------------------------
+// Vertical Align
+// ----------------------------------------
+.align-baseline { vertical-align: baseline; }
+.align-top { vertical-align: top; }
+.align-middle { vertical-align: middle; }
+.align-bottom { vertical-align: bottom; }
+.align-text-top { vertical-align: text-top; }
+.align-text-bottom { vertical-align: text-bottom; }
+.align-sub { vertical-align: sub; }
+.align-super { vertical-align: super; }
+
+// ----------------------------------------
+// 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; }
+
+// ----------------------------------------
+// Aspect Ratio
+// ----------------------------------------
+.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; }
+.aspect-21-9 { aspect-ratio: 21 / 9; }
+.aspect-1-1 { aspect-ratio: 1 / 1; }
+.aspect-3-4 { aspect-ratio: 3 / 4; }
+.aspect-2-3 { aspect-ratio: 2 / 3; }
+.aspect-9-16 { aspect-ratio: 9 / 16; }
+
+// ----------------------------------------
+// Will Change (Performance Hint)
+// ----------------------------------------
+.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; }
+.will-change-opacity { will-change: opacity; }
+
+// ----------------------------------------
+// Contain
+// ----------------------------------------
+.contain-none { contain: none; }
+.contain-content { contain: content; }
+.contain-strict { contain: strict; }
+.contain-size { contain: size; }
+.contain-layout { contain: layout; }
+.contain-paint { contain: paint; }
+.contain-style { contain: style; }
+
+// ----------------------------------------
+// Appearance
+// ----------------------------------------
+.appearance-none { appearance: none; }
+.appearance-auto { appearance: auto; }
+
+// ----------------------------------------
+// Caret Color
+// ----------------------------------------
+.caret-transparent { caret-color: transparent; }
+.caret-current { caret-color: currentColor; }
+.caret-primary { caret-color: var(--primary); }
+
+// ----------------------------------------
+// Accent Color
+// ----------------------------------------
+.accent-auto { accent-color: auto; }
+.accent-primary { accent-color: var(--primary); }
+.accent-success { accent-color: $success; }
+.accent-danger { accent-color: $danger; }
+.accent-warning { accent-color: $warning; }
+.accent-info { accent-color: $info; }
+
+// ----------------------------------------
+// Responsive Interaction Utilities
+// ----------------------------------------
+@media (min-width: 576px) {
+  .sm\:cursor-pointer { cursor: pointer; }
+  .sm\:pointer-events-none { pointer-events: none; }
+  .sm\:pointer-events-auto { pointer-events: auto; }
+  .sm\:select-none { user-select: none; }
+  .sm\:object-cover { object-fit: cover; }
+  .sm\:aspect-video { aspect-ratio: 16 / 9; }
+}
+
+@media (min-width: 768px) {
+  .md\:cursor-pointer { cursor: pointer; }
+  .md\:pointer-events-none { pointer-events: none; }
+  .md\:pointer-events-auto { pointer-events: auto; }
+  .md\:select-none { user-select: none; }
+  .md\:object-cover { object-fit: cover; }
+  .md\:aspect-video { aspect-ratio: 16 / 9; }
+}
+
+@media (min-width: 1024px) {
+  .lg\:cursor-pointer { cursor: pointer; }
+  .lg\:pointer-events-none { pointer-events: none; }
+  .lg\:pointer-events-auto { pointer-events: auto; }
+  .lg\:select-none { user-select: none; }
+  .lg\:object-cover { object-fit: cover; }
+  .lg\:aspect-video { aspect-ratio: 16 / 9; }
+}
+
+@media (min-width: 1280px) {
+  .xl\:cursor-pointer { cursor: pointer; }
+  .xl\:pointer-events-none { pointer-events: none; }
+  .xl\:pointer-events-auto { pointer-events: auto; }
+  .xl\:select-none { user-select: none; }
+  .xl\:object-cover { object-fit: cover; }
+  .xl\:aspect-video { aspect-ratio: 16 / 9; }
+}
+
+@media (min-width: 1536px) {
+  .xxl\:cursor-pointer { cursor: pointer; }
+  .xxl\:pointer-events-none { pointer-events: none; }
+  .xxl\:pointer-events-auto { pointer-events: auto; }
+  .xxl\:select-none { user-select: none; }
+  .xxl\:object-cover { object-fit: cover; }
+  .xxl\:aspect-video { aspect-ratio: 16 / 9; }
+}

package/scss/utilities/_overflow.scss

@@ -0,0 +1,204 @@
+// ========================================
+// ZenKit - Overflow Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Overflow
+// ----------------------------------------
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-visible { overflow: visible; }
+.overflow-scroll { overflow: scroll; }
+.overflow-clip { overflow: clip; }
+
+// ----------------------------------------
+// Overflow X
+// ----------------------------------------
+.overflow-x-auto { overflow-x: auto; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-scroll { overflow-x: scroll; }
+.overflow-x-clip { overflow-x: clip; }
+
+// ----------------------------------------
+// Overflow Y
+// ----------------------------------------
+.overflow-y-auto { overflow-y: auto; }
+.overflow-y-hidden { overflow-y: hidden; }
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-scroll { overflow-y: scroll; }
+.overflow-y-clip { overflow-y: clip; }
+
+// ----------------------------------------
+// Text Overflow
+// ----------------------------------------
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.text-clip {
+  text-overflow: clip;
+}
+
+// ----------------------------------------
+// Line Clamp (Multi-line Truncation)
+// ----------------------------------------
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-4 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-5 {
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-6 {
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-none {
+  display: block;
+  -webkit-line-clamp: unset;
+  -webkit-box-orient: unset;
+  overflow: visible;
+}
+
+// ----------------------------------------
+// Overscroll Behavior
+// ----------------------------------------
+.overscroll-auto { overscroll-behavior: auto; }
+.overscroll-contain { overscroll-behavior: contain; }
+.overscroll-none { overscroll-behavior: none; }
+
+.overscroll-x-auto { overscroll-behavior-x: auto; }
+.overscroll-x-contain { overscroll-behavior-x: contain; }
+.overscroll-x-none { overscroll-behavior-x: none; }
+
+.overscroll-y-auto { overscroll-behavior-y: auto; }
+.overscroll-y-contain { overscroll-behavior-y: contain; }
+.overscroll-y-none { overscroll-behavior-y: none; }
+
+// ----------------------------------------
+// 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(--snap-strictness, mandatory); }
+.snap-y { scroll-snap-type: y var(--snap-strictness, mandatory); }
+.snap-both { scroll-snap-type: both var(--snap-strictness, mandatory); }
+
+.snap-mandatory { --snap-strictness: mandatory; }
+.snap-proximity { --snap-strictness: proximity; }
+
+// ----------------------------------------
+// Word Break
+// ----------------------------------------
+.break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.break-keep {
+  word-break: keep-all;
+}
+
+// ----------------------------------------
+// Whitespace
+// ----------------------------------------
+.whitespace-normal { white-space: normal; }
+.whitespace-nowrap { white-space: nowrap; }
+.whitespace-pre { white-space: pre; }
+.whitespace-pre-line { white-space: pre-line; }
+.whitespace-pre-wrap { white-space: pre-wrap; }
+.whitespace-break-spaces { white-space: break-spaces; }
+
+// ----------------------------------------
+// Responsive Overflow Utilities
+// ----------------------------------------
+@media (min-width: 576px) {
+  .sm\:overflow-auto { overflow: auto; }
+  .sm\:overflow-hidden { overflow: hidden; }
+  .sm\:text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+}
+
+@media (min-width: 768px) {
+  .md\:overflow-auto { overflow: auto; }
+  .md\:overflow-hidden { overflow: hidden; }
+  .md\:text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+}
+
+@media (min-width: 1024px) {
+  .lg\:overflow-auto { overflow: auto; }
+  .lg\:overflow-hidden { overflow: hidden; }
+  .lg\:text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+}
+
+@media (min-width: 1280px) {
+  .xl\:overflow-auto { overflow: auto; }
+  .xl\:overflow-hidden { overflow: hidden; }
+  .xl\:text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+}
+
+@media (min-width: 1536px) {
+  .xxl\:overflow-auto { overflow: auto; }
+  .xxl\:overflow-hidden { overflow: hidden; }
+  .xxl\:text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+}

package/scss/utilities/_position.scss

@@ -0,0 +1,245 @@
+// ========================================
+// ZenKit - Position Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Position
+// ----------------------------------------
+.position-static { position: static; }
+.position-relative { position: relative; }
+.position-absolute { position: absolute; }
+.position-fixed { position: fixed; }
+.position-sticky { position: sticky; }
+
+// Short aliases
+.static { position: static; }
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+
+// ----------------------------------------
+// Inset (Top, Right, Bottom, Left)
+// ----------------------------------------
+.inset-0 { inset: 0; }
+.inset-auto { inset: auto; }
+
+.top-0 { top: 0; }
+.top-50 { top: 50%; }
+.top-100 { top: 100%; }
+.top-auto { top: auto; }
+
+.end-0 { right: 0; }
+.end-50 { right: 50%; }
+.end-100 { right: 100%; }
+.end-auto { right: auto; }
+
+.bottom-0 { bottom: 0; }
+.bottom-50 { bottom: 50%; }
+.bottom-100 { bottom: 100%; }
+.bottom-auto { bottom: auto; }
+
+.start-0 { left: 0; }
+.start-50 { left: 50%; }
+.start-100 { left: 100%; }
+.start-auto { left: auto; }
+
+// Right/Left alternatives
+.right-0 { right: 0; }
+.right-50 { right: 50%; }
+.right-100 { right: 100%; }
+.right-auto { right: auto; }
+
+.left-0 { left: 0; }
+.left-50 { left: 50%; }
+.left-100 { left: 100%; }
+.left-auto { left: auto; }
+
+// ----------------------------------------
+// Translate for Centering
+// ----------------------------------------
+.translate-middle {
+  transform: translate(-50%, -50%);
+}
+
+.translate-middle-x {
+  transform: translateX(-50%);
+}
+
+.translate-middle-y {
+  transform: translateY(-50%);
+}
+
+// ----------------------------------------
+// Common Position Combinations
+// ----------------------------------------
+// Top Left
+.top-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+// Top Right
+.top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+// Bottom Left
+.bottom-left {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+// Bottom Right
+.bottom-right {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+// Centered
+.centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// ----------------------------------------
+// Fixed Positions
+// ----------------------------------------
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $z-fixed;
+}
+
+.fixed-bottom {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: $z-fixed;
+}
+
+// ----------------------------------------
+// Sticky Positions
+// ----------------------------------------
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: $z-sticky;
+}
+
+.sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: $z-sticky;
+}
+
+// ----------------------------------------
+// Inset Values (spacing scale)
+// ----------------------------------------
+@each $key, $value in $spacers {
+  @if $key != 'auto' {
+    .top-#{$key} { top: $value; }
+    .end-#{$key} { right: $value; }
+    .bottom-#{$key} { bottom: $value; }
+    .start-#{$key} { left: $value; }
+    .inset-#{$key} { inset: $value; }
+    .inset-x-#{$key} { left: $value; right: $value; }
+    .inset-y-#{$key} { top: $value; bottom: $value; }
+  }
+}
+
+// Negative values
+.-top-1 { top: -0.25rem; }
+.-top-2 { top: -0.5rem; }
+.-top-3 { top: -0.75rem; }
+.-top-4 { top: -1rem; }
+
+.-end-1 { right: -0.25rem; }
+.-end-2 { right: -0.5rem; }
+.-end-3 { right: -0.75rem; }
+.-end-4 { right: -1rem; }
+
+.-bottom-1 { bottom: -0.25rem; }
+.-bottom-2 { bottom: -0.5rem; }
+.-bottom-3 { bottom: -0.75rem; }
+.-bottom-4 { bottom: -1rem; }
+
+.-start-1 { left: -0.25rem; }
+.-start-2 { left: -0.5rem; }
+.-start-3 { left: -0.75rem; }
+.-start-4 { left: -1rem; }
+
+// ----------------------------------------
+// Responsive Position Utilities
+// ----------------------------------------
+@media (min-width: 576px) {
+  .sm\:position-static { position: static; }
+  .sm\:position-relative { position: relative; }
+  .sm\:position-absolute { position: absolute; }
+  .sm\:position-fixed { position: fixed; }
+  .sm\:position-sticky { position: sticky; }
+  .sm\:top-0 { top: 0; }
+  .sm\:end-0 { right: 0; }
+  .sm\:bottom-0 { bottom: 0; }
+  .sm\:start-0 { left: 0; }
+}
+
+@media (min-width: 768px) {
+  .md\:position-static { position: static; }
+  .md\:position-relative { position: relative; }
+  .md\:position-absolute { position: absolute; }
+  .md\:position-fixed { position: fixed; }
+  .md\:position-sticky { position: sticky; }
+  .md\:top-0 { top: 0; }
+  .md\:end-0 { right: 0; }
+  .md\:bottom-0 { bottom: 0; }
+  .md\:start-0 { left: 0; }
+}
+
+@media (min-width: 1024px) {
+  .lg\:position-static { position: static; }
+  .lg\:position-relative { position: relative; }
+  .lg\:position-absolute { position: absolute; }
+  .lg\:position-fixed { position: fixed; }
+  .lg\:position-sticky { position: sticky; }
+  .lg\:top-0 { top: 0; }
+  .lg\:end-0 { right: 0; }
+  .lg\:bottom-0 { bottom: 0; }
+  .lg\:start-0 { left: 0; }
+}
+
+@media (min-width: 1280px) {
+  .xl\:position-static { position: static; }
+  .xl\:position-relative { position: relative; }
+  .xl\:position-absolute { position: absolute; }
+  .xl\:position-fixed { position: fixed; }
+  .xl\:position-sticky { position: sticky; }
+  .xl\:top-0 { top: 0; }
+  .xl\:end-0 { right: 0; }
+  .xl\:bottom-0 { bottom: 0; }
+  .xl\:start-0 { left: 0; }
+}
+
+@media (min-width: 1536px) {
+  .xxl\:position-static { position: static; }
+  .xxl\:position-relative { position: relative; }
+  .xxl\:position-absolute { position: absolute; }
+  .xxl\:position-fixed { position: fixed; }
+  .xxl\:position-sticky { position: sticky; }
+  .xxl\:top-0 { top: 0; }
+  .xxl\:end-0 { right: 0; }
+  .xxl\:bottom-0 { bottom: 0; }
+  .xxl\:start-0 { left: 0; }
+}