fokus-styles 2.6.2 → 2.7.0

package/packages/fokus-js/js/combobox.js

@@ -1,6 +1,7 @@
 import { computePosition, applyPosition } from "./core/positioning.js";
 import { onClickOutside } from "./core/overlay.js";
 import { onEscapeKey } from "./core/focus.js";
+import { applyThemeContext } from "./core/theme.js";
 import { autoInit, createInstanceRegistry } from "./core/register.js";
 
 const instances = createInstanceRegistry();
@@ -175,12 +176,7 @@ export class Combobox {
     if (this.isOpen) return;
     this.isOpen = true;
 
-    const theme = this.inputEl.closest("[data-theme]")?.getAttribute("data-theme");
-    if (theme) {
-      this.listboxEl.setAttribute("data-theme", theme);
-    } else {
-      this.listboxEl.removeAttribute("data-theme");
-    }
+    applyThemeContext(this.listboxEl, this.inputEl);
 
     this.listboxEl.classList.add("is-open");
     this.listboxEl.style.width = `${this.inputEl.offsetWidth}px`;

package/packages/fokus-js/js/command-palette.js

@@ -1,5 +1,6 @@
 import { lockScroll, unlockScroll, onClickOutside } from "./core/overlay.js";
 import { createFocusTrap, onEscapeKey } from "./core/focus.js";
+import { applyThemeContext } from "./core/theme.js";
 import { autoInit, createInstanceRegistry } from "./core/register.js";
 
 const instances = createInstanceRegistry();
@@ -196,12 +197,7 @@ export class CommandPalette {
     if (this.isOpen) return;
     this.isOpen = true;
 
-    const theme = this.triggerEl.closest("[data-theme]")?.getAttribute("data-theme");
-    if (theme) {
-      this.paletteEl.setAttribute("data-theme", theme);
-    } else {
-      this.paletteEl.removeAttribute("data-theme");
-    }
+    applyThemeContext(this.paletteEl, this.triggerEl);
 
     this.paletteEl.classList.add("is-open");
     lockScroll();

package/packages/fokus-js/js/core/positioning.d.ts

@@ -6,12 +6,14 @@ export interface ComputePositionOptions {
   align?: Align;
   offset?: number;
   padding?: number;
+  fallbackPlacements?: Placement[];
 }
 
 export interface Position {
   top: number;
   left: number;
   placement: Placement;
+  arrowOffset?: string;
 }
 
 export function computePosition(

package/packages/fokus-js/js/core/positioning.js

@@ -41,8 +41,8 @@ export function computePosition(referenceEl, floatingEl, options = {}) {
 
   const candidates = [...new Set(fallbackPlacements ?? [placement, OPPOSITE_PLACEMENT[placement], "bottom", "top", "right", "left"])]
     .filter(Boolean);
-  const primaryCandidates = candidates.slice(0, 2);
-  const finalPlacement = primaryCandidates.find((candidate) => fitsPlacement(candidate, referenceRect, floatingRect, offset, viewportWidth, viewportHeight))
+  const placementCandidates = fallbackPlacements ? candidates : candidates.slice(0, 2);
+  const finalPlacement = placementCandidates.find((candidate) => fitsPlacement(candidate, referenceRect, floatingRect, offset, viewportWidth, viewportHeight))
     ?? placement;
 
   let top;

package/packages/fokus-js/js/core/theme.js

@@ -0,0 +1,8 @@
+export function applyThemeContext(targetEl, sourceEl) {
+  targetEl.removeAttribute("data-theme");
+  targetEl.removeAttribute("data-fs-theme");
+
+  const themeAttr = sourceEl.hasAttribute("data-fs-theme") ? "data-fs-theme" : "data-theme";
+  const theme = sourceEl.closest(`[${themeAttr}]`)?.getAttribute(themeAttr);
+  if (theme) targetEl.setAttribute(themeAttr, theme);
+}

package/packages/fokus-js/js/datatable.js

@@ -51,7 +51,10 @@ export class DataTable {
     this.tableEl = tableEl;
     this.theadEl = tableEl.querySelector("thead");
     this.tbodyEl = tbodyEl;
-    this.pageSize = Number(rootEl.getAttribute("data-fs-page-size")) || options.pageSize || 10;
+    const configuredPageSize = Number(rootEl.getAttribute("data-fs-page-size") ?? options.pageSize ?? 10);
+    this.pageSize = Number.isFinite(configuredPageSize) && configuredPageSize > 0
+      ? Math.floor(configuredPageSize)
+      : 10;
 
     this.filterInput = rootEl.querySelector("[data-fs-datatable-filter]");
     this.emptyEl = rootEl.querySelector("[data-fs-datatable-empty]");
@@ -191,7 +194,8 @@ export class DataTable {
 
   goToPage(page) {
     const pageCount = this.pageCount;
-    const next = Math.min(Math.max(1, page), pageCount);
+    const requested = Number(page);
+    const next = Number.isFinite(requested) ? Math.min(Math.max(1, Math.floor(requested)), pageCount) : 1;
     if (next === this.currentPage) return;
 
     this.currentPage = next;

package/packages/fokus-js/js/datepicker.js

@@ -43,6 +43,12 @@ function isSameDay(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
 
+function addMonthsClamped(date, months) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
+}
+
 function buildMonthCells(viewDate) {
   const year = viewDate.getFullYear();
   const month = viewDate.getMonth();
@@ -246,13 +252,13 @@ export class Datepicker {
         break;
       case "PageUp":
         nextDate = event.shiftKey
-          ? new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate())
-          : new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
+          ? addMonthsClamped(currentDate, -12)
+          : addMonthsClamped(currentDate, -1);
         break;
       case "PageDown":
         nextDate = event.shiftKey
-          ? new Date(currentDate.getFullYear() + 1, currentDate.getMonth(), currentDate.getDate())
-          : new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+          ? addMonthsClamped(currentDate, 12)
+          : addMonthsClamped(currentDate, 1);
         break;
       case "Enter":
       case " ":
@@ -328,6 +334,7 @@ export class Datepicker {
             return (
               `<button type="button" class="${classes.join(" ")}" role="gridcell" ` +
               `tabindex="${isTabbable ? "0" : "-1"}" aria-selected="${isSelected}" ` +
+              `${isToday ? 'aria-current="date" ' : ""}` +
               `data-year="${cell.year}" data-month="${cell.month}" data-day="${cell.day}">${cell.day}</button>`
             );
           })
@@ -344,7 +351,8 @@ export class Datepicker {
     if (this.isOpen) return;
     this.isOpen = true;
 
-    const theme = this.inputEl.closest("[data-theme]")?.getAttribute("data-theme");
+    const themeRoot = this.inputEl.closest("[data-theme], [data-fs-theme]");
+    const theme = themeRoot?.getAttribute("data-theme") ?? themeRoot?.getAttribute("data-fs-theme");
     if (theme) {
       this.panelEl.setAttribute("data-theme", theme);
     } else {

package/packages/fokus-js/js/dropdown.js

@@ -26,20 +26,28 @@ export class Dropdown {
 
     document.body.appendChild(this.menuEl);
 
+    if (!this.toggleEl.id) this.toggleEl.id = `fs-dropdown-toggle-${Math.random().toString(36).slice(2)}`;
     this.toggleEl.setAttribute("aria-haspopup", "menu");
     this.toggleEl.setAttribute("aria-expanded", "false");
     this.toggleEl.setAttribute("aria-controls", this.menuEl.id || `fs-dropdown-${Math.random().toString(36).slice(2)}`);
     if (!this.menuEl.id) this.menuEl.id = this.toggleEl.getAttribute("aria-controls");
-    this.menuEl.setAttribute("role", "menu");
+    if (!this.menuEl.hasAttribute("role")) this.menuEl.setAttribute("role", "menu");
+    this.menuEl.setAttribute("aria-orientation", "vertical");
+    this.menuEl.setAttribute("aria-labelledby", this.toggleEl.id || this.toggleEl.getAttribute("aria-controls"));
     this.menuEl.querySelectorAll(".fs-dropdown-item").forEach((item) => {
       if (!item.hasAttribute("role")) item.setAttribute("role", "menuitem");
+      if (this._isDisabled(item)) item.setAttribute("aria-disabled", "true");
     });
+    this.menuEl.querySelectorAll(".fs-dropdown-divider").forEach((divider) => divider.setAttribute("role", "separator"));
+    this.menuEl.querySelectorAll(".fs-dropdown-header").forEach((header) => header.setAttribute("role", "presentation"));
 
     this._handleToggleClick = this._handleToggleClick.bind(this);
+    this._handleToggleKeydown = this._handleToggleKeydown.bind(this);
     this._handleMenuKeydown = this._handleMenuKeydown.bind(this);
     this._handleMenuClick = this._handleMenuClick.bind(this);
 
     this.toggleEl.addEventListener("click", this._handleToggleClick);
+    this.toggleEl.addEventListener("keydown", this._handleToggleKeydown);
     this.menuEl.addEventListener("keydown", this._handleMenuKeydown);
     this.menuEl.addEventListener("click", this._handleMenuClick);
 
@@ -67,15 +75,25 @@ export class Dropdown {
     this.toggle();
   }
 
+  _handleToggleKeydown(event) {
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+
+    event.preventDefault();
+    if (!this.isOpen) this.show();
+
+    const items = this._items();
+    (event.key === "ArrowUp" ? items.at(-1) : items[0])?.focus();
+  }
+
   _handleMenuClick(event) {
-    if (event.target.closest(".fs-dropdown-item")) {
+    if (event.target.closest(".fs-dropdown-item, [data-fs-dropdown-dismiss]")) {
       this.hide();
       this.toggleEl.focus();
     }
   }
 
   _handleMenuKeydown(event) {
-    const items = Array.from(this.menuEl.querySelectorAll(".fs-dropdown-item:not(.is-disabled)"));
+    const items = this._items();
     const currentIndex = items.indexOf(document.activeElement);
 
     if (event.key === "ArrowDown") {
@@ -101,7 +119,8 @@ export class Dropdown {
     if (this.isOpen) return;
     this.isOpen = true;
 
-    const theme = this.toggleEl.closest("[data-theme]")?.getAttribute("data-theme");
+    const themeRoot = this.toggleEl.closest("[data-theme], [data-fs-theme]");
+    const theme = themeRoot?.getAttribute("data-theme") ?? themeRoot?.getAttribute("data-fs-theme");
     if (theme) {
       this.menuEl.setAttribute("data-theme", theme);
     } else {
@@ -116,6 +135,8 @@ export class Dropdown {
       offset: 4,
     });
     applyPosition(this.menuEl, position);
+    this.menuEl.dataset.placement = position.placement;
+    this.menuEl.dataset.align = this.align;
     this._positionCleanup = watchPosition(this.toggleEl, this.menuEl, {
       placement: this.placement,
       align: this.align,
@@ -124,7 +145,7 @@ export class Dropdown {
 
     this.toggleEl.setAttribute("aria-expanded", "true");
 
-    const firstItem = this.menuEl.querySelector(".fs-dropdown-item:not(.is-disabled)");
+    const firstItem = this._items()[0];
     firstItem?.focus();
 
     this._outsideClickCleanup = onClickOutside(this.menuEl, (event) => {
@@ -144,6 +165,8 @@ export class Dropdown {
     this.menuEl.style.removeProperty("position");
     this.menuEl.style.removeProperty("top");
     this.menuEl.style.removeProperty("left");
+    delete this.menuEl.dataset.placement;
+    delete this.menuEl.dataset.align;
     this.toggleEl.setAttribute("aria-expanded", "false");
 
     this._outsideClickCleanup?.();
@@ -163,10 +186,19 @@ export class Dropdown {
     }
   }
 
+  _isDisabled(item) {
+    return item.classList.contains("is-disabled") || item.disabled || item.getAttribute("aria-disabled") === "true";
+  }
+
+  _items() {
+    return Array.from(this.menuEl.querySelectorAll(".fs-dropdown-item")).filter((item) => !this._isDisabled(item));
+  }
+
   dispose() {
     this.hide();
     this._removeEscapeListener();
     this.toggleEl.removeEventListener("click", this._handleToggleClick);
+    this.toggleEl.removeEventListener("keydown", this._handleToggleKeydown);
     this.menuEl.removeEventListener("keydown", this._handleMenuKeydown);
     this.menuEl.removeEventListener("click", this._handleMenuClick);
     if (this._originalParent) {

package/packages/fokus-js/js/nested-menu.js

@@ -1,6 +1,7 @@
 import { computePosition, applyPosition } from "./core/positioning.js";
 import { onClickOutside } from "./core/overlay.js";
 import { onEscapeKey } from "./core/focus.js";
+import { applyThemeContext } from "./core/theme.js";
 import { autoInit, createInstanceRegistry } from "./core/register.js";
 
 const instances = createInstanceRegistry();
@@ -243,12 +244,7 @@ export class NestedMenu {
     if (this.isOpen) return;
     this.isOpen = true;
 
-    const theme = this.toggleEl.closest("[data-theme]")?.getAttribute("data-theme");
-    if (theme) {
-      this.rootMenu.setAttribute("data-theme", theme);
-    } else {
-      this.rootMenu.removeAttribute("data-theme");
-    }
+    applyThemeContext(this.rootMenu, this.toggleEl);
 
     this.rootMenu.classList.add("is-open");
 

package/packages/fokus-js/js/notification-center.js

@@ -2,6 +2,7 @@ import { Toast } from "./toast.js";
 import { computePosition, applyPosition } from "./core/positioning.js";
 import { onClickOutside } from "./core/overlay.js";
 import { onEscapeKey } from "./core/focus.js";
+import { applyThemeContext } from "./core/theme.js";
 import { autoInit, createInstanceRegistry } from "./core/register.js";
 
 const instances = createInstanceRegistry();
@@ -217,12 +218,7 @@ export class NotificationCenter {
     if (this.isOpen) return;
     this.isOpen = true;
 
-    const theme = this.triggerEl.closest("[data-theme]")?.getAttribute("data-theme");
-    if (theme) {
-      this.panelEl.setAttribute("data-theme", theme);
-    } else {
-      this.panelEl.removeAttribute("data-theme");
-    }
+    applyThemeContext(this.panelEl, this.triggerEl);
 
     this.panelEl.classList.add("is-open");
 

package/packages/fokus-js/js/pagination.js

@@ -4,13 +4,13 @@ const instances = createInstanceRegistry();
 export class Pagination {
   constructor(element) {
     this.element = element;
-    this.current = Number(element.getAttribute("data-fs-page")) || 1;
-    this.total = Number(element.getAttribute("data-fs-pages")) || element.querySelectorAll("[data-fs-page]").length || 1;
+    this.total = Math.max(1, this._normalizePage(element.getAttribute("data-fs-pages"), element.querySelectorAll("[data-fs-page]").length || 1));
+    this.current = Math.min(this.total, this._normalizePage(element.getAttribute("data-fs-page"), 1));
     this._click = (event) => {
       const button = event.target.closest("[data-fs-page]");
       if (!button || !this.element.contains(button)) return;
       event.preventDefault();
-      this.goTo(Number(button.getAttribute("data-fs-page")));
+      this.goTo(button.getAttribute("data-fs-page"));
     };
     element.addEventListener("click", this._click);
     instances.set(element, this);
@@ -19,20 +19,26 @@ export class Pagination {
   static getInstance(el) { return instances.get(el); }
   static getOrCreateInstance(el) { return this.getInstance(el) ?? new Pagination(el); }
   goTo(page) {
-    const next = Math.max(1, Math.min(this.total, page));
-    if (next === this.current) return;
-    this.current = next;
-    this.element.setAttribute("data-fs-page", String(next));
+    const next = this._normalizePage(page, this.current);
+    const bounded = Math.max(1, Math.min(this.total, next));
+    if (bounded === this.current) return;
+    this.current = bounded;
+    this.element.setAttribute("data-fs-page", String(bounded));
     this._render();
-    this.element.dispatchEvent(new CustomEvent("fs:pagination:change", { bubbles: true, detail: { page: next, total: this.total } }));
+    this.element.dispatchEvent(new CustomEvent("fs:pagination:change", { bubbles: true, detail: { page: bounded, total: this.total } }));
   }
   _render() {
     this.element.querySelectorAll("[data-fs-page]").forEach((item) => {
       const active = Number(item.getAttribute("data-fs-page")) === this.current;
       item.classList.toggle("is-active", active);
-      item.setAttribute("aria-current", active ? "page" : "false");
+      if (active) item.setAttribute("aria-current", "page");
+      else item.removeAttribute("aria-current");
     });
   }
+  _normalizePage(value, fallback) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : fallback;
+  }
   dispose() { this.element.removeEventListener("click", this._click); instances.delete(this.element); }
 }
 autoInit("pagination", Pagination);

package/packages/fokus-js/js/popover.js

@@ -1,6 +1,7 @@
 import { computePosition, applyPosition, watchPosition } from "./core/positioning.js";
 import { onClickOutside } from "./core/overlay.js";
 import { onEscapeKey } from "./core/focus.js";
+import { applyThemeContext } from "./core/theme.js";
 import { autoInit, createInstanceRegistry } from "./core/register.js";
 
 const instances = createInstanceRegistry();
@@ -132,12 +133,7 @@ export class Popover {
     if (this.isOpen) return;
     this.isOpen = true;
 
-    const theme = this.triggerEl.closest("[data-theme]")?.getAttribute("data-theme");
-    if (theme) {
-      this.popoverEl.setAttribute("data-theme", theme);
-    } else {
-      this.popoverEl.removeAttribute("data-theme");
-    }
+    applyThemeContext(this.popoverEl, this.triggerEl);
 
     this.popoverEl.classList.add("is-open");
 

package/packages/fokus-js/js/select.js

@@ -37,6 +37,10 @@ export class Select {
     return instances.get(el);
   }
 
+  get isOpen() {
+    return this.dropdown?.isOpen ?? false;
+  }
+
   _buildMarkup() {
     const wrapper = document.createElement("div");
     wrapper.className = "fs-dropdown fs-form-select-dropdown";

package/packages/fokus-js/js/tabs.js

@@ -6,7 +6,7 @@ let idCounter = 0;
 export class Tabs {
   constructor(tablistEl) {
     this.tablistEl = tablistEl;
-    this.tabs = Array.from(tablistEl.querySelectorAll(".fs-nav-link"));
+    this.tabs = Array.from(tablistEl.querySelectorAll(".fs-nav-link, [role=tab], [data-fs-tab-target]"));
     this.manualActivation = tablistEl.getAttribute("data-tabs-activation") === "manual";
 
     tablistEl.setAttribute("role", "tablist");
@@ -21,7 +21,7 @@ export class Tabs {
       tab.setAttribute("aria-selected", String(isActive));
       tab.setAttribute("tabindex", isActive ? "0" : "-1");
 
-      const paneSelector = tab.getAttribute("data-fs-target");
+      const paneSelector = tab.getAttribute("data-fs-target") || tab.getAttribute("data-fs-tab-target");
       const pane = paneSelector ? document.querySelector(paneSelector) : null;
 
       if (pane) {
@@ -50,7 +50,7 @@ export class Tabs {
   static dispose(el) { return this.getInstance(el)?.dispose(); }
 
   _handleClick(event) {
-    const tab = event.target.closest(".fs-nav-link:not(.is-disabled)");
+    const tab = event.target.closest(".fs-nav-link:not(.is-disabled), [role=tab]:not(.is-disabled), [data-fs-tab-target]:not(.is-disabled)");
     if (!tab || !this.tabs.includes(tab)) return;
     this.show(tab);
   }
@@ -84,7 +84,7 @@ export class Tabs {
       otherTab.setAttribute("aria-selected", String(isActive));
       otherTab.setAttribute("tabindex", isActive ? "0" : "-1");
 
-      const paneSelector = otherTab.getAttribute("data-fs-target");
+      const paneSelector = otherTab.getAttribute("data-fs-target") || otherTab.getAttribute("data-fs-tab-target");
       const pane = paneSelector ? document.querySelector(paneSelector) : null;
       pane?.classList.toggle("is-active", isActive);
       if (pane) pane.hidden = !isActive;

package/packages/fokus-js/js/tooltip.js

@@ -1,5 +1,6 @@
 import { computePosition, applyPosition, watchPosition } from "./core/positioning.js";
 import { onEscapeKey } from "./core/focus.js";
+import { applyThemeContext } from "./core/theme.js";
 import { autoInit, createInstanceRegistry } from "./core/register.js";
 
 const instances = createInstanceRegistry();
@@ -137,12 +138,7 @@ export class Tooltip {
     openInstance = this;
     this.isOpen = true;
 
-    const theme = this.referenceEl.closest("[data-theme]")?.getAttribute("data-theme");
-    if (theme) {
-      this.tooltipEl.setAttribute("data-theme", theme);
-    } else {
-      this.tooltipEl.removeAttribute("data-theme");
-    }
+    applyThemeContext(this.tooltipEl, this.referenceEl);
 
     this.tooltipEl.classList.add("is-open");
 

package/packages/fokus-utilities/scss/utilities/_api.scss

@@ -1,96 +1,89 @@
-/* stylelint-disable declaration-block-single-line-max-declarations */
+@forward "../../../fokus-core/scss/settings/utilities";
 @use "sass:map";
-@use "../../fokus-core/scss/settings" as *;
-@use "../../fokus-core/scss/tools" as tools;
+@use "../../../fokus-core/scss/settings" as *;
+@use "../../../fokus-core/scss/tools" as *;
 
-// Utility API do Fokus Styles: os mapas são públicos e podem ser estendidos
-// antes do @use do entry-point pelo consumidor.
-$fs-utility-colors: $theme-colors !default;
-$fs-utility-spacers: $spacers !default;
-$fs-utility-sizes: (25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto) !default;
-$fs-utility-displays: (block, inline, inline-block, flex, grid, none) !default;
-$fs-utility-flex-directions: (row, column, row-reverse, column-reverse) !default;
+// API declarativa inspirada na Utility API do Bootstrap. A API aceita um
+// subconjunto estático e previsível: valores oficiais, sem JIT e sem classes
+// arbitrárias. Categorias históricas permanecem em seus módulos próprios para
+// preservar aliases e a ordem do CSS público.
+@mixin fs-generate-utility($name, $definition) {
+  $property: map.get($definition, property);
+  $class: map.get($definition, class);
+  $values: map.get($definition, values);
+  $category: map.get($definition, category);
+  $important: map.get($definition, important);
+  $responsive: false;
+  $print: false;
+  $states: ();
+  $declaration-property: $property;
 
-@layer utilities {
-  @if fs-config-list-enabled(colors, color) {
-    @each $name, $value in $fs-utility-colors {
-      .fs-u-color-#{$name} { color: var(--fs-color-#{$name}, #{$value}) !important; }
-      .fs-u-bg-#{$name} { background-color: var(--fs-color-#{$name}, #{$value}) !important; }
-    }
+  @if map.has-key($definition, responsive) { $responsive: map.get($definition, responsive); }
+
+  @if map.has-key($definition, print) { $print: map.get($definition, print); }
+
+  @if map.has-key($definition, states) { $states: map.get($definition, states); }
+
+  @if map.has-key($definition, css-var) and map.get($definition, css-var) {
+    $declaration-property: --#{map.get($definition, css-variable-name)};
   }
+  $suffix: "";
 
-  @if fs-config-list-enabled(spacing, margin) and fs-config-list-enabled(spacing, padding) {
-    @each $name, $value in $fs-utility-spacers {
-      .fs-u-m-#{$name} { margin: $value !important; }
-      .fs-u-mx-#{$name} { margin-inline: $value !important; }
-      .fs-u-my-#{$name} { margin-block: $value !important; }
-      .fs-u-p-#{$name} { padding: $value !important; }
-      .fs-u-px-#{$name} { padding-inline: $value !important; }
-      .fs-u-py-#{$name} { padding-block: $value !important; }
-    }
+  @if $important and fs-feature-enabled(important-utilities, true) {
+    $suffix: " !important";
   }
 
-  @if fs-config-list-enabled(sizing, width) {
-    @each $name, $value in $fs-utility-sizes {
-      .fs-u-w-#{$name} { width: $value !important; }
-      .fs-u-h-#{$name} { height: $value !important; }
+  @each $key, $value in $values {
+    .fs-u-#{$class}-#{$key} {
+      #{$declaration-property}: #{$value}#{$suffix};
     }
   }
 
-  @if fs-config-get(responsive, true) {
+  @if $responsive and fs-feature-enabled(responsive, true) {
     @each $breakpoint, $min in $breakpoints {
+      $infix: breakpoint-infix($breakpoint);
+
       @if $min != 0 {
-        @media (min-width: $min) {
-          .fs-u-d-#{$breakpoint}-flex { display: flex !important; }
-          .fs-u-d-#{$breakpoint}-none { display: none !important; }
-          .fs-u-text-#{$breakpoint}-start { text-align: start !important; }
+        @include media-breakpoint-up($breakpoint) {
+          @each $key, $value in $values {
+            .fs-u-#{$class}#{$infix}-#{$key} {
+              #{$declaration-property}: #{$value}#{$suffix};
+            }
+          }
         }
       }
     }
   }
 
-  @if fs-config-list-enabled(display, display) {
-    @each $display in $fs-utility-displays {
-      .fs-u-d-#{$display} { display: $display !important; }
+  @each $state, $pseudo in $states {
+    @each $key, $value in $values {
+      .fs-u-#{$class}-#{$key}-#{$state}:#{$pseudo} {
+        #{$declaration-property}: #{$value}#{$suffix};
+      }
     }
   }
 
-  @if fs-config-list-enabled(flex, flex) {
-    @each $direction in $fs-utility-flex-directions {
-      .fs-u-flex-#{$direction} { flex-direction: $direction !important; }
+  @if $print and fs-feature-enabled(print, true) {
+    @media print {
+      @each $key, $value in $values {
+        .fs-u-#{$class}-#{$key}-print {
+          #{$declaration-property}: #{$value}#{$suffix};
+        }
+      }
     }
-    .fs-u-flex-wrap { flex-wrap: wrap !important; }
-    .fs-u-flex-nowrap { flex-wrap: nowrap !important; }
-    .fs-u-justify-start { justify-content: flex-start !important; }
-    .fs-u-justify-center { justify-content: center !important; }
-    .fs-u-justify-end { justify-content: flex-end !important; }
-    .fs-u-justify-between { justify-content: space-between !important; }
-    .fs-u-align-start { align-items: flex-start !important; }
-    .fs-u-align-center { align-items: center !important; }
-    .fs-u-align-end { align-items: flex-end !important; }
   }
+}
 
-  @if fs-config-list-enabled(gap, gap) {
-    @each $name, $value in $fs-utility-spacers {
-      .fs-u-gap-#{$name} { gap: $value !important; }
-      .fs-u-row-gap-#{$name} { row-gap: $value !important; }
-      .fs-u-column-gap-#{$name} { column-gap: $value !important; }
-    }
-  }
+@mixin fs-generate-utilities($utilities: $fs-utilities) {
+  @each $name, $definition in $utilities {
+    $category: utilities;
 
-  @if fs-config-list-enabled(typography, typography) {
-    .fs-u-text-start { text-align: start !important; }
-    .fs-u-text-center { text-align: center !important; }
-    .fs-u-text-end { text-align: end !important; }
-    .fs-u-text-wrap { white-space: normal !important; }
-    .fs-u-text-nowrap { white-space: nowrap !important; }
-    .fs-u-fw-normal { font-weight: 400 !important; }
-    .fs-u-fw-semibold { font-weight: 600 !important; }
-    .fs-u-fw-bold { font-weight: 700 !important; }
-  }
+    @if map.has-key($definition, category) {
+      $category: map.get($definition, category);
+    }
 
-  @if fs-config-list-enabled(states, states) {
-    .fs-u-focus-ring:focus-visible { outline: var(--fs-focus-width) solid var(--fs-focus-color); outline-offset: var(--fs-focus-offset); }
-    .fs-u-disabled:disabled, .fs-u-disabled[aria-disabled="true"] { pointer-events: none; opacity: var(--fs-disabled-opacity); }
+    @if fs-config-list-enabled($category, $name) {
+      @include fs-generate-utility($name, $definition);
+    }
   }
 }