@besaitech/ng-design-system 0.0.70 → 0.0.72

package/fesm2022/besaitech-ng-design-system-charts.mjs

@@ -44,6 +44,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             args: [{ selector: 'ng-template[sdsChartTooltip]' }]
         }] });
 
+/**
+ * Replace the coloured swatch in front of each legend label with your own markup — an avatar, an icon, a
+ * logo. The template receives the entry as `$implicit` ({ key, label, color, hidden, row, other }); on a
+ * donut `row` is the slice's source row, so the swatch can show what the app knows about that category.
+ *
+ * Only the swatch is replaced: the chart keeps the label, the value/share, the toggle button, the hover
+ * emphasis and the keyboard behaviour, and fades the swatch while its entry is hidden. Keep it small
+ * (~20 px) and decorative — the label already names the entry. Return the default look for some entries
+ * (e.g. the "Other" slice) by drawing a dot in `entry.color`.
+ *
+ * Works on line, bar, scatter and donut charts.
+ *
+ * @example
+ * <sds-donut-chart [data]="spend" category="name" value="amount" color="color">
+ *   <ng-template sdsChartLegendSwatch let-entry>
+ *     @if (entry.row) {
+ *       <app-category-avatar [icon]="entry.row.icon" [color]="entry.color" [size]="20" />
+ *     } @else {
+ *       <span class="h-2.5 w-2.5 rounded-full" [style.background]="entry.color"></span>
+ *     }
+ *   </ng-template>
+ * </sds-donut-chart>
+ */
+class SdsChartLegendSwatch {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChartLegendSwatch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsChartLegendSwatch, isStandalone: true, selector: "ng-template[sdsChartLegendSwatch]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChartLegendSwatch, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[sdsChartLegendSwatch]' }]
+        }] });
+
 /*
  * Internal engine shared by every chart. Nothing here is exported from the public API: the charts
  * delegate the maths to d3 (scales, shapes, layouts) and keep rendering, theming and interaction in
@@ -641,6 +677,8 @@ class SdsChartFrame {
     subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     legend = input('top', ...(ngDevMode ? [{ debugName: "legend" }] : []));
+    /** A chart's projected `sdsChartLegendSwatch` template, drawn instead of the built-in swatch. */
+    swatchTpl = input(null, ...(ngDevMode ? [{ debugName: "swatchTpl" }] : []));
     hidden = input([], ...(ngDevMode ? [{ debugName: "hidden" }] : []));
     interactive = input(true, ...(ngDevMode ? [{ debugName: "interactive", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -657,6 +695,18 @@ class SdsChartFrame {
     focusKey = output();
     showTable = signal(false, ...(ngDevMode ? [{ debugName: "showTable" }] : []));
     hiddenSet = computed(() => new Set(this.hidden()), ...(ngDevMode ? [{ debugName: "hiddenSet" }] : []));
+    swatchContext(item) {
+        return {
+            $implicit: {
+                key: item.key,
+                label: item.label,
+                color: item.color,
+                hidden: this.isHidden(item.key),
+                row: item.row ?? null,
+                other: !!item.other,
+            },
+        };
+    }
     isHidden(key) {
         return this.hiddenSet().has(key);
     }
@@ -669,7 +719,7 @@ class SdsChartFrame {
         this.toggle.emit(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChartFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsChartFrame, isStandalone: true, selector: "sds-chart-frame", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, tableCaption: { classPropertyName: "tableCaption", publicName: "tableCaption", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", focusKey: "focusKey" }, host: { classAttribute: "block @container" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsChartFrame, isStandalone: true, selector: "sds-chart-frame", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, swatchTpl: { classPropertyName: "swatchTpl", publicName: "swatchTpl", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, tableCaption: { classPropertyName: "tableCaption", publicName: "tableCaption", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", focusKey: "focusKey" }, host: { classAttribute: "block @container" }, ngImport: i0, template: `
     <figure class="m-0 flex flex-col gap-3" [attr.aria-busy]="loading() || null">
       @if (heading() || subtitle() || tableToggle()) {
         <figcaption class="flex items-start justify-between gap-3">
@@ -755,7 +805,14 @@ class SdsChartFrame {
                 (focus)="onFocus(item.key)"
                 (blur)="focusKey.emit(null)"
               >
-                <ng-container [ngTemplateOutlet]="swatch" [ngTemplateOutletContext]="{ $implicit: item }" />
+                @if (swatchTpl(); as custom) {
+                  <!-- A custom swatch (sdsChartLegendSwatch): the frame fades it while its entry is hidden. -->
+                  <span class="inline-flex shrink-0 items-center transition-opacity motion-reduce:transition-none" [style.opacity]="isHidden(item.key) ? 0.4 : 1" aria-hidden="true">
+                    <ng-container [ngTemplateOutlet]="custom" [ngTemplateOutletContext]="swatchContext(item)" />
+                  </span>
+                } @else {
+                  <ng-container [ngTemplateOutlet]="swatch" [ngTemplateOutletContext]="{ $implicit: item }" />
+                }
                 <span class="truncate" [class.line-through]="isHidden(item.key)">{{ item.label }}</span>
                 @if (item.detail) {
                   <span class="ml-auto pl-2 font-semibold tabular-nums text-ink">{{ item.detail }}</span>
@@ -763,7 +820,14 @@ class SdsChartFrame {
               </button>
             } @else {
               <span class="inline-flex max-w-full items-center gap-2 px-1 py-0.5 text-xs text-ink-soft">
-                <ng-container [ngTemplateOutlet]="swatch" [ngTemplateOutletContext]="{ $implicit: item }" />
+                @if (swatchTpl(); as custom) {
+                  <!-- A custom swatch (sdsChartLegendSwatch): the frame fades it while its entry is hidden. -->
+                  <span class="inline-flex shrink-0 items-center transition-opacity motion-reduce:transition-none" [style.opacity]="isHidden(item.key) ? 0.4 : 1" aria-hidden="true">
+                    <ng-container [ngTemplateOutlet]="custom" [ngTemplateOutletContext]="swatchContext(item)" />
+                  </span>
+                } @else {
+                  <ng-container [ngTemplateOutlet]="swatch" [ngTemplateOutletContext]="{ $implicit: item }" />
+                }
                 <span class="truncate">{{ item.label }}</span>
                 @if (item.detail) {
                   <span class="ml-auto pl-2 font-semibold tabular-nums text-ink">{{ item.detail }}</span>
@@ -919,7 +983,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 (focus)="onFocus(item.key)"
                 (blur)="focusKey.emit(null)"
               >
-                <ng-container [ngTemplateOutlet]="swatch" [ngTemplateOutletContext]="{ $implicit: item }" />
+                @if (swatchTpl(); as custom) {
+                  <!-- A custom swatch (sdsChartLegendSwatch): the frame fades it while its entry is hidden. -->
+                  <span class="inline-flex shrink-0 items-center transition-opacity motion-reduce:transition-none" [style.opacity]="isHidden(item.key) ? 0.4 : 1" aria-hidden="true">
+                    <ng-container [ngTemplateOutlet]="custom" [ngTemplateOutletContext]="swatchContext(item)" />
+                  </span>
+                } @else {
+                  <ng-container [ngTemplateOutlet]="swatch" [ngTemplateOutletContext]="{ $implicit: item }" />
+                }
                 <span class="truncate" [class.line-through]="isHidden(item.key)">{{ item.label }}</span>
                 @if (item.detail) {
                   <span class="ml-auto pl-2 font-semibold tabular-nums text-ink">{{ item.detail }}</span>
@@ -927,7 +998,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               </button>
             } @else {
               <span class="inline-flex max-w-full items-center gap-2 px-1 py-0.5 text-xs text-ink-soft">
-                <ng-container [ngTemplateOutlet]="swatch" [ngTemplateOutletContext]="{ $implicit: item }" />
+                @if (swatchTpl(); as custom) {
+                  <!-- A custom swatch (sdsChartLegendSwatch): the frame fades it while its entry is hidden. -->
+                  <span class="inline-flex shrink-0 items-center transition-opacity motion-reduce:transition-none" [style.opacity]="isHidden(item.key) ? 0.4 : 1" aria-hidden="true">
+                    <ng-container [ngTemplateOutlet]="custom" [ngTemplateOutletContext]="swatchContext(item)" />
+                  </span>
+                } @else {
+                  <ng-container [ngTemplateOutlet]="swatch" [ngTemplateOutletContext]="{ $implicit: item }" />
+                }
                 <span class="truncate">{{ item.label }}</span>
                 @if (item.detail) {
                   <span class="ml-auto pl-2 font-semibold tabular-nums text-ink">{{ item.detail }}</span>
@@ -994,7 +1072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       </table>
     </ng-template>
   `, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: false }] }], tableCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableCaption", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], focusKey: [{ type: i0.Output, args: ["focusKey"] }] } });
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], swatchTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatchTpl", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: false }] }], tableCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableCaption", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], focusKey: [{ type: i0.Output, args: ["focusKey"] }] } });
 /** The floating tooltip: default rows, or the consumer's `sdsChartTooltip` template. */
 class SdsChartTooltipBox {
     ctx = input(null, ...(ngDevMode ? [{ debugName: "ctx" }] : []));
@@ -1362,6 +1440,8 @@ class SdsLineChart {
     /** A point was clicked (the series nearest the pointer) or activated with Enter. */
     pointClick = output();
     customTooltip = contentChild(SdsChartTooltip, ...(ngDevMode ? [{ debugName: "customTooltip" }] : []));
+    /** A projected `sdsChartLegendSwatch` template, drawn instead of each legend entry's swatch. */
+    customSwatch = contentChild(SdsChartLegendSwatch, ...(ngDevMode ? [{ debugName: "customSwatch" }] : []));
     uid = chartUid('sds-line');
     legendFocus = signal(null, ...(ngDevMode ? [{ debugName: "legendFocus" }] : []));
     active = signal(null, ...(ngDevMode ? [{ debugName: "active" }] : []));
@@ -1983,8 +2063,9 @@ class SdsLineChart {
         };
     }, ...(ngDevMode ? [{ debugName: "table" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLineChart, isStandalone: true, selector: "sds-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, xType: { classPropertyName: "xType", publicName: "xType", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, endLabels: { classPropertyName: "endLabels", publicName: "endLabels", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, yScale: { classPropertyName: "yScale", publicName: "yScale", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, yMax: { classPropertyName: "yMax", publicName: "yMax", isSignal: true, isRequired: false, transformFunction: null }, includeZero: { classPropertyName: "includeZero", publicName: "includeZero", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange", pointClick: "pointClick" }, host: { classAttribute: "block" }, queries: [{ propertyName: "customTooltip", first: true, predicate: SdsChartTooltip, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLineChart, isStandalone: true, selector: "sds-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, xType: { classPropertyName: "xType", publicName: "xType", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, endLabels: { classPropertyName: "endLabels", publicName: "endLabels", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, yScale: { classPropertyName: "yScale", publicName: "yScale", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, yMax: { classPropertyName: "yMax", publicName: "yMax", isSignal: true, isRequired: false, transformFunction: null }, includeZero: { classPropertyName: "includeZero", publicName: "includeZero", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange", pointClick: "pointClick" }, host: { classAttribute: "block" }, queries: [{ propertyName: "customTooltip", first: true, predicate: SdsChartTooltip, descendants: true, isSignal: true }, { propertyName: "customSwatch", first: true, predicate: SdsChartLegendSwatch, descendants: true, isSignal: true }], ngImport: i0, template: `
     <sds-chart-frame
+      [swatchTpl]="customSwatch()?.template ?? null"
       [heading]="heading()"
       [subtitle]="subtitle()"
       [items]="legendItems()"
@@ -2127,12 +2208,13 @@ class SdsLineChart {
         <div class="sr-only" aria-live="polite" aria-atomic="true">{{ liveText() }}</div>
       </div>
     </sds-chart-frame>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "swatchTpl", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLineChart, decorators: [{
             type: Component,
             args: [{ selector: 'sds-line-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsChartFrame, SdsChartAxes, SdsChartAnnotations, SdsChartTooltipBox], host: { class: 'block' }, template: `
     <sds-chart-frame
+      [swatchTpl]="customSwatch()?.template ?? null"
       [heading]="heading()"
       [subtitle]="subtitle()"
       [items]="legendItems()"
@@ -2276,7 +2358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       </div>
     </sds-chart-frame>
   `, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], xType: [{ type: i0.Input, args: [{ isSignal: true, alias: "xType", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], endLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabels", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], yScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "yScale", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], yMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMax", required: false }] }], includeZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeZero", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], customTooltip: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartTooltip), { isSignal: true }] }] } });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], xType: [{ type: i0.Input, args: [{ isSignal: true, alias: "xType", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], endLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabels", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], yScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "yScale", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], yMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMax", required: false }] }], includeZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeZero", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], customTooltip: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartTooltip), { isSignal: true }] }], customSwatch: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartLegendSwatch), { isSignal: true }] }] } });
 
 const GAP$1 = 2;
 /**
@@ -2346,6 +2428,8 @@ class SdsBarChart {
     /** A bar (or a category, from the keyboard) was clicked. */
     pointClick = output();
     customTooltip = contentChild(SdsChartTooltip, ...(ngDevMode ? [{ debugName: "customTooltip" }] : []));
+    /** A projected `sdsChartLegendSwatch` template, drawn instead of each legend entry's swatch. */
+    customSwatch = contentChild(SdsChartLegendSwatch, ...(ngDevMode ? [{ debugName: "customSwatch" }] : []));
     legendFocus = signal(null, ...(ngDevMode ? [{ debugName: "legendFocus" }] : []));
     active = signal(null, ...(ngDevMode ? [{ debugName: "active" }] : []));
     keyboard = signal(false, ...(ngDevMode ? [{ debugName: "keyboard" }] : []));
@@ -3041,8 +3125,9 @@ class SdsBarChart {
         };
     }, ...(ngDevMode ? [{ debugName: "table" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsBarChart, isStandalone: true, selector: "sds-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxBarSize: { classPropertyName: "maxBarSize", publicName: "maxBarSize", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, highlightCategories: { classPropertyName: "highlightCategories", publicName: "highlightCategories", isSignal: true, isRequired: false, transformFunction: null }, barColor: { classPropertyName: "barColor", publicName: "barColor", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, yMax: { classPropertyName: "yMax", publicName: "yMax", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange", pointClick: "pointClick" }, host: { classAttribute: "block" }, queries: [{ propertyName: "customTooltip", first: true, predicate: SdsChartTooltip, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsBarChart, isStandalone: true, selector: "sds-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxBarSize: { classPropertyName: "maxBarSize", publicName: "maxBarSize", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, highlightCategories: { classPropertyName: "highlightCategories", publicName: "highlightCategories", isSignal: true, isRequired: false, transformFunction: null }, barColor: { classPropertyName: "barColor", publicName: "barColor", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, yMax: { classPropertyName: "yMax", publicName: "yMax", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange", pointClick: "pointClick" }, host: { classAttribute: "block" }, queries: [{ propertyName: "customTooltip", first: true, predicate: SdsChartTooltip, descendants: true, isSignal: true }, { propertyName: "customSwatch", first: true, predicate: SdsChartLegendSwatch, descendants: true, isSignal: true }], ngImport: i0, template: `
     <sds-chart-frame
+      [swatchTpl]="customSwatch()?.template ?? null"
       [heading]="heading()"
       [subtitle]="subtitle()"
       [items]="legendItems()"
@@ -3143,12 +3228,13 @@ class SdsBarChart {
         <div class="sr-only" aria-live="polite" aria-atomic="true">{{ liveText() }}</div>
       </div>
     </sds-chart-frame>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "swatchTpl", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsBarChart, decorators: [{
             type: Component,
             args: [{ selector: 'sds-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsChartFrame, SdsChartAxes, SdsChartAnnotations, SdsChartTooltipBox], host: { class: 'block' }, template: `
     <sds-chart-frame
+      [swatchTpl]="customSwatch()?.template ?? null"
       [heading]="heading()"
       [subtitle]="subtitle()"
       [items]="legendItems()"
@@ -3250,7 +3336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       </div>
     </sds-chart-frame>
   `, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxBarSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxBarSize", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], highlightCategories: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightCategories", required: false }] }], barColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "barColor", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], yMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMax", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], customTooltip: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartTooltip), { isSignal: true }] }] } });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxBarSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxBarSize", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], highlightCategories: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightCategories", required: false }] }], barColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "barColor", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], yMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMax", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], customTooltip: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartTooltip), { isSignal: true }] }], customSwatch: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartLegendSwatch), { isSignal: true }] }] } });
 
 /**
  * Scatter and bubble chart for relationships between two measures — with an optional third measure
@@ -3330,6 +3416,8 @@ class SdsScatterChart {
     hidden = model([], ...(ngDevMode ? [{ debugName: "hidden" }] : []));
     pointClick = output();
     customTooltip = contentChild(SdsChartTooltip, ...(ngDevMode ? [{ debugName: "customTooltip" }] : []));
+    /** A projected `sdsChartLegendSwatch` template, drawn instead of each legend entry's swatch. */
+    customSwatch = contentChild(SdsChartLegendSwatch, ...(ngDevMode ? [{ debugName: "customSwatch" }] : []));
     uid = chartUid('sds-scatter');
     legendFocus = signal(null, ...(ngDevMode ? [{ debugName: "legendFocus" }] : []));
     active = signal(null, ...(ngDevMode ? [{ debugName: "active" }] : []));
@@ -3761,8 +3849,9 @@ class SdsScatterChart {
         };
     }, ...(ngDevMode ? [{ debugName: "table" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsScatterChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsScatterChart, isStandalone: true, selector: "sds-scatter-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, pointLabel: { classPropertyName: "pointLabel", publicName: "pointLabel", isSignal: true, isRequired: false, transformFunction: null }, groupOrder: { classPropertyName: "groupOrder", publicName: "groupOrder", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, maxRadius: { classPropertyName: "maxRadius", publicName: "maxRadius", isSignal: true, isRequired: false, transformFunction: null }, trendline: { classPropertyName: "trendline", publicName: "trendline", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, xScale: { classPropertyName: "xScale", publicName: "xScale", isSignal: true, isRequired: false, transformFunction: null }, yScale: { classPropertyName: "yScale", publicName: "yScale", isSignal: true, isRequired: false, transformFunction: null }, xMin: { classPropertyName: "xMin", publicName: "xMin", isSignal: true, isRequired: false, transformFunction: null }, xMax: { classPropertyName: "xMax", publicName: "xMax", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, yMax: { classPropertyName: "yMax", publicName: "yMax", isSignal: true, isRequired: false, transformFunction: null }, includeZero: { classPropertyName: "includeZero", publicName: "includeZero", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, sizeFormat: { classPropertyName: "sizeFormat", publicName: "sizeFormat", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, sizeLabel: { classPropertyName: "sizeLabel", publicName: "sizeLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange", pointClick: "pointClick" }, host: { classAttribute: "block" }, queries: [{ propertyName: "customTooltip", first: true, predicate: SdsChartTooltip, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsScatterChart, isStandalone: true, selector: "sds-scatter-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, pointLabel: { classPropertyName: "pointLabel", publicName: "pointLabel", isSignal: true, isRequired: false, transformFunction: null }, groupOrder: { classPropertyName: "groupOrder", publicName: "groupOrder", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, maxRadius: { classPropertyName: "maxRadius", publicName: "maxRadius", isSignal: true, isRequired: false, transformFunction: null }, trendline: { classPropertyName: "trendline", publicName: "trendline", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, xScale: { classPropertyName: "xScale", publicName: "xScale", isSignal: true, isRequired: false, transformFunction: null }, yScale: { classPropertyName: "yScale", publicName: "yScale", isSignal: true, isRequired: false, transformFunction: null }, xMin: { classPropertyName: "xMin", publicName: "xMin", isSignal: true, isRequired: false, transformFunction: null }, xMax: { classPropertyName: "xMax", publicName: "xMax", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, yMax: { classPropertyName: "yMax", publicName: "yMax", isSignal: true, isRequired: false, transformFunction: null }, includeZero: { classPropertyName: "includeZero", publicName: "includeZero", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, sizeFormat: { classPropertyName: "sizeFormat", publicName: "sizeFormat", isSignal: true, isRequired: false, transformFunction: null }, xLabel: { classPropertyName: "xLabel", publicName: "xLabel", isSignal: true, isRequired: false, transformFunction: null }, yLabel: { classPropertyName: "yLabel", publicName: "yLabel", isSignal: true, isRequired: false, transformFunction: null }, sizeLabel: { classPropertyName: "sizeLabel", publicName: "sizeLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange", pointClick: "pointClick" }, host: { classAttribute: "block" }, queries: [{ propertyName: "customTooltip", first: true, predicate: SdsChartTooltip, descendants: true, isSignal: true }, { propertyName: "customSwatch", first: true, predicate: SdsChartLegendSwatch, descendants: true, isSignal: true }], ngImport: i0, template: `
     <sds-chart-frame
+      [swatchTpl]="customSwatch()?.template ?? null"
       [heading]="heading()"
       [subtitle]="subtitle()"
       [items]="legendItems()"
@@ -3878,12 +3967,13 @@ class SdsScatterChart {
         <div class="sr-only" aria-live="polite" aria-atomic="true">{{ liveText() }}</div>
       </div>
     </sds-chart-frame>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "swatchTpl", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsScatterChart, decorators: [{
             type: Component,
             args: [{ selector: 'sds-scatter-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsChartFrame, SdsChartAxes, SdsChartAnnotations, SdsChartTooltipBox], host: { class: 'block' }, template: `
     <sds-chart-frame
+      [swatchTpl]="customSwatch()?.template ?? null"
       [heading]="heading()"
       [subtitle]="subtitle()"
       [items]="legendItems()"
@@ -4000,7 +4090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       </div>
     </sds-chart-frame>
   `, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], pointLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointLabel", required: false }] }], groupOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupOrder", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], maxRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRadius", required: false }] }], trendline: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendline", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], xScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "xScale", required: false }] }], yScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "yScale", required: false }] }], xMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "xMin", required: false }] }], xMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "xMax", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], yMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMax", required: false }] }], includeZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeZero", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], sizeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeFormat", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], sizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], customTooltip: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartTooltip), { isSignal: true }] }] } });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], pointLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointLabel", required: false }] }], groupOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupOrder", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], maxRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRadius", required: false }] }], trendline: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendline", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], xScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "xScale", required: false }] }], yScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "yScale", required: false }] }], xMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "xMin", required: false }] }], xMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "xMax", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], yMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMax", required: false }] }], includeZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeZero", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], sizeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeFormat", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], sizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], customTooltip: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartTooltip), { isSignal: true }] }], customSwatch: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartLegendSwatch), { isSignal: true }] }] } });
 
 /** Key of the folded "Other" slice — in `hidden` and in `pointClick.key`. */
 const SDS_DONUT_OTHER_KEY = '__sds_other__';
@@ -4062,6 +4152,8 @@ class SdsDonutChart {
     hidden = model([], ...(ngDevMode ? [{ debugName: "hidden" }] : []));
     pointClick = output();
     customTooltip = contentChild(SdsChartTooltip, ...(ngDevMode ? [{ debugName: "customTooltip" }] : []));
+    /** A projected `sdsChartLegendSwatch` template, drawn instead of each legend entry's swatch. */
+    customSwatch = contentChild(SdsChartLegendSwatch, ...(ngDevMode ? [{ debugName: "customSwatch" }] : []));
     focus = signal(null, ...(ngDevMode ? [{ debugName: "focus" }] : []));
     active = signal(null, ...(ngDevMode ? [{ debugName: "active" }] : []));
     keyboard = signal(false, ...(ngDevMode ? [{ debugName: "keyboard" }] : []));
@@ -4349,7 +4441,7 @@ class SdsDonutChart {
             const share = total && !hidden.has(s.key) ? this.pct()(s.value / total) : '';
             const value = this.fmt()(s.value);
             const detail = mode === 'none' ? undefined : mode === 'percent' ? share : mode === 'value' ? value : share ? `${value} · ${share}` : value;
-            return { key: s.key, label: s.label, color: s.color, shape: 'rect', detail };
+            return { key: s.key, label: s.label, color: s.color, shape: 'rect', detail, row: s.other ? null : (s.rows[0] ?? null), other: s.other };
         });
     }, ...(ngDevMode ? [{ debugName: "legendItems" }] : []));
     label = computed(() => {
@@ -4365,8 +4457,9 @@ class SdsDonutChart {
         };
     }, ...(ngDevMode ? [{ debugName: "table" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDonutChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsDonutChart, isStandalone: true, selector: "sds-donut-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, half: { classPropertyName: "half", publicName: "half", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, maxSlices: { classPropertyName: "maxSlices", publicName: "maxSlices", isSignal: true, isRequired: false, transformFunction: null }, otherLabel: { classPropertyName: "otherLabel", publicName: "otherLabel", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, legendValue: { classPropertyName: "legendValue", publicName: "legendValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange", pointClick: "pointClick" }, host: { classAttribute: "block" }, queries: [{ propertyName: "customTooltip", first: true, predicate: SdsChartTooltip, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsDonutChart, isStandalone: true, selector: "sds-donut-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, half: { classPropertyName: "half", publicName: "half", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, maxSlices: { classPropertyName: "maxSlices", publicName: "maxSlices", isSignal: true, isRequired: false, transformFunction: null }, otherLabel: { classPropertyName: "otherLabel", publicName: "otherLabel", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, legendValue: { classPropertyName: "legendValue", publicName: "legendValue", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hiddenChange", pointClick: "pointClick" }, host: { classAttribute: "block" }, queries: [{ propertyName: "customTooltip", first: true, predicate: SdsChartTooltip, descendants: true, isSignal: true }, { propertyName: "customSwatch", first: true, predicate: SdsChartLegendSwatch, descendants: true, isSignal: true }], ngImport: i0, template: `
     <sds-chart-frame
+      [swatchTpl]="customSwatch()?.template ?? null"
       [heading]="heading()"
       [subtitle]="subtitle()"
       [items]="legendItems()"
@@ -4432,12 +4525,13 @@ class SdsDonutChart {
         <div class="sr-only" aria-live="polite" aria-atomic="true">{{ liveText() }}</div>
       </div>
     </sds-chart-frame>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "swatchTpl", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDonutChart, decorators: [{
             type: Component,
             args: [{ selector: 'sds-donut-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsChartFrame, SdsChartTooltipBox], host: { class: 'block' }, template: `
     <sds-chart-frame
+      [swatchTpl]="customSwatch()?.template ?? null"
       [heading]="heading()"
       [subtitle]="subtitle()"
       [items]="legendItems()"
@@ -4504,7 +4598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       </div>
     </sds-chart-frame>
   `, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], half: [{ type: i0.Input, args: [{ isSignal: true, alias: "half", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], maxSlices: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSlices", required: false }] }], otherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "otherLabel", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], legendValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], customTooltip: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartTooltip), { isSignal: true }] }] } });
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], half: [{ type: i0.Input, args: [{ isSignal: true, alias: "half", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], maxSlices: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSlices", required: false }] }], otherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "otherLabel", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], legendValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendValue", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], customTooltip: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartTooltip), { isSignal: true }] }], customSwatch: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartLegendSwatch), { isSignal: true }] }] } });
 
 const GAP = 2;
 /**
@@ -4933,7 +5027,7 @@ class SdsHeatmap {
         </div>
       }
     </sds-chart-frame>
-  `, isInline: true, styles: [".heat-cell{cursor:pointer}.heat-anim{transition:fill .3s ease}@media(prefers-reduced-motion:reduce){.heat-anim{transition:none}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".heat-cell{cursor:pointer}.heat-anim{transition:fill .3s ease}@media(prefers-reduced-motion:reduce){.heat-anim{transition:none}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "swatchTpl", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsHeatmap, decorators: [{
             type: Component,
@@ -5444,7 +5538,7 @@ class SdsTreemap {
         <div class="sr-only" aria-live="polite" aria-atomic="true">{{ liveText() }}</div>
       </div>
     </sds-chart-frame>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "swatchTpl", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTreemap, decorators: [{
             type: Component,
@@ -6145,5 +6239,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_DONUT_OTHER_KEY, SdsBarChart, SdsChartTooltip, SdsDonutChart, SdsHeatmap, SdsKpi, SdsLineChart, SdsScatterChart, SdsSparkline, SdsTreemap };
+export { SDS_DONUT_OTHER_KEY, SdsBarChart, SdsChartLegendSwatch, SdsChartTooltip, SdsDonutChart, SdsHeatmap, SdsKpi, SdsLineChart, SdsScatterChart, SdsSparkline, SdsTreemap };
 //# sourceMappingURL=besaitech-ng-design-system-charts.mjs.map