@sandlada/mdc 0.1.1-20260822.a → 0.2.0-20261008.a

package/README.md

@@ -0,0 +1,43 @@
+# @sandlada/mdc
+
+![MDC Logo](https://raw.githubusercontent.com/sandlada/mdc/refs/heads/main/docs/mdc-cover.png)
+
+![NPM Downloads](https://img.shields.io/npm/d18m/@sandlada/mdc?label=NPM%20Downloads)
+![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/sandlada/mdc/total?label=Github%20Downloads)
+![NPM Version](https://img.shields.io/npm/v/%40sandlada%2Fmdc?label=NPM%20Version)
+![GitHub License](https://img.shields.io/github/license/sandlada/mdc?label=License)
+
+`@sandlada/mdc` is an open source component library that follows the Material Design 3 design specifications.
+
+Written by Lit Framework, relying on the cross-framework capabilities of Lit and Web Component, you can use this library on any framework (Vue, Angular, React, etc.).
+
+## :zap: Highlights
+
+- **Material Design 3 & Material Expressive** - tracks the MD3 / MD3E specs and is themed entirely through `--md-sys-*` design tokens.
+- **Framework agnostic** - built with Lit and native Web Components, so the same `<mdc-*>` elements work in React, Vue, Angular, Svelte, Astro, or plain HTML.
+- **Tree-shakable** - every component is its own entry point under `@sandlada/mdc/components/<name>/index`, so you import only the elements you use.
+- **Accessible by default** - keyboard navigation, ARIA semantics and focus rings, with `forced-colors`, `prefers-contrast`, `reduced-motion` and `reduced-transparency` support (WCAG 2.2+).
+- **Modern baseline, zero polyfills** - targets Baseline 2026 evergreen browsers with native CSS and no vendor prefixes or legacy fallbacks.
+- **TypeScript ready** - ships `.d.ts` declarations alongside the ESM build.
+
+## :eyes: Installation
+
+```bash
+npm i @sandlada/mdc
+```
+
+## :ledger: Offcial Website & Documents
+
+For more information about MDC, please visit [mdc.sandlada.com](https://mdc.sandlada.com).
+
+## :telescope: Dev Preview
+
+The component showcase (`packages/dev-app`) is deployed to [mdc-dev-app.bre97-web.workers.dev](https://mdc-dev-app.bre97-web.workers.dev) via Cloudflare Workers Builds. Every push gets a preview deployment, so the site always tracks the latest state of the repository.
+
+## :ship: Example
+
+Don't know how to use MDC? Explore MDC with simple examples from [Github Wiki - Examples](https://github.com/sandlada/mdc/wiki/Examples).
+
+## :world_map: Roadmap
+
+If you want to follow the latest progress of MDC, please jump to issue [Project Tracker](https://github.com/sandlada/mdc/issues/6).

package/build/_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js

@@ -0,0 +1,10 @@
+//#region \0@oxc-project+runtime@0.152.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+export { __decorate as default };

package/build/components/appbar/appbar.definition.d.ts

@@ -0,0 +1,572 @@
+/**
+ * @license
+ * Copyright 2026 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ *
+ * @implements
+ * - small-app-bar
+ * - center-aligned-app-bar
+ * - medium-flexible-app-bar
+ * - large-flexible-app-bar
+ * - search-app-bar
+ *
+ * @link
+ * https://m3.material.io/components/app-bars/specs
+ */
+import { ElevationLevel, Shape } from '@sandlada/mdk';
+export declare const AppBarDefinition: import("../../utils/style").ResolvedStyleDefinition<{
+    readonly 'enabled-container-color': {
+        readonly Key: "--md-sys-color-surface";
+        readonly Value: "light-dark(#f4fbf1, #0e150f)";
+        toJSON(): {
+            Key: "--md-sys-color-surface";
+            Value: "light-dark(#f4fbf1, #0e150f)";
+        };
+        toString(): "light-dark(#f4fbf1, #0e150f)";
+        ToCSSDeclaration(): "--md-sys-color-surface: light-dark(#f4fbf1, #0e150f)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-surface: light-dark(#f4fbf1, #0e150f);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-surface: light-dark(#f4fbf1, #0e150f)" | "--md-sys-color-surface: light-dark(#f4fbf1, #0e150f);";
+        ToCSSVariable(): "var(--md-sys-color-surface, light-dark(#f4fbf1, #0e150f))";
+    };
+    readonly 'enabled-container-color-scrolled': {
+        readonly Key: "--md-sys-color-surface-container";
+        readonly Value: "light-dark(#e9f0e6, #1b211b)";
+        toJSON(): {
+            Key: "--md-sys-color-surface-container";
+            Value: "light-dark(#e9f0e6, #1b211b)";
+        };
+        toString(): "light-dark(#e9f0e6, #1b211b)";
+        ToCSSDeclaration(): "--md-sys-color-surface-container: light-dark(#e9f0e6, #1b211b)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-surface-container: light-dark(#e9f0e6, #1b211b);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-surface-container: light-dark(#e9f0e6, #1b211b)" | "--md-sys-color-surface-container: light-dark(#e9f0e6, #1b211b);";
+        ToCSSVariable(): "var(--md-sys-color-surface-container, light-dark(#e9f0e6, #1b211b))";
+    };
+    readonly 'enabled-container-elevation': ElevationLevel<"--md-sys-elevation-level-0", 0, "px">;
+    readonly 'enabled-container-elevation-scrolled': ElevationLevel<"--md-sys-elevation-level-2", 3, "px">;
+    readonly 'enabled-container-shadow-color': {
+        readonly Key: "--md-sys-color-shadow";
+        readonly Value: "light-dark(#000000, #000000)";
+        toJSON(): {
+            Key: "--md-sys-color-shadow";
+            Value: "light-dark(#000000, #000000)";
+        };
+        toString(): "light-dark(#000000, #000000)";
+        ToCSSDeclaration(): "--md-sys-color-shadow: light-dark(#000000, #000000)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-shadow: light-dark(#000000, #000000);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-shadow: light-dark(#000000, #000000)" | "--md-sys-color-shadow: light-dark(#000000, #000000);";
+        ToCSSVariable(): "var(--md-sys-color-shadow, light-dark(#000000, #000000))";
+    };
+    readonly 'enabled-container-shape-start-start': Shape<"--md-sys-shape-corner-none", 0, "px">;
+    readonly 'enabled-container-shape-start-end': Shape<"--md-sys-shape-corner-none", 0, "px">;
+    readonly 'enabled-container-shape-end-start': Shape<"--md-sys-shape-corner-none", 0, "px">;
+    readonly 'enabled-container-shape-end-end': Shape<"--md-sys-shape-corner-none", 0, "px">;
+    readonly 'enabled-container-padding-inline-start': "4px";
+    readonly 'enabled-container-padding-inline-end': "4px";
+    readonly 'enabled-container-padding-block-start': "0px";
+    readonly 'enabled-container-padding-block-end': "0px";
+    readonly 'enabled-small-container-height': "64px";
+    readonly 'enabled-medium-container-min-height': "112px";
+    readonly 'enabled-large-container-min-height': "120px";
+    readonly 'enabled-search-container-height': "64px";
+    readonly 'enabled-icon-button-size': "48px";
+    readonly 'enabled-icon-size': "24px";
+    readonly 'enabled-title-gap-space': "4px";
+    readonly 'enabled-title-without-leading-inline-leading-space': "16px";
+    readonly 'enabled-actions-gap-space': "0px";
+    readonly 'enabled-flexible-content-padding-inline-start': "16px";
+    readonly 'enabled-flexible-content-padding-inline-end': "16px";
+    readonly 'enabled-flexible-content-padding-block-start': "0px";
+    readonly 'enabled-flexible-content-padding-block-end': "12px";
+    readonly 'enabled-flexible-top-row-height': "56px";
+    readonly 'enabled-headline-color': {
+        readonly Key: "--md-sys-color-on-surface";
+        readonly Value: "light-dark(#171d17, #dde4db)";
+        toJSON(): {
+            Key: "--md-sys-color-on-surface";
+            Value: "light-dark(#171d17, #dde4db)";
+        };
+        toString(): "light-dark(#171d17, #dde4db)";
+        ToCSSDeclaration(): "--md-sys-color-on-surface: light-dark(#171d17, #dde4db)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-on-surface: light-dark(#171d17, #dde4db);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-on-surface: light-dark(#171d17, #dde4db)" | "--md-sys-color-on-surface: light-dark(#171d17, #dde4db);";
+        ToCSSVariable(): "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
+    };
+    readonly 'enabled-subtitle-color': {
+        readonly Key: "--md-sys-color-on-surface-variant";
+        readonly Value: "light-dark(#3d4a3f, #bccabc)";
+        toJSON(): {
+            Key: "--md-sys-color-on-surface-variant";
+            Value: "light-dark(#3d4a3f, #bccabc)";
+        };
+        toString(): "light-dark(#3d4a3f, #bccabc)";
+        ToCSSDeclaration(): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc)" | "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc);";
+        ToCSSVariable(): "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
+    };
+    readonly 'enabled-leading-icon-color': {
+        readonly Key: "--md-sys-color-on-surface";
+        readonly Value: "light-dark(#171d17, #dde4db)";
+        toJSON(): {
+            Key: "--md-sys-color-on-surface";
+            Value: "light-dark(#171d17, #dde4db)";
+        };
+        toString(): "light-dark(#171d17, #dde4db)";
+        ToCSSDeclaration(): "--md-sys-color-on-surface: light-dark(#171d17, #dde4db)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-on-surface: light-dark(#171d17, #dde4db);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-on-surface: light-dark(#171d17, #dde4db)" | "--md-sys-color-on-surface: light-dark(#171d17, #dde4db);";
+        ToCSSVariable(): "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
+    };
+    readonly 'enabled-trailing-icon-color': {
+        readonly Key: "--md-sys-color-on-surface-variant";
+        readonly Value: "light-dark(#3d4a3f, #bccabc)";
+        toJSON(): {
+            Key: "--md-sys-color-on-surface-variant";
+            Value: "light-dark(#3d4a3f, #bccabc)";
+        };
+        toString(): "light-dark(#3d4a3f, #bccabc)";
+        ToCSSDeclaration(): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc)" | "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc);";
+        ToCSSVariable(): "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
+    };
+    readonly 'enabled-search-box-container-color': {
+        readonly Key: "--md-sys-color-surface-container";
+        readonly Value: "light-dark(#e9f0e6, #1b211b)";
+        toJSON(): {
+            Key: "--md-sys-color-surface-container";
+            Value: "light-dark(#e9f0e6, #1b211b)";
+        };
+        toString(): "light-dark(#e9f0e6, #1b211b)";
+        ToCSSDeclaration(): "--md-sys-color-surface-container: light-dark(#e9f0e6, #1b211b)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-surface-container: light-dark(#e9f0e6, #1b211b);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-surface-container: light-dark(#e9f0e6, #1b211b)" | "--md-sys-color-surface-container: light-dark(#e9f0e6, #1b211b);";
+        ToCSSVariable(): "var(--md-sys-color-surface-container, light-dark(#e9f0e6, #1b211b))";
+    };
+    readonly 'enabled-search-box-container-color-scrolled': {
+        readonly Key: "--md-sys-color-surface-container-highest";
+        readonly Value: "light-dark(#dde4db, #303630)";
+        toJSON(): {
+            Key: "--md-sys-color-surface-container-highest";
+            Value: "light-dark(#dde4db, #303630)";
+        };
+        toString(): "light-dark(#dde4db, #303630)";
+        ToCSSDeclaration(): "--md-sys-color-surface-container-highest: light-dark(#dde4db, #303630)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-surface-container-highest: light-dark(#dde4db, #303630);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-surface-container-highest: light-dark(#dde4db, #303630)" | "--md-sys-color-surface-container-highest: light-dark(#dde4db, #303630);";
+        ToCSSVariable(): "var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630))";
+    };
+    readonly 'enabled-search-box-text-color': {
+        readonly Key: "--md-sys-color-on-surface";
+        readonly Value: "light-dark(#171d17, #dde4db)";
+        toJSON(): {
+            Key: "--md-sys-color-on-surface";
+            Value: "light-dark(#171d17, #dde4db)";
+        };
+        toString(): "light-dark(#171d17, #dde4db)";
+        ToCSSDeclaration(): "--md-sys-color-on-surface: light-dark(#171d17, #dde4db)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-on-surface: light-dark(#171d17, #dde4db);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-on-surface: light-dark(#171d17, #dde4db)" | "--md-sys-color-on-surface: light-dark(#171d17, #dde4db);";
+        ToCSSVariable(): "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
+    };
+    readonly 'enabled-search-box-placeholder-color': {
+        readonly Key: "--md-sys-color-on-surface-variant";
+        readonly Value: "light-dark(#3d4a3f, #bccabc)";
+        toJSON(): {
+            Key: "--md-sys-color-on-surface-variant";
+            Value: "light-dark(#3d4a3f, #bccabc)";
+        };
+        toString(): "light-dark(#3d4a3f, #bccabc)";
+        ToCSSDeclaration(): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc)" | "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc);";
+        ToCSSVariable(): "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
+    };
+    readonly 'enabled-search-box-icon-color': {
+        readonly Key: "--md-sys-color-on-surface-variant";
+        readonly Value: "light-dark(#3d4a3f, #bccabc)";
+        toJSON(): {
+            Key: "--md-sys-color-on-surface-variant";
+            Value: "light-dark(#3d4a3f, #bccabc)";
+        };
+        toString(): "light-dark(#3d4a3f, #bccabc)";
+        ToCSSDeclaration(): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc)";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc);";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc)" | "--md-sys-color-on-surface-variant: light-dark(#3d4a3f, #bccabc);";
+        ToCSSVariable(): "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
+    };
+    readonly 'enabled-search-box-height': "48px";
+    readonly 'enabled-search-box-gap-space': "8px";
+    readonly 'enabled-search-box-padding-inline-start': "16px";
+    readonly 'enabled-search-box-padding-inline-end': "16px";
+    readonly 'enabled-search-box-padding-block-start': "0px";
+    readonly 'enabled-search-box-padding-block-end': "0px";
+    readonly 'enabled-search-box-shape-start-start': Shape<"--md-sys-shape-corner-full", "calc(infinity * 1px)", "">;
+    readonly 'enabled-search-box-shape-start-end': Shape<"--md-sys-shape-corner-full", "calc(infinity * 1px)", "">;
+    readonly 'enabled-search-box-shape-end-start': Shape<"--md-sys-shape-corner-full", "calc(infinity * 1px)", "">;
+    readonly 'enabled-search-box-shape-end-end': Shape<"--md-sys-shape-corner-full", "calc(infinity * 1px)", "">;
+    readonly 'enabled-small-headline-font': import("@sandlada/mdk").Typeface<"--md-ref-typeface-font-brand", "Roboto">;
+    readonly 'enabled-small-headline-line-height': {
+        readonly Key: "--md-sys-typescale-title-large-font-line-height";
+        readonly Value: 28;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-title-large-font-line-height";
+            Value: 28;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-title-large-font-line-height: 28px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-title-large-font-line-height: 28px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-title-large-font-line-height: 28px" | "--md-sys-typescale-title-large-font-line-height: 28px;";
+        ToCSSVariable(): "var(--md-sys-typescale-title-large-font-line-height, 28px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-title-large-font-line-height: 28px";
+    };
+    readonly 'enabled-small-headline-size': {
+        readonly Key: "--md-sys-typescale-title-large-font-size";
+        readonly Value: 22;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-title-large-font-size";
+            Value: 22;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-title-large-font-size: 22px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-title-large-font-size: 22px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-title-large-font-size: 22px" | "--md-sys-typescale-title-large-font-size: 22px;";
+        ToCSSVariable(): "var(--md-sys-typescale-title-large-font-size, 22px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-title-large-font-size: 22px";
+    };
+    readonly 'enabled-small-headline-tracking': {
+        readonly Key: "--md-sys-typescale-title-large-font-tracking";
+        readonly Value: 0;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-title-large-font-tracking";
+            Value: 0;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-title-large-font-tracking: 0px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-title-large-font-tracking: 0px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-title-large-font-tracking: 0px" | "--md-sys-typescale-title-large-font-tracking: 0px;";
+        ToCSSVariable(): "var(--md-sys-typescale-title-large-font-tracking, 0px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-title-large-font-tracking: 0px";
+    };
+    readonly 'enabled-small-headline-weight': import("@sandlada/mdk").Typeface<"--md-ref-typeface-weight-regular", 400>;
+    readonly 'enabled-small-headline-opacity': "1";
+    readonly 'enabled-medium-headline-font': import("@sandlada/mdk").Typeface<"--md-ref-typeface-font-brand", "Roboto">;
+    readonly 'enabled-medium-headline-line-height': {
+        readonly Key: "--md-sys-typescale-headline-medium-font-line-height";
+        readonly Value: 36;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-headline-medium-font-line-height";
+            Value: 36;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-headline-medium-font-line-height: 36px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-headline-medium-font-line-height: 36px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-headline-medium-font-line-height: 36px" | "--md-sys-typescale-headline-medium-font-line-height: 36px;";
+        ToCSSVariable(): "var(--md-sys-typescale-headline-medium-font-line-height, 36px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-headline-medium-font-line-height: 36px";
+    };
+    readonly 'enabled-medium-headline-size': {
+        readonly Key: "--md-sys-typescale-headline-medium-font-size";
+        readonly Value: 28;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-headline-medium-font-size";
+            Value: 28;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-headline-medium-font-size: 28px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-headline-medium-font-size: 28px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-headline-medium-font-size: 28px" | "--md-sys-typescale-headline-medium-font-size: 28px;";
+        ToCSSVariable(): "var(--md-sys-typescale-headline-medium-font-size, 28px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-headline-medium-font-size: 28px";
+    };
+    readonly 'enabled-medium-headline-tracking': {
+        readonly Key: "--md-sys-typescale-headline-medium-font-tracking";
+        readonly Value: 0;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-headline-medium-font-tracking";
+            Value: 0;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-headline-medium-font-tracking: 0px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-headline-medium-font-tracking: 0px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-headline-medium-font-tracking: 0px" | "--md-sys-typescale-headline-medium-font-tracking: 0px;";
+        ToCSSVariable(): "var(--md-sys-typescale-headline-medium-font-tracking, 0px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-headline-medium-font-tracking: 0px";
+    };
+    readonly 'enabled-medium-headline-weight': import("@sandlada/mdk").Typeface<"--md-ref-typeface-weight-regular", 400>;
+    readonly 'enabled-medium-headline-opacity': "1";
+    readonly 'enabled-large-headline-font': import("@sandlada/mdk").Typeface<"--md-ref-typeface-font-brand", "Roboto">;
+    readonly 'enabled-large-headline-line-height': {
+        readonly Key: "--md-sys-typescale-display-small-font-line-height";
+        readonly Value: 44;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-display-small-font-line-height";
+            Value: 44;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-display-small-font-line-height: 44px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-display-small-font-line-height: 44px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-display-small-font-line-height: 44px" | "--md-sys-typescale-display-small-font-line-height: 44px;";
+        ToCSSVariable(): "var(--md-sys-typescale-display-small-font-line-height, 44px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-display-small-font-line-height: 44px";
+    };
+    readonly 'enabled-large-headline-size': {
+        readonly Key: "--md-sys-typescale-display-small-font-size";
+        readonly Value: 36;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-display-small-font-size";
+            Value: 36;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-display-small-font-size: 36px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-display-small-font-size: 36px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-display-small-font-size: 36px" | "--md-sys-typescale-display-small-font-size: 36px;";
+        ToCSSVariable(): "var(--md-sys-typescale-display-small-font-size, 36px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-display-small-font-size: 36px";
+    };
+    readonly 'enabled-large-headline-tracking': {
+        readonly Key: "--md-sys-typescale-display-small-font-tracking";
+        readonly Value: 0;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-display-small-font-tracking";
+            Value: 0;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-display-small-font-tracking: 0px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-display-small-font-tracking: 0px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-display-small-font-tracking: 0px" | "--md-sys-typescale-display-small-font-tracking: 0px;";
+        ToCSSVariable(): "var(--md-sys-typescale-display-small-font-tracking, 0px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-display-small-font-tracking: 0px";
+    };
+    readonly 'enabled-large-headline-weight': import("@sandlada/mdk").Typeface<"--md-ref-typeface-weight-regular", 400>;
+    readonly 'enabled-large-headline-opacity': "1";
+    readonly 'enabled-subtitle-font': import("@sandlada/mdk").Typeface<"--md-ref-typeface-font-plain", "Roboto">;
+    readonly 'enabled-subtitle-line-height': {
+        readonly Key: "--md-sys-typescale-body-medium-font-line-height";
+        readonly Value: 20;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-body-medium-font-line-height";
+            Value: 20;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-body-medium-font-line-height: 20px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-body-medium-font-line-height: 20px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-body-medium-font-line-height: 20px" | "--md-sys-typescale-body-medium-font-line-height: 20px;";
+        ToCSSVariable(): "var(--md-sys-typescale-body-medium-font-line-height, 20px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-body-medium-font-line-height: 20px";
+    };
+    readonly 'enabled-subtitle-size': {
+        readonly Key: "--md-sys-typescale-body-medium-font-size";
+        readonly Value: 14;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-body-medium-font-size";
+            Value: 14;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-body-medium-font-size: 14px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-body-medium-font-size: 14px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-body-medium-font-size: 14px" | "--md-sys-typescale-body-medium-font-size: 14px;";
+        ToCSSVariable(): "var(--md-sys-typescale-body-medium-font-size, 14px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-body-medium-font-size: 14px";
+    };
+    readonly 'enabled-subtitle-tracking': {
+        readonly Key: "--md-sys-typescale-body-medium-font-tracking";
+        readonly Value: 0;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-body-medium-font-tracking";
+            Value: 0;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-body-medium-font-tracking: 0px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-body-medium-font-tracking: 0px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-body-medium-font-tracking: 0px" | "--md-sys-typescale-body-medium-font-tracking: 0px;";
+        ToCSSVariable(): "var(--md-sys-typescale-body-medium-font-tracking, 0px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-body-medium-font-tracking: 0px";
+    };
+    readonly 'enabled-subtitle-weight': import("@sandlada/mdk").Typeface<"--md-ref-typeface-weight-regular", 400>;
+    readonly 'enabled-subtitle-opacity': "1";
+    readonly 'enabled-search-text-font': import("@sandlada/mdk").Typeface<"--md-ref-typeface-font-plain", "Roboto">;
+    readonly 'enabled-search-text-line-height': {
+        readonly Key: "--md-sys-typescale-body-large-font-line-height";
+        readonly Value: 24;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-body-large-font-line-height";
+            Value: 24;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-body-large-font-line-height: 24px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-body-large-font-line-height: 24px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-body-large-font-line-height: 24px" | "--md-sys-typescale-body-large-font-line-height: 24px;";
+        ToCSSVariable(): "var(--md-sys-typescale-body-large-font-line-height, 24px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-body-large-font-line-height: 24px";
+    };
+    readonly 'enabled-search-text-size': {
+        readonly Key: "--md-sys-typescale-body-large-font-size";
+        readonly Value: 16;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-body-large-font-size";
+            Value: 16;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-body-large-font-size: 16px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-body-large-font-size: 16px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-body-large-font-size: 16px" | "--md-sys-typescale-body-large-font-size: 16px;";
+        ToCSSVariable(): "var(--md-sys-typescale-body-large-font-size, 16px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-body-large-font-size: 16px";
+    };
+    readonly 'enabled-search-text-tracking': {
+        readonly Key: "--md-sys-typescale-body-large-font-tracking";
+        readonly Value: 0;
+        readonly Unit: "px";
+        toJSON(): {
+            Key: "--md-sys-typescale-body-large-font-tracking";
+            Value: 0;
+            Unit: "px";
+        };
+        ToCSSDeclaration(): "--md-sys-typescale-body-large-font-tracking: 0px";
+        ToCSSDeclaration(options: {
+            Semicolon: true;
+        }): "--md-sys-typescale-body-large-font-tracking: 0px;";
+        ToCSSDeclaration(options?: {
+            Semicolon?: boolean;
+        }): "--md-sys-typescale-body-large-font-tracking: 0px" | "--md-sys-typescale-body-large-font-tracking: 0px;";
+        ToCSSVariable(): "var(--md-sys-typescale-body-large-font-tracking, 0px)";
+        ToCSSValue(): string;
+        toString(): "--md-sys-typescale-body-large-font-tracking: 0px";
+    };
+    readonly 'enabled-search-text-weight': import("@sandlada/mdk").Typeface<"--md-ref-typeface-weight-regular", 400>;
+    readonly 'enabled-search-text-opacity': "1";
+}>;
+//# sourceMappingURL=appbar.definition.d.ts.map

package/build/components/appbar/appbar.definition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appbar.definition.d.ts","sourceRoot":"","sources":["../../../src/components/appbar/appbar.definition.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,cAAc,EAAE,KAAK,EAAa,MAAM,eAAe,CAAA;AAKhE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwG3B,CAAA"}