@fest-lib/veela 0.1.1

package/src/scss/advanced/font/_typography.scss

@@ -0,0 +1,600 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+@use "../basic/position" as position;
+
+//
+@use "utils" as _;
+
+//
+$def-ff: "InterVariable", "Inter", "Open Sans", "Source Sans 3", "Gill Sans Nova", Ubuntu, "DejaVu Sans", Candara, Segoe, "Segoe UI", Optima, "Source Sans Pro", sans-serif;
+
+// Type scale
+$md3-type-scale: (
+    "display-large": (
+        size: clamp(3.5rem, 4cqi + 3rem, 5rem),
+        line-height: 1.12,
+        weight: 400,
+        tracking: -0.025em,
+    ),
+    "display-medium": (
+        size: clamp(2.8rem, 3cqi + 2.4rem, 4rem),
+        line-height: 1.16,
+        weight: 400,
+        tracking: -0.02em,
+    ),
+    "display-small": (
+        size: clamp(2.25rem, 2cqi + 2rem, 3rem),
+        line-height: 1.22,
+        weight: 400,
+        tracking: -0.01em,
+    ),
+    "headline-large": (
+        size: clamp(2rem, 1.5cqi + 1.8rem, 2.5rem),
+        line-height: 1.2,
+        weight: 400,
+        tracking: 0,
+    ),
+    "headline-medium": (
+        size: clamp(1.75rem, 1.2cqi + 1.6rem, 2.25rem),
+        line-height: 1.24,
+        weight: 400,
+        tracking: 0,
+    ),
+    "headline-small": (
+        size: clamp(1.5rem, 1cqi + 1.4rem, 1.75rem),
+        line-height: 1.28,
+        weight: 400,
+        tracking: 0,
+    ),
+    "title-large": (
+        size: clamp(1.375rem, 0.8cqi + 1.25rem, 1.6rem),
+        line-height: 1.3,
+        weight: 400,
+        tracking: 0,
+    ),
+    "title-medium": (
+        size: clamp(1rem, 0.6cqi + 0.95rem, 1.25rem),
+        line-height: 1.35,
+        weight: 500,
+        tracking: 0.015em,
+    ),
+    "title-small": (
+        size: clamp(0.875rem, 0.5cqi + 0.85rem, 1rem),
+        line-height: 1.43,
+        weight: 500,
+        tracking: 0.01em,
+    ),
+    "label-large": (
+        size: clamp(0.875rem, 0.4cqi + 0.85rem, 0.95rem),
+        line-height: 1.43,
+        weight: 500,
+        tracking: 0.01em,
+    ),
+    "label-medium": (
+        size: clamp(0.75rem, 0.4cqi + 0.7rem, 0.85rem),
+        line-height: 1.33,
+        weight: 500,
+        tracking: 0.04em,
+    ),
+    "label-small": (
+        size: clamp(0.6875rem, 0.4cqi + 0.65rem, 0.75rem),
+        line-height: 1.45,
+        weight: 500,
+        tracking: 0.05em,
+    ),
+    "body-large": (
+        size: clamp(1rem, 0.5cqi + 0.95rem, 1.125rem),
+        line-height: 1.5,
+        weight: 400,
+        tracking: 0.015em,
+    ),
+    "body-medium": (
+        size: clamp(0.875rem, 0.4cqi + 0.85rem, 1rem),
+        line-height: 1.45,
+        weight: 400,
+        tracking: 0.01em,
+    ),
+    "body-small": (
+        size: clamp(0.75rem, 0.35cqi + 0.72rem, 0.875rem),
+        line-height: 1.4,
+        weight: 400,
+        tracking: 0.01em,
+    ),
+);
+
+//
+// Type function
+@function md3-type($token, $prop: null) {
+    $definition: _.md3-fetch($md3-type-scale, $token, "type token");
+
+    @if $prop == null {
+        @return $definition;
+    }
+
+    @if not map.has-key($definition, $prop) {
+        @error "Unknown typography property `#{$prop}` for token `#{$token}`. Available: #{map.keys($definition)}";
+    }
+
+    @return map.get($definition, $prop);
+}
+
+//
+// Typography alias maps
+$md3-font-size-aliases: (
+    "xs": (
+        token: "label-small",
+        value: clamp(calc(0.7rem * var(--font-scale)), 0.3cqi + 0.6rem, calc(0.75rem * var(--font-scale)))
+    ),
+    "sm": (
+        token: "body-small",
+        value: clamp(calc(0.75rem * var(--font-scale)), 0.4cqi + 0.65rem, calc(0.85rem * var(--font-scale)))
+    ),
+    "body-sm": (
+        token: "body-small",
+        value: md3-type("body-small", size)
+    ),
+    "base": (
+        token: "body-medium",
+        value: clamp(calc(0.8rem * var(--font-scale)), 0.5cqi + 0.7rem, calc(0.95rem * var(--font-scale)))
+    ),
+    "body-md": (
+        token: "body-medium",
+        value: md3-type("body-medium", size)
+    ),
+    "md": (
+        token: "body-large",
+        value: clamp(0.92rem, 0.6cqi + 0.82rem, 1.05rem)
+    ),
+    "body-lg": (
+        token: "body-large",
+        value: md3-type("body-large", size)
+    ),
+    "lg": (
+        token: "title-medium",
+        value: clamp(calc(0.9rem * var(--font-scale)), 0.6cqi + 0.8rem, calc(1.1rem * var(--font-scale)))
+    ),
+    "xl": (
+        token: "title-large",
+        value: clamp(calc(1rem * var(--font-scale)), 0.8cqi + 0.9rem, calc(1.3rem * var(--font-scale)))
+    ),
+    "2xl": (
+        token: "headline-small",
+        value: clamp(1.35rem, 1.3cqi + 1.1rem, 1.75rem)
+    ),
+    "3xl": (
+        token: "headline-medium",
+        value: md3-type("headline-medium", size)
+    ),
+    "4xl": (
+        token: "display-small",
+        value: md3-type("display-small", size)
+    ),
+    "5xl": (
+        token: "display-medium",
+        value: md3-type("display-medium", size)
+    ),
+    "6xl": (
+        token: "display-large",
+        value: md3-type("display-large", size)
+    ),
+);
+
+$md3-font-weight-aliases: (
+    "normal": (token: "body-large"),
+    "medium": (token: "title-medium"),
+    "semibold": 600,
+    "bold": 700,
+    "extrabold": 800,
+);
+
+$md3-font-family-stacks: (
+    "base": ("InterVariable", "Inter", "Open Sans", "Source Sans 3", "Gill Sans Nova", Ubuntu, "DejaVu Sans", Candara, Segoe, "Segoe UI", Optima, "Source Sans Pro", sans-serif),
+    "mono": ("Fragment Mono", "Fira Code", "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace),
+);
+
+$md3-line-height-scale: (
+    "tight": 1.2,
+    "normal": 1.5,
+    "relaxed": 1.8,
+);
+
+//
+// Internal helpers
+@function md3-map-merge($base, $override) {
+    @if $override == null {
+        @return $base;
+    }
+
+    @if meta.type-of($override) != "map" {
+        @error "Expected map override, received #{meta.type-of($override)}.";
+    }
+
+    @return map.merge($base, $override);
+}
+
+@function md3-resolve-type-value($definition, $prop) {
+    @if $definition == null {
+        @return null;
+    }
+
+    @if meta.type-of($definition) == "string" and map.has-key($md3-type-scale, $definition) {
+        @return md3-type($definition, $prop);
+    }
+
+    @if meta.type-of($definition) == "map" {
+        @if map.has-key($definition, $prop) {
+            @return map.get($definition, $prop);
+        }
+
+        @if map.has-key($definition, "token") {
+            @return md3-type(map.get($definition, "token"), $prop);
+        }
+
+        @if map.has-key($definition, "value") {
+            @return map.get($definition, "value");
+        }
+    }
+
+    @return $definition;
+}
+
+@function md3-font-size-token($alias, $aliases: $md3-font-size-aliases) {
+    @if map.has-key($aliases, $alias) {
+        $definition: map.get($aliases, $alias);
+
+        @if meta.type-of($definition) == "map" and map.has-key($definition, "token") {
+            @return map.get($definition, "token");
+        }
+
+        @if meta.type-of($definition) == "string" and map.has-key($md3-type-scale, $definition) {
+            @return $definition;
+        }
+    }
+
+    @if map.has-key($md3-type-scale, $alias) {
+        @return $alias;
+    }
+
+    @return null;
+}
+
+@function md3-font-size($alias, $aliases: $md3-font-size-aliases) {
+    @if map.has-key($aliases, $alias) {
+        @return md3-resolve-type-value(map.get($aliases, $alias), size);
+    }
+
+    @if map.has-key($md3-type-scale, $alias) {
+        @return md3-type($alias, size);
+    }
+
+    @error "Unknown font size alias `#{$alias}`. Available: #{map.keys($aliases)}";
+}
+
+@function md3-font-size-var($alias, $aliases: $md3-font-size-aliases) {
+    $token: md3-font-size-token($alias, $aliases);
+    $source: sass(if(sass(map.has-key($aliases, $alias)): map.get($aliases, $alias); else: $token));
+    $fallback: md3-resolve-type-value($source, size);
+
+    @if $token != null {
+        @return var(--font-size-#{$alias}, var(--text-#{$alias}, #{$fallback}));
+    }
+
+    @return var(--font-size-#{$alias}, var(--text-#{$alias}, #{$fallback}));
+}
+
+@function md3-font-weight-value($input) {
+    @if $input == null {
+        @return md3-font-weight-value(map.get($md3-font-weight-aliases, "normal"));
+    }
+
+    @if meta.type-of($input) == "number" {
+        @return $input;
+    }
+
+    @if meta.type-of($input) == "string" and map.has-key($md3-font-weight-aliases, $input) {
+        @return md3-font-weight-value(map.get($md3-font-weight-aliases, $input));
+    }
+
+    @if meta.type-of($input) == "string" and map.has-key($md3-type-scale, $input) {
+        @return md3-type($input, weight);
+    }
+
+    @if meta.type-of($input) == "map" {
+        @if map.has-key($input, "weight") {
+            @return map.get($input, "weight");
+        }
+
+        @if map.has-key($input, "token") {
+            @return md3-type(map.get($input, "token"), weight);
+        }
+
+        @if map.has-key($input, "value") {
+            @return map.get($input, "value");
+        }
+    }
+
+    @return $input;
+}
+
+@function md3-font-family-value($input) {
+    @if $input == null {
+        @return map.get($md3-font-family-stacks, "base");
+    }
+
+    @if $input == inherit or $input == "inherit" {
+        @return inherit;
+    }
+
+    @if meta.type-of($input) == "string" and map.has-key($md3-font-family-stacks, $input) {
+        @return map.get($md3-font-family-stacks, $input);
+    }
+
+    @if meta.type-of($input) == "map" and map.has-key($input, "value") {
+        @return map.get($input, "value");
+    }
+
+    @return $input;
+}
+
+
+
+
+//
+$font-family-base: md3-font-family-value("base");
+$font-family-mono: md3-font-family-value("mono");
+$font-size-xs: md3-font-size("xs");
+$font-size-sm: md3-font-size("body-md");
+$font-size-base: md3-font-size("body-lg");
+$font-size-lg: md3-font-size("lg");
+$font-size-xl: md3-font-size("xl");
+$font-size-2xl: md3-font-size("2xl");
+$font-size-3xl: md3-font-size("3xl");
+$font-size-4xl: md3-font-size("4xl");
+$font-size-5xl: md3-font-size("5xl");
+$font-size-6xl: md3-font-size("6xl");
+
+//
+$font-weight-normal: md3-font-weight-value("normal");
+$font-weight-medium: md3-font-weight-value("medium");
+$font-weight-semibold: md3-font-weight-value("semibold");
+$font-weight-bold: md3-font-weight-value("bold");
+$font-weight-extrabold: md3-font-weight-value("extrabold");
+
+
+
+//
+// Typography configuration helpers
+@function md3-typography-config($token, $overrides: ()) {
+    $configuration: md3-type($token);
+    $normalized-overrides: sass(if(sass(meta.type-of($overrides) == "map"): $overrides; else: ()));
+
+    @if $normalized-overrides != () {
+        $configuration: map.merge($configuration, $normalized-overrides);
+    }
+
+    @return $configuration;
+}
+
+@mixin md3-apply-typography($configuration, $ensure-family: false, $family-fallback: "base") {
+    $size: map.get($configuration, size);
+    $line-height: map.get($configuration, line-height);
+    $weight: map.get($configuration, weight);
+    $tracking: map.get($configuration, tracking);
+    $family: map.get($configuration, family);
+
+    @if $size != null { font-size: $size; }
+    @if $line-height != null { line-height: $line-height; }
+    @if $weight != null { font-weight: $weight; }
+    @if $tracking != null { letter-spacing: $tracking; }
+
+    @if $weight != null {
+        font-optical-sizing: auto;
+        font-variation-settings: "wght" $weight;
+    }
+
+    $should-apply-family: $family != null or $ensure-family;
+
+    @if $should-apply-family {
+        $resolved-family: sass(if(sass($family != null): md3-font-family-value($family); else: md3-font-family-value($family-fallback)));
+
+        @include font-family($resolved-family);
+    }
+}
+
+//
+// Typography mixin
+@mixin md3-typography($token, $overrides: ()) {
+    $configuration: md3-typography-config($token, $overrides);
+    @include md3-apply-typography($configuration);
+}
+
+//
+// Export typography vars mixin
+@mixin md3-export-typography-vars($overrides: ()) {
+    $size-overrides: map.get($overrides, "sizes");
+    $weight-overrides: map.get($overrides, "weights");
+    $family-overrides: map.get($overrides, "families");
+    $leading-overrides: map.get($overrides, "line-heights");
+    $extra-overrides: map.get($overrides, "extra");
+
+    $sizes: md3-map-merge($md3-font-size-aliases, $size-overrides);
+    $weights: md3-map-merge($md3-font-weight-aliases, $weight-overrides);
+    $families: md3-map-merge($md3-font-family-stacks, $family-overrides);
+    $leadings: md3-map-merge($md3-line-height-scale, $leading-overrides);
+
+    @each $alias, $definition in $sizes {
+        $value: md3-resolve-type-value($definition, size);
+        --font-size-#{$alias}: #{$value};
+    }
+
+    --font-size: var(--font-size-base);
+
+    @each $alias in map.keys($sizes) {
+        --font-#{$alias}: var(--font-size-#{$alias});
+    }
+
+    @each $alias, $definition in $weights {
+        $value: md3-font-weight-value($definition);
+        --font-weight-#{$alias}: #{$value};
+    }
+
+    --font-weight: var(--font-weight-normal);
+
+    @each $alias, $stack in $families {
+        --font-family-#{$alias}: #{md3-font-family-value($stack)};
+    }
+
+    --font-family-base: #{md3-font-family-value("base")};
+    --font-family-mono: #{md3-font-family-value("mono")};
+    --font-family: var(--font-family-base);
+
+    @each $alias, $value in $leadings {
+        --leading-#{$alias}: #{$value};
+    }
+
+    @if meta.type-of($extra-overrides) == "map" {
+        @each $name, $value in $extra-overrides {
+            --#{$name}: #{$value};
+        }
+    }
+}
+
+
+
+//
+@mixin typography($size, $family: "inherit", $weight: 400) {
+    & {
+        font-size: $size;
+        font-weight: $weight;
+        @include font-family($family);
+    }
+}
+
+//
+@mixin font-style($selector: "&", $options: ()) {
+    $size-key: sass(if(sass(map.has-key($options, "size")): map.get($options, "size"); else: "base"));
+    $token-option: map.get($options, "token");
+    $family-option: sass(if(sass(map.has-key($options, "family")): map.get($options, "family"); else: "inherit"));
+    $line-height-option: map.get($options, "line-height");
+    $tracking-option: map.get($options, "tracking");
+    $weight-has-key: map.has-key($options, "weight");
+    $weight-option: sass(if(sass($weight-has-key): map.get($options, "weight"); else: null));
+
+    $token: sass(if(sass($token-option != null): $token-option; else: md3-font-size-token($size-key)));
+    @if $token == null {
+        $token: "body-medium";
+    }
+
+    $overrides: ();
+
+    @if $weight-has-key {
+        @if $weight-option != null and $weight-option != false {
+            $resolved-weight: md3-font-weight-value($weight-option);
+            $overrides: map.merge($overrides, (weight: $resolved-weight));
+        }
+    } @else {
+        $overrides: map.merge($overrides, (weight: md3-font-weight-value(400)));
+    }
+
+    @if $line-height-option != null {
+        $overrides: map.merge($overrides, (line-height: $line-height-option));
+    }
+
+    @if $tracking-option != null {
+        $overrides: map.merge($overrides, (tracking: $tracking-option));
+    }
+
+    #{$selector} {
+        @include type(
+            $token,
+            $overrides,
+            $family-option
+        );
+
+        //
+        font-size: md3-font-size-var($size-key);
+    }
+}
+
+//
+@mixin font-family($stack: $def-ff) {
+    $resolved-stack: md3-font-family-value($stack);
+
+    font-family: $resolved-stack;
+    font-synthesis: none;
+    font-kerning: normal;
+    font-optical-sizing: auto;
+}
+
+//
+@mixin type($token: "body-medium", $overrides: (), $family: null) {
+    $normalized-overrides: sass(if(sass(meta.type-of($overrides) == "map"): $overrides; else: ()));
+    $configuration: md3-typography-config($token, $normalized-overrides);
+    $apply-family: $family != false;
+
+    @if $family != null and $family != false {
+        $configuration: map.merge($configuration, (family: $family));
+    }
+
+    @include md3-apply-typography(
+        $configuration,
+        $apply-family,
+        sass(if(sass($family != null and $family != false): $family; else: "base"))
+    );
+}
+
+//
+@mixin text-wrap {
+    flex-wrap: wrap;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    word-wrap: break-word;
+    white-space: normal;
+    hyphens: auto;
+    text-wrap: pretty;
+
+    @supports (text-wrap: balance) {
+        text-wrap: balance;
+    }
+}
+
+//
+@mixin text-truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-inline-size: 100%;
+}
+
+//
+@mixin text-clamp($lines: 2) {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+
+    @supports (line-clamp: #{$lines}) {
+        display: block;
+        line-clamp: $lines;
+        max-lines: $lines;
+    }
+}
+
+//
+@mixin visually-hidden {
+    @include position.visually-hidden;
+}
+
+//
+@mixin no-wrap {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: keep-all;
+    word-wrap: normal;
+    flex-wrap: nowrap;
+}

package/src/scss/advanced/index.scss

@@ -0,0 +1,11 @@
+/**
+ * Veela CSS - Advanced Runtime (Minimal)
+ *
+ * Temporarily reduced to fix build issues.
+ * Full advanced features require fixing lib/advanced structure.
+ *
+ * Preconditions: callers should adopt `runtime/basic/index.scss` first (see loadVeelaVariant).
+ */
+
+// Effects and animations (depends on upstream tokens/normalize from basic runtime)
+@use "./effects/animations" as *;

package/src/scss/advanced/index.ts

@@ -0,0 +1,35 @@
+/**
+ * Veela CSS - Advanced Runtime Loader
+ *
+ * Provides full-featured styling with advanced components and effects.
+ * Inherits core foundation + adds comprehensive component library.
+ *
+ * @example
+ * ```ts
+ * import { loadAdvancedStyles } from "@fest-lib/veela/advanced";
+ * await loadAdvancedStyles();
+ * ```
+ */
+
+import { loadAsAdopted } from "@fest-lib/dom";
+
+import advancedStyles from "./index.scss?inline";
+
+/**
+ * Load advanced veela styles
+ */
+export async function loadAdvancedStyles(): Promise<void> {
+    try {
+        if (advancedStyles) {
+            await loadAsAdopted(advancedStyles);
+            console.log("[Veela/Advanced] Advanced styles loaded");
+        }
+    } catch (e) {
+        console.warn("[Veela/Advanced] Failed to load advanced styles:", e);
+    }
+}
+
+// Re-export core utilities
+export * from "../basic/index";
+
+export default loadAdvancedStyles;