@epam/ai-dial-settings-panel 1.3.0-dev.32 → 1.3.0-dev.322

package/components/ExtensionsSection/ExtensionServiceRow.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ExtensionServiceItem, ExtensionsTypography } from '../../models/extensions-props';
+export declare const EXTENSIONS_GRID_COLUMNS = "desktop:grid-cols-[minmax(12rem,1.25fr)_minmax(0,1fr)_minmax(8rem,10rem)]";
+/** Props for `ExtensionServiceRow`. */
+export interface ExtensionServiceRowProps {
+    /** The service rendered by this row. */
+    row: ExtensionServiceItem;
+    /** Typography class overrides. */
+    typography: ExtensionsTypography;
+}
+/** One service row of the Extensions table: an avatar with an optional corner warning badge, the service name, the description, and the host-supplied trailing action or limited-access badge. */
+export declare const ExtensionServiceRow: FC<ExtensionServiceRowProps>;
+//# sourceMappingURL=ExtensionServiceRow.d.ts.map

package/components/ExtensionsSection/ExtensionServiceRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionServiceRow.d.ts","sourceRoot":"","sources":["../../../src/components/ExtensionsSection/ExtensionServiceRow.tsx"],"names":[],"mappings":"AASA,OAAO,EAAS,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,+BAA+B,CAAC;AASvC,eAAO,MAAM,uBAAuB,8EACyC,CAAC;AAI9E,uCAAuC;AACvC,MAAM,WAAW,wBAAwB;IACvC,wCAAwC;IACxC,GAAG,EAAE,oBAAoB,CAAC;IAC1B,kCAAkC;IAClC,UAAU,EAAE,oBAAoB,CAAC;CAClC;AAED,kMAAkM;AAClM,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAyH5D,CAAC"}

package/components/ExtensionsSection/ExtensionsSection.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ExtensionsSectionProps } from '../../models/extensions-props';
+/** Extensions settings table: a Name / Description / sr-only Actions header row plus one row per service. */
+export declare const ExtensionsSection: FC<ExtensionsSectionProps>;
+//# sourceMappingURL=ExtensionsSection.d.ts.map

package/components/ExtensionsSection/ExtensionsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionsSection.d.ts","sourceRoot":"","sources":["../../../src/components/ExtensionsSection/ExtensionsSection.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAO5E,6GAA6G;AAC7G,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAuExD,CAAC"}

package/components/SettingsPanel/SettingsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SettingsPanel/SettingsPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAE5E,kFAAkF;AAClF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwChD,CAAC"}
+{"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/SettingsPanel/SettingsPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAG5E,kFAAkF;AAClF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+ChD,CAAC"}

package/index.css

@@ -1 +1,3 @@
-.flex{display:flex}.min-h-0{min-height:0}.grow{flex-grow:1}.flex-col{flex-direction:column}.bg-layer-raised{background-color:var(--bg-layer-raised,#fcfcfc)}
+._container_1a0g4_1{background:var(--ext-container-bg,var(--bg-layer-raised,#fcfcfc))}._columnHeader_1a0g4_5{color:var(--ext-column-header,var(--text-secondary,#57647a))}._headerRow_1a0g4_9{border-block-end:.5px solid var(--ext-row-divider,var(--stroke-tertiary,#e0e6f0))}._row_1a0g4_16{border-block-start:.5px solid var(--ext-row-divider,var(--stroke-tertiary,#e0e6f0))}._name_1a0g4_20{color:var(--ext-name,var(--text-primary,#161b2d))}._description_1a0g4_24{color:var(--ext-description,var(--text-secondary,#57647a))}._limitedAccessDescription_1a0g4_28{color:var(--ext-description,var(--text-primary,#161b2d))}._warningBadge_1a0g4_32{color:var(--ext-warning-badge,var(--text-warning-icon,#eec840))}._panel_12dqa_1{background:var(--sp-bg,var(--bg-layer-raised,#fcfcfc))}
+/*$vite$:1*//*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.relative{position:relative}.inset-e-\[-10px\]{inset-inline-end:-10px}.bottom-\[-3px\]{bottom:-3px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.min-h-0{min-height:0}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-end{justify-content:flex-end}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.px-4{padding-inline:1rem}.px-6{padding-inline:1.5rem}.py-3{padding-block:.75rem}.text-end{text-align:end}.text-start{text-align:start}.wrap-break-word{overflow-wrap:break-word}.shadow-md{--tw-shadow:0 10px 30px 9px var(--tw-shadow-color,var(--shadow-md-2,var(--shadow-md,#2764d90f))), 0 0 8px 2px var(--tw-shadow-color,var(--shadow-md-1,#2764d90a));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (min-width:1280px){.desktop\:grid{display:grid}.desktop\:min-h-16{min-height:4rem}.desktop\:grid-cols-\[minmax\(12rem\,1\.25fr\)_minmax\(0\,1fr\)_minmax\(8rem\,10rem\)\]{grid-template-columns:minmax(12rem,1.25fr) minmax(0,1fr) minmax(8rem,10rem)}.desktop\:items-center{align-items:center}.desktop\:gap-4{gap:1rem}.desktop\:px-6{padding-inline:1.5rem}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/index.d.ts

@@ -1,4 +1,6 @@
+export { ExtensionsSection } from './components/ExtensionsSection/ExtensionsSection';
+export type { ExtensionServiceItem, ExtensionsColors, ExtensionsLabels, ExtensionsSectionProps, ExtensionsStyles, ExtensionsTypography, } from './models/extensions-props';
 export { SettingsPanel } from './components/SettingsPanel/SettingsPanel';
-export type { SettingsPanelItem, SettingsPanelProps, SettingsPanelStyles, SettingsPanelTypography, } from './models/settings-panel-props';
+export type { SettingsPanelItem, SettingsPanelProps, SettingsPanelColors, SettingsPanelStyles, SettingsPanelTypography, } from './models/settings-panel-props';
 export { SETTINGS_PANEL_CLASS } from './constants/public-class-names';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,YAAY,EACV,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC"}

package/index.js

@@ -1,29 +1,155 @@
-import { mergeClasses as e } from "@epam/ai-dial-chat-shared";
-import { TabOrientation as t, Tabs as n } from "@epam/ai-dial-ui-kit";
-import { jsx as r } from "react/jsx-runtime";
-//#region src/constants/public-class-names.ts
-var i = {
+import { InitialsAvatar as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
+import { Badge as r, BadgeColor as i, BadgeVariant as a, DIAL_ICON_SIZE as o, TabOrientation as s, Tabs as c, Tooltip as l } from "@epam/ai-dial-ui-kit";
+import { IconAlertTriangleFilled as u } from "@tabler/icons-react";
+import { useId as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+var m = {
+	container: "_container_1a0g4_1",
+	columnHeader: "_columnHeader_1a0g4_5",
+	headerRow: "_headerRow_1a0g4_9",
+	row: "_row_1a0g4_16",
+	name: "_name_1a0g4_20",
+	description: "_description_1a0g4_24",
+	limitedAccessDescription: "_limitedAccessDescription_1a0g4_28",
+	warningBadge: "_warningBadge_1a0g4_32"
+}, h = "desktop:grid-cols-[minmax(12rem,1.25fr)_minmax(0,1fr)_minmax(8rem,10rem)]", g = 40, _ = ({ row: t, typography: s }) => {
+	let { nameClassName: c = "dial-small-semi-text", descriptionClassName: _ = "dial-small-text", tooltipTitleClassName: v = "dial-small-semi-text", tooltipDescriptionClassName: y = "dial-small-text", avatarInitialsClassName: b = "dial-h2-text" } = s, { displayName: x, description: S, avatarColor: C, isWarningVisible: w, limitedAccessLabel: T, limitedAccessTooltipTitle: E, limitedAccessTooltipDescription: D, action: O } = t, k = T != null, A = d();
+	return /* @__PURE__ */ p("div", {
+		role: "row",
+		className: n("grid grid-cols-1 gap-2 px-4 py-3 desktop:min-h-16 desktop:items-center desktop:gap-4 desktop:px-6", h, m.row),
+		children: [
+			/* @__PURE__ */ p("div", {
+				role: "cell",
+				className: "flex min-w-0 items-center gap-3",
+				children: [/* @__PURE__ */ p("div", {
+					className: "relative shrink-0",
+					children: [/* @__PURE__ */ f(e, {
+						name: x,
+						size: g,
+						color: C,
+						textClassName: b
+					}), w && /* @__PURE__ */ f("span", {
+						className: n("absolute inset-e-[-10px] bottom-[-3px] flex", m.warningBadge),
+						children: /* @__PURE__ */ f(u, {
+							size: o.MD,
+							"aria-hidden": !0
+						})
+					})]
+				}), /* @__PURE__ */ f("span", {
+					className: n(c, "min-w-0 flex-1 truncate", m.name),
+					children: x
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				role: "cell",
+				className: "flex min-w-0 items-center",
+				children: /* @__PURE__ */ f("span", {
+					className: n(_, "min-w-0 wrap-break-word", m.description),
+					children: S
+				})
+			}),
+			/* @__PURE__ */ f("div", {
+				role: "cell",
+				className: "flex min-w-0 items-center justify-end",
+				children: k ? /* @__PURE__ */ p("div", {
+					className: "flex min-w-0 flex-col items-end gap-1",
+					children: [/* @__PURE__ */ f(l, {
+						tooltip: /* @__PURE__ */ p("span", {
+							className: "flex flex-col gap-1 text-start",
+							children: [/* @__PURE__ */ f("span", {
+								className: v,
+								children: E
+							}), /* @__PURE__ */ f("span", {
+								className: y,
+								children: D
+							})]
+						}),
+						children: /* @__PURE__ */ f(r, {
+							label: T,
+							variant: a.Filled,
+							color: i.Red,
+							"aria-describedby": A
+						})
+					}), /* @__PURE__ */ f("span", {
+						id: A,
+						className: n(_, "min-w-0 text-end wrap-break-word", m.limitedAccessDescription),
+						children: D
+					})]
+				}) : O
+			})
+		]
+	});
+}, v = ({ rows: e, labels: r, styles: i }) => {
+	let { colors: a } = i ?? {}, o = {
+		columnHeaderClassName: "dial-caption-lead-semi-text",
+		...i?.typography
+	}, s = t({
+		"--ext-container-bg": a?.containerBackground,
+		"--ext-column-header": a?.columnHeaderColor,
+		"--ext-row-divider": a?.rowDividerColor,
+		"--ext-name": a?.nameColor,
+		"--ext-description": a?.descriptionColor,
+		"--ext-warning-badge": a?.warningBadgeColor
+	});
+	return /* @__PURE__ */ p("div", {
+		role: "table",
+		"aria-label": r.tableAriaLabel,
+		className: n("overflow-hidden rounded-xl shadow-md", m.container),
+		style: s,
+		children: [/* @__PURE__ */ p("div", {
+			role: "row",
+			className: n("hidden gap-4 px-6 py-3 desktop:grid desktop:items-center", h, m.headerRow),
+			children: [
+				/* @__PURE__ */ f("span", {
+					role: "columnheader",
+					className: n("text-start", o.columnHeaderClassName, m.columnHeader),
+					children: r.nameColumnLabel
+				}),
+				/* @__PURE__ */ f("span", {
+					role: "columnheader",
+					className: n("text-start", o.columnHeaderClassName, m.columnHeader),
+					children: r.descriptionColumnLabel
+				}),
+				/* @__PURE__ */ f("span", {
+					role: "columnheader",
+					children: /* @__PURE__ */ f("span", {
+						className: "sr-only",
+						children: r.actionsColumnLabel
+					})
+				})
+			]
+		}), /* @__PURE__ */ f("div", {
+			role: "rowgroup",
+			children: e.map((e) => /* @__PURE__ */ f(_, {
+				row: e,
+				typography: o
+			}, e.id))
+		})]
+	});
+}, y = {
 	panel: "dial-settings-panel-panel",
 	tabList: "dial-settings-panel-tab-list",
 	tab: "dial-settings-panel-tab"
-}, a = ({ items: a, activeId: o, onSelect: s, sectionLabel: c, styles: l, className: u }) => {
-	let { sectionLabelClassName: d = "dial-h1-text" } = l?.typography ?? {};
-	return /* @__PURE__ */ r("div", {
-		className: e("flex min-h-0 flex-col bg-layer-raised", u, i.panel),
-		children: /* @__PURE__ */ r(n, {
-			orientation: t.Vertical,
-			sectionLabel: c,
-			tabs: a,
-			activeTabId: o,
+}, b = { panel: "_panel_12dqa_1" }, x = ({ items: e, activeId: r, onSelect: i, sectionLabel: a, ariaLabel: o, styles: l, className: u }) => {
+	let { sectionLabelClassName: d = "dial-h1-text" } = l?.typography ?? {}, p = t({ "--sp-bg": l?.colors?.background });
+	return /* @__PURE__ */ f("div", {
+		style: p,
+		className: n("flex min-h-0 flex-col", b.panel, u, y.panel),
+		children: /* @__PURE__ */ f(c, {
+			orientation: s.Vertical,
+			sectionLabel: a,
+			ariaLabel: o,
+			tabs: e,
+			activeTabId: r,
 			onTabChange: (e) => {
-				e !== o && s(e);
+				e !== r && i(e);
 			},
 			className: "min-h-0 grow",
-			tabListClassName: i.tabList,
-			tabClassName: i.tab,
+			tabListClassName: y.tabList,
+			tabClassName: y.tab,
 			sectionLabelClassName: d
 		})
 	});
 };
 //#endregion
-export { i as SETTINGS_PANEL_CLASS, a as SettingsPanel };
+export { v as ExtensionsSection, y as SETTINGS_PANEL_CLASS, x as SettingsPanel };

package/models/extensions-props.d.ts

@@ -0,0 +1,81 @@
+import { AvatarColorClasses } from '@epam/ai-dial-ui-kit';
+import { ReactNode } from 'react';
+/** One extension service rendered as one row of the Extensions table. */
+export interface ExtensionServiceItem {
+    /** Stable identifier for the row. */
+    id: string;
+    /** Service display name shown beside the avatar and used for its initials. */
+    displayName: string;
+    /** Explicit avatar colour pair (an `AVATAR_PALETTE` entry from the host) overriding the name-derived colour; omitted keeps the deterministic pick. */
+    avatarColor?: AvatarColorClasses;
+    /** Localized service description shown in the Description cell. */
+    description: string;
+    /** Whether the disconnected-state warning badge renders on the avatar's corner. */
+    isWarningVisible: boolean;
+    /** Label of the red limited-access `Badge` that replaces the row's action while the host reports limited access; the row renders no badge when omitted. */
+    limitedAccessLabel?: string;
+    /** Bold title line of the limited-access badge's tooltip. */
+    limitedAccessTooltipTitle?: string;
+    /** Explanation shown below the limited-access badge and repeated in its tooltip; also referenced by the badge's aria-describedby. */
+    limitedAccessTooltipDescription?: string;
+    /** The row's trailing action (e.g. a Log in / Log out button), owned by the host; ignored while `limitedAccessLabel` is set. */
+    action: ReactNode;
+}
+/** Localized strings shared by the Extensions table shell. */
+export interface ExtensionsLabels {
+    /** Accessible name of the table. */
+    tableAriaLabel: string;
+    /** Column header text for the Name column. */
+    nameColumnLabel: string;
+    /** Column header text for the Description column. */
+    descriptionColumnLabel: string;
+    /** Screen-reader-only column header text for the visually empty Actions column. */
+    actionsColumnLabel: string;
+}
+/** Color overrides for `ExtensionsSection`, applied as CSS custom properties. */
+export interface ExtensionsColors {
+    /** Table container background. Fallback: `--bg-layer-raised`. */
+    containerBackground?: string;
+    /** Column header text color. Fallback: `--text-secondary`. */
+    columnHeaderColor?: string;
+    /** Row divider color. Fallback: `--stroke-tertiary`. */
+    rowDividerColor?: string;
+    /** Service name text color. Fallback: `--text-primary`. */
+    nameColor?: string;
+    /** Service and limited-access description text color. Fallback: `--text-secondary` for the service description, `--text-primary` for the limited-access explanation. */
+    descriptionColor?: string;
+    /** Warning badge color. Fallback: `--text-warning-icon`. */
+    warningBadgeColor?: string;
+}
+/** Typography class overrides for `ExtensionsSection`. */
+export interface ExtensionsTypography {
+    /** CSS class for the column headers. Defaults to `'dial-caption-lead-semi-text'`. */
+    columnHeaderClassName?: string;
+    /** CSS class for the service name. Defaults to `'dial-small-semi-text'`. */
+    nameClassName?: string;
+    /** CSS class for the service description and limited-access explanation. Defaults to `'dial-small-text'`. */
+    descriptionClassName?: string;
+    /** CSS class for the limited-access tooltip title. Defaults to `'dial-small-semi-text'`. */
+    tooltipTitleClassName?: string;
+    /** CSS class for the limited-access tooltip description. Defaults to `'dial-small-text'`. */
+    tooltipDescriptionClassName?: string;
+    /** CSS class for the initials in a service avatar without an icon. Defaults to `'dial-h2-text'`. */
+    avatarInitialsClassName?: string;
+}
+/** Style overrides accepted by `ExtensionsSection`. */
+export interface ExtensionsStyles {
+    /** Color overrides applied as CSS custom properties. */
+    colors?: ExtensionsColors;
+    /** Typography class overrides. */
+    typography?: ExtensionsTypography;
+}
+/** Props for `ExtensionsSection`. */
+export interface ExtensionsSectionProps {
+    /** Services to render, in display order. Each renders as one table row. */
+    rows: ExtensionServiceItem[];
+    /** Localized strings shared by the table shell. */
+    labels: ExtensionsLabels;
+    /** Style overrides applied as CSS custom properties and typography class overrides. */
+    styles?: ExtensionsStyles;
+}
+//# sourceMappingURL=extensions-props.d.ts.map

package/models/extensions-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensions-props.d.ts","sourceRoot":"","sources":["../../src/models/extensions-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,yEAAyE;AACzE,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;IACpB,sJAAsJ;IACtJ,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB,mFAAmF;IACnF,gBAAgB,EAAE,OAAO,CAAC;IAC1B,2JAA2J;IAC3J,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,qIAAqI;IACrI,+BAA+B,CAAC,EAAE,MAAM,CAAC;IACzC,gIAAgI;IAChI,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,8DAA8D;AAC9D,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mFAAmF;IACnF,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,iFAAiF;AACjF,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wKAAwK;IACxK,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,0DAA0D;AAC1D,MAAM,WAAW,oBAAoB;IACnC,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6GAA6G;IAC7G,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4FAA4F;IAC5F,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,6FAA6F;IAC7F,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,oGAAoG;IACpG,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,uDAAuD;AACvD,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,kCAAkC;IAClC,UAAU,CAAC,EAAE,oBAAoB,CAAC;CACnC;AAED,qCAAqC;AACrC,MAAM,WAAW,sBAAsB;IACrC,2EAA2E;IAC3E,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,mDAAmD;IACnD,MAAM,EAAE,gBAAgB,CAAC;IACzB,uFAAuF;IACvF,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B"}

package/models/settings-panel-props.d.ts

@@ -15,8 +15,15 @@ export interface SettingsPanelTypography {
     /** Typography class applied to the section header. Defaults to `'dial-h1-text'`. */
     sectionLabelClassName?: string;
 }
+/** Color overrides for the {@link SettingsPanel} component, applied as CSS custom properties. */
+export interface SettingsPanelColors {
+    /** Panel background color. Defaults to `--bg-layer-raised`. */
+    background?: string;
+}
 /** Style overrides for the {@link SettingsPanel} component. */
 export interface SettingsPanelStyles {
+    /** Color overrides. */
+    colors?: SettingsPanelColors;
     /** Typography overrides. */
     typography?: SettingsPanelTypography;
 }
@@ -30,6 +37,8 @@ export interface SettingsPanelProps {
     onSelect: (id: string) => void;
     /** Already-localized header text rendered above the item list. Omit to render no header. */
     sectionLabel?: string;
+    /** Already-localized accessible name for the item list, for a panel rendered without `sectionLabel`. */
+    ariaLabel?: string;
     /** Style overrides. */
     styles?: SettingsPanelStyles;
     /** Additional CSS class applied to the root element. */

package/models/settings-panel-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-panel-props.d.ts","sourceRoot":"","sources":["../../src/models/settings-panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,iDAAiD;AACjD,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2IAA2I;IAC3I,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,oEAAoE;AACpE,MAAM,WAAW,uBAAuB;IACtC,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,+DAA+D;AAC/D,MAAM,WAAW,mBAAmB;IAClC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,uBAAuB,CAAC;CACtC;AAED,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,iGAAiG;IACjG,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"settings-panel-props.d.ts","sourceRoot":"","sources":["../../src/models/settings-panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,iDAAiD;AACjD,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2IAA2I;IAC3I,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,oEAAoE;AACpE,MAAM,WAAW,uBAAuB;IACtC,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,iGAAiG;AACjG,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,+DAA+D;AAC/D,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,uBAAuB,CAAC;CACtC;AAED,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,iGAAiG;IACjG,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wGAAwG;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-settings-panel",
-  "description": "Presentational vertical settings navigation panel with icon-labeled rows and active-row highlighting",
-  "version": "1.3.0-dev.32",
+  "description": "Presentational settings surfaces: a vertical settings navigation panel and the Extensions services table",
+  "version": "1.3.0-dev.322",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -16,9 +16,12 @@
       "default": "./index.js"
     }
   },
+  "dependencies": {
+    "@tabler/icons-react": "^3.50.0"
+  },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.3.0-dev.32",
-    "@epam/ai-dial-ui-kit": "^0.15.3",
+    "@epam/ai-dial-chat-shared": "1.3.0-dev.322",
+    "@epam/ai-dial-ui-kit": "^0.16.0-dev.72",
     "react": "^19.2.8"
   },
   "repository": {