@educarehq/solaris-ui 0.5.0 → 0.6.1

package/fesm2022/educarehq-solaris-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, HostListener, contentChild, contentChildren, effect, NgZone, TemplateRef, ViewContainerRef, Injector, viewChild, isDevMode, forwardRef, ChangeDetectorRef, booleanAttribute, numberAttribute, afterNextRender, ApplicationRef, EnvironmentInjector, createComponent, model, viewChildren } from '@angular/core';
+import { InjectionToken, inject, PLATFORM_ID, Injectable, Pipe, Directive, signal, DestroyRef, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, contentChild, contentChildren, NgZone, TemplateRef, ViewContainerRef, Injector, viewChild, isDevMode, forwardRef, ChangeDetectorRef, booleanAttribute, numberAttribute, afterNextRender, ApplicationRef, model, viewChildren } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import { FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
@@ -47,6 +47,9 @@ const SOLARIS_TRANSLATE_DEFAULT_CONFIG = {
     translations: {
         'en-US': {
             'solaris.button.loading': 'Loading...',
+            'solaris.spinner.loading': 'Loading...',
+            'solaris.progress.indeterminate': 'Indeterminate progress',
+            'solaris.loadingText.loading': 'Loading...',
             'solaris.stepper.optional': 'Optional',
             'solaris.select.loading': 'Loading...',
             'solaris.select.empty': 'No options available',
@@ -114,6 +117,9 @@ const SOLARIS_TRANSLATE_DEFAULT_CONFIG = {
         },
         'pt-BR': {
             'solaris.button.loading': 'Carregando...',
+            'solaris.spinner.loading': 'Carregando...',
+            'solaris.progress.indeterminate': 'Progresso indeterminado',
+            'solaris.loadingText.loading': 'Carregando...',
             'solaris.stepper.optional': 'Opcional',
             'solaris.select.loading': 'Carregando...',
             'solaris.select.empty': 'Nenhuma opção disponível',
@@ -1692,9 +1698,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+const VIEW_BOX = 120;
+const VIEW_CENTER = VIEW_BOX / 2;
+const STROKE_WIDTH = 15;
+const RING_RADIUS = 46;
+const STACKED_BAR_COUNT = 8;
+const STACKED_ANGLE_STEP = 360 / STACKED_BAR_COUNT;
+const STACKED_INNER_RADIUS = 28;
+const STACKED_OUTER_RADIUS = 50;
+const RING_ARC_PATH = `M ${VIEW_CENTER} ${VIEW_CENTER - RING_RADIUS} A ${RING_RADIUS} ${RING_RADIUS} 0 0 1 ${VIEW_CENTER + RING_RADIUS} ${VIEW_CENTER}`;
+const SOLARIS_STACKED_BARS = Array.from({ length: STACKED_BAR_COUNT }, (_, index) => {
+    const angle = ((-90 + index * STACKED_ANGLE_STEP) * Math.PI) / 180;
+    const delayFactor = -((STACKED_BAR_COUNT - index) % STACKED_BAR_COUNT) / STACKED_BAR_COUNT;
+    const staticOpacity = 1 - (index / STACKED_BAR_COUNT) * 0.6;
+    return {
+        x1: VIEW_CENTER + STACKED_INNER_RADIUS * Math.cos(angle),
+        y1: VIEW_CENTER + STACKED_INNER_RADIUS * Math.sin(angle),
+        x2: VIEW_CENTER + STACKED_OUTER_RADIUS * Math.cos(angle),
+        y2: VIEW_CENTER + STACKED_OUTER_RADIUS * Math.sin(angle),
+        delayFactor,
+        staticOpacity,
+    };
+});
+
+class SolarisSpinnerComponent {
+    variant = input('ring', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    speed = input('normal', ...(ngDevMode ? [{ debugName: "speed" }] : /* istanbul ignore next */ []));
+    easing = input('linear', ...(ngDevMode ? [{ debugName: "easing" }] : /* istanbul ignore next */ []));
+    backdrop = input(false, ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
+    ariaHidden = input(false, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelKey = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    showPercent = input(false, ...(ngDevMode ? [{ debugName: "showPercent" }] : /* istanbul ignore next */ []));
+    description = input([], ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    descriptionKey = input([], ...(ngDevMode ? [{ debugName: "descriptionKey" }] : /* istanbul ignore next */ []));
+    translate = inject(SolarisTranslateService, {
+        optional: true,
+    });
+    isProgress = computed(() => this.variant() === 'progress', ...(ngDevMode ? [{ debugName: "isProgress" }] : /* istanbul ignore next */ []));
+    isStacked = computed(() => this.variant() === 'stacked', ...(ngDevMode ? [{ debugName: "isStacked" }] : /* istanbul ignore next */ []));
+    stackedBars = SOLARIS_STACKED_BARS;
+    ringArcPath = RING_ARC_PATH;
+    hostRole = computed(() => this.isProgress() ? 'progressbar' : 'status', ...(ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []));
+    hostAriaLive = computed(() => this.isProgress() ? null : 'polite', ...(ngDevMode ? [{ debugName: "hostAriaLive" }] : /* istanbul ignore next */ []));
+    clampedValue = computed(() => {
+        const value = this.value();
+        if (Number.isFinite(value)) {
+            return Math.min(100, Math.max(0, Math.round(value)));
+        }
+        return 0;
+    }, ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
+    indicatorDashArray = computed(() => {
+        const value = this.clampedValue();
+        return `${value} ${100 - value}`;
+    }, ...(ngDevMode ? [{ debugName: "indicatorDashArray" }] : /* istanbul ignore next */ []));
+    resolvedLabel = computed(() => {
+        const label = this.label();
+        if (label !== undefined) {
+            return label === '' ? null : label;
+        }
+        const key = this.labelKey();
+        if (key && this.translate) {
+            return this.translate.translate(key);
+        }
+        if (this.translate) {
+            return this.translate.translate('solaris.spinner.loading');
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    resolvedDescription = computed(() => {
+        const items = this.description();
+        const keys = this.descriptionKey();
+        const result = [];
+        const count = Math.max(items.length, keys.length);
+        for (let index = 0; index < count; index++) {
+            const item = items[index];
+            if (item !== undefined) {
+                if (item !== '') {
+                    result.push(item);
+                }
+                continue;
+            }
+            const key = keys[index];
+            if (key && this.translate) {
+                result.push(this.translate.translate(key));
+            }
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "resolvedDescription" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => {
+        const aria = this.ariaLabel();
+        if (aria) {
+            return aria;
+        }
+        const key = this.ariaLabelKey();
+        if (key && this.translate) {
+            return this.translate.translate(key);
+        }
+        const label = this.resolvedLabel();
+        if (label) {
+            return label;
+        }
+        if (this.translate) {
+            return this.translate.translate('solaris.spinner.loading');
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    progressAria = computed(() => {
+        if (!this.isProgress()) {
+            return null;
+        }
+        const percent = this.clampedValue();
+        const label = this.resolvedLabel();
+        const description = this.resolvedDescription();
+        const parts = [];
+        if (label) {
+            parts.push(label);
+        }
+        parts.push(`${percent} percent`, ...description);
+        return {
+            valuemin: 0,
+            valuemax: 100,
+            valuenow: percent,
+            valuetext: parts.join(', '),
+        };
+    }, ...(ngDevMode ? [{ debugName: "progressAria" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisSpinnerComponent, isStandalone: true, selector: "solaris-spinner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showPercent: { classPropertyName: "showPercent", publicName: "showPercent", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "hostRole()", "attr.aria-live": "hostAriaLive()", "attr.data-size": "size()", "attr.data-speed": "speed()", "attr.data-color": "color()", "attr.data-easing": "easing()", "attr.data-variant": "variant()", "attr.aria-label": "resolvedAriaLabel()", "attr.data-backdrop": "backdrop() ? \"\" : null", "attr.aria-hidden": "ariaHidden() ? \"true\" : null", "attr.aria-valuemin": "progressAria()?.valuemin ?? null", "attr.aria-valuemax": "progressAria()?.valuemax ?? null", "attr.aria-valuenow": "progressAria()?.valuenow ?? null", "attr.aria-valuetext": "progressAria()?.valuetext ?? null" }, classAttribute: "solaris-spinner" }, ngImport: i0, template: "@if (isStacked()) {\n  <svg class=\"solaris-spinner__ring\" aria-hidden=\"true\" viewBox=\"0 0 120 120\">\n    @for (bar of stackedBars; track bar.x1) {\n      <line\n        class=\"solaris-spinner__bar\"\n        [attr.x1]=\"bar.x1\"\n        [attr.y1]=\"bar.y1\"\n        [attr.x2]=\"bar.x2\"\n        [attr.y2]=\"bar.y2\"\n        [style.--solaris-spinner-stacked-step]=\"bar.delayFactor\"\n        [style.opacity]=\"bar.staticOpacity\"\n      ></line>\n    }\n  </svg>\n} @else {\n  <svg class=\"solaris-spinner__ring\" aria-hidden=\"true\" viewBox=\"0 0 120 120\">\n    <circle class=\"solaris-spinner__track\" cx=\"60\" cy=\"60\" r=\"46\"></circle>\n    @if (isProgress()) {\n      <circle\n        class=\"solaris-spinner__indicator solaris-spinner__indicator--progress\"\n        cx=\"60\"\n        cy=\"60\"\n        r=\"46\"\n        pathLength=\"100\"\n        [attr.stroke-dasharray]=\"indicatorDashArray()\"\n      ></circle>\n    } @else {\n      <g class=\"solaris-spinner__indicator\">\n        <path class=\"solaris-spinner__arc\" [attr.d]=\"ringArcPath\"></path>\n      </g>\n    }\n  </svg>\n}\n@if (isProgress()) {\n  <span class=\"solaris-spinner__content\">\n    <span class=\"solaris-spinner__header\">\n      @if (showPercent()) {\n        <span class=\"solaris-spinner__percent\">{{ clampedValue() }}%</span>\n      }\n      @if (resolvedLabel(); as label) {\n        <span class=\"solaris-spinner__label\">{{ label }}</span>\n      }\n    </span>\n    @for (line of resolvedDescription(); track $index) {\n      <span class=\"solaris-spinner__description\">{{ line }}</span>\n    }\n  </span>\n} @else if (resolvedLabel(); as label) {\n  <span class=\"solaris-spinner__label\">{{ label }}</span>\n}\n", styles: [":host{--solaris-spinner-size: var(--solaris-spacing-6);--solaris-spinner-thickness: 15;--solaris-spinner-color: var(--solaris-primary-base);--solaris-spinner-track-color: var(--solaris-spinner-color);--solaris-spinner-track-opacity: var(--solaris-opacity-20);--solaris-spinner-custom-color: var(--solaris-primary-base);--solaris-spinner-animation-duration: var(--solaris-motion-duration-slow);--solaris-spinner-animation-easing: var(--solaris-motion-easing-linear);--solaris-spinner-stacked-step: 0;--solaris-spinner-stacked-opacity-active: var(--solaris-opacity-100);--solaris-spinner-stacked-opacity-mid: var(--solaris-opacity-50);--solaris-spinner-stacked-opacity-inactive: var(--solaris-opacity-20);display:inline-flex;align-items:center;gap:var(--solaris-spacing-2);box-sizing:border-box;color:var(--solaris-spinner-color);font-family:var(--solaris-font-family-sans)}.solaris-spinner__ring{position:relative;display:block;box-sizing:border-box;flex-shrink:0;width:var(--solaris-spinner-size);height:var(--solaris-spinner-size);overflow:visible;shape-rendering:geometricprecision}.solaris-spinner__track,.solaris-spinner__indicator{fill:none;stroke-linecap:round}.solaris-spinner__track{stroke:var(--solaris-spinner-track-color);stroke-width:var(--solaris-spinner-thickness);opacity:var(--solaris-spinner-track-opacity)}.solaris-spinner__indicator{stroke:var(--solaris-spinner-color);stroke-width:var(--solaris-spinner-thickness)}:host([data-variant=ring]) .solaris-spinner__indicator{transform-box:view-box;transform-origin:50% 50%;animation:solaris-spinner-rotate var(--solaris-spinner-animation-duration) var(--solaris-spinner-animation-easing) infinite}:host([data-variant=progress]) .solaris-spinner__indicator{transform:rotate(-90deg);transform-box:fill-box;transform-origin:center;transition:stroke-dasharray var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-spinner__bar{fill:none;stroke:var(--solaris-spinner-color);stroke-width:var(--solaris-spinner-thickness);stroke-linecap:round;animation:solaris-spinner-stacked-bar var(--solaris-spinner-animation-duration) var(--solaris-spinner-animation-easing) infinite;animation-delay:calc(var(--solaris-spinner-animation-duration) * var(--solaris-spinner-stacked-step))}.solaris-spinner__label{font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-spinner__content{display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--solaris-spacing-1)}.solaris-spinner__header{display:inline-flex;align-items:baseline;gap:var(--solaris-spacing-2)}.solaris-spinner__percent{font-size:var(--solaris-font-size-md);font-weight:var(--solaris-font-weight-semibold);line-height:var(--solaris-line-height-md);font-variant-numeric:tabular-nums}.solaris-spinner__description{font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);color:var(--solaris-text-muted)}:host([data-variant=progress]){align-items:flex-start}:host([data-size=sm]){--solaris-spinner-size: var(--solaris-spacing-4)}:host([data-size=lg]){--solaris-spinner-size: var(--solaris-spacing-8)}:host([data-size=xl]){--solaris-spinner-size: var(--solaris-spacing-16)}:host([data-speed=slow]){--solaris-spinner-animation-duration: var(--solaris-motion-duration-slower)}:host([data-speed=fast]){--solaris-spinner-animation-duration: var(--solaris-motion-duration-normal)}:host([data-easing=ease]){--solaris-spinner-animation-easing: var(--solaris-motion-easing-standard)}:host([data-easing=ease-in]){--solaris-spinner-animation-easing: var(--solaris-motion-easing-accelerate)}:host([data-easing=ease-out]){--solaris-spinner-animation-easing: var(--solaris-motion-easing-decelerate)}:host([data-easing=ease-in-out]){--solaris-spinner-animation-easing: var(--solaris-motion-easing-standard)}:host([data-easing=spring]){--solaris-spinner-animation-easing: var(--solaris-motion-easing-spring)}:host([data-color=neutral]){--solaris-spinner-color: var(--solaris-text-muted)}:host([data-color=primary]){--solaris-spinner-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-spinner-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-spinner-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-spinner-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-spinner-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-spinner-color: var(--solaris-spinner-custom-color)}:host([data-backdrop]){position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--solaris-backdrop);z-index:var(--solaris-z-index-overlay)}:host([data-backdrop]) .solaris-spinner__label{color:var(--solaris-text-inverse)}@media(prefers-reduced-motion:reduce){:host([data-variant=ring]) .solaris-spinner__indicator{animation:none;opacity:var(--solaris-opacity-50)}:host([data-variant=stacked]) .solaris-spinner__bar{animation:none}}[data-reduced-motion=true] solaris-spinner[data-variant=ring] .solaris-spinner__indicator{animation:none;opacity:var(--solaris-opacity-50)}[data-reduced-motion=true] solaris-spinner[data-variant=stacked] .solaris-spinner__bar{animation:none}@keyframes solaris-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-spinner-stacked-bar{0%{opacity:var(--solaris-spinner-stacked-opacity-inactive)}20%{opacity:var(--solaris-spinner-stacked-opacity-active)}40%{opacity:var(--solaris-spinner-stacked-opacity-mid)}60%{opacity:var(--solaris-spinner-stacked-opacity-inactive)}to{opacity:var(--solaris-spinner-stacked-opacity-inactive)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-spinner', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-spinner',
+                        '[attr.role]': 'hostRole()',
+                        '[attr.aria-live]': 'hostAriaLive()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-speed]': 'speed()',
+                        '[attr.data-color]': 'color()',
+                        '[attr.data-easing]': 'easing()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.aria-label]': 'resolvedAriaLabel()',
+                        '[attr.data-backdrop]': 'backdrop() ? "" : null',
+                        '[attr.aria-hidden]': 'ariaHidden() ? "true" : null',
+                        '[attr.aria-valuemin]': 'progressAria()?.valuemin ?? null',
+                        '[attr.aria-valuemax]': 'progressAria()?.valuemax ?? null',
+                        '[attr.aria-valuenow]': 'progressAria()?.valuenow ?? null',
+                        '[attr.aria-valuetext]': 'progressAria()?.valuetext ?? null',
+                    }, template: "@if (isStacked()) {\n  <svg class=\"solaris-spinner__ring\" aria-hidden=\"true\" viewBox=\"0 0 120 120\">\n    @for (bar of stackedBars; track bar.x1) {\n      <line\n        class=\"solaris-spinner__bar\"\n        [attr.x1]=\"bar.x1\"\n        [attr.y1]=\"bar.y1\"\n        [attr.x2]=\"bar.x2\"\n        [attr.y2]=\"bar.y2\"\n        [style.--solaris-spinner-stacked-step]=\"bar.delayFactor\"\n        [style.opacity]=\"bar.staticOpacity\"\n      ></line>\n    }\n  </svg>\n} @else {\n  <svg class=\"solaris-spinner__ring\" aria-hidden=\"true\" viewBox=\"0 0 120 120\">\n    <circle class=\"solaris-spinner__track\" cx=\"60\" cy=\"60\" r=\"46\"></circle>\n    @if (isProgress()) {\n      <circle\n        class=\"solaris-spinner__indicator solaris-spinner__indicator--progress\"\n        cx=\"60\"\n        cy=\"60\"\n        r=\"46\"\n        pathLength=\"100\"\n        [attr.stroke-dasharray]=\"indicatorDashArray()\"\n      ></circle>\n    } @else {\n      <g class=\"solaris-spinner__indicator\">\n        <path class=\"solaris-spinner__arc\" [attr.d]=\"ringArcPath\"></path>\n      </g>\n    }\n  </svg>\n}\n@if (isProgress()) {\n  <span class=\"solaris-spinner__content\">\n    <span class=\"solaris-spinner__header\">\n      @if (showPercent()) {\n        <span class=\"solaris-spinner__percent\">{{ clampedValue() }}%</span>\n      }\n      @if (resolvedLabel(); as label) {\n        <span class=\"solaris-spinner__label\">{{ label }}</span>\n      }\n    </span>\n    @for (line of resolvedDescription(); track $index) {\n      <span class=\"solaris-spinner__description\">{{ line }}</span>\n    }\n  </span>\n} @else if (resolvedLabel(); as label) {\n  <span class=\"solaris-spinner__label\">{{ label }}</span>\n}\n", styles: [":host{--solaris-spinner-size: var(--solaris-spacing-6);--solaris-spinner-thickness: 15;--solaris-spinner-color: var(--solaris-primary-base);--solaris-spinner-track-color: var(--solaris-spinner-color);--solaris-spinner-track-opacity: var(--solaris-opacity-20);--solaris-spinner-custom-color: var(--solaris-primary-base);--solaris-spinner-animation-duration: var(--solaris-motion-duration-slow);--solaris-spinner-animation-easing: var(--solaris-motion-easing-linear);--solaris-spinner-stacked-step: 0;--solaris-spinner-stacked-opacity-active: var(--solaris-opacity-100);--solaris-spinner-stacked-opacity-mid: var(--solaris-opacity-50);--solaris-spinner-stacked-opacity-inactive: var(--solaris-opacity-20);display:inline-flex;align-items:center;gap:var(--solaris-spacing-2);box-sizing:border-box;color:var(--solaris-spinner-color);font-family:var(--solaris-font-family-sans)}.solaris-spinner__ring{position:relative;display:block;box-sizing:border-box;flex-shrink:0;width:var(--solaris-spinner-size);height:var(--solaris-spinner-size);overflow:visible;shape-rendering:geometricprecision}.solaris-spinner__track,.solaris-spinner__indicator{fill:none;stroke-linecap:round}.solaris-spinner__track{stroke:var(--solaris-spinner-track-color);stroke-width:var(--solaris-spinner-thickness);opacity:var(--solaris-spinner-track-opacity)}.solaris-spinner__indicator{stroke:var(--solaris-spinner-color);stroke-width:var(--solaris-spinner-thickness)}:host([data-variant=ring]) .solaris-spinner__indicator{transform-box:view-box;transform-origin:50% 50%;animation:solaris-spinner-rotate var(--solaris-spinner-animation-duration) var(--solaris-spinner-animation-easing) infinite}:host([data-variant=progress]) .solaris-spinner__indicator{transform:rotate(-90deg);transform-box:fill-box;transform-origin:center;transition:stroke-dasharray var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-spinner__bar{fill:none;stroke:var(--solaris-spinner-color);stroke-width:var(--solaris-spinner-thickness);stroke-linecap:round;animation:solaris-spinner-stacked-bar var(--solaris-spinner-animation-duration) var(--solaris-spinner-animation-easing) infinite;animation-delay:calc(var(--solaris-spinner-animation-duration) * var(--solaris-spinner-stacked-step))}.solaris-spinner__label{font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-spinner__content{display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--solaris-spacing-1)}.solaris-spinner__header{display:inline-flex;align-items:baseline;gap:var(--solaris-spacing-2)}.solaris-spinner__percent{font-size:var(--solaris-font-size-md);font-weight:var(--solaris-font-weight-semibold);line-height:var(--solaris-line-height-md);font-variant-numeric:tabular-nums}.solaris-spinner__description{font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);color:var(--solaris-text-muted)}:host([data-variant=progress]){align-items:flex-start}:host([data-size=sm]){--solaris-spinner-size: var(--solaris-spacing-4)}:host([data-size=lg]){--solaris-spinner-size: var(--solaris-spacing-8)}:host([data-size=xl]){--solaris-spinner-size: var(--solaris-spacing-16)}:host([data-speed=slow]){--solaris-spinner-animation-duration: var(--solaris-motion-duration-slower)}:host([data-speed=fast]){--solaris-spinner-animation-duration: var(--solaris-motion-duration-normal)}:host([data-easing=ease]){--solaris-spinner-animation-easing: var(--solaris-motion-easing-standard)}:host([data-easing=ease-in]){--solaris-spinner-animation-easing: var(--solaris-motion-easing-accelerate)}:host([data-easing=ease-out]){--solaris-spinner-animation-easing: var(--solaris-motion-easing-decelerate)}:host([data-easing=ease-in-out]){--solaris-spinner-animation-easing: var(--solaris-motion-easing-standard)}:host([data-easing=spring]){--solaris-spinner-animation-easing: var(--solaris-motion-easing-spring)}:host([data-color=neutral]){--solaris-spinner-color: var(--solaris-text-muted)}:host([data-color=primary]){--solaris-spinner-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-spinner-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-spinner-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-spinner-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-spinner-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-spinner-color: var(--solaris-spinner-custom-color)}:host([data-backdrop]){position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--solaris-backdrop);z-index:var(--solaris-z-index-overlay)}:host([data-backdrop]) .solaris-spinner__label{color:var(--solaris-text-inverse)}@media(prefers-reduced-motion:reduce){:host([data-variant=ring]) .solaris-spinner__indicator{animation:none;opacity:var(--solaris-opacity-50)}:host([data-variant=stacked]) .solaris-spinner__bar{animation:none}}[data-reduced-motion=true] solaris-spinner[data-variant=ring] .solaris-spinner__indicator{animation:none;opacity:var(--solaris-opacity-50)}[data-reduced-motion=true] solaris-spinner[data-variant=stacked] .solaris-spinner__bar{animation:none}@keyframes solaris-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-spinner-stacked-bar{0%{opacity:var(--solaris-spinner-stacked-opacity-inactive)}20%{opacity:var(--solaris-spinner-stacked-opacity-active)}40%{opacity:var(--solaris-spinner-stacked-opacity-mid)}60%{opacity:var(--solaris-spinner-stacked-opacity-inactive)}to{opacity:var(--solaris-spinner-stacked-opacity-inactive)}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], easing: [{ type: i0.Input, args: [{ isSignal: true, alias: "easing", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercent", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], descriptionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionKey", required: false }] }] } });
+
 // SECURITY_EXCEPTION_FILE: ElementRef.nativeElement.tagName is the standard Angular API to differentiate <button> vs <a> for correct disabled/type behavior.
 // SECURITY_EXCEPTION_FILE: ElementRef.nativeElement.getAttribute/setAttribute is the standard Angular approach to handle default button type.
 // SECURITY_EXCEPTION_FILE: ElementRef.nativeElement.setAttribute required for default <button> type behavior.
+// SECURITY_EXCEPTION_FILE: createComponent/insertBefore required to render the spinner component inside a native button host (directive has no template).
 class SolarisButtonDirective {
     appearance = input('solid', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
@@ -1711,6 +1872,10 @@ class SolarisButtonDirective {
     translate = inject(SolarisTranslateService, {
         optional: true,
     });
+    environmentInjector = inject(EnvironmentInjector);
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    spinnerRef = null;
     resolvedLoadingLabel = computed(() => {
         const label = this.loadingLabel();
         if (label) {
@@ -1732,6 +1897,38 @@ class SolarisButtonDirective {
         if (this.isButton && initialType === null) {
             this.elementRef.nativeElement.setAttribute('type', 'button');
         }
+        effect(() => {
+            if (this.loading()) {
+                this.attachSpinner();
+            }
+            else {
+                this.detachSpinner();
+            }
+        });
+        this.destroyRef.onDestroy(() => this.detachSpinner());
+    }
+    attachSpinner() {
+        if (this.spinnerRef || !isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const spinnerRef = createComponent(SolarisSpinnerComponent, {
+            environmentInjector: this.environmentInjector,
+        });
+        spinnerRef.setInput('size', 'sm');
+        spinnerRef.setInput('color', 'custom');
+        spinnerRef.setInput('label', '');
+        spinnerRef.setInput('ariaHidden', true);
+        spinnerRef.changeDetectorRef.detectChanges();
+        const spinnerEl = spinnerRef.location.nativeElement;
+        this.elementRef.nativeElement.insertBefore(spinnerEl, this.elementRef.nativeElement.firstChild);
+        this.spinnerRef = spinnerRef;
+    }
+    detachSpinner() {
+        if (!this.spinnerRef) {
+            return;
+        }
+        this.spinnerRef.destroy();
+        this.spinnerRef = null;
     }
     onClick(event) {
         if (this.isEffectivelyDisabled() && this.isAnchor) {
@@ -8388,6 +8585,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "@if (isMultiLine()) {\n  @for (width of lineWidths(); track $index) {\n    <span class=\"solaris-skeleton-line\" [style.width]=\"width\"></span>\n  }\n}\n", styles: [":host{--solaris-skeleton-width: 100%;--solaris-skeleton-gap: var(--solaris-spacing-2);--solaris-skeleton-height: var(--solaris-spacing-4);--solaris-skeleton-radius: var(--solaris-radius-sm);--solaris-skeleton-background: var(--solaris-surface-muted);--solaris-skeleton-highlight: var(--solaris-surface-raised);--solaris-skeleton-animation-easing: var(--solaris-motion-easing-standard);--solaris-skeleton-animation-duration: var(--solaris-motion-duration-slower);min-width:0;min-height:0;display:block;box-sizing:border-box;width:var(--solaris-skeleton-width);height:var(--solaris-skeleton-height);border-radius:var(--solaris-skeleton-radius);background:var(--solaris-skeleton-background)}:host([data-multiline]){display:flex;height:auto;animation:none;background:none;border-radius:var(--solaris-radius-none);overflow:visible;position:static;flex-direction:column;gap:var(--solaris-skeleton-gap)}:host([data-multiline]):after{content:none;animation:none}.solaris-skeleton-line{display:block;box-sizing:border-box;min-width:0;min-height:0;height:var(--solaris-skeleton-height);border-radius:var(--solaris-skeleton-radius);background:var(--solaris-skeleton-background)}:host([data-variant=text]){--solaris-skeleton-height: var(--solaris-spacing-4)}:host([data-variant=rectangular]){--solaris-skeleton-height: var(--solaris-spacing-20)}:host([data-variant=circular]){--solaris-skeleton-height: var(--solaris-spacing-12);--solaris-skeleton-width: var(--solaris-spacing-12)}:host([data-size=sm]){--solaris-skeleton-height: var(--solaris-spacing-3)}:host([data-size=sm][data-variant=rectangular]){--solaris-skeleton-height: 3.75rem}:host([data-size=sm][data-variant=circular]){--solaris-skeleton-width: var(--solaris-spacing-6);--solaris-skeleton-height: var(--solaris-spacing-6)}:host([data-size=lg]){--solaris-skeleton-height: var(--solaris-spacing-5)}:host([data-size=lg][data-variant=rectangular]){--solaris-skeleton-height: 6.25rem}:host([data-size=lg][data-variant=circular]){--solaris-skeleton-width: 2.25rem;--solaris-skeleton-height: 2.25rem}:host([data-density=compact]){--solaris-skeleton-height: .375rem}:host([data-density=compact][data-variant=rectangular]){--solaris-skeleton-height: var(--solaris-spacing-12)}:host([data-density=compact][data-variant=circular]){--solaris-skeleton-width: var(--solaris-spacing-5);--solaris-skeleton-height: var(--solaris-spacing-5)}:host([data-density=comfortable]){--solaris-skeleton-height: var(--solaris-spacing-3)}:host([data-density=comfortable][data-variant=rectangular]){--solaris-skeleton-height: 5.5rem}:host([data-density=comfortable][data-variant=circular]){--solaris-skeleton-width: 2.25rem;--solaris-skeleton-height: 2.25rem}:host([data-radius=none]){--solaris-skeleton-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-skeleton-radius: var(--solaris-radius-sm)}:host([data-radius=full]){--solaris-skeleton-radius: var(--solaris-radius-full)}:host([data-animation=pulse]){animation:solaris-skeleton-pulse var(--solaris-skeleton-animation-duration) var(--solaris-skeleton-animation-easing) infinite}:host([data-animation=pulse]) .solaris-skeleton-line{animation:solaris-skeleton-pulse var(--solaris-skeleton-animation-duration) var(--solaris-skeleton-animation-easing) infinite}:host([data-animation=wave]){overflow:hidden;position:relative}:host([data-animation=wave]):after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--solaris-skeleton-highlight) 50%,transparent 100%);background-size:200% 100%;animation:solaris-skeleton-wave var(--solaris-skeleton-animation-duration) var(--solaris-skeleton-animation-easing) infinite}:host([data-animation=wave]) .solaris-skeleton-line{overflow:hidden;position:relative}:host([data-animation=wave]) .solaris-skeleton-line:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--solaris-skeleton-highlight) 50%,transparent 100%);background-size:200% 100%;animation:solaris-skeleton-wave var(--solaris-skeleton-animation-duration) var(--solaris-skeleton-animation-easing) infinite}:host([data-animation=wave][data-multiline]){overflow:visible;position:static}:host([data-animation=wave][data-multiline]):after{content:none;animation:none}:host([data-animation=none]){animation:none}:host([data-animation=none]):after{content:none;animation:none}@media(prefers-reduced-motion:reduce){:host([data-animation=pulse]){animation:none}:host([data-animation=pulse]) .solaris-skeleton-line{animation:none}:host([data-animation=wave]):after{animation:none;content:none}:host([data-animation=wave]) .solaris-skeleton-line:after{animation:none;content:none}:host([data-animation=wave][data-multiline]):after{content:none;animation:none}}[data-reduced-motion=true] solaris-skeleton[data-animation=pulse]{animation:none}[data-reduced-motion=true] solaris-skeleton[data-animation=pulse] .solaris-skeleton-line{animation:none}[data-reduced-motion=true] solaris-skeleton[data-animation=wave]:after{animation:none;content:none}[data-reduced-motion=true] solaris-skeleton[data-animation=wave] .solaris-skeleton-line:after{animation:none;content:none}[data-reduced-motion=true] solaris-skeleton[data-animation=wave][data-multiline]:after{content:none;animation:none}@keyframes solaris-skeleton-pulse{0%{opacity:var(--solaris-opacity-100)}50%{opacity:var(--solaris-opacity-50)}to{opacity:var(--solaris-opacity-100)}}@keyframes solaris-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
 
+class SolarisProgressComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    showPercent = input(false, ...(ngDevMode ? [{ debugName: "showPercent" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelKey = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
+    translate = inject(SolarisTranslateService, {
+        optional: true,
+    });
+    clampedValue = computed(() => {
+        const value = this.value();
+        if (Number.isFinite(value)) {
+            return Math.min(100, Math.max(0, Math.round(value)));
+        }
+        return 0;
+    }, ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
+    percentText = computed(() => {
+        const percent = this.clampedValue();
+        return this.indeterminate() ? 0 : percent;
+    }, ...(ngDevMode ? [{ debugName: "percentText" }] : /* istanbul ignore next */ []));
+    resolvedLabel = computed(() => {
+        const label = this.label();
+        if (label !== undefined) {
+            return label === '' ? null : label;
+        }
+        const key = this.labelKey();
+        if (key && this.translate) {
+            return this.translate.translate(key);
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => {
+        const aria = this.ariaLabel();
+        if (aria) {
+            return aria;
+        }
+        const key = this.ariaLabelKey();
+        if (key && this.translate) {
+            return this.translate.translate(key);
+        }
+        const label = this.resolvedLabel();
+        if (label) {
+            return label;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    indeterminateText = computed(() => {
+        if (this.translate) {
+            return this.translate.translate('solaris.progress.indeterminate');
+        }
+        return 'Indeterminate progress';
+    }, ...(ngDevMode ? [{ debugName: "indeterminateText" }] : /* istanbul ignore next */ []));
+    resolvedValueText = computed(() => {
+        const label = this.resolvedLabel();
+        if (this.indeterminate()) {
+            return label
+                ? `${label}, ${this.indeterminateText()}`
+                : this.indeterminateText();
+        }
+        const percent = `${this.clampedValue()} percent`;
+        return label ? `${label}, ${percent}` : percent;
+    }, ...(ngDevMode ? [{ debugName: "resolvedValueText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisProgressComponent, isStandalone: true, selector: "solaris-progress", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, showPercent: { classPropertyName: "showPercent", publicName: "showPercent", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-size": "size()", "attr.data-color": "color()", "attr.data-indeterminate": "indeterminate() ? \"\" : null", "attr.aria-valuemin": "indeterminate() ? null : 0", "attr.aria-valuemax": "indeterminate() ? null : 100", "attr.aria-valuenow": "indeterminate() ? null : clampedValue()", "attr.aria-label": "resolvedAriaLabel()", "attr.aria-valuetext": "resolvedValueText()" }, classAttribute: "solaris-progress" }, ngImport: i0, template: "@if (resolvedLabel(); as label) {\n  <span class=\"solaris-progress__label\">{{ label }}</span>\n}\n<div class=\"solaris-progress__track\" role=\"presentation\" aria-hidden=\"true\">\n  <div\n    class=\"solaris-progress__fill\"\n    [class.solaris-progress__fill--indeterminate]=\"indeterminate()\"\n    [style.--solaris-progress-fill-width.%]=\"percentText()\"\n  ></div>\n</div>\n@if (showPercent() && !indeterminate()) {\n  <span class=\"solaris-progress__percent\">{{ percentText() }}%</span>\n}\n", styles: [":host{--solaris-progress-height: var(--solaris-spacing-2);--solaris-progress-radius: var(--solaris-radius-full);--solaris-progress-color: var(--solaris-primary-base);--solaris-progress-custom-color: var(--solaris-primary-base);--solaris-progress-track-color: var(--solaris-surface-muted);--solaris-progress-animation-duration: var(--solaris-motion-duration-slower);--solaris-progress-fill-width: 100%;display:flex;align-items:center;gap:var(--solaris-spacing-3);box-sizing:border-box;color:var(--solaris-text-muted);font-family:var(--solaris-font-family-sans)}.solaris-progress__track{position:relative;display:block;flex:1 1 0;overflow:hidden;box-sizing:border-box;width:100%;height:var(--solaris-progress-height);background:var(--solaris-progress-track-color);border-radius:var(--solaris-progress-radius)}.solaris-progress__fill{position:absolute;inset:0 auto 0 0;box-sizing:border-box;width:var(--solaris-progress-fill-width);background:var(--solaris-progress-color);border-radius:inherit;transform-origin:left center;transition:width var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-progress__fill--indeterminate{width:40%;animation:solaris-progress-slide var(--solaris-progress-animation-duration) var(--solaris-motion-easing-standard) infinite}.solaris-progress__label,.solaris-progress__percent{font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);white-space:nowrap}.solaris-progress__percent{font-variant-numeric:tabular-nums}:host([data-size=sm]){--solaris-progress-height: var(--solaris-border-width-xl)}:host([data-size=lg]){--solaris-progress-height: var(--solaris-spacing-3)}:host([data-color=neutral]){--solaris-progress-color: var(--solaris-text-muted)}:host([data-color=primary]){--solaris-progress-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-progress-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-progress-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-progress-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-progress-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-progress-color: var(--solaris-progress-custom-color)}@media(prefers-reduced-motion:reduce){.solaris-progress__fill--indeterminate{animation:none}}[data-reduced-motion=true] solaris-progress .solaris-progress__fill--indeterminate{animation:none}@keyframes solaris-progress-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-progress', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-progress',
+                        role: 'progressbar',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-color]': 'color()',
+                        '[attr.data-indeterminate]': 'indeterminate() ? "" : null',
+                        '[attr.aria-valuemin]': 'indeterminate() ? null : 0',
+                        '[attr.aria-valuemax]': 'indeterminate() ? null : 100',
+                        '[attr.aria-valuenow]': 'indeterminate() ? null : clampedValue()',
+                        '[attr.aria-label]': 'resolvedAriaLabel()',
+                        '[attr.aria-valuetext]': 'resolvedValueText()',
+                    }, template: "@if (resolvedLabel(); as label) {\n  <span class=\"solaris-progress__label\">{{ label }}</span>\n}\n<div class=\"solaris-progress__track\" role=\"presentation\" aria-hidden=\"true\">\n  <div\n    class=\"solaris-progress__fill\"\n    [class.solaris-progress__fill--indeterminate]=\"indeterminate()\"\n    [style.--solaris-progress-fill-width.%]=\"percentText()\"\n  ></div>\n</div>\n@if (showPercent() && !indeterminate()) {\n  <span class=\"solaris-progress__percent\">{{ percentText() }}%</span>\n}\n", styles: [":host{--solaris-progress-height: var(--solaris-spacing-2);--solaris-progress-radius: var(--solaris-radius-full);--solaris-progress-color: var(--solaris-primary-base);--solaris-progress-custom-color: var(--solaris-primary-base);--solaris-progress-track-color: var(--solaris-surface-muted);--solaris-progress-animation-duration: var(--solaris-motion-duration-slower);--solaris-progress-fill-width: 100%;display:flex;align-items:center;gap:var(--solaris-spacing-3);box-sizing:border-box;color:var(--solaris-text-muted);font-family:var(--solaris-font-family-sans)}.solaris-progress__track{position:relative;display:block;flex:1 1 0;overflow:hidden;box-sizing:border-box;width:100%;height:var(--solaris-progress-height);background:var(--solaris-progress-track-color);border-radius:var(--solaris-progress-radius)}.solaris-progress__fill{position:absolute;inset:0 auto 0 0;box-sizing:border-box;width:var(--solaris-progress-fill-width);background:var(--solaris-progress-color);border-radius:inherit;transform-origin:left center;transition:width var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-progress__fill--indeterminate{width:40%;animation:solaris-progress-slide var(--solaris-progress-animation-duration) var(--solaris-motion-easing-standard) infinite}.solaris-progress__label,.solaris-progress__percent{font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);white-space:nowrap}.solaris-progress__percent{font-variant-numeric:tabular-nums}:host([data-size=sm]){--solaris-progress-height: var(--solaris-border-width-xl)}:host([data-size=lg]){--solaris-progress-height: var(--solaris-spacing-3)}:host([data-color=neutral]){--solaris-progress-color: var(--solaris-text-muted)}:host([data-color=primary]){--solaris-progress-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-progress-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-progress-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-progress-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-progress-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-progress-color: var(--solaris-progress-custom-color)}@media(prefers-reduced-motion:reduce){.solaris-progress__fill--indeterminate{animation:none}}[data-reduced-motion=true] solaris-progress .solaris-progress__fill--indeterminate{animation:none}@keyframes solaris-progress-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], showPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercent", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }] } });
+
+class SolarisLoadingTextComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    speed = input('normal', ...(ngDevMode ? [{ debugName: "speed" }] : /* istanbul ignore next */ []));
+    text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+    textKey = input(...(ngDevMode ? [undefined, { debugName: "textKey" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelKey = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
+    translate = inject(SolarisTranslateService, {
+        optional: true,
+    });
+    resolvedText = computed(() => {
+        const text = this.text();
+        if (text !== undefined) {
+            return text === '' ? null : text;
+        }
+        const key = this.textKey();
+        if (key && this.translate) {
+            return this.translate.translate(key);
+        }
+        if (this.translate) {
+            return this.translate.translate('solaris.loadingText.loading');
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedText" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => {
+        const aria = this.ariaLabel();
+        if (aria) {
+            return aria;
+        }
+        const key = this.ariaLabelKey();
+        if (key && this.translate) {
+            return this.translate.translate(key);
+        }
+        return this.resolvedText();
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisLoadingTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SolarisLoadingTextComponent, isStandalone: true, selector: "solaris-loading-text", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, textKey: { classPropertyName: "textKey", publicName: "textKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "attr.data-size": "size()", "attr.data-color": "color()", "attr.data-speed": "speed()", "attr.aria-label": "resolvedAriaLabel()" }, classAttribute: "solaris-loading-text" }, ngImport: i0, template: "<span class=\"solaris-loading-text__text\" [attr.data-text]=\"resolvedText()\">{{\n  resolvedText()\n}}</span>\n", styles: [":host{--solaris-loading-text-color: var(--solaris-text-default);--solaris-loading-text-shimmer-color: var(--solaris-text-inverse);--solaris-loading-text-shimmer-opacity: var(--solaris-opacity-40);--solaris-loading-text-custom-color: var(--solaris-primary-base);--solaris-loading-text-font-size: var(--solaris-font-size-md);--solaris-loading-text-font-weight: var(--solaris-font-weight-medium);--solaris-loading-text-line-height: var(--solaris-line-height-md);--solaris-loading-text-animation-duration: var( --solaris-motion-duration-slower );--solaris-loading-text-animation-easing: var(--solaris-motion-easing-linear);display:inline-block;box-sizing:border-box;max-width:100%;font-family:var(--solaris-font-family-sans);font-size:var(--solaris-loading-text-font-size);font-weight:var(--solaris-loading-text-font-weight);line-height:var(--solaris-loading-text-line-height)}.solaris-loading-text__text{position:relative;display:inline-block;box-sizing:border-box;max-width:100%;color:var(--solaris-loading-text-color)}.solaris-loading-text__text:after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;color:transparent;background-image:linear-gradient(100deg,transparent 20%,var(--solaris-loading-text-shimmer-color) 50%,transparent 80%);background-size:200% 100%;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;opacity:var(--solaris-loading-text-shimmer-opacity);animation:solaris-loading-text-shimmer var(--solaris-loading-text-animation-duration) var(--solaris-loading-text-animation-easing) infinite}:host([data-size=sm]){--solaris-loading-text-font-size: var(--solaris-font-size-sm)}:host([data-size=lg]){--solaris-loading-text-font-size: var(--solaris-font-size-lg)}:host([data-size=xl]){--solaris-loading-text-font-size: var(--solaris-font-size-xl)}:host([data-speed=slow]){--solaris-loading-text-animation-duration: var( --solaris-motion-duration-slowest )}:host([data-speed=fast]){--solaris-loading-text-animation-duration: var( --solaris-motion-duration-slow )}:host([data-color=neutral]){--solaris-loading-text-color: var(--solaris-text-muted)}:host([data-color=primary]){--solaris-loading-text-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-loading-text-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-loading-text-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-loading-text-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-loading-text-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-loading-text-color: var(--solaris-loading-text-custom-color)}@media(prefers-reduced-motion:reduce){:host .solaris-loading-text__text:after{animation:none;opacity:var(--solaris-opacity-0)}}[data-reduced-motion=true] solaris-loading-text .solaris-loading-text__text:after{animation:none;opacity:var(--solaris-opacity-0)}@keyframes solaris-loading-text-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisLoadingTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-loading-text', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-loading-text',
+                        role: 'status',
+                        'aria-live': 'polite',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-color]': 'color()',
+                        '[attr.data-speed]': 'speed()',
+                        '[attr.aria-label]': 'resolvedAriaLabel()',
+                    }, template: "<span class=\"solaris-loading-text__text\" [attr.data-text]=\"resolvedText()\">{{\n  resolvedText()\n}}</span>\n", styles: [":host{--solaris-loading-text-color: var(--solaris-text-default);--solaris-loading-text-shimmer-color: var(--solaris-text-inverse);--solaris-loading-text-shimmer-opacity: var(--solaris-opacity-40);--solaris-loading-text-custom-color: var(--solaris-primary-base);--solaris-loading-text-font-size: var(--solaris-font-size-md);--solaris-loading-text-font-weight: var(--solaris-font-weight-medium);--solaris-loading-text-line-height: var(--solaris-line-height-md);--solaris-loading-text-animation-duration: var( --solaris-motion-duration-slower );--solaris-loading-text-animation-easing: var(--solaris-motion-easing-linear);display:inline-block;box-sizing:border-box;max-width:100%;font-family:var(--solaris-font-family-sans);font-size:var(--solaris-loading-text-font-size);font-weight:var(--solaris-loading-text-font-weight);line-height:var(--solaris-loading-text-line-height)}.solaris-loading-text__text{position:relative;display:inline-block;box-sizing:border-box;max-width:100%;color:var(--solaris-loading-text-color)}.solaris-loading-text__text:after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;color:transparent;background-image:linear-gradient(100deg,transparent 20%,var(--solaris-loading-text-shimmer-color) 50%,transparent 80%);background-size:200% 100%;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;opacity:var(--solaris-loading-text-shimmer-opacity);animation:solaris-loading-text-shimmer var(--solaris-loading-text-animation-duration) var(--solaris-loading-text-animation-easing) infinite}:host([data-size=sm]){--solaris-loading-text-font-size: var(--solaris-font-size-sm)}:host([data-size=lg]){--solaris-loading-text-font-size: var(--solaris-font-size-lg)}:host([data-size=xl]){--solaris-loading-text-font-size: var(--solaris-font-size-xl)}:host([data-speed=slow]){--solaris-loading-text-animation-duration: var( --solaris-motion-duration-slowest )}:host([data-speed=fast]){--solaris-loading-text-animation-duration: var( --solaris-motion-duration-slow )}:host([data-color=neutral]){--solaris-loading-text-color: var(--solaris-text-muted)}:host([data-color=primary]){--solaris-loading-text-color: var(--solaris-primary-base)}:host([data-color=success]){--solaris-loading-text-color: var(--solaris-success-base)}:host([data-color=warning]){--solaris-loading-text-color: var(--solaris-warning-base)}:host([data-color=danger]){--solaris-loading-text-color: var(--solaris-danger-base)}:host([data-color=info]){--solaris-loading-text-color: var(--solaris-info-base)}:host([data-color=custom]){--solaris-loading-text-color: var(--solaris-loading-text-custom-color)}@media(prefers-reduced-motion:reduce){:host .solaris-loading-text__text:after{animation:none;opacity:var(--solaris-opacity-0)}}[data-reduced-motion=true] solaris-loading-text .solaris-loading-text__text:after{animation:none;opacity:var(--solaris-opacity-0)}@keyframes solaris-loading-text-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], textKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "textKey", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }] } });
+
 const SOLARIS_TOAST_CONFIG = new InjectionToken('SolarisToastConfig');
 const SOLARIS_TOAST_DEFAULT_CONFIG = {
     position: 'bottom-center',
@@ -11947,89 +12281,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 const SOLARIS_ACCORDION = new InjectionToken('SolarisAccordion');
 
-class SolarisAccordionComponent {
-    appearance = input('boxed', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    allowToggle = input(true, { ...(ngDevMode ? { debugName: "allowToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    headingLevel = input(3, ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
-    expandIcon = input('chevron-down', ...(ngDevMode ? [{ debugName: "expandIcon" }] : /* istanbul ignore next */ []));
-    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    items = contentChildren(SolarisCollapsibleComponent, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    instanceId = nextIdFor('solaris-accordion');
-    resolvedValue = computed(() => {
-        const value = this.value();
-        if (value === undefined) {
-            return this.type() === 'multiple' ? [] : undefined;
-        }
-        if (this.type() === 'multiple') {
-            return Array.isArray(value) ? value : [value];
-        }
-        return Array.isArray(value) ? value[0] : value;
-    }, ...(ngDevMode ? [{ debugName: "resolvedValue" }] : /* istanbul ignore next */ []));
-    isOpen(value) {
-        const resolved = this.resolvedValue();
-        if (Array.isArray(resolved)) {
-            return value !== undefined && resolved.includes(value);
-        }
-        return resolved === value;
-    }
-    toggle(value) {
-        if (this.disabled()) {
-            return;
-        }
-        const resolved = this.resolvedValue();
-        if (this.type() === 'multiple') {
-            const list = Array.isArray(resolved) ? [...resolved] : [];
-            const index = list.indexOf(value);
-            if (index >= 0) {
-                list.splice(index, 1);
-            }
-            else if (value !== undefined) {
-                list.push(value);
-            }
-            this.value.set(list);
-            return;
-        }
-        if (resolved === value) {
-            if (this.allowToggle()) {
-                this.value.set(undefined);
-            }
-            return;
-        }
-        this.value.set(value);
-    }
-    generatePanelId(value) {
-        return `${this.instanceId}-panel-${String(value)}`;
-    }
-    generateTriggerId(value) {
-        return `${this.instanceId}-trigger-${String(value)}`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SolarisAccordionComponent, isStandalone: true, selector: "solaris-accordion", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowToggle: { classPropertyName: "allowToggle", publicName: "allowToggle", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-type": "type()", "attr.data-size": "size()", "attr.data-disabled": "disabled() ? \"\" : null" }, classAttribute: "solaris-accordion" }, providers: [
-            {
-                provide: SOLARIS_ACCORDION,
-                useExisting: SolarisAccordionComponent,
-            },
-        ], queries: [{ propertyName: "items", predicate: SolarisCollapsibleComponent, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-accordion__inner\">\n  <ng-content select=\"solaris-collapsible\" />\n</div>\n", styles: [":host{--solaris-accordion-gap: var(--solaris-spacing-2);display:block;box-sizing:border-box}.solaris-accordion__inner{display:flex;flex-direction:column;gap:var(--solaris-accordion-gap)}:host([data-appearance=lined]) .solaris-accordion__inner{gap:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAccordionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'solaris-accordion', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: SOLARIS_ACCORDION,
-                            useExisting: SolarisAccordionComponent,
-                        },
-                    ], host: {
-                        class: 'solaris-accordion',
-                        '[attr.data-appearance]': 'appearance()',
-                        '[attr.data-type]': 'type()',
-                        '[attr.data-size]': 'size()',
-                        '[attr.data-disabled]': 'disabled() ? "" : null',
-                    }, template: "<div class=\"solaris-accordion__inner\">\n  <ng-content select=\"solaris-collapsible\" />\n</div>\n", styles: [":host{--solaris-accordion-gap: var(--solaris-spacing-2);display:block;box-sizing:border-box}.solaris-accordion__inner{display:flex;flex-direction:column;gap:var(--solaris-accordion-gap)}:host([data-appearance=lined]) .solaris-accordion__inner{gap:0}\n"] }]
-        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToggle", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisCollapsibleComponent), { isSignal: true }] }] } });
-
 class SolarisCollapsibleComponent {
     elementRef = inject(ElementRef);
     translateService = inject(SolarisTranslateService, {
@@ -12130,6 +12381,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "@if (headingLevel()) {\n  @switch (headingLevel()) {\n    @case (2) {\n      <h2 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h2>\n    }\n    @case (3) {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n    @case (4) {\n      <h4 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h4>\n    }\n    @case (5) {\n      <h5 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h5>\n    }\n    @case (6) {\n      <h6 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h6>\n    }\n    @default {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n  }\n} @else {\n  <div class=\"solaris-collapsible__header\">\n    <ng-container *ngTemplateOutlet=\"triggerContent\" />\n  </div>\n}\n\n<ng-template #triggerContent>\n  <button\n    type=\"button\"\n    class=\"solaris-collapsible__trigger\"\n    [id]=\"triggerId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"panelId()\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"solaris-collapsible__trigger-label\">\n      {{ labelText() }}\n    </span>\n    <solaris-icon\n      [name]=\"effectiveIcon()\"\n      class=\"solaris-collapsible__trigger-icon\"\n      [decorative]=\"true\"\n    />\n  </button>\n</ng-template>\n\n<div\n  class=\"solaris-collapsible__panel\"\n  [id]=\"panelId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"triggerId()\"\n  [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n  [attr.inert]=\"isOpen() ? null : ''\"\n>\n  <div class=\"solaris-collapsible__panel-inner\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
+class SolarisAccordionComponent {
+    appearance = input('boxed', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    allowToggle = input(true, { ...(ngDevMode ? { debugName: "allowToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    headingLevel = input(3, ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+    expandIcon = input('chevron-down', ...(ngDevMode ? [{ debugName: "expandIcon" }] : /* istanbul ignore next */ []));
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    items = contentChildren(SolarisCollapsibleComponent, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    instanceId = nextIdFor('solaris-accordion');
+    resolvedValue = computed(() => {
+        const value = this.value();
+        if (value === undefined) {
+            return this.type() === 'multiple' ? [] : undefined;
+        }
+        if (this.type() === 'multiple') {
+            return Array.isArray(value) ? value : [value];
+        }
+        return Array.isArray(value) ? value[0] : value;
+    }, ...(ngDevMode ? [{ debugName: "resolvedValue" }] : /* istanbul ignore next */ []));
+    isOpen(value) {
+        const resolved = this.resolvedValue();
+        if (Array.isArray(resolved)) {
+            return value !== undefined && resolved.includes(value);
+        }
+        return resolved === value;
+    }
+    toggle(value) {
+        if (this.disabled()) {
+            return;
+        }
+        const resolved = this.resolvedValue();
+        if (this.type() === 'multiple') {
+            const list = Array.isArray(resolved) ? [...resolved] : [];
+            const index = list.indexOf(value);
+            if (index >= 0) {
+                list.splice(index, 1);
+            }
+            else if (value !== undefined) {
+                list.push(value);
+            }
+            this.value.set(list);
+            return;
+        }
+        if (resolved === value) {
+            if (this.allowToggle()) {
+                this.value.set(undefined);
+            }
+            return;
+        }
+        this.value.set(value);
+    }
+    generatePanelId(value) {
+        return `${this.instanceId}-panel-${String(value)}`;
+    }
+    generateTriggerId(value) {
+        return `${this.instanceId}-trigger-${String(value)}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SolarisAccordionComponent, isStandalone: true, selector: "solaris-accordion", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowToggle: { classPropertyName: "allowToggle", publicName: "allowToggle", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, expandIcon: { classPropertyName: "expandIcon", publicName: "expandIcon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-type": "type()", "attr.data-size": "size()", "attr.data-disabled": "disabled() ? \"\" : null" }, classAttribute: "solaris-accordion" }, providers: [
+            {
+                provide: SOLARIS_ACCORDION,
+                useExisting: SolarisAccordionComponent,
+            },
+        ], queries: [{ propertyName: "items", predicate: SolarisCollapsibleComponent, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-accordion__inner\">\n  <ng-content select=\"solaris-collapsible\" />\n</div>\n", styles: [":host{--solaris-accordion-gap: var(--solaris-spacing-2);display:block;box-sizing:border-box}.solaris-accordion__inner{display:flex;flex-direction:column;gap:var(--solaris-accordion-gap)}:host([data-appearance=lined]) .solaris-accordion__inner{gap:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-accordion', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: SOLARIS_ACCORDION,
+                            useExisting: SolarisAccordionComponent,
+                        },
+                    ], host: {
+                        class: 'solaris-accordion',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-type]': 'type()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                    }, template: "<div class=\"solaris-accordion__inner\">\n  <ng-content select=\"solaris-collapsible\" />\n</div>\n", styles: [":host{--solaris-accordion-gap: var(--solaris-spacing-2);display:block;box-sizing:border-box}.solaris-accordion__inner{display:flex;flex-direction:column;gap:var(--solaris-accordion-gap)}:host([data-appearance=lined]) .solaris-accordion__inner{gap:0}\n"] }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToggle", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], expandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandIcon", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SolarisCollapsibleComponent), { isSignal: true }] }] } });
+
 // SECURITY_EXCEPTION_FILE: document.querySelector required to find rename input. SSR-safe via guard.
 class SolarisEditableTabsComponent {
     translateService = inject(SolarisTranslateService, {
@@ -12575,5 +12909,5 @@ function provideSolaris(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisPasswordFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisPasswordValidator };
+export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisPasswordFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisPasswordValidator };
 //# sourceMappingURL=educarehq-solaris-ui.mjs.map