@ulu/frontend 0.6.22 → 0.6.24

package/lib/scss/components/_card.scss

@@ -200,9 +200,6 @@ $config: (
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr auto;
-    
-    
-
     max-width: get("max-width");
     line-height: get("line-height");
     margin-top: get("margin-y");

package/lib/scss/components/_tabs.demo.html

@@ -39,3 +39,49 @@
     <p>Customize which alerts you receive via email, push notification, or SMS.</p>
   </div>
 </div>
+
+<!-- @ulu-demo
+  title: Sticky Horizontal Tabs
+  description: Using the `tabs--sticky` modifier to keep the horizontal tab labels visible at the top of the viewport when scrolling through long panel content.
+-->
+<div class="tabs tabs--sticky">
+  <div role="tablist" data-ulu-tablist='{ "equalHeights": false }'>
+    <button role="tab" id="sh-tab-1" aria-selected="true" aria-controls="sh-panel-1">Section 1</button>
+    <button role="tab" id="sh-tab-2" aria-selected="false" aria-controls="sh-panel-2">Section 2</button>
+    <button role="tab" id="sh-tab-3" aria-selected="false" aria-controls="sh-panel-3">Section 3</button>
+  </div>
+  <div role="tabpanel" id="sh-panel-1" aria-labelledby="sh-tab-1">
+    <p>Scroll down to see the sticky behavior.</p>
+    <div style="height: 400px; background-image: repeating-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), repeating-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-position: 0 0, 10px 10px; background-size: 20px 20px; opacity: 0.1; margin-top: 1rem;"></div>
+  </div>
+  <div role="tabpanel" id="sh-panel-2" aria-labelledby="sh-tab-2" hidden>
+    <p>This is section 2 content.</p>
+    <div style="height: 400px; background-image: repeating-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), repeating-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-position: 0 0, 10px 10px; background-size: 20px 20px; opacity: 0.1; margin-top: 1rem;"></div>
+  </div>
+  <div role="tabpanel" id="sh-panel-3" aria-labelledby="sh-tab-3" hidden>
+    <p>This is section 3 content.</p>
+  </div>
+</div>
+
+<!-- @ulu-demo
+  title: Sticky Vertical Tabs
+  description: Using both `tabs--vertical` and `tabs--sticky` modifiers. On large screens, the tab labels stick within their grid column as you scroll the adjacent panel. On smaller screens, they behave like sticky horizontal tabs.
+-->
+<div class="tabs tabs--vertical tabs--sticky">
+  <div role="tablist" data-ulu-tablist='{ "vertical": true, "equalHeights": false }'>
+    <button role="tab" id="sv-tab-1" aria-selected="true" aria-controls="sv-panel-1">Chapter 1</button>
+    <button role="tab" id="sv-tab-2" aria-selected="false" aria-controls="sv-panel-2">Chapter 2</button>
+    <button role="tab" id="sv-tab-3" aria-selected="false" aria-controls="sv-panel-3">Chapter 3</button>
+  </div>
+  <div role="tabpanel" id="sv-panel-1" aria-labelledby="sv-tab-1">
+    <p>Scroll down to see the vertical tablist stick to the top.</p>
+    <div style="height: 400px; background-image: repeating-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), repeating-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-position: 0 0, 10px 10px; background-size: 20px 20px; opacity: 0.1; margin-top: 1rem;"></div>
+  </div>
+  <div role="tabpanel" id="sv-panel-2" aria-labelledby="sv-tab-2" hidden>
+    <p>This is chapter 2 content.</p>
+    <div style="height: 400px; background-image: repeating-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), repeating-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-position: 0 0, 10px 10px; background-size: 20px 20px; opacity: 0.1; margin-top: 1rem;"></div>
+  </div>
+  <div role="tabpanel" id="sv-panel-3" aria-labelledby="sv-tab-3" hidden>
+    <p>This is chapter 3 content.</p>
+  </div>
+</div>

package/lib/scss/components/_tabs.scss

@@ -7,6 +7,7 @@
 @use "sass:meta";
 
 @use "../utils";
+@use "../cssvar";
 @use "../color";
 @use "../selector";
 @use "../breakpoint";
@@ -61,6 +62,10 @@ $-fallbacks: (
 /// @prop {Boolean} horizontal-tab-wrap [false] Set to true to allow line wrapping when the tabs are in horizontal orientation, vertical is always allowed to wrap
 /// @prop {Color} full-width-tablist-background-color [null] Optional background color for full-width tabs tablist
 /// @prop {Color} full-width-tabpanel-background-color [transparent] Optional background color for full-width tabs tabpanel
+/// @prop {Dimension} sticky-top [cssvar.use-ulu("sticky-offset-top")] The top offset when the sticky modifier is applied
+/// @prop {Dimension} sticky-vertical-top [cssvar.add(cssvar.use-ulu("sticky-offset-top"), 1em)] The top offset when the sticky modifier is applied in vertical layout 
+/// @prop {Color} sticky-background-color [background] The background color for the tablist when sticky
+/// @prop {Number} sticky-z-index [2] The z-index for the tablist when sticky
 
 $config: (
   "margin" : (2rem 0),
@@ -93,6 +98,10 @@ $config: (
   "horizontal-tab-wrap" : false,
   "full-width-tablist-background-color" : null,
   "full-width-tabpanel-background-color" : transparent,
+  "sticky-top" : cssvar.use-ulu("sticky-offset-top"),
+  "sticky-vertical-top" : cssvar.add(cssvar.use-ulu("sticky-offset-top"), 1em),
+  "sticky-background-color" : "background",
+  "sticky-z-index" : 2,
 ) !default;
 
 /// Change modules $config
@@ -211,6 +220,15 @@ $config: (
     }
   }
 
+  #{ $prefix }--sticky {
+    [role="tablist"] {
+      position: sticky;
+      top: get("sticky-top");
+      z-index: get("sticky-z-index");
+      background-color: color.get(get("sticky-background-color"));
+    }
+  }
+
   @include breakpoint.min(get("vertical-breakpoint")) {
     #{ $prefix }--vertical {
       display: grid;
@@ -240,6 +258,12 @@ $config: (
         grid-column: 2; // needed for equalHeights in vertical
       }
     }
+    #{ $prefix }--sticky#{ $prefix }--vertical {
+      [role="tablist"] {
+        top: get("sticky-vertical-top");
+        align-self: start;
+      }
+    }
   }
 
   #{ $prefix }--transparent {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.6.22",
+  "version": "0.6.24",
   "description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
   "type": "module",
   "files": [