@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/types/lifecorner-angular-ui-kit-timeline.d.ts

@@ -0,0 +1,162 @@
+import { BadgeVariant } from "@lifecorner/angular-ui-kit/badge";
+import * as i0 from "@angular/core";
+import { TemplateRef } from "@angular/core";
+/** Template context for the per-item timeline templates. */
+export interface TimelineTemplateContext {
+  $implicit: TimelineItem;
+}
+/**
+ * Free content slot rendered below an entry's header line — arbitrary markup
+ * per item (code block, prose, collapsible text, diff), not just a
+ * description string. The template receives the item as `$implicit`.
+ *
+ * @example
+ * ```html
+ * <lc-timeline [items]="steps">
+ *   <ng-template lcTimelineContent let-item>
+ *     @if (item.state === 'failed') {
+ *       <lc-code-block [code]="item.command" language="bash" />
+ *     }
+ *   </ng-template>
+ * </lc-timeline>
+ * ```
+ */
+export declare class TimelineContentDirective {
+  readonly template: TemplateRef<any>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TimelineContentDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<TimelineContentDirective, "[lcTimelineContent]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Live meta slot rendered right-aligned in an entry's header line — for
+ * values the app keeps ticking itself ("läuft seit 42 s"). Takes precedence
+ * over the item's static `meta` string.
+ *
+ * @example
+ * ```html
+ * <lc-timeline [items]="steps">
+ *   <ng-template lcTimelineMeta let-item>
+ *     @if (item.state === 'running') { {{ elapsed() }} }
+ *     @else { {{ item.meta }} }
+ *   </ng-template>
+ * </lc-timeline>
+ * ```
+ */
+export declare class TimelineMetaDirective {
+  readonly template: TemplateRef<any>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TimelineMetaDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<TimelineMetaDirective, "[lcTimelineMeta]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Semantic state of a timeline entry (e.g. one step of a run transcript).
+ * Drives the marker color via the semantic tokens; `running` additionally
+ * pulses (respecting `prefers-reduced-motion`).
+ */
+export type TimelineItemState = 'success' | 'running' | 'failed' | 'pending';
+/** Heading level of the item titles (3.3, G-11). */
+export type TimelineHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface TimelineItem {
+  /** Optional stable identity for rendering (falls back to the list index). */
+  id?: string;
+  /** Title of the event */
+  title: string;
+  /** Optional monospace suffix after the title (e.g. a tool id like `gate_test`). */
+  titleMono?: string;
+  /** Optional badge label in the header line (e.g. "Fehlgeschlagen"). */
+  badge?: string;
+  /** Variant of the header badge. @default 'default' */
+  badgeVariant?: BadgeVariant;
+  /** Optional right-aligned header meta (duration / time). */
+  meta?: string;
+  /** Optional description */
+  description?: string;
+  /** Optional timestamp string */
+  timestamp?: string;
+  /**
+   * Machine-readable moment of the timestamp (ISO 8601, e.g.
+   * `2026-10-12T18:05:00+02:00`), set as the `<time datetime>` attribute so
+   * „heute 18:05“ carries its exact date (3.3, G-11).
+   */
+  datetime?: string;
+  /** Optional icon name (heroicon) */
+  icon?: string;
+  /** Optional color for the dot/icon */
+  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  /**
+   * Semantic entry state — colors the marker from the semantic tokens and
+   * takes precedence over `color`. `running` pulses the marker.
+   */
+  state?: TimelineItemState;
+}
+export type TimelineOrientation = 'vertical' | 'horizontal';
+/**
+ * Timeline component for chronological event display.
+ *
+ * Features:
+ * - Vertical timeline with connecting line
+ * - Semantic status colors per event (info, success, warning, error)
+ * - Entry states (`success | running | failed | pending`); `running` pulses
+ * - Composable header line: title + monospace suffix (`titleMono`) + badge
+ *   (`badge`/`badgeVariant`) + right-aligned meta (`meta` or the
+ *   `lcTimelineMeta` template for live values)
+ * - Free content per entry below the header via the `lcTimelineContent`
+ *   template (code blocks, prose, diffs, …)
+ * - Date and description display per item
+ * - Icon support for timeline markers
+ * - Dark mode support
+ *
+ * @example
+ * ```html
+ * <lc-timeline [items]="events"></lc-timeline>
+ * ```
+ */
+export declare class TimelineComponent {
+  /**
+   * List of timeline events.
+   */
+  items: import("@angular/core").InputSignal<TimelineItem[]>;
+  /**
+   * Layout orientation.
+   * @default 'vertical'
+   */
+  orientation: import("@angular/core").InputSignal<TimelineOrientation>;
+  /**
+   * Compact mode reduces spacing.
+   * @default false
+   */
+  compact: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Heading level of the item titles (`h2`–`h6`), so each event is reachable
+   * by heading navigation. Unset: a plain paragraph (3.2). Semantics only,
+   * the look stays the same.
+   */
+  headingLevel: import("@angular/core").InputSignal<TimelineHeadingLevel | undefined>;
+  /** Optional per-item content template (below the header line). */
+  protected contentTemplate: import("@angular/core").Signal<TimelineContentDirective | undefined>;
+  /** Optional per-item live meta template (right-aligned in the header). */
+  protected metaTemplate: import("@angular/core").Signal<TimelineMetaDirective | undefined>;
+  protected timelineClasses: import("@angular/core").Signal<string>;
+  protected markerClasses(item: TimelineItem): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TimelineComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TimelineComponent, "lc-timeline", never, {
+    "items": {
+      "alias": "items";
+      "required": true;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "compact": {
+      "alias": "compact";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["contentTemplate", "metaTemplate"], never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-toast.d.ts

@@ -0,0 +1,204 @@
+import * as i0 from "@angular/core";
+import { Signal } from "@angular/core";
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+export interface ToastConfig {
+  message: string;
+  variant?: ToastVariant;
+  position?: ToastPosition;
+  duration?: number;
+  showCloseButton?: boolean;
+  action?: ToastAction;
+}
+export interface Toast extends Required<Omit<ToastConfig, 'action'>> {
+  id: string;
+  action?: ToastAction;
+}
+/**
+ * Toast service for showing ephemeral notifications.
+ *
+ * The toasts are rendered by `<lc-toast-outlet />`, which the application
+ * places once (e.g. in its shell); without it nothing is shown.
+ *
+ * @example
+ * ```typescript
+ * private readonly toastService = inject(ToastService);
+ *
+ * showSuccess() {
+ *   this.toastService.show({
+ *     message: 'Changes saved successfully!',
+ *     variant: 'success',
+ *     duration: 3000
+ *   });
+ * }
+ * ```
+ */
+export declare class ToastService {
+  /**
+   * Public readonly signal for toasts
+   */
+  readonly toasts: Signal<readonly Toast[]>;
+  /**
+   * Internal signal for toast list
+   */
+  private readonly toastList;
+  private readonly MAX_TOASTS;
+  private toastIdCounter;
+  private activeTimeouts;
+  /** Auto-dismiss timers only make sense in the browser (and `window` does not exist on the server). */
+  private readonly isBrowser;
+  constructor();
+  /**
+   * Show a toast notification
+   */
+  show(config: ToastConfig): string;
+  /**
+   * Close a specific toast
+   */
+  close(id: string): void;
+  /**
+   * Close all toasts
+   */
+  closeAll(): void;
+  /**
+   * Generate unique toast ID
+   */
+  private generateId;
+  /**
+   * Remove a toast from the list
+   */
+  private removeToast;
+  /**
+   * Clear timeout for a toast
+   */
+  private clearTimeout;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * Toast component for displaying ephemeral notification messages.
+ *
+ * Features:
+ * - Semantic variants (success, warning, error, info)
+ * - Auto-dismiss with configurable duration
+ * - Manual dismiss with close button
+ * - Icon display per variant
+ * - Stacked toast positioning via ToastService + `<lc-toast-outlet />`
+ * - Animated enter/exit transitions
+ *
+ * Usually rendered by `<lc-toast-outlet />`; can also be placed directly:
+ *
+ * @example
+ * ```html
+ * <lc-toast [toast]="toast" (closed)="dismiss($event)" />
+ * ```
+ */
+export declare class ToastComponent {
+  /**
+   * Toast data
+   */
+  toast: import("@angular/core").InputSignal<Toast>;
+  /**
+   * Whether the toast is its own live region (`role="status"`/`"alert"` on the
+   * host). `lc-toast-outlet` sets this to false because its persistent live
+   * regions already announce the toast — announcing twice would be noise.
+   * @default true
+   */
+  announce: import("@angular/core").InputSignal<boolean>;
+  /** Accessible name of the close button (`toast.showCloseButton`). */
+  closeAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Emitted when toast is closed
+   */
+  readonly closed: import("@angular/core").OutputEmitterRef<string>;
+  /**
+   * Computed host classes
+   */
+  protected hostClasses: import("@angular/core").Signal<string>;
+  /**
+   * Computed container classes
+   */
+  protected containerClasses: import("@angular/core").Signal<string>;
+  /**
+   * Computed ARIA role
+   */
+  protected ariaRole: import("@angular/core").Signal<"alert" | "status" | null>;
+  /**
+   * Computed ARIA live region priority
+   */
+  protected ariaLive: import("@angular/core").Signal<"assertive" | "polite" | null>;
+  /**
+   * Computed default icon based on variant
+   */
+  protected defaultIcon: import("@angular/core").Signal<string>;
+  /**
+   * Handle close button click
+   */
+  protected onCloseClick(event: Event): void;
+  /**
+   * Handle action button click
+   */
+  protected onActionClick(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "lc-toast", never, {
+    "toast": {
+      "alias": "toast";
+      "required": true;
+      "isSignal": true;
+    };
+    "announce": {
+      "alias": "announce";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeAriaLabel": {
+      "alias": "closeAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "closed": "closed";
+  }, never, never, true, never>;
+}
+/** Politeness of the live region a toast is announced from. */
+type ToastLive = 'polite' | 'assertive';
+/**
+ * Renders the toasts of {@link ToastService}. Place it once in the application
+ * shell; without it `ToastService.show()` has no visible effect.
+ *
+ * ```html
+ * <lc-toast-outlet />
+ * ```
+ *
+ * Toasts are stacked per `position`. Every position owns two live regions that
+ * exist from the start — screen readers only announce content that is inserted
+ * into an *existing* live region — one `polite` for success/info toasts and one
+ * `assertive` for error/warning toasts. Dismissing a toast (close button,
+ * action, auto-dismiss) removes it from the service.
+ */
+export declare class ToastOutletComponent {
+  protected readonly positions: readonly ToastPosition[];
+  protected readonly liveLevels: readonly ToastLive[];
+  private readonly toastService;
+  /** Accessible name of every toast's close button (forwarded to lc-toast). */
+  readonly closeAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Toasts keyed by `${position}:${politeness}` in the order they were shown. */
+  private readonly groups;
+  protected toastsFor(position: ToastPosition, live: ToastLive): readonly Toast[];
+  protected onClosed(id: string): void;
+  /** Errors and warnings interrupt (assertive), everything else waits its turn. */
+  private static liveFor;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ToastOutletComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ToastOutletComponent, "lc-toast-outlet", never, {
+    "closeAriaLabel": {
+      "alias": "closeAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export {};

package/types/lifecorner-angular-ui-kit-toggle-group.d.ts

@@ -0,0 +1,100 @@
+import * as i0 from "@angular/core";
+export type ToggleOptionDot = 'warning' | 'error' | 'success';
+export interface ToggleOption {
+  readonly value: string;
+  readonly label: string;
+  readonly disabled?: boolean;
+  /**
+   * Small status dot rendered to the right of the label (e.g. an unread
+   * indicator). `true` uses the default tone (`warning`); pass a tone name
+   * to pick a semantic color. Does not change the option's height.
+   */
+  readonly dot?: boolean | ToggleOptionDot;
+}
+/**
+ * Toggle group component for single-option selection from a set.
+ *
+ * Features:
+ * - Multiple segmented toggle buttons
+ * - Active state highlighting
+ * - Size variants (sm, md, lg)
+ * - Two-way selected value binding
+ * - Per-option disabled state
+ * - Exposed as a radiogroup: Arrow/Home/End keys move the selection
+ * - Dark mode support via CSS custom properties
+ *
+ * @example
+ * ```html
+ * <lc-toggle-group
+ *   [options]="[{value:'1D',label:'1D'},{value:'1W',label:'1W'}]"
+ *   [(selected)]="interval"
+ * />
+ * ```
+ */
+export declare class ToggleGroupComponent {
+  /** Available toggle options */
+  options: import("@angular/core").InputSignal<readonly ToggleOption[]>;
+  /** Currently selected value (two-way binding) */
+  selected: import("@angular/core").ModelSignal<string>;
+  /** Size variant */
+  size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
+  /** Accessible name of the group */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** id(s) of external element(s) labelling the group (wins over `ariaLabel`) */
+  readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+  /** Emitted when selection changes */
+  selectionChange: import("@angular/core").OutputEmitterRef<string>;
+  /** Computed size class */
+  sizeClass: import("@angular/core").Signal<string>;
+  /**
+   * Roving tabindex: the selected option is the group's single tab stop; when
+   * nothing (or a disabled option) is selected, the first enabled option is.
+   */
+  readonly focusableValue: import("@angular/core").Signal<string | null>;
+  private readonly buttons;
+  /** Select an option */
+  select(option: ToggleOption): void;
+  /** Check if an option is active */
+  isActive(option: ToggleOption): boolean;
+  /** tabindex for an option button (roving tabindex) */
+  tabIndexFor(option: ToggleOption): number;
+  /** Arrow/Home/End keys move focus and selection like a native radio group */
+  onKeydown(event: KeyboardEvent, index: number): void;
+  /** Get button classes */
+  getButtonClasses(option: ToggleOption): string;
+  /** Resolve the dot tone for an option (null when no dot is shown) */
+  dotTone(option: ToggleOption): ToggleOptionDot | null;
+  /** Index of the next enabled option in `direction`, wrapping around */
+  private nextEnabled;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ToggleGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ToggleGroupComponent, "lc-toggle-group", never, {
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledBy": {
+      "alias": "ariaLabelledBy";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selectedChange";
+    "selectionChange": "selectionChange";
+  }, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-tokens.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const ColorPrimary50 = "#f0f8fa";
+export declare const ColorPrimary100 = "#e0f1f4";
+export declare const ColorPrimary200 = "#c1e3e9";
+export declare const ColorPrimary300 = "#a3d5df";
+export declare const ColorPrimary400 = "#84c7d4";
+export declare const ColorPrimary500 = "#208497";
+export declare const ColorPrimary600 = "#1a6a79";
+export declare const ColorPrimary700 = "#144f5b";
+export declare const ColorPrimary800 = "#0d353d";
+export declare const ColorPrimary900 = "#071a1f";
+export declare const ColorSecondary50 = "#f5f8f9";
+export declare const ColorSecondary100 = "#ebf1f3";
+export declare const ColorSecondary200 = "#d7e3e7";
+export declare const ColorSecondary300 = "#c3d5db";
+export declare const ColorSecondary400 = "#afc7cf";
+export declare const ColorSecondary500 = "#7097af";
+export declare const ColorSecondary600 = "#5a798c";
+export declare const ColorSecondary700 = "#435b69";
+export declare const ColorSecondary800 = "#2d3c46";
+export declare const ColorSecondary900 = "#161e23";
+export declare const ColorNeutral50 = "#f9fafb";
+export declare const ColorNeutral100 = "#f3f4f6";
+export declare const ColorNeutral200 = "#e5e7eb";
+export declare const ColorNeutral300 = "#d1d5db";
+export declare const ColorNeutral400 = "#9ca3af";
+export declare const ColorNeutral500 = "#6b7280";
+export declare const ColorNeutral600 = "#4b5563";
+export declare const ColorNeutral700 = "#374151";
+export declare const ColorNeutral800 = "#1f2937";
+export declare const ColorNeutral900 = "#111827";
+export declare const ColorSuccessDefault = "#8ea475";
+export declare const ColorSuccessLight = "#cdd6c2";
+export declare const ColorSuccessDark = "#5f7150";
+export declare const ColorErrorDefault = "#9d0e0e";
+export declare const ColorErrorLight = "#f7a1a1";
+export declare const ColorErrorDark = "#6b0909";
+export declare const ColorWarningDefault = "#e1a040";
+export declare const ColorWarningLight = "#f1d3a7";
+export declare const ColorWarningDark = "#9b6b2b";
+export declare const ColorInfoDefault = "#3b6588";
+export declare const ColorInfoLight = "#b8cee0";
+export declare const ColorInfoDark = "#27445c";
+export declare const ColorAccentOrange = "#df792e";
+export declare const ColorAccentPurple = "#866aa0";
+export declare const ColorAccentRed = "#9e3846";
+export declare const ColorAccentRust = "#c6592e";
+export declare const ColorAccentViolet = "#4e3f84";
+export declare const ColorMember1 = "#1a6a79";
+export declare const ColorMember2 = "#b04a22";
+export declare const ColorMember3 = "#4e3f84";
+export declare const ColorMember4 = "#5f7150";
+export declare const ColorMember5 = "#9e3846";
+export declare const ColorMember6 = "#5a798c";
+export declare const ColorSurfaceDarkBase = "#101c26";
+export declare const ColorSurfaceDarkFloating = "#14222e";
+export declare const ColorSurfaceDarkRaised = "#1a2c3a";
+export declare const ColorSurfaceDarkSunken = "#0c1722";
+export declare const ColorBackgroundDark = "#0a121b";
+export declare const ColorSidebarDark = "#070e15";
+export declare const ColorTextDarkPrimary = "#eef4f6";
+export declare const ColorTextDarkSecondary = "#aebfc7";
+export declare const ColorTextDarkTertiary = "#71858f";
+export declare const Spacing0 = "0";
+export declare const Spacing1 = "0.25rem";
+export declare const Spacing2 = "0.5rem";
+export declare const Spacing3 = "0.75rem";
+export declare const Spacing4 = "1rem";
+export declare const Spacing5 = "1.25rem";
+export declare const Spacing6 = "1.5rem";
+export declare const Spacing7 = "1.75rem";
+export declare const Spacing8 = "2rem";
+export declare const Spacing9 = "2.25rem";
+export declare const Spacing10 = "2.5rem";
+export declare const Spacing11 = "2.75rem";
+export declare const Spacing12 = "3rem";
+export declare const Spacing14 = "3.5rem";
+export declare const Spacing16 = "4rem";
+export declare const Spacing05 = "0.125rem";
+export declare const Spacing15 = "0.375rem";
+export declare const Spacing25 = "0.625rem";
+export declare const Spacing35 = "0.875rem";
+export declare const TypographyFontFamilyBase = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
+export declare const TypographyFontFamilyMono = "'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace";
+export declare const TypographyFontSizeXs = "0.75rem";
+export declare const TypographyFontSizeSm = "0.875rem";
+export declare const TypographyFontSizeBase = "1rem";
+export declare const TypographyFontSizeLg = "1.125rem";
+export declare const TypographyFontSizeXl = "1.25rem";
+export declare const TypographyFontSize2xl = "1.5rem";
+export declare const TypographyFontSize3xl = "1.875rem";
+export declare const TypographyFontSize4xl = "2.25rem";
+export declare const TypographyFontSize5xl = "3rem";
+export declare const TypographyFontSize6xl = "3.75rem";
+export declare const TypographyFontSize7xl = "4.5rem";
+export declare const TypographyFontWeightNormal = "400";
+export declare const TypographyFontWeightMedium = "500";
+export declare const TypographyFontWeightSemibold = "600";
+export declare const TypographyFontWeightBold = "700";
+export declare const TypographyLineHeightTight = "1.25";
+export declare const TypographyLineHeightNormal = "1.5";
+export declare const TypographyLineHeightRelaxed = "1.75";
+export declare const Elevation1 = "0 4px 24px rgba(0, 0, 0, 0.35)";
+export declare const Elevation2 = "0 8px 32px rgba(0, 0, 0, 0.42)";
+export declare const Elevation3 = "0 14px 44px rgba(0, 0, 0, 0.48)";
+export declare const Elevation4 = "0 18px 60px rgba(0, 0, 0, 0.55)";
+export declare const BorderRadiusNone = "0";
+export declare const BorderRadiusSm = "0.625rem";
+export declare const BorderRadiusMd = "0.75rem";
+export declare const BorderRadiusLg = "1.125rem";
+export declare const BorderRadiusXl = "1.5rem";
+export declare const BorderRadius2xl = "2rem";
+export declare const BorderRadiusFull = "9999px";
+export declare const AnimationDurationFast = "150ms";
+export declare const AnimationEasingEaseIn = "ease-in";
+export declare const AnimationEasingEaseOut = "ease-out";
+export declare const AnimationEasingEaseInOut = "ease-in-out";
+export declare const SizeInteractiveXsHeight = "1.5rem";
+export declare const SizeInteractiveXsPadding = "0.25rem 0.5rem";
+export declare const SizeInteractiveXsFontSize = "0.75rem";
+export declare const SizeInteractiveSmHeight = "2rem";
+export declare const SizeInteractiveSmPadding = "0.375rem 0.75rem";
+export declare const SizeInteractiveSmFontSize = "0.875rem";
+export declare const SizeInteractiveMdHeight = "2.5rem";
+export declare const SizeInteractiveMdPadding = "0.5rem 1rem";
+export declare const SizeInteractiveMdFontSize = "1rem";
+export declare const SizeInteractiveLgHeight = "2.75rem";
+export declare const SizeInteractiveLgPadding = "0.625rem 1.25rem";
+export declare const SizeInteractiveLgFontSize = "1.125rem";
+export declare const SizeMinTouchWidth = "2.75rem";
+export declare const SizeMinTouchHeight = "2.75rem";
+export declare const SizeContentMaxWidth = "1536px";