@rt-tools/ui-kit-v2 0.35.1 → 0.37.0

package/fesm2022/rt-tools-ui-kit-v2-workspace.mjs

@@ -194,6 +194,10 @@ var RtWorkspaceComponent = class RtWorkspaceComponent {
 			...ngDevMode ? { debugName: "hasActive" } : /* istanbul ignore next */ {},
 			transform: booleanAttribute
 		});
+		this.cards = input(false, {
+			...ngDevMode ? { debugName: "cards" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
 		this.listMinWidth = input(240, {
 			...ngDevMode ? { debugName: "listMinWidth" } : /* istanbul ignore next */ {},
 			transform: numberAttribute
@@ -362,6 +366,13 @@ var RtWorkspaceComponent = class RtWorkspaceComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				cards: {
+					classPropertyName: "cards",
+					publicName: "cards",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				listMinWidth: {
 					classPropertyName: "listMinWidth",
 					publicName: "listMinWidth",
@@ -416,6 +427,7 @@ var RtWorkspaceComponent = class RtWorkspaceComponent {
 			host: {
 				properties: {
 					"class.rt-workspace--has-active": "hasActive()",
+					"class.rt-workspace--cards": "cards()",
 					"class.rt-workspace--aside-collapsed": "asideCollapsed()",
 					"class.rt-workspace--resizing": "resizing()",
 					"style.--rt-workspace-list-size": "listWidth() + 'px'",
@@ -448,7 +460,7 @@ var RtWorkspaceComponent = class RtWorkspaceComponent {
 			],
 			ngImport: i0,
 			template: "<ng-container rtBlock=\"rt-workspace\">\n    @if (listSlot()) {\n        <section rtElem=\"list\" qa-dataid=\"workspace-list\">\n            <ng-container [ngTemplateOutlet]=\"listSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-list\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeList\"\n            [rtMod]=\"{ list: true }\"\n            [attr.aria-valuenow]=\"listWidth()\"\n            [attr.aria-valuemin]=\"listMinWidth()\"\n            [attr.aria-valuemax]=\"listMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'list')\"\n            (dblclick)=\"onHandleReset('list')\"\n            (keydown)=\"onHandleKeydown($event, 'list')\"></div>\n    }\n\n    <section rtElem=\"center\" qa-dataid=\"workspace-center\">\n        @if (hasActive()) {\n            <div rtElem=\"mobile-toolbar\">\n                <rt-icon-button\n                    qa-dataid=\"workspace-back\"\n                    icon=\"arrow-left\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiBackToList\"\n                    [tooltip]=\"t().uiToList\"\n                    (clicked)=\"onBackClicked()\" />\n                <rt-icon-button\n                    qa-dataid=\"workspace-open-details\"\n                    icon=\"info-circle\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiShowDetails\"\n                    [tooltip]=\"t().uiDetails\"\n                    (clicked)=\"openAside()\" />\n            </div>\n        }\n        <ng-container [ngTemplateOutlet]=\"centerSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n    </section>\n\n    @if (asideSlot()) {\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-aside\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeDetails\"\n            [rtMod]=\"{ aside: true }\"\n            [attr.aria-valuenow]=\"asideWidth()\"\n            [attr.aria-valuemin]=\"asideMinWidth()\"\n            [attr.aria-valuemax]=\"asideMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'aside')\"\n            (dblclick)=\"onHandleReset('aside')\"\n            (keydown)=\"onHandleKeydown($event, 'aside')\"></div>\n\n        <section rtElem=\"aside\" qa-dataid=\"workspace-aside\" [rtMod]=\"{ open: asideOpen() }\">\n            <ng-container [ngTemplateOutlet]=\"asideSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n    }\n</ng-container>\n",
-			styles: ["@layer rt-kit.components{.rt-workspace{--rt-workspace-border-width: var(--rt-border-width-thin);--rt-workspace-handle-line-width: var(--rt-border-width-medium);--rt-workspace-handle-transition-duration: var(--rt-duration-fast);--rt-workspace-panel-transition-duration: var(--rt-duration-base);--rt-workspace-aside-shadow: var(--rt-shadow-md);position:relative;display:flex;flex-direction:row;block-size:calc(100dvh - var(--rt-header-height, 0px));min-block-size:0}.rt-workspace__list{display:flex;flex:0 0 var(--rt-workspace-list-size, 320px);flex-direction:column;border-inline-end:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__center{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;padding-inline:var(--rt-space-4)}.rt-workspace__mobile-toolbar{display:none}.rt-workspace__aside{display:flex;flex:0 0 var(--rt-workspace-aside-size, 360px);flex-direction:column;border-inline-start:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__handle{position:relative;z-index:1;flex:0 0 auto;background:transparent;cursor:col-resize;inline-size:var(--rt-space-2);margin-inline:calc(-1 * var(--rt-space-1));touch-action:none}.rt-workspace__handle:before{position:absolute;background:transparent;content:\"\";inline-size:var(--rt-workspace-handle-line-width);inset-block:0;inset-inline-start:50%;transform:translate(-50%);transition:background var(--rt-workspace-handle-transition-duration) ease}.rt-workspace__handle:hover:before,.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-strong)}.rt-workspace__handle:focus-visible{outline:none}.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-focus)}@container rt-place (width <= 1080px){.rt-workspace__desktop-only{display:none}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-workspace__desktop-only{display:none}}@container rt-place (width <= 1080px){.rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}.rt-workspace__handle{display:none}.rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}.rt-workspace__aside--open{transform:translate(0)}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}:where(html:not(:has(.rt-container))) .rt-workspace__handle{display:none}:where(html:not(:has(.rt-container))) .rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}:where(html:not(:has(.rt-container))) .rt-workspace__aside--open{transform:translate(0)}}@container rt-place (width <= 768px){.rt-workspace__list{flex-basis:100%}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-workspace__list{flex-basis:100%}}@container rt-place (width > 1080px){.rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@media(width>1080px){:where(html:not(:has(.rt-container))) .rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@container rt-place (width <= 768px){.rt-workspace--has-active .rt-workspace__list{display:none}.rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-workspace--has-active .rt-workspace__list{display:none}:where(html:not(:has(.rt-container))) .rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@container rt-place (width > 1080px){.rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}.rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}@media(width>1080px){:where(html:not(:has(.rt-container))) .rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}:where(html:not(:has(.rt-container))) .rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}.rt-workspace--resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.rt-workspace--resizing .rt-workspace__list,.rt-workspace--resizing .rt-workspace__aside{transition:none}@media(prefers-reduced-motion:reduce){.rt-workspace__aside{transition:none}}}\n"],
+			styles: ["@layer rt-kit.components{.rt-workspace{--rt-workspace-border-width: var(--rt-border-width-thin);--rt-workspace-handle-line-width: var(--rt-border-width-medium);--rt-workspace-handle-transition-duration: var(--rt-duration-fast);--rt-workspace-panel-transition-duration: var(--rt-duration-base);--rt-workspace-aside-shadow: var(--rt-shadow-md);position:relative;display:flex;flex-direction:row;block-size:calc(100dvh - var(--rt-header-height, 0px));min-block-size:0}.rt-workspace__list{display:flex;flex:0 0 var(--rt-workspace-list-size, 320px);flex-direction:column;border-inline-end:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__center{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;padding-inline:var(--rt-space-4)}.rt-workspace__mobile-toolbar{display:none}.rt-workspace__aside{--rt-tabs-list-min-height: calc(56px + var(--rt-space-2) + var(--rt-space-1) + var(--rt-border-width-thin));--rt-tabs-list-align: flex-end;--rt-tabs-list-padding-inline: var(--rt-space-1);--rt-tabs-list-border-color: var(--rt-color-border-strong);--rt-tabs-content-padding-top: 0;display:flex;flex:0 0 var(--rt-workspace-aside-size, 360px);flex-direction:column;border-inline-start:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__handle{position:relative;z-index:1;flex:0 0 auto;background:transparent;cursor:col-resize;inline-size:var(--rt-space-2);margin-inline:calc(-1 * var(--rt-space-1));touch-action:none}.rt-workspace__handle:before{position:absolute;background:transparent;content:\"\";inline-size:var(--rt-workspace-handle-line-width);inset-block:0;inset-inline-start:50%;transform:translate(-50%);transition:background var(--rt-workspace-handle-transition-duration) ease}.rt-workspace__handle:hover:before,.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-strong)}.rt-workspace__handle:focus-visible{outline:none}.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-focus)}@container rt-place (width <= 1080px){.rt-workspace__desktop-only{display:none}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-workspace__desktop-only{display:none}}@container rt-place (width <= 1080px){.rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}.rt-workspace__handle{display:none}.rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}.rt-workspace__aside--open{transform:translate(0)}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}:where(html:not(:has(.rt-container))) .rt-workspace__handle{display:none}:where(html:not(:has(.rt-container))) .rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}:where(html:not(:has(.rt-container))) .rt-workspace__aside--open{transform:translate(0)}}@container rt-place (width <= 768px){.rt-workspace__list{flex-basis:100%}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-workspace__list{flex-basis:100%}}@container rt-place (width > 1080px){.rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@media(width>1080px){:where(html:not(:has(.rt-container))) .rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@container rt-place (width <= 768px){.rt-workspace--has-active .rt-workspace__list{display:none}.rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-workspace--has-active .rt-workspace__list{display:none}:where(html:not(:has(.rt-container))) .rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@container rt-place (width > 1080px){.rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}.rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}@media(width>1080px){:where(html:not(:has(.rt-container))) .rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}:where(html:not(:has(.rt-container))) .rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}.rt-workspace--cards{--rt-workspace-card-gap: var(--rt-space-4);gap:0}.rt-workspace--cards .rt-workspace__list,.rt-workspace--cards .rt-workspace__center,.rt-workspace--cards .rt-workspace__aside{overflow:hidden;border:var(--rt-workspace-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-radius-xl);background:var(--rt-color-bg-surface)}.rt-workspace--cards .rt-workspace__center{padding-inline:0}.rt-workspace--cards .rt-workspace__handle{inline-size:var(--rt-workspace-card-gap);margin-inline:0}@container rt-place (width <= 1080px){.rt-workspace--cards{gap:var(--rt-workspace-card-gap)}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-workspace--cards{gap:var(--rt-workspace-card-gap)}}@container rt-place (width <= 768px){.rt-workspace--cards{gap:0}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-workspace--cards{gap:0}}.rt-workspace--resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.rt-workspace--resizing .rt-workspace__list,.rt-workspace--resizing .rt-workspace__aside{transition:none}@media(prefers-reduced-motion:reduce){.rt-workspace__aside{transition:none}}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -531,13 +543,14 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				class: BEM_BLOCK,
 				"[class.rt-workspace--has-active]": "hasActive()",
+				"[class.rt-workspace--cards]": "cards()",
 				"[class.rt-workspace--aside-collapsed]": "asideCollapsed()",
 				"[class.rt-workspace--resizing]": "resizing()",
 				"[style.--rt-workspace-list-size]": "listWidth() + 'px'",
 				"[style.--rt-workspace-aside-size]": "asideWidth() + 'px'"
 			},
 			template: "<ng-container rtBlock=\"rt-workspace\">\n    @if (listSlot()) {\n        <section rtElem=\"list\" qa-dataid=\"workspace-list\">\n            <ng-container [ngTemplateOutlet]=\"listSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-list\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeList\"\n            [rtMod]=\"{ list: true }\"\n            [attr.aria-valuenow]=\"listWidth()\"\n            [attr.aria-valuemin]=\"listMinWidth()\"\n            [attr.aria-valuemax]=\"listMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'list')\"\n            (dblclick)=\"onHandleReset('list')\"\n            (keydown)=\"onHandleKeydown($event, 'list')\"></div>\n    }\n\n    <section rtElem=\"center\" qa-dataid=\"workspace-center\">\n        @if (hasActive()) {\n            <div rtElem=\"mobile-toolbar\">\n                <rt-icon-button\n                    qa-dataid=\"workspace-back\"\n                    icon=\"arrow-left\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiBackToList\"\n                    [tooltip]=\"t().uiToList\"\n                    (clicked)=\"onBackClicked()\" />\n                <rt-icon-button\n                    qa-dataid=\"workspace-open-details\"\n                    icon=\"info-circle\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiShowDetails\"\n                    [tooltip]=\"t().uiDetails\"\n                    (clicked)=\"openAside()\" />\n            </div>\n        }\n        <ng-container [ngTemplateOutlet]=\"centerSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n    </section>\n\n    @if (asideSlot()) {\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-aside\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeDetails\"\n            [rtMod]=\"{ aside: true }\"\n            [attr.aria-valuenow]=\"asideWidth()\"\n            [attr.aria-valuemin]=\"asideMinWidth()\"\n            [attr.aria-valuemax]=\"asideMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'aside')\"\n            (dblclick)=\"onHandleReset('aside')\"\n            (keydown)=\"onHandleKeydown($event, 'aside')\"></div>\n\n        <section rtElem=\"aside\" qa-dataid=\"workspace-aside\" [rtMod]=\"{ open: asideOpen() }\">\n            <ng-container [ngTemplateOutlet]=\"asideSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n    }\n</ng-container>\n",
-			styles: ["@layer rt-kit.components{.rt-workspace{--rt-workspace-border-width: var(--rt-border-width-thin);--rt-workspace-handle-line-width: var(--rt-border-width-medium);--rt-workspace-handle-transition-duration: var(--rt-duration-fast);--rt-workspace-panel-transition-duration: var(--rt-duration-base);--rt-workspace-aside-shadow: var(--rt-shadow-md);position:relative;display:flex;flex-direction:row;block-size:calc(100dvh - var(--rt-header-height, 0px));min-block-size:0}.rt-workspace__list{display:flex;flex:0 0 var(--rt-workspace-list-size, 320px);flex-direction:column;border-inline-end:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__center{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;padding-inline:var(--rt-space-4)}.rt-workspace__mobile-toolbar{display:none}.rt-workspace__aside{display:flex;flex:0 0 var(--rt-workspace-aside-size, 360px);flex-direction:column;border-inline-start:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__handle{position:relative;z-index:1;flex:0 0 auto;background:transparent;cursor:col-resize;inline-size:var(--rt-space-2);margin-inline:calc(-1 * var(--rt-space-1));touch-action:none}.rt-workspace__handle:before{position:absolute;background:transparent;content:\"\";inline-size:var(--rt-workspace-handle-line-width);inset-block:0;inset-inline-start:50%;transform:translate(-50%);transition:background var(--rt-workspace-handle-transition-duration) ease}.rt-workspace__handle:hover:before,.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-strong)}.rt-workspace__handle:focus-visible{outline:none}.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-focus)}@container rt-place (width <= 1080px){.rt-workspace__desktop-only{display:none}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-workspace__desktop-only{display:none}}@container rt-place (width <= 1080px){.rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}.rt-workspace__handle{display:none}.rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}.rt-workspace__aside--open{transform:translate(0)}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}:where(html:not(:has(.rt-container))) .rt-workspace__handle{display:none}:where(html:not(:has(.rt-container))) .rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}:where(html:not(:has(.rt-container))) .rt-workspace__aside--open{transform:translate(0)}}@container rt-place (width <= 768px){.rt-workspace__list{flex-basis:100%}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-workspace__list{flex-basis:100%}}@container rt-place (width > 1080px){.rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@media(width>1080px){:where(html:not(:has(.rt-container))) .rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@container rt-place (width <= 768px){.rt-workspace--has-active .rt-workspace__list{display:none}.rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-workspace--has-active .rt-workspace__list{display:none}:where(html:not(:has(.rt-container))) .rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@container rt-place (width > 1080px){.rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}.rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}@media(width>1080px){:where(html:not(:has(.rt-container))) .rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}:where(html:not(:has(.rt-container))) .rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}.rt-workspace--resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.rt-workspace--resizing .rt-workspace__list,.rt-workspace--resizing .rt-workspace__aside{transition:none}@media(prefers-reduced-motion:reduce){.rt-workspace__aside{transition:none}}}\n"]
+			styles: ["@layer rt-kit.components{.rt-workspace{--rt-workspace-border-width: var(--rt-border-width-thin);--rt-workspace-handle-line-width: var(--rt-border-width-medium);--rt-workspace-handle-transition-duration: var(--rt-duration-fast);--rt-workspace-panel-transition-duration: var(--rt-duration-base);--rt-workspace-aside-shadow: var(--rt-shadow-md);position:relative;display:flex;flex-direction:row;block-size:calc(100dvh - var(--rt-header-height, 0px));min-block-size:0}.rt-workspace__list{display:flex;flex:0 0 var(--rt-workspace-list-size, 320px);flex-direction:column;border-inline-end:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__center{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;padding-inline:var(--rt-space-4)}.rt-workspace__mobile-toolbar{display:none}.rt-workspace__aside{--rt-tabs-list-min-height: calc(56px + var(--rt-space-2) + var(--rt-space-1) + var(--rt-border-width-thin));--rt-tabs-list-align: flex-end;--rt-tabs-list-padding-inline: var(--rt-space-1);--rt-tabs-list-border-color: var(--rt-color-border-strong);--rt-tabs-content-padding-top: 0;display:flex;flex:0 0 var(--rt-workspace-aside-size, 360px);flex-direction:column;border-inline-start:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__handle{position:relative;z-index:1;flex:0 0 auto;background:transparent;cursor:col-resize;inline-size:var(--rt-space-2);margin-inline:calc(-1 * var(--rt-space-1));touch-action:none}.rt-workspace__handle:before{position:absolute;background:transparent;content:\"\";inline-size:var(--rt-workspace-handle-line-width);inset-block:0;inset-inline-start:50%;transform:translate(-50%);transition:background var(--rt-workspace-handle-transition-duration) ease}.rt-workspace__handle:hover:before,.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-strong)}.rt-workspace__handle:focus-visible{outline:none}.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-focus)}@container rt-place (width <= 1080px){.rt-workspace__desktop-only{display:none}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-workspace__desktop-only{display:none}}@container rt-place (width <= 1080px){.rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}.rt-workspace__handle{display:none}.rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}.rt-workspace__aside--open{transform:translate(0)}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}:where(html:not(:has(.rt-container))) .rt-workspace__handle{display:none}:where(html:not(:has(.rt-container))) .rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}:where(html:not(:has(.rt-container))) .rt-workspace__aside--open{transform:translate(0)}}@container rt-place (width <= 768px){.rt-workspace__list{flex-basis:100%}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-workspace__list{flex-basis:100%}}@container rt-place (width > 1080px){.rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@media(width>1080px){:where(html:not(:has(.rt-container))) .rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@container rt-place (width <= 768px){.rt-workspace--has-active .rt-workspace__list{display:none}.rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-workspace--has-active .rt-workspace__list{display:none}:where(html:not(:has(.rt-container))) .rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@container rt-place (width > 1080px){.rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}.rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}@media(width>1080px){:where(html:not(:has(.rt-container))) .rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}:where(html:not(:has(.rt-container))) .rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}.rt-workspace--cards{--rt-workspace-card-gap: var(--rt-space-4);gap:0}.rt-workspace--cards .rt-workspace__list,.rt-workspace--cards .rt-workspace__center,.rt-workspace--cards .rt-workspace__aside{overflow:hidden;border:var(--rt-workspace-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-radius-xl);background:var(--rt-color-bg-surface)}.rt-workspace--cards .rt-workspace__center{padding-inline:0}.rt-workspace--cards .rt-workspace__handle{inline-size:var(--rt-workspace-card-gap);margin-inline:0}@container rt-place (width <= 1080px){.rt-workspace--cards{gap:var(--rt-workspace-card-gap)}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-workspace--cards{gap:var(--rt-workspace-card-gap)}}@container rt-place (width <= 768px){.rt-workspace--cards{gap:0}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-workspace--cards{gap:0}}.rt-workspace--resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.rt-workspace--resizing .rt-workspace__list,.rt-workspace--resizing .rt-workspace__aside{transition:none}@media(prefers-reduced-motion:reduce){.rt-workspace__aside{transition:none}}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -570,6 +583,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		cards: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cards",
+				required: false
+			}]
+		}],
 		listMinWidth: [{
 			type: i0.Input,
 			args: [{

package/fesm2022/rt-tools-ui-kit-v2-workspace.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-workspace.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/workspace/rt-workspace.directives.ts","../../../projects/ui-kit-v2/src/lib/components/workspace/rt-workspace.component.ts","../../../projects/ui-kit-v2/src/lib/components/workspace/rt-workspace.component.html"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\nimport { IRtWorkspace } from './rt-workspace.model';\n\n@Directive({\n    selector: '[rtWorkspaceDesktopOnly]',\n    host: {\n        class: 'rt-workspace__desktop-only',\n    },\n})\nexport class RtWorkspaceDesktopOnlyDirective {}\n\n@Directive({\n    selector: '[rtWorkspaceList]',\n})\nexport class RtWorkspaceListDirective {\n    public readonly templateRef: TemplateRef<IRtWorkspace.SlotContext> = inject<TemplateRef<IRtWorkspace.SlotContext>>(TemplateRef);\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас\n    public static ngTemplateContextGuard(_directive: RtWorkspaceListDirective, context: unknown): context is IRtWorkspace.SlotContext {\n        return true;\n    }\n}\n\n@Directive({\n    selector: '[rtWorkspaceCenter]',\n})\nexport class RtWorkspaceCenterDirective {\n    public readonly templateRef: TemplateRef<IRtWorkspace.SlotContext> = inject<TemplateRef<IRtWorkspace.SlotContext>>(TemplateRef);\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас\n    public static ngTemplateContextGuard(_directive: RtWorkspaceCenterDirective, context: unknown): context is IRtWorkspace.SlotContext {\n        return true;\n    }\n}\n\n@Directive({\n    selector: '[rtWorkspaceAside]',\n})\nexport class RtWorkspaceAsideDirective {\n    public readonly templateRef: TemplateRef<IRtWorkspace.SlotContext> = inject<TemplateRef<IRtWorkspace.SlotContext>>(TemplateRef);\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас\n    public static ngTemplateContextGuard(_directive: RtWorkspaceAsideDirective, context: unknown): context is IRtWorkspace.SlotContext {\n        return true;\n    }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    DestroyRef,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    numberAttribute,\n    output,\n    OutputEmitterRef,\n    Renderer2,\n    signal,\n    Signal,\n    untracked,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { StorageService } from '@rt-tools/core';\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtWorkspaceAsideDirective, RtWorkspaceCenterDirective, RtWorkspaceListDirective } from './rt-workspace.directives';\nimport { IRtWorkspace } from './rt-workspace.model';\n\nconst BEM_BLOCK: string = 'rt-workspace';\nconst STORAGE_PREFIX: string = 'rt-workspace:';\nconst KEYBOARD_STEP: number = 16;\n\ninterface IDragState {\n    kind: IRtWorkspace.PanelKind;\n    startX: number;\n    startWidth: number;\n}\n\n@Component({\n    selector: 'rt-workspace',\n    templateUrl: './rt-workspace.component.html',\n    styleUrls: ['./rt-workspace.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // Angular\n        NgTemplateOutlet,\n\n        // standalone components / directives\n        RtIconButtonComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-workspace--has-active]': 'hasActive()',\n        '[class.rt-workspace--aside-collapsed]': 'asideCollapsed()',\n        '[class.rt-workspace--resizing]': 'resizing()',\n        '[style.--rt-workspace-list-size]': \"listWidth() + 'px'\",\n        '[style.--rt-workspace-aside-size]': \"asideWidth() + 'px'\",\n    },\n})\nexport class RtWorkspaceComponent implements IRtWorkspace.PanelApi {\n    readonly #storage: StorageService = inject(StorageService);\n\n    readonly #renderer: Renderer2 = inject(Renderer2);\n\n    readonly #hostRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    readonly #listWidthOverride: WritableSignal<number | null> = signal<number | null>(null);\n\n    readonly #asideWidthOverride: WritableSignal<number | null> = signal<number | null>(null);\n\n    readonly #asideCollapsed: WritableSignal<boolean> = signal<boolean>(false);\n\n    readonly #asideOpen: WritableSignal<boolean> = signal<boolean>(false);\n\n    readonly #resizing: WritableSignal<boolean> = signal<boolean>(false);\n\n    #restoredKey: string | null = null;\n\n    #dragState: IDragState | null = null;\n\n    #detachDragListeners: (() => void) | null = null;\n\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly listSlot: Signal<RtWorkspaceListDirective | undefined> = contentChild(RtWorkspaceListDirective);\n\n    protected readonly centerSlot: Signal<RtWorkspaceCenterDirective | undefined> = contentChild(RtWorkspaceCenterDirective);\n\n    protected readonly asideSlot: Signal<RtWorkspaceAsideDirective | undefined> = contentChild(RtWorkspaceAsideDirective);\n\n    protected readonly resizing: Signal<boolean> = this.#resizing.asReadonly();\n\n    protected readonly slotContext: IRtWorkspace.SlotContext = { $implicit: this };\n\n    public readonly storageKey: InputSignal<string | null> = input<string | null>(null);\n\n    public readonly hasActive: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly listMinWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(240, {\n        transform: numberAttribute,\n    });\n\n    public readonly listMaxWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(480, {\n        transform: numberAttribute,\n    });\n\n    public readonly listDefaultWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(320, {\n        transform: numberAttribute,\n    });\n\n    public readonly asideMinWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(280, {\n        transform: numberAttribute,\n    });\n\n    public readonly asideMaxWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(560, {\n        transform: numberAttribute,\n    });\n\n    public readonly asideDefaultWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(360, {\n        transform: numberAttribute,\n    });\n\n    public readonly centerMinWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(360, {\n        transform: numberAttribute,\n    });\n\n    public readonly backClicked: OutputEmitterRef<void> = output<void>();\n\n    public readonly listWidth: Signal<number> = computed((): number => this.#listWidthOverride() ?? this.listDefaultWidth());\n\n    public readonly asideWidth: Signal<number> = computed((): number => this.#asideWidthOverride() ?? this.asideDefaultWidth());\n\n    public readonly asideCollapsed: Signal<boolean> = this.#asideCollapsed.asReadonly();\n\n    public readonly asideOpen: Signal<boolean> = this.#asideOpen.asReadonly();\n\n    constructor() {\n        effect((): void => {\n            const key: string | null = this.storageKey();\n            if (key === null || key === this.#restoredKey) {\n                return;\n            }\n            this.#restoredKey = key;\n            untracked((): void => this.#restoreFromStorage(key));\n        });\n\n        this.#destroyRef.onDestroy((): void => this.#stopDragging());\n    }\n\n    public toggleAsideCollapsed(): void {\n        this.#asideCollapsed.update((collapsed: boolean): boolean => !collapsed);\n        this.#persist();\n    }\n\n    public openAside(): void {\n        this.#asideOpen.set(true);\n    }\n\n    public closeAside(): void {\n        this.#asideOpen.set(false);\n    }\n\n    public toggleAside(): void {\n        this.#asideOpen.update((open: boolean): boolean => !open);\n    }\n\n    protected onBackClicked(): void {\n        this.closeAside();\n        this.backClicked.emit();\n    }\n\n    protected onHandlePointerDown(event: PointerEvent, kind: IRtWorkspace.PanelKind): void {\n        if (event.button !== 0) {\n            return;\n        }\n        event.preventDefault();\n        this.#dragState = {\n            kind,\n            startX: event.clientX,\n            startWidth: kind === 'list' ? this.listWidth() : this.asideWidth(),\n        };\n        this.#resizing.set(true);\n\n        const detachMove: () => void = this.#renderer.listen('document', 'pointermove', (moveEvent: PointerEvent): void =>\n            this.#onDragMove(moveEvent)\n        );\n        const detachUp: () => void = this.#renderer.listen('document', 'pointerup', (): void => {\n            this.#persist();\n            this.#stopDragging();\n        });\n        this.#detachDragListeners = (): void => {\n            detachMove();\n            detachUp();\n        };\n    }\n\n    protected onHandleKeydown(event: KeyboardEvent, kind: IRtWorkspace.PanelKind): void {\n        let delta: number;\n        if (event.key === 'ArrowRight') {\n            delta = kind === 'list' ? KEYBOARD_STEP : -KEYBOARD_STEP;\n        } else if (event.key === 'ArrowLeft') {\n            delta = kind === 'list' ? -KEYBOARD_STEP : KEYBOARD_STEP;\n        } else {\n            return;\n        }\n        event.preventDefault();\n        const current: number = kind === 'list' ? this.listWidth() : this.asideWidth();\n        this.#applyWidth(kind, current + delta);\n        this.#persist();\n    }\n\n    protected onHandleReset(kind: IRtWorkspace.PanelKind): void {\n        const override: WritableSignal<number | null> = kind === 'list' ? this.#listWidthOverride : this.#asideWidthOverride;\n        override.set(null);\n        this.#persist();\n    }\n\n    #onDragMove(event: PointerEvent): void {\n        const drag: IDragState | null = this.#dragState;\n        if (drag === null) {\n            return;\n        }\n        const dx: number = event.clientX - drag.startX;\n        const rawWidth: number = drag.kind === 'list' ? drag.startWidth + dx : drag.startWidth - dx;\n        this.#applyWidth(drag.kind, rawWidth);\n    }\n\n    #applyWidth(kind: IRtWorkspace.PanelKind, rawWidth: number): void {\n        const override: WritableSignal<number | null> = kind === 'list' ? this.#listWidthOverride : this.#asideWidthOverride;\n        override.set(this.#clampWidth(kind, rawWidth));\n    }\n\n    #clampWidth(kind: IRtWorkspace.PanelKind, rawWidth: number): number {\n        const min: number = kind === 'list' ? this.listMinWidth() : this.asideMinWidth();\n        const configMax: number = kind === 'list' ? this.listMaxWidth() : this.asideMaxWidth();\n        // Место соседней панели вычитается, только когда она объявлена: без её слота ширина\n        // соседки — число из умолчаний, а места она не занимает вовсе.\n        const otherWidth: number = this.#occupiedWidth(kind === 'list' ? 'aside' : 'list');\n        const hostWidth: number = this.#hostRef.nativeElement.clientWidth;\n        const available: number = hostWidth > 0 ? hostWidth - otherWidth - this.centerMinWidth() : Number.POSITIVE_INFINITY;\n        const max: number = Math.max(min, Math.min(configMax, available));\n        return Math.round(Math.min(max, Math.max(min, rawWidth)));\n    }\n\n    /** Сколько ширины занимает панель: необъявленная не занимает ничего. */\n    #occupiedWidth(kind: IRtWorkspace.PanelKind): number {\n        if (kind === 'list') {\n            return this.listSlot() ? this.listWidth() : 0;\n        }\n\n        return this.asideSlot() ? this.asideWidth() : 0;\n    }\n\n    #stopDragging(): void {\n        this.#detachDragListeners?.();\n        this.#detachDragListeners = null;\n        this.#dragState = null;\n        this.#resizing.set(false);\n    }\n\n    #restoreFromStorage(key: string): void {\n        const stored: IRtWorkspace.PersistedState | null =\n            this.#storage.getItem<IRtWorkspace.PersistedState>(`${STORAGE_PREFIX}${key}`) ?? null;\n        if (stored === null || typeof stored !== 'object') {\n            return;\n        }\n        if (typeof stored.listWidth === 'number') {\n            this.#listWidthOverride.set(this.#clampWidth('list', stored.listWidth));\n        }\n        if (typeof stored.asideWidth === 'number') {\n            this.#asideWidthOverride.set(this.#clampWidth('aside', stored.asideWidth));\n        }\n        this.#asideCollapsed.set(stored.asideCollapsed === true);\n    }\n\n    #persist(): void {\n        const key: string | null = this.storageKey();\n        if (key === null) {\n            return;\n        }\n        const state: IRtWorkspace.PersistedState = {\n            listWidth: this.listWidth(),\n            asideWidth: this.asideWidth(),\n            asideCollapsed: this.asideCollapsed(),\n        };\n        this.#storage.setItem(`${STORAGE_PREFIX}${key}`, state);\n    }\n}\n","<ng-container rtBlock=\"rt-workspace\">\n    @if (listSlot()) {\n        <section rtElem=\"list\" qa-dataid=\"workspace-list\">\n            <ng-container [ngTemplateOutlet]=\"listSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-list\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeList\"\n            [rtMod]=\"{ list: true }\"\n            [attr.aria-valuenow]=\"listWidth()\"\n            [attr.aria-valuemin]=\"listMinWidth()\"\n            [attr.aria-valuemax]=\"listMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'list')\"\n            (dblclick)=\"onHandleReset('list')\"\n            (keydown)=\"onHandleKeydown($event, 'list')\"></div>\n    }\n\n    <section rtElem=\"center\" qa-dataid=\"workspace-center\">\n        @if (hasActive()) {\n            <div rtElem=\"mobile-toolbar\">\n                <rt-icon-button\n                    qa-dataid=\"workspace-back\"\n                    icon=\"arrow-left\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiBackToList\"\n                    [tooltip]=\"t().uiToList\"\n                    (clicked)=\"onBackClicked()\" />\n                <rt-icon-button\n                    qa-dataid=\"workspace-open-details\"\n                    icon=\"info-circle\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiShowDetails\"\n                    [tooltip]=\"t().uiDetails\"\n                    (clicked)=\"openAside()\" />\n            </div>\n        }\n        <ng-container [ngTemplateOutlet]=\"centerSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n    </section>\n\n    @if (asideSlot()) {\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-aside\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeDetails\"\n            [rtMod]=\"{ aside: true }\"\n            [attr.aria-valuenow]=\"asideWidth()\"\n            [attr.aria-valuemin]=\"asideMinWidth()\"\n            [attr.aria-valuemax]=\"asideMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'aside')\"\n            (dblclick)=\"onHandleReset('aside')\"\n            (keydown)=\"onHandleKeydown($event, 'aside')\"></div>\n\n        <section rtElem=\"aside\" qa-dataid=\"workspace-aside\" [rtMod]=\"{ open: asideOpen() }\">\n            <ng-container [ngTemplateOutlet]=\"asideSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n    }\n</ng-container>\n"],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-workspace.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/workspace/rt-workspace.directives.ts","../../../projects/ui-kit-v2/src/lib/components/workspace/rt-workspace.component.ts","../../../projects/ui-kit-v2/src/lib/components/workspace/rt-workspace.component.html"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\nimport { IRtWorkspace } from './rt-workspace.model';\n\n@Directive({\n    selector: '[rtWorkspaceDesktopOnly]',\n    host: {\n        class: 'rt-workspace__desktop-only',\n    },\n})\nexport class RtWorkspaceDesktopOnlyDirective {}\n\n@Directive({\n    selector: '[rtWorkspaceList]',\n})\nexport class RtWorkspaceListDirective {\n    public readonly templateRef: TemplateRef<IRtWorkspace.SlotContext> = inject<TemplateRef<IRtWorkspace.SlotContext>>(TemplateRef);\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас\n    public static ngTemplateContextGuard(_directive: RtWorkspaceListDirective, context: unknown): context is IRtWorkspace.SlotContext {\n        return true;\n    }\n}\n\n@Directive({\n    selector: '[rtWorkspaceCenter]',\n})\nexport class RtWorkspaceCenterDirective {\n    public readonly templateRef: TemplateRef<IRtWorkspace.SlotContext> = inject<TemplateRef<IRtWorkspace.SlotContext>>(TemplateRef);\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас\n    public static ngTemplateContextGuard(_directive: RtWorkspaceCenterDirective, context: unknown): context is IRtWorkspace.SlotContext {\n        return true;\n    }\n}\n\n@Directive({\n    selector: '[rtWorkspaceAside]',\n})\nexport class RtWorkspaceAsideDirective {\n    public readonly templateRef: TemplateRef<IRtWorkspace.SlotContext> = inject<TemplateRef<IRtWorkspace.SlotContext>>(TemplateRef);\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас\n    public static ngTemplateContextGuard(_directive: RtWorkspaceAsideDirective, context: unknown): context is IRtWorkspace.SlotContext {\n        return true;\n    }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    DestroyRef,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    numberAttribute,\n    output,\n    OutputEmitterRef,\n    Renderer2,\n    signal,\n    Signal,\n    untracked,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { StorageService } from '@rt-tools/core';\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtWorkspaceAsideDirective, RtWorkspaceCenterDirective, RtWorkspaceListDirective } from './rt-workspace.directives';\nimport { IRtWorkspace } from './rt-workspace.model';\n\nconst BEM_BLOCK: string = 'rt-workspace';\nconst STORAGE_PREFIX: string = 'rt-workspace:';\nconst KEYBOARD_STEP: number = 16;\n\ninterface IDragState {\n    kind: IRtWorkspace.PanelKind;\n    startX: number;\n    startWidth: number;\n}\n\n@Component({\n    selector: 'rt-workspace',\n    templateUrl: './rt-workspace.component.html',\n    styleUrls: ['./rt-workspace.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // Angular\n        NgTemplateOutlet,\n\n        // standalone components / directives\n        RtIconButtonComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-workspace--has-active]': 'hasActive()',\n        '[class.rt-workspace--cards]': 'cards()',\n        '[class.rt-workspace--aside-collapsed]': 'asideCollapsed()',\n        '[class.rt-workspace--resizing]': 'resizing()',\n        '[style.--rt-workspace-list-size]': \"listWidth() + 'px'\",\n        '[style.--rt-workspace-aside-size]': \"asideWidth() + 'px'\",\n    },\n})\nexport class RtWorkspaceComponent implements IRtWorkspace.PanelApi {\n    readonly #storage: StorageService = inject(StorageService);\n\n    readonly #renderer: Renderer2 = inject(Renderer2);\n\n    readonly #hostRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    readonly #listWidthOverride: WritableSignal<number | null> = signal<number | null>(null);\n\n    readonly #asideWidthOverride: WritableSignal<number | null> = signal<number | null>(null);\n\n    readonly #asideCollapsed: WritableSignal<boolean> = signal<boolean>(false);\n\n    readonly #asideOpen: WritableSignal<boolean> = signal<boolean>(false);\n\n    readonly #resizing: WritableSignal<boolean> = signal<boolean>(false);\n\n    #restoredKey: string | null = null;\n\n    #dragState: IDragState | null = null;\n\n    #detachDragListeners: (() => void) | null = null;\n\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly listSlot: Signal<RtWorkspaceListDirective | undefined> = contentChild(RtWorkspaceListDirective);\n\n    protected readonly centerSlot: Signal<RtWorkspaceCenterDirective | undefined> = contentChild(RtWorkspaceCenterDirective);\n\n    protected readonly asideSlot: Signal<RtWorkspaceAsideDirective | undefined> = contentChild(RtWorkspaceAsideDirective);\n\n    protected readonly resizing: Signal<boolean> = this.#resizing.asReadonly();\n\n    protected readonly slotContext: IRtWorkspace.SlotContext = { $implicit: this };\n\n    public readonly storageKey: InputSignal<string | null> = input<string | null>(null);\n\n    public readonly hasActive: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Колонки стоят отдельными карточками с зазором, без линий между ними */\n    public readonly cards: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly listMinWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(240, {\n        transform: numberAttribute,\n    });\n\n    public readonly listMaxWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(480, {\n        transform: numberAttribute,\n    });\n\n    public readonly listDefaultWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(320, {\n        transform: numberAttribute,\n    });\n\n    public readonly asideMinWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(280, {\n        transform: numberAttribute,\n    });\n\n    public readonly asideMaxWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(560, {\n        transform: numberAttribute,\n    });\n\n    public readonly asideDefaultWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(360, {\n        transform: numberAttribute,\n    });\n\n    public readonly centerMinWidth: InputSignalWithTransform<number, number | string> = input<number, number | string>(360, {\n        transform: numberAttribute,\n    });\n\n    public readonly backClicked: OutputEmitterRef<void> = output<void>();\n\n    public readonly listWidth: Signal<number> = computed((): number => this.#listWidthOverride() ?? this.listDefaultWidth());\n\n    public readonly asideWidth: Signal<number> = computed((): number => this.#asideWidthOverride() ?? this.asideDefaultWidth());\n\n    public readonly asideCollapsed: Signal<boolean> = this.#asideCollapsed.asReadonly();\n\n    public readonly asideOpen: Signal<boolean> = this.#asideOpen.asReadonly();\n\n    constructor() {\n        effect((): void => {\n            const key: string | null = this.storageKey();\n            if (key === null || key === this.#restoredKey) {\n                return;\n            }\n            this.#restoredKey = key;\n            untracked((): void => this.#restoreFromStorage(key));\n        });\n\n        this.#destroyRef.onDestroy((): void => this.#stopDragging());\n    }\n\n    public toggleAsideCollapsed(): void {\n        this.#asideCollapsed.update((collapsed: boolean): boolean => !collapsed);\n        this.#persist();\n    }\n\n    public openAside(): void {\n        this.#asideOpen.set(true);\n    }\n\n    public closeAside(): void {\n        this.#asideOpen.set(false);\n    }\n\n    public toggleAside(): void {\n        this.#asideOpen.update((open: boolean): boolean => !open);\n    }\n\n    protected onBackClicked(): void {\n        this.closeAside();\n        this.backClicked.emit();\n    }\n\n    protected onHandlePointerDown(event: PointerEvent, kind: IRtWorkspace.PanelKind): void {\n        if (event.button !== 0) {\n            return;\n        }\n        event.preventDefault();\n        this.#dragState = {\n            kind,\n            startX: event.clientX,\n            startWidth: kind === 'list' ? this.listWidth() : this.asideWidth(),\n        };\n        this.#resizing.set(true);\n\n        const detachMove: () => void = this.#renderer.listen('document', 'pointermove', (moveEvent: PointerEvent): void =>\n            this.#onDragMove(moveEvent)\n        );\n        const detachUp: () => void = this.#renderer.listen('document', 'pointerup', (): void => {\n            this.#persist();\n            this.#stopDragging();\n        });\n        this.#detachDragListeners = (): void => {\n            detachMove();\n            detachUp();\n        };\n    }\n\n    protected onHandleKeydown(event: KeyboardEvent, kind: IRtWorkspace.PanelKind): void {\n        let delta: number;\n        if (event.key === 'ArrowRight') {\n            delta = kind === 'list' ? KEYBOARD_STEP : -KEYBOARD_STEP;\n        } else if (event.key === 'ArrowLeft') {\n            delta = kind === 'list' ? -KEYBOARD_STEP : KEYBOARD_STEP;\n        } else {\n            return;\n        }\n        event.preventDefault();\n        const current: number = kind === 'list' ? this.listWidth() : this.asideWidth();\n        this.#applyWidth(kind, current + delta);\n        this.#persist();\n    }\n\n    protected onHandleReset(kind: IRtWorkspace.PanelKind): void {\n        const override: WritableSignal<number | null> = kind === 'list' ? this.#listWidthOverride : this.#asideWidthOverride;\n        override.set(null);\n        this.#persist();\n    }\n\n    #onDragMove(event: PointerEvent): void {\n        const drag: IDragState | null = this.#dragState;\n        if (drag === null) {\n            return;\n        }\n        const dx: number = event.clientX - drag.startX;\n        const rawWidth: number = drag.kind === 'list' ? drag.startWidth + dx : drag.startWidth - dx;\n        this.#applyWidth(drag.kind, rawWidth);\n    }\n\n    #applyWidth(kind: IRtWorkspace.PanelKind, rawWidth: number): void {\n        const override: WritableSignal<number | null> = kind === 'list' ? this.#listWidthOverride : this.#asideWidthOverride;\n        override.set(this.#clampWidth(kind, rawWidth));\n    }\n\n    #clampWidth(kind: IRtWorkspace.PanelKind, rawWidth: number): number {\n        const min: number = kind === 'list' ? this.listMinWidth() : this.asideMinWidth();\n        const configMax: number = kind === 'list' ? this.listMaxWidth() : this.asideMaxWidth();\n        // Место соседней панели вычитается, только когда она объявлена: без её слота ширина\n        // соседки — число из умолчаний, а места она не занимает вовсе.\n        const otherWidth: number = this.#occupiedWidth(kind === 'list' ? 'aside' : 'list');\n        const hostWidth: number = this.#hostRef.nativeElement.clientWidth;\n        const available: number = hostWidth > 0 ? hostWidth - otherWidth - this.centerMinWidth() : Number.POSITIVE_INFINITY;\n        const max: number = Math.max(min, Math.min(configMax, available));\n        return Math.round(Math.min(max, Math.max(min, rawWidth)));\n    }\n\n    /** Сколько ширины занимает панель: необъявленная не занимает ничего. */\n    #occupiedWidth(kind: IRtWorkspace.PanelKind): number {\n        if (kind === 'list') {\n            return this.listSlot() ? this.listWidth() : 0;\n        }\n\n        return this.asideSlot() ? this.asideWidth() : 0;\n    }\n\n    #stopDragging(): void {\n        this.#detachDragListeners?.();\n        this.#detachDragListeners = null;\n        this.#dragState = null;\n        this.#resizing.set(false);\n    }\n\n    #restoreFromStorage(key: string): void {\n        const stored: IRtWorkspace.PersistedState | null =\n            this.#storage.getItem<IRtWorkspace.PersistedState>(`${STORAGE_PREFIX}${key}`) ?? null;\n        if (stored === null || typeof stored !== 'object') {\n            return;\n        }\n        if (typeof stored.listWidth === 'number') {\n            this.#listWidthOverride.set(this.#clampWidth('list', stored.listWidth));\n        }\n        if (typeof stored.asideWidth === 'number') {\n            this.#asideWidthOverride.set(this.#clampWidth('aside', stored.asideWidth));\n        }\n        this.#asideCollapsed.set(stored.asideCollapsed === true);\n    }\n\n    #persist(): void {\n        const key: string | null = this.storageKey();\n        if (key === null) {\n            return;\n        }\n        const state: IRtWorkspace.PersistedState = {\n            listWidth: this.listWidth(),\n            asideWidth: this.asideWidth(),\n            asideCollapsed: this.asideCollapsed(),\n        };\n        this.#storage.setItem(`${STORAGE_PREFIX}${key}`, state);\n    }\n}\n","<ng-container rtBlock=\"rt-workspace\">\n    @if (listSlot()) {\n        <section rtElem=\"list\" qa-dataid=\"workspace-list\">\n            <ng-container [ngTemplateOutlet]=\"listSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-list\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeList\"\n            [rtMod]=\"{ list: true }\"\n            [attr.aria-valuenow]=\"listWidth()\"\n            [attr.aria-valuemin]=\"listMinWidth()\"\n            [attr.aria-valuemax]=\"listMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'list')\"\n            (dblclick)=\"onHandleReset('list')\"\n            (keydown)=\"onHandleKeydown($event, 'list')\"></div>\n    }\n\n    <section rtElem=\"center\" qa-dataid=\"workspace-center\">\n        @if (hasActive()) {\n            <div rtElem=\"mobile-toolbar\">\n                <rt-icon-button\n                    qa-dataid=\"workspace-back\"\n                    icon=\"arrow-left\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiBackToList\"\n                    [tooltip]=\"t().uiToList\"\n                    (clicked)=\"onBackClicked()\" />\n                <rt-icon-button\n                    qa-dataid=\"workspace-open-details\"\n                    icon=\"info-circle\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiShowDetails\"\n                    [tooltip]=\"t().uiDetails\"\n                    (clicked)=\"openAside()\" />\n            </div>\n        }\n        <ng-container [ngTemplateOutlet]=\"centerSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n    </section>\n\n    @if (asideSlot()) {\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-aside\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeDetails\"\n            [rtMod]=\"{ aside: true }\"\n            [attr.aria-valuenow]=\"asideWidth()\"\n            [attr.aria-valuemin]=\"asideMinWidth()\"\n            [attr.aria-valuemax]=\"asideMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'aside')\"\n            (dblclick)=\"onHandleReset('aside')\"\n            (keydown)=\"onHandleKeydown($event, 'aside')\"></div>\n\n        <section rtElem=\"aside\" qa-dataid=\"workspace-aside\" [rtMod]=\"{ open: asideOpen() }\">\n            <ng-container [ngTemplateOutlet]=\"asideSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n    }\n</ng-container>\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.35.1",
+  "version": "0.37.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",

package/src/lib/components/ai-prompt-input/rt-ai-prompt-input.component.scss

@@ -71,7 +71,8 @@
             }
         }
 
-        // Ряд действий стоит внутри рамки снизу: слева «+», справа контролы и отправка.
+        // Ряд действий стоит внутри рамки снизу: слева «+» и элементы потребителя, справа его
+        // элементы, контролы и отправка. Элементы потребителя любые, высотой с кнопку sm
         &__actions {
             display: flex;
             align-items: center;

package/src/lib/components/detail-list/rt-detail-row.component.scss

@@ -13,11 +13,13 @@
             color: var(--rt-field-label-color);
             font-size: var(--rt-field-label-font-size);
             font-weight: var(--rt-field-label-font-weight);
+            line-height: round(1em * var(--rt-leading-snug), 1px);
         }
 
         &__value {
             color: var(--rt-field-value-color);
             font-size: var(--rt-field-value-font-size);
+            line-height: var(--rt-leading-normal);
         }
     }
 }

package/src/lib/components/page-header/rt-page-header-mobile.scss

@@ -1,4 +1,10 @@
 @layer rt-kit.components {
+    /* Подложка под мобильной панелью навигации: страница рядом затемнена, как под шторкой, и не
+       читается частью меню. Нажатие по ней закрывает панель */
+    .cdk-overlay-backdrop.rt-page-header-mobile-backdrop {
+        background: var(--rt-color-bg-overlay);
+    }
+
     /* Мобильная панель навигации (гамбургер). Рендерится в CDK Overlay, поэтому
        отдельный корневой блок. Раздел — аккордеон, внутри него те же группы, что и в
        панели на широком экране, только без колонок: они сюда не помещаются. */

package/src/lib/components/popover/CONTEXT.md

@@ -18,6 +18,7 @@
 | `rtPopoverFitViewport`                  | `boolean`                        | `false`   |
 | `rtPopoverOffsetY` / `rtPopoverOffsetX` | `number`                         | `4` / `0` |
 | `rtPopoverPanelClass`                   | `string`                         | `''`      |
+| `rtPopoverBackdropClass`                | `string`                         | `''`      |
 | `rtPopoverContext`                      | `unknown`                        | `null`    |
 | `rtPopoverDisabled`                     | `boolean`                        | `false`   |
 
@@ -46,6 +47,9 @@
   остаётся недостижимым. Порог 120 точек решает только, сдвинуть панель или ужать: короткая
   панель остаётся высотой со своё содержимое.
 - `rtPopoverPanelClass` добавляется **к** базовому `rt-popover-panel`, а не вместо него.
+- `rtPopoverBackdropClass` ставит под панель подложку на весь экран: её вид задаёт класс, нажатие
+  по ней закрывает панель. Пусто — подложки нет, страница рядом с панелью доступна. Так мобильное
+  меню шапки затемняет страницу под собой.
 - Escape и клик мимо закрывают панель во всех режимах.
 - `rtPopoverPositions` даёт свои места вокруг host'а — первое главное, остальные запасные. Заданные
   читаются при каждом открытии; без входа у панели прежние два места, под host'ом и над ним. Так

package/src/lib/components/tabs/rt-tabs.component.scss

@@ -34,13 +34,19 @@
             align-items: center;
         }
 
+        // Высоту полосы и прижим вкладок задаёт место, где вкладки стоят: в колонке рабочего места
+        // полоса встаёт полкой вровень с шапками соседних колонок
         &__tab-list {
             position: relative;
             display: flex;
-            border-bottom: var(--rt-tabs-border-width) solid var(--rt-color-border-default);
+            box-sizing: border-box;
+            align-items: var(--rt-tabs-list-align, stretch);
+            border-bottom: var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color, var(--rt-color-border-default));
             margin: 0;
+            min-block-size: var(--rt-tabs-list-min-height, auto);
             -ms-overflow-style: none;
             overflow-x: auto;
+            padding-inline: var(--rt-tabs-list-padding-inline, 0);
             scrollbar-width: none;
             white-space: nowrap;
 
@@ -179,7 +185,7 @@
             min-height: 0;
             flex: 1 1 auto;
             flex-direction: column;
-            padding-top: var(--rt-space-md);
+            padding-top: var(--rt-tabs-content-padding-top, var(--rt-space-md));
             gap: var(--rt-space-md);
             line-height: var(--rt-leading-relaxed);
 
@@ -325,6 +331,11 @@
             }
         }
 
+        // Плотные вкладки: класс ставит полоса, а отступ несёт сама вкладка
+        .rt-tabs--dense &__trigger {
+            padding-inline: var(--rt-space-2);
+        }
+
         &__title {
             overflow: hidden;
             max-width: 200px;
@@ -389,10 +400,16 @@
             }
         }
 
+        // Черта выбранной вкладки входит в её высоту, как в компоненте Tab дизайн-системы: вкладка
+        // выше соседних на толщину черты, и при прижатии полосы к низу подпись стоит выше их подписей
         &--selected {
             color: var(--rt-color-action-primary);
             cursor: default;
 
+            .rt-tab-item__trigger {
+                padding-block-end: calc(var(--rt-space-2) + 2px);
+            }
+
             &:after {
                 background-color: var(--rt-color-action-primary);
             }

package/src/lib/components/thread-list/rt-thread-list-messenger.scss

@@ -0,0 +1,45 @@
+// Вид мессенджера списка разговоров: колонка с полями, строки карточками со скруглением.
+// Лежит отдельно от стилей списка, чтобы оба файла уместились в предел длины.
+@layer rt-kit.components {
+    .rt-thread-list--messenger {
+        padding: calc(var(--rt-space-1) * 1.5) var(--rt-space-2) 0;
+        gap: var(--rt-space-0-5);
+
+        // Низ шапки стоит на одной линии с низом шапки переписки: поиск опущен отступом сверху,
+        // высота 56 под ним прежняя, линия входит в высоту
+        .rt-thread-list__head {
+            box-sizing: border-box;
+            block-size: calc(56px + var(--rt-space-1) * 1.75);
+            padding-block-start: calc(var(--rt-space-1) * 1.75);
+        }
+
+        .rt-thread-list__tabs {
+            padding: 0;
+        }
+
+        .rt-thread-list__rows {
+            gap: var(--rt-space-0-5);
+        }
+
+        // Выбор и непрочитанное видны по фону и по счётчику шаблона: левой полосы и точки нет
+        .rt-thread-list__row {
+            padding: calc(var(--rt-space-2) + var(--rt-space-0-5)) calc(var(--rt-space-2) + var(--rt-space-1));
+            border-radius: var(--rt-radius-lg);
+            border-inline-start: none;
+            gap: calc(var(--rt-space-2) + var(--rt-space-1));
+
+            &--unread {
+                background: none;
+
+                &:before {
+                    content: none;
+                }
+            }
+
+            &--active,
+            &--active:hover {
+                background: var(--rt-color-state-info-bg);
+            }
+        }
+    }
+}

package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss

@@ -85,8 +85,10 @@
                     color: var(--rt-color-text-primary);
                 }
 
+                // Выбранный сегмент — плашка над дорожкой: тень RT/Shadow/sm, как в макете сегмента
                 &--active {
                     background-color: var(--rt-toggle-button-group-active-bg);
+                    box-shadow: var(--rt-shadow-sm);
                     color: var(--rt-color-text-primary);
                 }
 
@@ -166,9 +168,16 @@
             width: 100%;
             flex: 1 1 auto;
 
+            /* Поровну и при длинной подписи: своя ширина подписи сегмент не раздвигает, текст
+               стоит по центру сегмента и заходит в его боковые отступы. */
             .rt-toggle-button-group__button {
+                min-width: 0;
                 flex: 1 1 0;
             }
+
+            .rt-toggle-button-group__label {
+                flex-shrink: 0;
+            }
         }
     }
 

package/src/lib/components/workspace/rt-workspace.component.scss

@@ -36,6 +36,13 @@
         }
 
         &__aside {
+            // Вкладки панели прижаты к своей линии того же цвета, низ полки вровень с низом шапки переписки
+            --rt-tabs-list-min-height: calc(56px + var(--rt-space-2) + var(--rt-space-1) + var(--rt-border-width-thin));
+            --rt-tabs-list-align: flex-end;
+            --rt-tabs-list-padding-inline: var(--rt-space-1);
+            --rt-tabs-list-border-color: var(--rt-color-border-strong);
+            --rt-tabs-content-padding-top: 0;
+
             display: flex;
             flex: 0 0 var(--rt-workspace-aside-size, 360px);
             flex-direction: column;
@@ -164,6 +171,39 @@
             }
         }
 
+        // Карточки: у каждой колонки своя рамка и скругление, зазор между ними держит ручка
+        &--cards {
+            --rt-workspace-card-gap: var(--rt-space-4);
+
+            gap: 0;
+
+            .rt-workspace__list,
+            .rt-workspace__center,
+            .rt-workspace__aside {
+                overflow: hidden;
+                border: var(--rt-workspace-border-width) solid var(--rt-color-border-subtle);
+                border-radius: var(--rt-radius-xl);
+                background: var(--rt-color-bg-surface);
+            }
+
+            .rt-workspace__center {
+                padding-inline: 0;
+            }
+
+            .rt-workspace__handle {
+                inline-size: var(--rt-workspace-card-gap);
+                margin-inline: 0;
+            }
+
+            @include bp.place-max(1080px) {
+                gap: var(--rt-workspace-card-gap);
+            }
+
+            @include bp.place-max(768px) {
+                gap: 0;
+            }
+        }
+
         &--resizing {
             cursor: col-resize;
             user-select: none;

package/src/lib/components/workspace-details/rt-workspace-details.component.scss

@@ -26,9 +26,10 @@
             flex: 1 1 auto;
             min-block-size: 0;
 
+            // Низ полки вкладок стоит на одной линии с низом шапки переписки
             .rt-tabs__header {
                 align-items: flex-end;
-                block-size: 56px;
+                block-size: calc(56px + var(--rt-space-2) + var(--rt-space-1) + var(--rt-border-width-thin));
                 border-block-end: var(--rt-workspace-details-border-width) solid var(--rt-color-border-strong);
                 padding-inline: var(--rt-space-lg);
             }
@@ -53,6 +54,30 @@
             overflow-y: auto;
         }
 
+        // Верх сведений о человеке: знак, имя и контакт столбцом по центру, линия отделяет строки
+        &__profile {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border-block-end: var(--rt-workspace-details-border-width) solid var(--rt-color-border-subtle);
+            gap: calc(var(--rt-space-1) * 1.5);
+            padding-block: var(--rt-space-2) var(--rt-space-5);
+            text-align: center;
+        }
+
+        &__profile-name {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-lg);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: round(1em * var(--rt-leading-tight), 1px);
+        }
+
+        &__profile-contact {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            line-height: round(1em * var(--rt-leading-tight), 1px);
+        }
+
         &__agent-view,
         &__agent-edit {
             display: flex;