@resolve-components/theme 1.0.0 → 1.2.1

package/toggle/rc-toggle.scss

@@ -0,0 +1,138 @@
+// =============================================================================
+// rc-toggle  Resolve Components Toggle Switch (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  .rc-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: rc-theme('toggle-gap');
+    cursor: pointer;
+    user-select: none;
+    font-family: rc-theme('toggle-font-family');
+    font-size: rc-theme('toggle-md-font-size');
+    color: rc-theme('toggle-text-color');
+
+    // ── Sizes ──────────────────────────────────────────────────────────────
+
+    &-sm {
+      font-size: rc-theme('toggle-sm-font-size');
+      gap: rc-theme('toggle-gap');
+
+      .rc-toggle-track {
+        width: rc-theme('toggle-sm-track-width');
+        height: rc-theme('toggle-sm-track-height');
+        border-radius: rc-theme('toggle-sm-track-border-radius');
+      }
+
+      .rc-toggle-thumb {
+        width: rc-theme('toggle-sm-thumb-size');
+        height: rc-theme('toggle-sm-thumb-size');
+      }
+    }
+
+    &-md {
+      font-size: rc-theme('toggle-md-font-size');
+
+      .rc-toggle-track {
+        width: rc-theme('toggle-md-track-width');
+        height: rc-theme('toggle-md-track-height');
+        border-radius: rc-theme('toggle-md-track-border-radius');
+      }
+
+      .rc-toggle-thumb {
+        width: rc-theme('toggle-md-thumb-size');
+        height: rc-theme('toggle-md-thumb-size');
+      }
+    }
+
+    &-lg {
+      font-size: rc-theme('toggle-lg-font-size');
+
+      .rc-toggle-track {
+        width: rc-theme('toggle-lg-track-width');
+        height: rc-theme('toggle-lg-track-height');
+        border-radius: rc-theme('toggle-lg-track-border-radius');
+      }
+
+      .rc-toggle-thumb {
+        width: rc-theme('toggle-lg-thumb-size');
+        height: rc-theme('toggle-lg-thumb-size');
+      }
+    }
+
+    // ── Checked state ──────────────────────────────────────────────────────
+
+    &-checked {
+      .rc-toggle-track {
+        background: rc-theme('toggle-checked-track-color');
+      }
+
+      .rc-toggle-thumb {
+        transform: translateX(calc(100% + rc-theme('toggle-thumb-gap') * 2));
+      }
+    }
+
+    // ── Disabled state ────────────────────────────────────────────────────
+
+    &-disabled {
+      opacity: rc-theme('toggle-disabled-opacity');
+      cursor: not-allowed;
+    }
+
+    // ── Focus ring ────────────────────────────────────────────────────────
+
+    &:focus-visible .rc-toggle-track {
+      outline: 2px solid rc-theme('toggle-focus-outline-color');
+      outline-offset: 2px;
+    }
+
+    // ── Hover ────────────────────────────────────────────────────────────
+
+    &:not(.rc-toggle-disabled):not(.rc-toggle-checked):hover .rc-toggle-track {
+      background: rc-theme('toggle-hover-track-color');
+    }
+
+    &:not(.rc-toggle-disabled).rc-toggle-checked:hover .rc-toggle-track {
+      background: rc-theme('toggle-checked-hover-track-color');
+    }
+
+    // ── Label position ─────────────────────────────────────────────────────
+
+    &-label-left {
+      flex-direction: row-reverse;
+    }
+
+    // ── Parts ─────────────────────────────────────────────────────────────
+
+    &-track {
+      position: relative;
+      flex-shrink: 0;
+      background: rc-theme('toggle-track-color');
+      @include rc-component-animation(background, $speed: 'normal');
+      display: flex;
+      align-items: center;
+      padding: rc-theme('toggle-thumb-gap');
+    }
+
+    &-thumb {
+      flex-shrink: 0;
+      border-radius: 50%;
+      background: rc-theme('toggle-thumb-color');
+      box-shadow: rc-theme('toggle-thumb-shadow');
+      @include rc-component-animation(
+        transform,
+        $speed: 'normal',
+        $timing: cubic-bezier(0.4, 0, 0.2, 1)
+      );
+    }
+
+    &-label {
+      line-height: 1.5;
+    }
+  }
+}

package/tooltip/rc-tooltip.scss

@@ -0,0 +1,34 @@
+@use '../styles/theming' as *;
+
+@include rc-install-component() {
+  .rc-tooltip-panel {
+    // CDK overlay panel - removes default pointer-events none
+    pointer-events: none;
+  }
+
+  .rc-tooltip-bubble {
+    display: inline-block;
+    max-width: rc-theme('tooltip-max-width');
+    padding: rc-theme('tooltip-padding');
+    background: rc-theme('tooltip-background');
+    color: rc-theme('tooltip-text-color');
+    font-family: rc-theme('tooltip-font-family');
+    font-size: rc-theme('tooltip-font-size');
+    line-height: 1.5;
+    border-radius: rc-theme('tooltip-border-radius');
+    word-break: break-word;
+    animation: rc-tooltip-in 120ms ease-out;
+    box-shadow: rc-theme('tooltip-shadow');
+  }
+
+  @keyframes rc-tooltip-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}

package/tree/rc-tree.scss

@@ -0,0 +1,114 @@
+// =============================================================================
+// rc-tree  Resolve Components Tree (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ── Container ──────────────────────────────────────────────────────────────
+  .rc-tree {
+    display: flex;
+    flex-direction: column;
+    font-family: rc-theme('tree-font-family');
+    font-size: rc-theme('tree-font-size');
+    color: rc-theme('tree-text-color');
+    background: rc-theme('tree-background');
+    border: 1px solid rc-theme('tree-border-color');
+    border-radius: rc-theme('tree-border-radius');
+    padding: rc-theme('tree-padding');
+    overflow: hidden;
+  }
+
+  // ── Node ───────────────────────────────────────────────────────────────────
+  .rc-tree-node {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // ── Row ────────────────────────────────────────────────────────────────────
+  .rc-tree-node-row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: rc-theme('tree-row-height');
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    padding-right: 0.5rem;
+    border-radius: rc-theme('tree-row-border-radius');
+    cursor: pointer;
+    @include rc-component-animation(
+      background,
+      $duration: rc-theme('tree-transition-duration'),
+      $timing: rc-theme('tree-transition-timing')
+    );
+    user-select: none;
+
+    &:hover:not(.rc-tree-node-disabled) {
+      background: rc-theme('tree-row-hover-background');
+    }
+
+    &:focus-visible {
+      outline: 2px solid rc-theme('tree-focus-color');
+      outline-offset: -1px;
+    }
+  }
+
+  // ── Selected ───────────────────────────────────────────────────────────────
+  .rc-tree-node-selected {
+    background: rc-theme('tree-row-selected-background') !important;
+    color: rc-theme('tree-row-selected-color');
+  }
+
+  // ── Disabled ───────────────────────────────────────────────────────────────
+  .rc-tree-node-disabled {
+    opacity: rc-theme('tree-disabled-opacity');
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // ── Expand button (layout only — appearance from rcButton) ─────────────────
+  .rc-tree-expand-btn {
+    flex-shrink: 0;
+  }
+
+  // ── Leaf spacer (placeholder width to align labels with sibling branches) ──
+  .rc-tree-node-leaf-spacer {
+    // Match the sm icon-only rcButton size so labels stay aligned
+    display: inline-flex;
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  // ── Chevron icon ───────────────────────────────────────────────────────────
+  .rc-tree-chevron {
+    @include rc-component-animation(
+      transform,
+      $duration: rc-theme('tree-transition-duration'),
+      $timing: rc-theme('tree-transition-timing')
+    );
+    transform: rotate(-90deg); // pointing right = collapsed
+    color: rc-theme('tree-icon-color');
+  }
+
+  .rc-tree-chevron-open {
+    transform: rotate(0deg); // pointing down = expanded
+  }
+
+  // ── Label ──────────────────────────────────────────────────────────────────
+  .rc-tree-node-label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.4;
+  }
+
+  // ── Children container ─────────────────────────────────────────────────────
+  .rc-tree-node-children {
+    display: flex;
+    flex-direction: column;
+  }
+}

package/types/resolve-components-theme.d.ts

@@ -263,7 +263,7 @@ declare class ResolveComponents {
 
 /** Shape / visual style of the button. */
 type RcButtonVariant = 'filled' | 'outline' | 'ghost';
-/** Semantic colour / importance of the button. */
+/** Semantic color / importance of the button. */
 type RcButtonStatus = 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning';
 type RcButtonSize = 'sm' | 'md' | 'lg';
 /**
@@ -307,7 +307,7 @@ type RcButtonSize = 'sm' | 'md' | 'lg';
  * ```
  *
  * @input variant  - Visual shape: `'filled'` | `'outline'` | `'ghost'`. Default: `'filled'`
- * @input status   - Semantic colour: `'primary'` | `'secondary'` | `'danger'` | `'info'` | `'success'` | `'warning'`. Default: `'primary'`
+ * @input status   - Semantic color: `'primary'` | `'secondary'` | `'danger'` | `'info'` | `'success'` | `'warning'`. Default: `'primary'`
  * @input size     - Button size: `'sm'` | `'md'` | `'lg'`. Default: `'md'`
  * @input disabled - Whether the element is disabled. Default: `false`
  * @input iconOnly - Renders as a square icon-only button. Default: `false`
@@ -315,10 +315,10 @@ type RcButtonSize = 'sm' | 'md' | 'lg';
  *
  * Variants (shape):
  * - `filled`  Solid background — default
- * - `outline` Transparent with coloured border
+ * - `outline` Transparent with colored border
  * - `ghost`   Fully transparent, hover reveals background
  *
- * Status (colour):
+ * Status (color):
  * - `primary`   Blue  — main call-to-action
  * - `secondary` Gray  — secondary / neutral action
  * - `danger`    Red   — destructive / irreversible action
@@ -329,7 +329,7 @@ type RcButtonSize = 'sm' | 'md' | 'lg';
 declare class RcButtonComponent {
     /** Visual shape of the button */
     variant: RcButtonVariant;
-    /** Semantic colour / importance */
+    /** Semantic color / importance */
     status: RcButtonStatus;
     /** Button size */
     size: RcButtonSize;
@@ -344,7 +344,7 @@ declare class RcButtonComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<RcButtonComponent, "button[rcButton], a[rcButton], input[type=submit][rcButton], input[type=button][rcButton], input[type=reset][rcButton]", never, { "variant": { "alias": "variant"; "required": false; }; "status": { "alias": "status"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
-/** Colour status of the badge. */
+/** Color status of the badge. */
 type RcBadgeStatus = 'default' | 'primary' | 'success' | 'warning' | 'danger';
 /** @deprecated Use `RcBadgeStatus` instead. */
 type RcBadgeVariant = RcBadgeStatus;
@@ -362,7 +362,7 @@ type RcBadgeSize = 'sm' | 'md';
  * ```
  */
 declare class RcBadgeComponent {
-    /** Colour status of the badge. */
+    /** Color status of the badge. */
     status: RcBadgeStatus;
     /** Badge size. */
     size: RcBadgeSize;
@@ -416,7 +416,7 @@ type RcIconStatus = 'basic' | 'primary' | 'success' | 'warning' | 'danger' | 'in
  * <rc-icon name="star"></rc-icon>
  * ```
  *
- * @example With status colour
+ * @example With status color
  * ```html
  * <rc-icon name="checkmark-circle" status="success"></rc-icon>
  * <rc-icon name="alert-circle" status="danger"></rc-icon>
@@ -441,15 +441,15 @@ type RcIconStatus = 'basic' | 'primary' | 'success' | 'warning' | 'danger' | 'in
  * ```
  *
  * @input name   - Eva Icons icon name (e.g. `'star'`, `'home'`, `'checkmark'`)
- * @input status - Colour variant using semantic theme tokens. Default: `'basic'`
+ * @input status - Color variant using semantic theme tokens. Default: `'basic'`
  */
 declare class RcIconComponent implements OnChanges {
     private sanitizer;
     /** Eva Icons icon name */
     name: string;
     /**
-     * Colour status applied via theme CSS custom properties.
-     * `'basic'` inherits the surrounding text colour.
+     * Color status applied via theme CSS custom properties.
+     * `'basic'` inherits the surrounding text color.
      */
     status: RcIconStatus;
     svgHtml: SafeHtml;
@@ -482,8 +482,8 @@ declare class RcTabComponent {
     /** Optional Eva Icons icon name shown before the label */
     icon?: string;
     /**
-     * Semantic status — colours the active tab indicator.
-     * `'basic'` uses the default primary colour.
+     * Semantic status — colors the active tab indicator.
+     * `'basic'` uses the default primary color.
      */
     status: RcTabStatus;
     /** When true the tab header is non-interactive */
@@ -558,14 +558,14 @@ type RcAlertVariant = 'subtle' | 'filled' | 'outline';
  * </rc-alert>
  * ```
  *
- * @input status      - Semantic status colour. Default: `'info'`
+ * @input status      - Semantic status color. Default: `'info'`
  * @input variant     - Visual style. Default: `'subtle'`
  * @input title       - Optional bold heading above the message.
  * @input dismissible - Shows a close button. Default: `false`
  * @output dismissed  - Emits when the close button is clicked.
  */
 declare class RcAlertComponent {
-    /** Semantic status colour */
+    /** Semantic status color */
     status: RcAlertStatus;
     /** Visual style variant */
     variant: RcAlertVariant;
@@ -590,7 +590,7 @@ interface RcToastConfig {
     message: string;
     /** Optional bold heading above the message. */
     title?: string;
-    /** Semantic status colour. Default: `'info'` */
+    /** Semantic status color. Default: `'info'` */
     status?: RcToastStatus;
     /**
      * Auto-dismiss delay in milliseconds.
@@ -1315,7 +1315,7 @@ type RcChipSize = 'sm' | 'md';
  * <rc-chip [disabled]="true">Not available</rc-chip>
  * ```
  *
- * @input status    - Colour status. Default: `'default'`
+ * @input status    - Color status. Default: `'default'`
  * @input size      - Chip size. Default: `'md'`
  * @input icon      - Eva Icons icon name shown before the label.
  * @input closeable - Shows a close/remove button. Default: `false`
@@ -1325,7 +1325,7 @@ type RcChipSize = 'sm' | 'md';
  * @output closed    - Emits when the close button is clicked (and not disabled).
  */
 declare class RcChipComponent {
-    /** Colour status */
+    /** Color status */
     status: RcChipStatus;
     /** Chip size */
     size: RcChipSize;
@@ -2164,7 +2164,7 @@ declare class RcSidenavContainerComponent implements RcSidenavContainerRef, Afte
     static ɵcmp: i0.ɵɵComponentDeclaration<RcSidenavContainerComponent, "rc-sidenav-container", never, {}, {}, ["_contentSidenavs"], ["rc-sidenav", "rc-sidenav-content", "*"], true, never>;
 }
 
-/** Colour variant for the navbar. */
+/** Color variant for the navbar. */
 type RcNavbarColor = 'default' | 'primary';
 /** CSS position strategy. */
 type RcNavbarPosition = 'static' | 'sticky' | 'fixed';
@@ -2259,7 +2259,7 @@ declare class RcNavbarRowComponent {
  * </rc-navbar>
  * ```
  *
- * @example Primary colour + sticky
+ * @example Primary color + sticky
  * ```html
  * <rc-navbar color="primary" position="sticky">…</rc-navbar>
  * ```
@@ -2294,9 +2294,9 @@ declare class RcNavbarRowComponent {
  */
 declare class RcNavbarComponent {
     /**
-     * Colour variant.
+     * Color variant.
      * - `'default'` — white / surface background (default)
-     * - `'primary'` — primary brand colour
+     * - `'primary'` — primary brand color
      */
     color: RcNavbarColor;
     /**
@@ -2592,7 +2592,7 @@ declare class RcTreeComponent implements OnChanges {
     static ɵcmp: i0.ɵɵComponentDeclaration<RcTreeComponent, "rc-tree", never, { "nodes": { "alias": "nodes"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "expandedIds": { "alias": "expandedIds"; "required": false; }; }, { "selectionChange": "selectionChange"; "nodeClick": "nodeClick"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; }, never, never, true, never>;
 }
 
-/** Colour variant for the spinner circle. */
+/** Color variant for the spinner circle. */
 type RcSpinnerStatus = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'basic';
 /** Size variant for the spinner. */
 type RcSpinnerSize = 'sm' | 'md' | 'lg';
@@ -2609,7 +2609,7 @@ type RcSpinnerSize = 'sm' | 'md' | 'lg';
  * <rc-spinner status="danger" message="Saving failed — retrying…"></rc-spinner>
  * ```
  *
- * @example Status colours
+ * @example Status colors
  * ```html
  * <rc-spinner status="primary"></rc-spinner>
  * <rc-spinner status="info"></rc-spinner>
@@ -2620,7 +2620,7 @@ type RcSpinnerSize = 'sm' | 'md' | 'lg';
  * ```
  */
 declare class RcSpinnerComponent {
-    /** Colour status of the spinner circle. Default: `'primary'` */
+    /** Color status of the spinner circle. Default: `'primary'` */
     status: RcSpinnerStatus;
     /** Visual size of the spinner. Default: `'md'` */
     size: RcSpinnerSize;
@@ -2663,7 +2663,7 @@ declare class RcSpinnerComponent {
 declare class RcSpinnerDirective implements OnChanges, OnDestroy {
     /** When `true`, the spinner overlay is rendered inside the host element. */
     rcSpinner: boolean;
-    /** Colour status forwarded to the inner `rc-spinner`. Default: `'primary'` */
+    /** Color status forwarded to the inner `rc-spinner`. Default: `'primary'` */
     rcSpinnerStatus: RcSpinnerStatus;
     /** Size forwarded to the inner `rc-spinner`. Default: `'md'` */
     rcSpinnerSize: RcSpinnerSize;
@@ -2679,7 +2679,7 @@ declare class RcSpinnerDirective implements OnChanges, OnDestroy {
     static ɵdir: i0.ɵɵDirectiveDeclaration<RcSpinnerDirective, "[rcSpinner]", never, { "rcSpinner": { "alias": "rcSpinner"; "required": false; }; "rcSpinnerStatus": { "alias": "rcSpinnerStatus"; "required": false; }; "rcSpinnerSize": { "alias": "rcSpinnerSize"; "required": false; }; "rcSpinnerMessage": { "alias": "rcSpinnerMessage"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-/** Status colour variant for the progress bar fill. */
+/** Status color variant for the progress bar fill. */
 type RcProgressBarStatus = 'primary' | 'info' | 'success' | 'warning' | 'danger';
 /**
  * A themed horizontal progress bar — determinate or indeterminate.
@@ -2692,7 +2692,7 @@ type RcProgressBarStatus = 'primary' | 'info' | 'success' | 'warning' | 'danger'
  * <rc-progress-bar [value]="60"></rc-progress-bar>
  * ```
  *
- * @example Status colours
+ * @example Status colors
  * ```html
  * <rc-progress-bar [value]="80" status="success"></rc-progress-bar>
  * <rc-progress-bar [value]="20" status="danger"></rc-progress-bar>
@@ -2716,7 +2716,7 @@ type RcProgressBarStatus = 'primary' | 'info' | 'success' | 'warning' | 'danger'
 declare class RcProgressBarComponent {
     /** Progress value from 0 to 100. Ignored when `indeterminate` is true. Default: `0` */
     value: number;
-    /** Colour variant of the fill. Default: `'primary'` */
+    /** Color variant of the fill. Default: `'primary'` */
     status: RcProgressBarStatus;
     /** When true, shows an animated looping bar. Default: `false` */
     indeterminate: boolean;
@@ -2941,7 +2941,7 @@ declare class RcTooltipDirective implements OnDestroy {
 declare class RcMenuItemComponent {
     /** Eva icon name for the leading icon slot. */
     icon: string;
-    /** Renders the item with danger (red) text colouring. Default: `false` */
+    /** Renders the item with danger (red) text coloring. Default: `false` */
     danger: boolean;
     /** Prevents clicking. Default: `false` */
     disabled: boolean;
@@ -3074,7 +3074,7 @@ declare class RcInfiniteScrollComponent implements AfterViewInit, OnChanges, OnD
      * Default: `false` — the page scroll triggers loading.
      */
     scrollable: boolean;
-    /** Colour variant passed to the internal `<rc-spinner>`. Default: `'primary'` */
+    /** Color variant passed to the internal `<rc-spinner>`. Default: `'primary'` */
     spinnerStatus: RcSpinnerStatus;
     /** Optional message displayed beneath the spinner while loading. */
     loadingMessage: string;
@@ -3095,6 +3095,7 @@ declare class RcInfiniteScrollComponent implements AfterViewInit, OnChanges, OnD
     loadMore: EventEmitter<void>;
     private observer?;
     private isSentinelVisible;
+    private pendingEmit;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;

package/virtual-scroll/rc-virtual-scroll.scss

@@ -0,0 +1,38 @@
+@use '../styles/theming' as *;
+
+@include rc-install-component() {
+  .rc-virtual-scroll-viewport {
+    display: block;
+    width: 100%;
+  }
+
+  .rc-virtual-scroll-inner {
+    width: 100%;
+    background-color: rc-theme('virtual-scroll-background-color');
+    border: 1px solid rc-theme('virtual-scroll-border-color');
+    border-radius: rc-theme('virtual-scroll-border-radius');
+    overflow: auto;
+
+    // Styled scrollbar
+    scrollbar-width: thin;
+    scrollbar-color: rc-theme('virtual-scroll-thumb-color')
+      rc-theme('virtual-scroll-track-color');
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: rc-theme('virtual-scroll-track-color');
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rc-theme('virtual-scroll-thumb-color');
+      border-radius: 3px;
+
+      &:hover {
+        background: rc-theme('virtual-scroll-thumb-hover-color');
+      }
+    }
+  }
+}