@teseor/css 1.15.7 → 2.0.0

package/src/utilities/position/position.scss

@@ -0,0 +1,74 @@
+// Position, overflow, and inset utilities
+
+@layer utilities {
+  // Position
+  .relative {
+    position: relative;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .sticky {
+    position: sticky;
+  }
+
+  .static {
+    position: static;
+  }
+
+  // Inset (logical properties)
+  .inset-0 {
+    inset: 0;
+  }
+
+  .inset-block-0 {
+    inset-block: 0;
+  }
+
+  .inset-inline-0 {
+    inset-inline: 0;
+  }
+
+  .top-0 {
+    inset-block-start: 0;
+  }
+
+  .bottom-0 {
+    inset-block-end: 0;
+  }
+
+  .start-0 {
+    inset-inline-start: 0;
+  }
+
+  .end-0 {
+    inset-inline-end: 0;
+  }
+
+  // Overflow
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .overflow-visible {
+    overflow: visible;
+  }
+}

package/src/utilities/scroll-animation/docs.html

@@ -6,7 +6,7 @@ description: Scroll-driven animation utilities for progress indicators and viewp
 <!-- @scroll_progress_indicator -->
 <!-- Fixed bar at the top of the viewport that fills as the user scrolls down. -->
 <div style="position: relative; block-size: 12rem; overflow-y: auto;">
-  <div class="ui-scroll-progress" style="position: absolute;"></div>
+  <div class="ui-scroll-progress ui-absolute"></div>
   <div style="block-size: 40rem; padding: var(--ui-space-2);">
     <p>{{ t('scroll_down_to_see_the_progress_bar_fill', 'Scroll down to see the progress bar fill.') }}</p>
   </div>

package/src/utilities/scroll-animation/index.scss

@@ -12,7 +12,7 @@
       position: fixed;
       inset-block-start: 0;
       inset-inline-start: 0;
-      z-index: var(--ui-z-toast, #{t.$z-toast});
+      z-index: var(--ui-z-index-toast, #{t.$z-index-toast});
 
       block-size: var(--ui-scroll-progress-height, var(--ui-space-half, #{t.$space-0}));
       inline-size: 100%;

package/src/utilities/scroll-snap/docs.html

@@ -5,19 +5,19 @@ description: Scroll-snap utilities for carousels, horizontal lists, and snap-to-
 
 <!-- @horizontal_snap -->
 <!-- Snap children to start position on horizontal scroll. -->
-<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('item_1', 'Item 1') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('item_2', 'Item 2') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('item_3', 'Item 3') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('item_4', 'Item 4') }}</div>
+<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_1', 'Item 1') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_2', 'Item 2') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_3', 'Item 3') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('item_4', 'Item 4') }}</div>
 </div>
 
 <!-- @center_snap -->
 <!-- Snap children to center position. -->
-<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-center ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('center_1', 'Center 1') }}</div>
-  <div class="ui-snap-center ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('center_2', 'Center 2') }}</div>
-  <div class="ui-snap-center ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('center_3', 'Center 3') }}</div>
+<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
+  <div class="ui-snap-center ui-card ui-p-2 demo-snap-item">{{ t('center_1', 'Center 1') }}</div>
+  <div class="ui-snap-center ui-card ui-p-2 demo-snap-item">{{ t('center_2', 'Center 2') }}</div>
+  <div class="ui-snap-center ui-card ui-p-2 demo-snap-item">{{ t('center_3', 'Center 3') }}</div>
 </div>
 
 <!-- @vertical_snap -->
@@ -30,10 +30,10 @@ description: Scroll-snap utilities for carousels, horizontal lists, and snap-to-
 
 <!-- @proximity_snap -->
 <!-- Softer snap that only engages when close to a snap point. -->
-<div class="ui-snap-x-proximity ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('proximity_1', 'Proximity 1') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('proximity_2', 'Proximity 2') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('proximity_3', 'Proximity 3') }}</div>
+<div class="ui-snap-x-proximity ui-flex ui-gap-2 ui-p-2 demo-narrow">
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('proximity_1', 'Proximity 1') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('proximity_2', 'Proximity 2') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('proximity_3', 'Proximity 3') }}</div>
 </div>
 <div class="ui-snap-y-proximity" style="max-block-size: 8rem">
   <div class="ui-snap-start ui-card ui-p-2">{{ t('section_1', 'Section 1') }}</div>
@@ -43,35 +43,35 @@ description: Scroll-snap utilities for carousels, horizontal lists, and snap-to-
 
 <!-- @end_alignment_and_stop -->
 <!-- Snap children to end position or force stop at every snap point. -->
-<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-end ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('end_1', 'End 1') }}</div>
-  <div class="ui-snap-end ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('end_2', 'End 2') }}</div>
-  <div class="ui-snap-end ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('end_3', 'End 3') }}</div>
+<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
+  <div class="ui-snap-end ui-card ui-p-2 demo-snap-item">{{ t('end_1', 'End 1') }}</div>
+  <div class="ui-snap-end ui-card ui-p-2 demo-snap-item">{{ t('end_2', 'End 2') }}</div>
+  <div class="ui-snap-end ui-card ui-p-2 demo-snap-item">{{ t('end_3', 'End 3') }}</div>
 </div>
-<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-snap-always ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('always_1', 'Always 1') }}</div>
-  <div class="ui-snap-start ui-snap-always ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('always_2', 'Always 2') }}</div>
-  <div class="ui-snap-start ui-snap-always ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('always_3', 'Always 3') }}</div>
+<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
+  <div class="ui-snap-start ui-snap-always ui-card ui-p-2 demo-snap-item">{{ t('always_1', 'Always 1') }}</div>
+  <div class="ui-snap-start ui-snap-always ui-card ui-p-2 demo-snap-item">{{ t('always_2', 'Always 2') }}</div>
+  <div class="ui-snap-start ui-snap-always ui-card ui-p-2 demo-snap-item">{{ t('always_3', 'Always 3') }}</div>
 </div>
 
 <!-- @disable_snap -->
 <!-- Remove snap behavior from a container. -->
-<div class="ui-snap-none ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem; overflow-x: auto">
-  <div class="ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('no_snap_1', 'No snap 1') }}</div>
-  <div class="ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('no_snap_2', 'No snap 2') }}</div>
+<div class="ui-snap-none ui-flex ui-gap-2 ui-p-2 demo-narrow ui-overflow-x-auto">
+  <div class="ui-card ui-p-2 demo-snap-item">{{ t('no_snap_1', 'No snap 1') }}</div>
+  <div class="ui-card ui-p-2 demo-snap-item">{{ t('no_snap_2', 'No snap 2') }}</div>
 </div>
 
 <!-- @scroll_padding -->
 <!-- Offset snap position for fixed headers or insets. -->
-<div class="ui-snap-x ui-snap-p-1 ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_1', 'p-1') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_1', 'p-1') }}</div>
+<div class="ui-snap-x ui-snap-p-1 ui-flex ui-gap-2 ui-p-2 demo-narrow">
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_1', 'p-1') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_1', 'p-1') }}</div>
 </div>
-<div class="ui-snap-x ui-snap-p-2 ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_2', 'p-2') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_2', 'p-2') }}</div>
+<div class="ui-snap-x ui-snap-p-2 ui-flex ui-gap-2 ui-p-2 demo-narrow">
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_2', 'p-2') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_2', 'p-2') }}</div>
 </div>
-<div class="ui-snap-x ui-snap-p-4 ui-flex ui-gap-2 ui-p-2" style="max-inline-size: 20rem">
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_4', 'p-4') }}</div>
-  <div class="ui-snap-start ui-card ui-p-2" style="min-inline-size: 10rem">{{ t('p_4', 'p-4') }}</div>
+<div class="ui-snap-x ui-snap-p-4 ui-flex ui-gap-2 ui-p-2 demo-narrow">
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_4', 'p-4') }}</div>
+  <div class="ui-snap-start ui-card ui-p-2 demo-snap-item">{{ t('p_4', 'p-4') }}</div>
 </div>

package/src/utilities/text/docs.html

@@ -52,12 +52,12 @@ description: Typography and text utilities. Font sizes follow a 1.2 modular scal
 
 <!-- @text_wrap | column -->
 <!-- Control how text wraps across lines. -->
-<p class="ui-text-balance ui-text-2xl ui-font-bold" style="max-inline-size: 20rem">{{ t('balanced_desc', 'Balanced: distributes text evenly across lines') }}</p>
-<p class="ui-text-pretty" style="max-inline-size: 20rem">{{ t('pretty_desc', 'Pretty: avoids orphans and widows for cleaner body text paragraphs that wrap naturally') }}</p>
+<p class="ui-text-balance ui-text-2xl ui-font-bold demo-narrow">{{ t('balanced_desc', 'Balanced: distributes text evenly across lines') }}</p>
+<p class="ui-text-pretty demo-narrow">{{ t('pretty_desc', 'Pretty: avoids orphans and widows for cleaner body text paragraphs that wrap naturally') }}</p>
 <p class="ui-text-nowrap">{{ t('nowrap_desc', 'Nowrap: prevents text from wrapping to the next line') }}</p>
 
 <!-- @multi_line_truncation | column -->
 <!-- Clamp text to a specific number of lines with ellipsis. -->
-<p class="ui-truncate-2" style="max-inline-size: 20rem">{{ t('truncate_2_lines_demo', 'Truncate to 2 lines: This is a long paragraph that will be clamped after two lines of text. Any overflow content will be hidden and replaced with an ellipsis character.') }}</p>
-<p class="ui-truncate-3" style="max-inline-size: 20rem">{{ t('truncate_3_lines_demo', 'Truncate to 3 lines: This is a long paragraph that will be clamped after three lines of text. Any overflow content beyond the third line will be hidden and replaced with an ellipsis character at the end.') }}</p>
-<p class="ui-truncate-4" style="max-inline-size: 20rem">{{ t('truncate_4_lines_demo', 'Truncate to 4 lines: This is a long paragraph that will be clamped after four lines. It gives more room for content previews while still maintaining a consistent height. Overflow beyond line four is hidden with ellipsis.') }}</p>
+<p class="ui-truncate-2 demo-narrow">{{ t('truncate_2_lines_demo', 'Truncate to 2 lines: This is a long paragraph that will be clamped after two lines of text. Any overflow content will be hidden and replaced with an ellipsis character.') }}</p>
+<p class="ui-truncate-3 demo-narrow">{{ t('truncate_3_lines_demo', 'Truncate to 3 lines: This is a long paragraph that will be clamped after three lines of text. Any overflow content beyond the third line will be hidden and replaced with an ellipsis character at the end.') }}</p>
+<p class="ui-truncate-4 demo-narrow">{{ t('truncate_4_lines_demo', 'Truncate to 4 lines: This is a long paragraph that will be clamped after four lines. It gives more room for content previews while still maintaining a consistent height. Overflow beyond line four is hidden with ellipsis.') }}</p>

package/src/utilities/text/text.scss

@@ -25,19 +25,19 @@
   // FONT WEIGHT
   // ==========================================================================
   .font-normal {
-    font-weight: var(--ui-weight-normal);
+    font-weight: var(--ui-font-weight-normal);
   }
 
   .font-medium {
-    font-weight: var(--ui-weight-medium);
+    font-weight: var(--ui-font-weight-medium);
   }
 
   .font-semibold {
-    font-weight: var(--ui-weight-semibold);
+    font-weight: var(--ui-font-weight-semibold);
   }
 
   .font-bold {
-    font-weight: var(--ui-weight-bold);
+    font-weight: var(--ui-font-weight-bold);
   }
 
   // ==========================================================================
@@ -45,42 +45,42 @@
   // ==========================================================================
   .text-xs {
     font-size: var(--ui-font-size-xs);
-    line-height: var(--ui-leading-xs);
+    line-height: var(--ui-line-height-xs);
   }
 
   .text-sm {
     font-size: var(--ui-font-size-sm);
-    line-height: var(--ui-leading-sm);
+    line-height: var(--ui-line-height-sm);
   }
 
   .text-md {
     font-size: var(--ui-font-size-md);
-    line-height: var(--ui-leading-md);
+    line-height: var(--ui-line-height-md);
   }
 
   .text-lg {
     font-size: var(--ui-font-size-lg);
-    line-height: var(--ui-leading-lg);
+    line-height: var(--ui-line-height-lg);
   }
 
   .text-xl {
     font-size: var(--ui-font-size-xl);
-    line-height: var(--ui-leading-xl);
+    line-height: var(--ui-line-height-xl);
   }
 
   .text-2xl {
     font-size: var(--ui-font-size-2xl);
-    line-height: var(--ui-leading-2xl);
+    line-height: var(--ui-line-height-2xl);
   }
 
   .text-3xl {
     font-size: var(--ui-font-size-3xl);
-    line-height: var(--ui-leading-3xl);
+    line-height: var(--ui-line-height-3xl);
   }
 
   .text-4xl {
     font-size: var(--ui-font-size-4xl);
-    line-height: var(--ui-leading-4xl);
+    line-height: var(--ui-line-height-4xl);
   }
 
   // ==========================================================================
@@ -275,14 +275,14 @@
   // LETTER SPACING
   // ==========================================================================
   .tracking-display {
-    letter-spacing: var(--ui-tracking-display);
+    letter-spacing: var(--ui-letter-spacing-display);
   }
 
   .tracking-body {
-    letter-spacing: var(--ui-tracking-body);
+    letter-spacing: var(--ui-letter-spacing-body);
   }
 
   .tracking-caps {
-    letter-spacing: var(--ui-tracking-caps);
+    letter-spacing: var(--ui-letter-spacing-caps);
   }
 }

package/src/config/tokens/semantic-spacing.scss

@@ -1,12 +0,0 @@
-@layer tokens {
-  :root {
-    --ui-spacing-xs: var(--ui-space-1);
-    --ui-spacing-sm: var(--ui-space-2);
-    --ui-spacing-md: var(--ui-space-4);
-    --ui-spacing-lg: var(--ui-space-6);
-    --ui-spacing-xl: var(--ui-space-8);
-
-    --ui-spacing-gutter: var(--ui-space-4);
-    --ui-spacing-section: var(--ui-space-8);
-  }
-}