zeus-css 1.0.12 → 1.0.13

package/scss/README.md

@@ -1,193 +0,0 @@
-# ⚡ Zeus CSS
-
-Zeus is a fluid-first SCSS design system. Every size, space, and font size scales
-smoothly between a mobile floor and a desktop ceiling using native CSS
-`clamp()` driven by container-query units (`cqi`) — no breakpoint jumps, no
-`calc()` guesswork. Colors are OKLCH-based semantic tokens with automatic
-light/dark derivation. The whole system is expressed as plain Sass maps, which
-makes it easy for both humans and AI coding assistants to read, extend, and
-reason about.
-
-- **Fluid by default** — `clamp()` scaling for spacing, type, radii, borders, icons.
-- **Semantic OKLCH tokens** — define 5 base colors, get light/dark/muted/border variants derived automatically.
-- **Cascade layers** — `reset → tokens → base → layout → components → utilities`, so utility classes always win without `!important`.
-- **Zero-emission module entry** — `@use "zeus" as *` in a component's `.module.scss` gives you every mixin/function with **no** leaked CSS.
-- **Config-first** — every token lives in one file you can override; nothing is hardcoded past that boundary.
-
-## Browser support
-
-Zeus targets evergreen browsers only — there is no fallback path for the core
-and none is planned. There is no IE11, no legacy Safari, and no polyfill
-story: if you need to support browsers older than ~2023, Zeus is not the
-right choice.
-
-**Required (the whole framework depends on these).** Cascade layers
-(`@layer`), container query units (`cqi`, `container-type`), `@property`,
-relative color syntax (`oklch(from …)`), `:has()`, `color-mix()`. All are
-Baseline "Widely available" in current Chrome/Edge, Firefox, and Safari.
-
-**Progressive enhancement (a few components use these and degrade if
-absent).** These are *not* uniformly Baseline — check current support for
-your targets rather than assuming:
-
-| Feature | Used by | Without it you get |
-| --- | --- | --- |
-| `popover` attribute | `.z-tooltip`, `.z-dropdown`, `.z-toast-region` | No top-layer rendering or light-dismiss — these three need it to function; verify support before relying on them |
-| CSS anchor positioning (`position-anchor`, `position-area`) | `.z-tooltip`, `.z-dropdown` | Still a fully working popover, just placed by the UA default instead of anchored to its trigger |
-| `@starting-style`, `transition-behavior: allow-discrete` | `.z-tooltip`, `.z-dropdown` enter/exit | Instant show/hide instead of a fade — purely cosmetic |
-
-Anchor positioning has the narrowest support of the three (Chromium shipped
-it well ahead of the other engines). The components are written so its
-absence costs placement, never functionality.
-
-## Install
-
-```bash
-npm install zeus-css
-```
-
-No Sass pipeline and no customization needed? Import the precompiled CSS
-once, at your app root, and skip everything below about entry points and
-theming:
-
-```tsx
-// app/layout.tsx
-import "zeus-css/css"; // or "zeus-css/dist/zeus.css" / "zeus-css/min" for the minified build
-```
-
-## Two ways to consume Zeus — pick one
-
-These are **mutually exclusive** at the app-root level. Never load both in
-the same project.
-
-| | No Sass pipeline | Sass pipeline (Next.js, Vite, webpack `sass-loader`) |
-|---|---|---|
-| **Import** | `zeus-css/css` (plain compiled CSS) | `@use "zeus-css/foundation"` |
-| **Customizable?** | No — ships the default token values baked in | Yes — edit `zeus.customize.scss` first (see [Theming your brand](#theming-your-brand)) |
-| **Use when** | You just want the framework as-is, no build step | You want your own brand colors/type/spacing |
-
-If you don't need custom theming, skip straight to
-[Install](#install) and use the plain CSS import. If you *do* need custom
-theming, use the SCSS entry point — the precompiled CSS can't reflect your
-overrides, since it was built once, at publish time, with the default tokens.
-
-## Two entry points (SCSS pipeline)
-
-Once you're on the SCSS path, Zeus exposes two distinct entry points — pick the right one per file.
-
-### 1. Global stylesheet — `foundation`
-
-Import **once**, at your app root. Emits the full compiled CSS: reset, design
-tokens as CSS custom properties, typography base, and every utility class
-(`.padding-lg`, `.text-h1`, `.grid-cols-3`, …).
-
-```scss
-// app/globals.scss
-@use "zeus-css/foundation";
-```
-
-### 2. Component modules — `zeus`
-
-Import in **every** `.module.scss` component file. Exposes all mixins and
-functions (`@include padding(...)`, `@include text(...)`, `color(...)`, …) but
-emits **zero** CSS of its own — only the rules you actually write.
-
-```scss
-// Button.module.scss
-@use "zeus-css/zeus" as *;
-
-.button {
-  @include padding("md", "x");
-  @include text("button");
-  @include border-radius("sm");
-  background: color("primary");
-  color: var(--color-text-inverse);
-
-  &:hover {
-    background: color("primary-dark");
-  }
-}
-```
-
-## 5-minute quickstart
-
-```scss
-// 1. app/globals.scss — load the framework once
-@use "zeus-css/foundation";
-```
-
-```tsx
-// 2. app/layout.tsx — import the global stylesheet
-import "./globals.scss";
-```
-
-```scss
-// 3. components/Card.module.scss — build a component with the API
-@use "zeus-css/zeus" as *;
-
-.card {
-  @include padding("lg");
-  @include border-radius("md");
-  @include card-shadow();
-  background: var(--color-surface);
-  border: var(--border-line-xs) solid var(--color-border);
-}
-
-.title {
-  @include text("h4");
-  color: var(--color-text);
-}
-```
-
-```tsx
-// components/Card.tsx
-import styles from "./Card.module.scss";
-
-export function Card({ children }: { children: React.ReactNode }) {
-  return <div className={styles.card}>{children}</div>;
-}
-```
-
-That's it — no build config, no PostCSS plugin. Zeus compiles with any
-standard Dart Sass pipeline (Next.js, Vite, webpack `sass-loader`, or the
-`sass` CLI directly).
-
-## Theming your brand
-
-> ⚠️ Only relevant if you're on the **Sass pipeline** path above. If you
-> imported the plain `zeus-css/css` build, there is nothing to configure here
-> — remove that import first, then follow the steps below instead. Don't use
-> both.
-
-Every visual token — colors, typography, spacing, radii, shadows, breakpoints
-— lives in **one file**: `zeus.customize.scss`. Copy the keys you want to
-override from `zeus.token.sets.example.scss` (a reference-only file, never
-imported) into your own `zeus.customize.scss` before the `@use` chain resolves.
-Then compile through `@use "zeus-css/foundation"` as shown in
-[Global stylesheet — foundation](#1-global-stylesheet--foundation) — your
-overrides are baked into the CSS your own Sass pipeline emits.
-
-```scss
-// zeus.customize.scss
-$zeus-colors: (
-  "primary": oklch(60% 0.2 250),
-  "primary-light": oklch(75% 0.15 250),
-  "primary-dark": oklch(45% 0.25 250),
-  // ...
-);
-```
-
-Layout/engine behavior (prefixing, responsive strategy, fluid viewport bounds)
-lives in `zeus.config.scss` — separate from design tokens on purpose, so
-brand changes and structural changes never collide in the same diff.
-
-## Learn more
-
-- `zeus.token.sets.example.scss` — full reference of every default token value.
-- `CHANGELOG.md` — what changed between versions.
-- `API.md` — the full public API surface: entry points, config variables,
-  mixins/functions, utility classes, components, and design tokens.
-
-## License
-
-MIT © Stavros Kosmas Lazaris

package/scss/cheatsheet.md

@@ -1,249 +0,0 @@
-# Zeus CSS Cheatsheet
-
-> Auto-generated from source — do not hand-edit. Regenerate with `npm run gen:cheatsheet`.
-
-## Mixins & Functions
-
-| Kind | Signature | Description | File |
-|---|---|---|---|
-| mixin | `fade-in($duration: 0.3s, $delay: 0s, $timing: ease-in-out)` | Usage: @include fade-in(0.5s, 0.2s); | `foundation/core/engine/animations.scss` |
-| mixin | `slide-in($direction: bottom, $duration: 0.3s, $delay: 0s, $timing: ease-out)` | Usage: @include slide-in(left, 0.4s); | `foundation/core/engine/animations.scss` |
-| mixin | `scale($scale: 1.05, $duration: 0.3s, $timing: ease-in-out)` | Usage: @include scale(1.1, 0.3s); | `foundation/core/engine/animations.scss` |
-| mixin | `bounce($duration: 0.8s, $iteration: 1, $delay: 0s)` | Usage: @include bounce(0.6s, infinite); | `foundation/core/engine/animations.scss` |
-| mixin | `pulse($duration: 1s, $iteration: infinite)` | Usage: @include pulse(1.5s, infinite); | `foundation/core/engine/animations.scss` |
-| mixin | `rotate($degrees: 360deg, $duration: 1s, $timing: linear, $iteration: 1)` | Usage: @include rotate(360deg, 2s, linear, infinite); | `foundation/core/engine/animations.scss` |
-| mixin | `button-base-reset()` |  | `foundation/core/engine/buttons.scss` |
-| mixin | `button-structure()` |  | `foundation/core/engine/buttons.scss` |
-| mixin | `button-apply-variant($variant: "primary")` | Uses direct map access instead of a getter function | `foundation/core/engine/buttons.scss` |
-| mixin | `btn-primary()` |  | `foundation/core/engine/buttons.scss` |
-| mixin | `btn-secondary()` |  | `foundation/core/engine/buttons.scss` |
-| mixin | `btn-tertiary()` |  | `foundation/core/engine/buttons.scss` |
-| mixin | `btn-icon-only()` |  | `foundation/core/engine/buttons.scss` |
-| mixin | `btn-variant($variant: "primary")` |  | `foundation/core/engine/buttons.scss` |
-| mixin | `btn-size($size: "md")` |  | `foundation/core/engine/buttons.scss` |
-| function | `color($name, $alpha: 1)` | Retrieve any color from the design palette with optional alpha | `foundation/core/engine/color-api.scss` |
-| function | `map-get-safe($map, $key)` | Extracts values from the provided map structure with type validation and unquoted key normalization | `foundation/core/engine/helpers.scss` |
-| mixin | `border-radius($type)` | Applies dynamically-scaled responsive rounded corners based on predefined maps | `foundation/core/engine/layout.scss` |
-| mixin | `border-line($type)` | Configures responsive border thickness and strokes across viewport ranges | `foundation/core/engine/layout.scss` |
-| mixin | `box-size($type)` | Mixin for icon sizes through devices — always clamp() | `foundation/core/engine/layout.scss` |
-| mixin | `padding($size, $direction: null)` | Mixin for padding with optional direction — references --space-* :root token | `foundation/core/engine/layout.scss` |
-| mixin | `margin($size, $direction: null)` | Mixin for margin with optional direction — references --space-* :root token | `foundation/core/engine/layout.scss` |
-| mixin | `gap($size, $direction: null)` | Mixin for gap with optional direction — references --space-* :root token | `foundation/core/engine/layout.scss` |
-| mixin | `not-first-child()` |  | `foundation/core/engine/layout.scss` |
-| mixin | `not-last-child()` |  | `foundation/core/engine/layout.scss` |
-| mixin | `horizontal-scroll()` |  | `foundation/core/engine/layout.scss` |
-| mixin | `no-horizontal-scroll()` |  | `foundation/core/engine/layout.scss` |
-| function | `bp($key)` |  | `foundation/core/engine/responsive.scss` |
-| mixin | `screen-above($breakpoint)` |  | `foundation/core/engine/responsive.scss` |
-| mixin | `screen-below($breakpoint)` |  | `foundation/core/engine/responsive.scss` |
-| mixin | `screen-between($lower, $upper)` |  | `foundation/core/engine/responsive.scss` |
-| mixin | `suppress-on($scope)` | Scopes: 'handheld', 'mobile', 'tablet', 'desktop' (all singular). | `foundation/core/engine/responsive.scss` |
-| mixin | `apply-shadow($size: "md")` | Usage: @include apply-shadow("md"); | `foundation/core/engine/shadows.scss` |
-| mixin | `elevation($level: 1)` | Usage: @include elevation(2); // Applies shadow-md | `foundation/core/engine/shadows.scss` |
-| mixin | `hover-shadow($default: "md", $hover: "lg")` | Usage: @include hover-shadow("sm", "lg"); | `foundation/core/engine/shadows.scss` |
-| mixin | `focus-shadow($shadow: "outline")` | Usage: @include focus-shadow("outline"); | `foundation/core/engine/shadows.scss` |
-| mixin | `interactive-shadow($default: "md", $hover: "lg", $focus: "outline")` | Usage: @include interactive-shadow("md", "lg", "outline"); | `foundation/core/engine/shadows.scss` |
-| mixin | `card-shadow()` | Usage: @include card-shadow(); | `foundation/core/engine/shadows.scss` |
-| mixin | `semantic-shadow($type: "primary")` | Usage: @include semantic-shadow("primary"); | `foundation/core/engine/shadows.scss` |
-| mixin | `glow-effect($color: rgba(59, 130, 246, 0.5), $blur: 20px)` | Usage: @include glow-effect("primary", 0.5); | `foundation/core/engine/shadows.scss` |
-| mixin | `inner-shadow($size: "inner")` | Usage: @include inner-shadow(); | `foundation/core/engine/shadows.scss` |
-| mixin | `layered-shadow($shadow1, $shadow2)` | Usage: @include layered-shadow("md", "primary"); | `foundation/core/engine/shadows.scss` |
-| mixin | `conditional-shadow($state: "hover", $shadow: "md")` | Usage: @include conditional-shadow("hover", "lg"); | `foundation/core/engine/shadows.scss` |
-| mixin | `no-shadow()` | Usage: @include no-shadow(); | `foundation/core/engine/shadows.scss` |
-| mixin | `p($size, $dir: null)` |  | `foundation/core/engine/shortcuts.scss` |
-| mixin | `m($size, $dir: null)` |  | `foundation/core/engine/shortcuts.scss` |
-| mixin | `g($size, $dir: null)` |  | `foundation/core/engine/shortcuts.scss` |
-| mixin | `r($type)` |  | `foundation/core/engine/shortcuts.scss` |
-| mixin | `t($type)` |  | `foundation/core/engine/shortcuts.scss` |
-| mixin | `sz($type)` |  | `foundation/core/engine/shortcuts.scss` |
-| function | `useclamp-sizing($min, $max, $c-floor: map.get($container-bounds, "floor"), $c-ceil: map.get($container-bounds, "ceil"), $precision: 1)` |  | `foundation/core/engine/sizing.scss` |
-| mixin | `zeus-theme($name, $config)` |  | `foundation/core/engine/theme-builder.scss` |
-| mixin | `text($type)` | The var is already generated by root-generator.scss. | `foundation/core/engine/typographics.scss` |
-| function | `useclamp-typography($typeface, $precision: 1)` |  | `foundation/core/engine/typography-calc.scss` |
-
-## Utility Class Families
-
-| Class pattern | Generator mixin | File |
-|---|---|---|
-| `.flex` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.flex-row` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.flex-wrap` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.flex-column` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.flex-center` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.flex-space-between` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.d-none` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.d-block` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.d-inline-block` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.align-center` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.align-start` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.align-end` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.justify-center` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.justify-start` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.justify-end` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.justify-between` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.justify-around` | `load-flexbox()` | `foundation/views/render/classes/flexbox.scss` |
-| `.d-grid` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.d-inline-grid` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.grid` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.col-span-{n}` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.col-span-full` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.col-start-{n}` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.col-end-{n}` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.grid-cards` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.grid-sidebar` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.grid-split` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.grid-thirds` | `load-grid()` | `foundation/views/render/classes/grid.scss` |
-| `.animate-fade-in` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.animate-fade-in-slow` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.animate-fade-in-fast` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.animate-slide-up` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.animate-slide-down` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.animate-slide-left` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.animate-slide-right` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.animate-bounce` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.animate-pulse` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.animate-rotate` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.delay-100` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.delay-200` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.delay-300` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.delay-500` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.delay-700` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.delay-1000` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.duration-150` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.duration-300` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.duration-500` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.duration-700` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.duration-1000` | `load-animations()` | `foundation/views/render/classes/_animations.scss` |
-| `.aspect-auto` | `load-aspect-ratio()` | `foundation/views/render/classes/_aspect-ratio.scss` |
-| `.aspect-1-1` | `load-aspect-ratio()` | `foundation/views/render/classes/_aspect-ratio.scss` |
-| `.aspect-4-3` | `load-aspect-ratio()` | `foundation/views/render/classes/_aspect-ratio.scss` |
-| `.aspect-3-2` | `load-aspect-ratio()` | `foundation/views/render/classes/_aspect-ratio.scss` |
-| `.aspect-16-9` | `load-aspect-ratio()` | `foundation/views/render/classes/_aspect-ratio.scss` |
-| `.aspect-21-9` | `load-aspect-ratio()` | `foundation/views/render/classes/_aspect-ratio.scss` |
-| `.aspect-3-4` | `load-aspect-ratio()` | `foundation/views/render/classes/_aspect-ratio.scss` |
-| `.aspect-9-16` | `load-aspect-ratio()` | `foundation/views/render/classes/_aspect-ratio.scss` |
-| `.border-radius-{n}` | `load-borders()` | `foundation/views/render/classes/_borders.scss` |
-| `.border-line-{n}` | `load-borders()` | `foundation/views/render/classes/_borders.scss` |
-| `.btn-{n}` | `load-buttons()` | `foundation/views/render/classes/_buttons.scss` |
-| `.bg-{n}` | `load-colors()` | `foundation/views/render/classes/_colors.scss` |
-| `.color-{n}` | `load-colors()` | `foundation/views/render/classes/_colors.scss` |
-| `.border-color-{n}` | `load-colors()` | `foundation/views/render/classes/_colors.scss` |
-| `.bg-transparent` | `load-colors()` | `foundation/views/render/classes/_colors.scss` |
-| `.color-inherit` | `load-colors()` | `foundation/views/render/classes/_colors.scss` |
-| `.color-current` | `load-colors()` | `foundation/views/render/classes/_colors.scss` |
-| `.border-color-transparent` | `load-colors()` | `foundation/views/render/classes/_colors.scss` |
-| `.border-color-currentColor` | `load-colors()` | `foundation/views/render/classes/_colors.scss` |
-| `.surface` | `load-compounds()` | `foundation/views/render/classes/_compounds.scss` |
-| `.surface-flat` | `load-compounds()` | `foundation/views/render/classes/_compounds.scss` |
-| `.section-wrap` | `load-compounds()` | `foundation/views/render/classes/_compounds.scss` |
-| `.section-wrap-narrow` | `load-compounds()` | `foundation/views/render/classes/_compounds.scss` |
-| `.glass` | `load-compounds()` | `foundation/views/render/classes/_compounds.scss` |
-| `.divider` | `load-compounds()` | `foundation/views/render/classes/_compounds.scss` |
-| `.sr-only` | `load-compounds()` | `foundation/views/render/classes/_compounds.scss` |
-| `.truncate` | `load-compounds()` | `foundation/views/render/classes/_compounds.scss` |
-| `.line-clamp-2` | `load-compounds()` | `foundation/views/render/classes/_compounds.scss` |
-| `.line-clamp-3` | `load-compounds()` | `foundation/views/render/classes/_compounds.scss` |
-| `.container` | `load-containers()` | `foundation/views/render/classes/_containers.scss` |
-| `.opacity-{n}` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.overflow-auto` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.overflow-hidden` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.overflow-scroll` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.overflow-visible` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.overflow-y-auto` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.overflow-y-hidden` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.overflow-y-scroll` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.object-cover` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.object-contain` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.object-fill` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.object-center` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.flex-grow-0` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.flex-grow-1` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.flex-shrink-0` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.flex-shrink-1` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.order-first` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.order-last` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.order-none` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.order-{n}` | `load-misc-utils()` | `foundation/views/render/classes/_misc-utils.scss` |
-| `.static` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.relative` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.absolute` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.fixed` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.sticky` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.inset-auto` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.inset-{n}` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.top-{n}` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.bottom-{n}` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.inset-inline-start-{n}` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.inset-inline-end-{n}` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.top-auto` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.bottom-auto` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.inset-inline-start-auto` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.inset-inline-end-auto` | `load-position()` | `foundation/views/render/classes/_position.scss` |
-| `.section-{n}` | `load-sections()` | `foundation/views/render/classes/_sections.scss` |
-| `.section-full` | `load-sections()` | `foundation/views/render/classes/_sections.scss` |
-| `.shadow-none` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-xs` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-sm` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-md` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-lg` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-xl` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-2xl` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-primary` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-secondary` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-success` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-warning` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-danger` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-info` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-inner` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-inner-lg` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-glow` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-glow-lg` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-outline` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-card` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-card-hover` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-dropdown` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-modal` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-transition` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-transition-fast` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.shadow-transition-slow` | `load-shadows()` | `foundation/views/render/classes/_shadows.scss` |
-| `.box-{n}` | `load-sizes()` | `foundation/views/render/classes/_sizes.scss` |
-| `.icon-{n}` | `load-sizes()` | `foundation/views/render/classes/_sizes.scss` |
-| `.w-auto` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.w-full` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.w-screen` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.w-fit` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.w-min` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.w-max` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.w-1\` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.w-2\` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.w-3\` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.min-w-0` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.min-w-full` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.max-w-none` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.max-w-full` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.h-auto` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.h-full` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.h-screen` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.h-fit` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.h-min` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.h-max` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.min-h-0` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.min-h-full` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.min-h-screen` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.max-h-none` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.max-h-full` | `load-sizing-utils()` | `foundation/views/render/classes/_sizing-utils.scss` |
-| `.gap-{n}` | `load-spacing()` | `foundation/views/render/classes/_spacing.scss` |
-| `.text-{n}` | `load-typography()` | `foundation/views/render/classes/_typography.scss` |
-| `.w-unset` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.h-unset` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.no-overflow-x` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.highlight` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.article` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.hidden-desktops` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.hidden-tablets` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.hidden-tablets-desktops` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.hidden-mobiles` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.hidden-devices` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.hidden-upto-ml` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.hidden-from-ml` | `load-utilities()` | `foundation/views/render/classes/_utilities.scss` |
-| `.layer-{n}` | `load-z-index()` | `foundation/views/render/classes/_z-index.scss` |