@ktortu/aaa 0.9.5 → 0.9.7

package/fesm2022/ktortu-aaa-layout.mjs

@@ -0,0 +1,286 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, computed, Injectable, input, effect, Component, Directive } from '@angular/core';
+import { KtViewport } from '@ktortu/aaa/cdk';
+import * as i1 from '@angular/cdk/a11y';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+
+const KT_LAYOUT_DEFAULT_STATE = new InjectionToken('KT_LAYOUT_DEFAULT_STATE', {
+    providedIn: 'root',
+    factory: () => 'expanded',
+});
+/**
+ * Service global de gestion de la mise en page (Layout).
+ * Gère l'état d'ouverture/fermeture de la barre latérale sur mobile et bureau,
+ * ainsi que le comportement spécifique de "rail" sur bureau.
+ *
+ * NOTE: Ce service n'est pas "providedIn: 'root'". Le développeur doit le fournir
+ * (via le tableau providers d'un composant parent ou de l'application) pour
+ * maîtriser le scope (ex: avoir plusieurs layouts indépendants).
+ */
+class KtLayoutService {
+    viewport = inject(KtViewport);
+    defaultState = inject(KT_LAYOUT_DEFAULT_STATE);
+    /**
+     * Comportement actif lors de la fermeture sur ordinateur (écran non mobile).
+     * Renseigné généralement par le composant racine `KtLayoutComponent`.
+     */
+    desktopCloseBehavior = signal('hidden', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "desktopCloseBehavior" }] : /* istanbul ignore next */ []));
+    _isDesktopOpen = signal(this.defaultState !== 'rail' && this.defaultState !== 'hidden', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isDesktopOpen" }] : /* istanbul ignore next */ []));
+    _isMobileOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isMobileOpen" }] : /* istanbul ignore next */ []));
+    isMobile = this.viewport.isMobile;
+    isRail = computed(() => !this.isMobile() && !this._isDesktopOpen() && this.desktopCloseBehavior() === 'rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRail" }] : /* istanbul ignore next */ []));
+    isExpanded = computed(() => !this.isMobile() && this._isDesktopOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    isHidden = computed(() => (this.isMobile() && !this._isMobileOpen()) ||
+        (!this.isMobile() && !this._isDesktopOpen() && this.desktopCloseBehavior() === 'hidden'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
+    isMobileOpen = computed(() => this.isMobile() && this._isMobileOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobileOpen" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.isMobile()) {
+            this._isMobileOpen.update((v) => !v);
+        }
+        else {
+            this._isDesktopOpen.update((v) => !v);
+        }
+    }
+    open() {
+        if (this.isMobile()) {
+            this._isMobileOpen.set(true);
+        }
+        else {
+            this._isDesktopOpen.set(true);
+        }
+    }
+    close() {
+        if (this.isMobile()) {
+            this._isMobileOpen.set(false);
+        }
+        else {
+            this._isDesktopOpen.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtLayoutService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtLayoutService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Composant racine de l'application qui gère la structure de base (Sidebar, Toolbar, Contenu).
+ * Configure dynamiquement le comportement du layout.
+ */
+class KtLayoutComponent {
+    /**
+     * Définit le comportement de la navigation latérale lors de sa fermeture sur bureau (écran large).
+     * - `'hidden'` (défaut) : le menu est complètement masqué et retiré du flux visuel/a11y.
+     * - `'rail'` : le menu est réduit à une fine barre verticale (mini-sidebar), permettant
+     *              d'afficher uniquement les icônes. Idéal si les liens possèdent des icônes explicites.
+     */
+    desktopCloseBehavior = input('hidden', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "desktopCloseBehavior" }] : /* istanbul ignore next */ []));
+    layout = inject(KtLayoutService);
+    constructor() {
+        effect(() => {
+            this.layout.desktopCloseBehavior.set(this.desktopCloseBehavior());
+        }, { allowSignalWrites: true });
+        effect(() => {
+            // Clean up mobile state when switching back to desktop
+            if (!this.layout.isMobile() && this.layout.isMobileOpen()) {
+                this.layout.close();
+            }
+        }, { allowSignalWrites: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: KtLayoutComponent, isStandalone: true, selector: "kt-layout", inputs: { desktopCloseBehavior: { classPropertyName: "desktopCloseBehavior", publicName: "desktopCloseBehavior", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kt-layout-container" }, ngImport: i0, template: `
+    <ng-content select="kt-sidenav"></ng-content>
+    <div class="kt-layout-main-wrapper">
+      <ng-content select="kt-toolbar"></ng-content>
+      <main class="kt-layout-main" [attr.aria-hidden]="layout.isMobileOpen()">
+        <ng-content></ng-content>
+      </main>
+    </div>
+    <div
+      class="kt-layout-backdrop"
+      [class.is-visible]="layout.isMobileOpen()"
+      aria-hidden="true"
+      (click)="layout.close()"
+    ></div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kt-layout',
+                    standalone: true,
+                    host: {
+                        class: 'kt-layout-container',
+                    },
+                    template: `
+    <ng-content select="kt-sidenav"></ng-content>
+    <div class="kt-layout-main-wrapper">
+      <ng-content select="kt-toolbar"></ng-content>
+      <main class="kt-layout-main" [attr.aria-hidden]="layout.isMobileOpen()">
+        <ng-content></ng-content>
+      </main>
+    </div>
+    <div
+      class="kt-layout-backdrop"
+      [class.is-visible]="layout.isMobileOpen()"
+      aria-hidden="true"
+      (click)="layout.close()"
+    ></div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { desktopCloseBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "desktopCloseBehavior", required: false }] }] } });
+
+/**
+ * Composant représentant le panneau latéral de navigation.
+ * Se comporte comme un tiroir (drawer) superposé sur mobile, et comme un
+ * menu latéral persistant (réductible ou masquable) sur ordinateur.
+ */
+class KtSidenavComponent {
+    layout = inject(KtLayoutService);
+    isHidden = computed(() => this.layout.isHidden(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
+    trapFocus = inject(CdkTrapFocus);
+    constructor() {
+        effect(() => {
+            this.trapFocus.autoCapture = this.layout.isMobileOpen();
+            this.trapFocus.enabled = this.layout.isMobileOpen();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: KtSidenavComponent, isStandalone: true, selector: "kt-sidenav", host: { attributes: { "role": "navigation" }, properties: { "class.is-hidden": "isHidden()", "class.is-rail": "layout.isRail()", "class.is-mobile-open": "layout.isMobileOpen()", "attr.aria-expanded": "layout.isExpanded()", "attr.aria-hidden": "isHidden()" }, classAttribute: "kt-sidenav" }, hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSidenavComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kt-sidenav',
+                    standalone: true,
+                    imports: [CdkTrapFocus],
+                    host: {
+                        class: 'kt-sidenav',
+                        '[class.is-hidden]': 'isHidden()',
+                        '[class.is-rail]': 'layout.isRail()',
+                        '[class.is-mobile-open]': 'layout.isMobileOpen()',
+                        '[attr.aria-expanded]': 'layout.isExpanded()',
+                        '[attr.aria-hidden]': 'isHidden()',
+                        role: 'navigation',
+                    },
+                    hostDirectives: [CdkTrapFocus],
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Barre d'outils supérieure (Toolbar / Top app bar).
+ * Se place généralement dans un `kt-layout`.
+ */
+class KtToolbarComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: KtToolbarComponent, isStandalone: true, selector: "kt-toolbar", host: { attributes: { "role": "banner" }, classAttribute: "kt-toolbar" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kt-toolbar',
+                    standalone: true,
+                    host: {
+                        class: 'kt-toolbar',
+                        role: 'banner',
+                    },
+                    template: `<ng-content></ng-content>`,
+                }]
+        }] });
+
+class KtNavItemComponent {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    layout = inject(KtLayoutService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: KtNavItemComponent, isStandalone: true, selector: "kt-nav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "kt-nav-item" }, ngImport: i0, template: `
+    <div class="kt-nav-item-icon">
+      <ng-content select="[kt-icon]"></ng-content>
+    </div>
+    <div class="kt-nav-item-label">
+      {{ label() }}
+      <ng-content></ng-content>
+    </div>
+    <!-- TODO: Add Tooltip component injection here conditionally based on layout.isRail() -->
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtNavItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kt-nav-item',
+                    standalone: true,
+                    host: {
+                        class: 'kt-nav-item',
+                    },
+                    template: `
+    <div class="kt-nav-item-icon">
+      <ng-content select="[kt-icon]"></ng-content>
+    </div>
+    <div class="kt-nav-item-label">
+      {{ label() }}
+      <ng-content></ng-content>
+    </div>
+    <!-- TODO: Add Tooltip component injection here conditionally based on layout.isRail() -->
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+
+/**
+ * Directive applicable sur n'importe quel élément (souvent un bouton) pour basculer
+ * l'état d'ouverture du panneau latéral (Sidenav).
+ *
+ * Expose l'état du layout pour des utilisations dynamiques dans le template
+ * (ex: changer l'icône selon l'état).
+ *
+ * @example
+ * ```html
+ * <button ktSidenavToggle #btn="ktSidenavToggle" [icon]="btn.isRail() ? 'right' : 'left'">
+ * ```
+ */
+class KtSidenavToggleDirective {
+    layout = inject(KtLayoutService);
+    /** Indique si le menu est actuellement réduit en mode rail. */
+    isRail = this.layout.isRail;
+    /** Indique si le menu est actuellement complètement étendu sur bureau. */
+    isExpanded = this.layout.isExpanded;
+    /** Indique si le menu est totalement masqué. */
+    isHidden = this.layout.isHidden;
+    /** Indique si le tiroir est actuellement ouvert par-dessus le contenu (mobile). */
+    isMobileOpen = this.layout.isMobileOpen;
+    /** Indique si l'écran actuel est de taille compacte (mobile). */
+    isMobile = this.layout.isMobile;
+    onClick() {
+        this.layout.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSidenavToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: KtSidenavToggleDirective, isStandalone: true, selector: "[ktSidenavToggle]", host: { listeners: { "click": "onClick()" } }, exportAs: ["ktSidenavToggle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtSidenavToggleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ktSidenavToggle]',
+                    exportAs: 'ktSidenavToggle',
+                    standalone: true,
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KT_LAYOUT_DEFAULT_STATE, KtLayoutComponent, KtLayoutService, KtNavItemComponent, KtSidenavComponent, KtSidenavToggleDirective, KtToolbarComponent };
+//# sourceMappingURL=ktortu-aaa-layout.mjs.map

package/fesm2022/ktortu-aaa-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ktortu-aaa-layout.mjs","sources":["../../../../projects/ktortu/aaa/layout/layout.service.ts","../../../../projects/ktortu/aaa/layout/layout.component.ts","../../../../projects/ktortu/aaa/layout/sidenav.component.ts","../../../../projects/ktortu/aaa/layout/toolbar.component.ts","../../../../projects/ktortu/aaa/layout/nav-item.component.ts","../../../../projects/ktortu/aaa/layout/sidenav-toggle.directive.ts","../../../../projects/ktortu/aaa/layout/ktortu-aaa-layout.ts"],"sourcesContent":["import { Injectable, computed, inject, InjectionToken, signal } from '@angular/core';\nimport { KtViewport } from '@ktortu/aaa/cdk';\n\n/** Mode d'état de la navigation latérale. */\nexport type KtSidenavState = 'expanded' | 'rail' | 'hidden';\n\nexport const KT_LAYOUT_DEFAULT_STATE = new InjectionToken<KtSidenavState>('KT_LAYOUT_DEFAULT_STATE', {\n  providedIn: 'root',\n  factory: () => 'expanded',\n});\n\n/**\n * Service global de gestion de la mise en page (Layout).\n * Gère l'état d'ouverture/fermeture de la barre latérale sur mobile et bureau,\n * ainsi que le comportement spécifique de \"rail\" sur bureau.\n *\n * NOTE: Ce service n'est pas \"providedIn: 'root'\". Le développeur doit le fournir\n * (via le tableau providers d'un composant parent ou de l'application) pour\n * maîtriser le scope (ex: avoir plusieurs layouts indépendants).\n */\n@Injectable()\nexport class KtLayoutService {\n  private readonly viewport = inject(KtViewport);\n  private readonly defaultState = inject(KT_LAYOUT_DEFAULT_STATE);\n\n  /**\n   * Comportement actif lors de la fermeture sur ordinateur (écran non mobile).\n   * Renseigné généralement par le composant racine `KtLayoutComponent`.\n   */\n  readonly desktopCloseBehavior = signal<'hidden' | 'rail'>('hidden');\n\n  private readonly _isDesktopOpen = signal<boolean>(this.defaultState !== 'rail' && this.defaultState !== 'hidden');\n  private readonly _isMobileOpen = signal<boolean>(false);\n\n  readonly isMobile = this.viewport.isMobile;\n  readonly isRail = computed(\n    () => !this.isMobile() && !this._isDesktopOpen() && this.desktopCloseBehavior() === 'rail',\n  );\n  readonly isExpanded = computed(() => !this.isMobile() && this._isDesktopOpen());\n  readonly isHidden = computed(\n    () =>\n      (this.isMobile() && !this._isMobileOpen()) ||\n      (!this.isMobile() && !this._isDesktopOpen() && this.desktopCloseBehavior() === 'hidden'),\n  );\n  readonly isMobileOpen = computed(() => this.isMobile() && this._isMobileOpen());\n\n  toggle() {\n    if (this.isMobile()) {\n      this._isMobileOpen.update((v) => !v);\n    } else {\n      this._isDesktopOpen.update((v) => !v);\n    }\n  }\n\n  open() {\n    if (this.isMobile()) {\n      this._isMobileOpen.set(true);\n    } else {\n      this._isDesktopOpen.set(true);\n    }\n  }\n\n  close() {\n    if (this.isMobile()) {\n      this._isMobileOpen.set(false);\n    } else {\n      this._isDesktopOpen.set(false);\n    }\n  }\n}\n","import { Component, inject, effect, input } from '@angular/core';\nimport { KtLayoutService } from './layout.service';\n\n/**\n * Composant racine de l'application qui gère la structure de base (Sidebar, Toolbar, Contenu).\n * Configure dynamiquement le comportement du layout.\n */\n@Component({\n  selector: 'kt-layout',\n  standalone: true,\n  host: {\n    class: 'kt-layout-container',\n  },\n  template: `\n    <ng-content select=\"kt-sidenav\"></ng-content>\n    <div class=\"kt-layout-main-wrapper\">\n      <ng-content select=\"kt-toolbar\"></ng-content>\n      <main class=\"kt-layout-main\" [attr.aria-hidden]=\"layout.isMobileOpen()\">\n        <ng-content></ng-content>\n      </main>\n    </div>\n    <div\n      class=\"kt-layout-backdrop\"\n      [class.is-visible]=\"layout.isMobileOpen()\"\n      aria-hidden=\"true\"\n      (click)=\"layout.close()\"\n    ></div>\n  `,\n})\nexport class KtLayoutComponent {\n  /**\n   * Définit le comportement de la navigation latérale lors de sa fermeture sur bureau (écran large).\n   * - `'hidden'` (défaut) : le menu est complètement masqué et retiré du flux visuel/a11y.\n   * - `'rail'` : le menu est réduit à une fine barre verticale (mini-sidebar), permettant\n   *              d'afficher uniquement les icônes. Idéal si les liens possèdent des icônes explicites.\n   */\n  readonly desktopCloseBehavior = input<'hidden' | 'rail'>('hidden');\n  protected readonly layout = inject(KtLayoutService);\n\n  constructor() {\n    effect(\n      () => {\n        this.layout.desktopCloseBehavior.set(this.desktopCloseBehavior());\n      },\n      { allowSignalWrites: true },\n    );\n\n    effect(\n      () => {\n        // Clean up mobile state when switching back to desktop\n        if (!this.layout.isMobile() && this.layout.isMobileOpen()) {\n          this.layout.close();\n        }\n      },\n      { allowSignalWrites: true },\n    );\n  }\n}\n","import { Component, inject, computed, effect } from '@angular/core';\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\nimport { KtLayoutService } from './layout.service';\n\n/**\n * Composant représentant le panneau latéral de navigation.\n * Se comporte comme un tiroir (drawer) superposé sur mobile, et comme un\n * menu latéral persistant (réductible ou masquable) sur ordinateur.\n */\n@Component({\n  selector: 'kt-sidenav',\n  standalone: true,\n  imports: [CdkTrapFocus],\n  host: {\n    class: 'kt-sidenav',\n    '[class.is-hidden]': 'isHidden()',\n    '[class.is-rail]': 'layout.isRail()',\n    '[class.is-mobile-open]': 'layout.isMobileOpen()',\n    '[attr.aria-expanded]': 'layout.isExpanded()',\n    '[attr.aria-hidden]': 'isHidden()',\n    role: 'navigation',\n  },\n  hostDirectives: [CdkTrapFocus],\n  template: `<ng-content></ng-content>`,\n})\nexport class KtSidenavComponent {\n  protected readonly layout = inject(KtLayoutService);\n  protected readonly isHidden = computed(() => this.layout.isHidden());\n  private readonly trapFocus = inject(CdkTrapFocus);\n\n  constructor() {\n    effect(() => {\n      this.trapFocus.autoCapture = this.layout.isMobileOpen();\n      this.trapFocus.enabled = this.layout.isMobileOpen();\n    });\n  }\n}\n","import { Component } from '@angular/core';\n\n/**\n * Barre d'outils supérieure (Toolbar / Top app bar).\n * Se place généralement dans un `kt-layout`.\n */\n@Component({\n  selector: 'kt-toolbar',\n  standalone: true,\n  host: {\n    class: 'kt-toolbar',\n    role: 'banner',\n  },\n  template: `<ng-content></ng-content>`,\n})\nexport class KtToolbarComponent {}\n","import { Component, input, inject } from '@angular/core';\nimport { KtLayoutService } from './layout.service';\n\n@Component({\n  selector: 'kt-nav-item',\n  standalone: true,\n  host: {\n    class: 'kt-nav-item',\n  },\n  template: `\n    <div class=\"kt-nav-item-icon\">\n      <ng-content select=\"[kt-icon]\"></ng-content>\n    </div>\n    <div class=\"kt-nav-item-label\">\n      {{ label() }}\n      <ng-content></ng-content>\n    </div>\n    <!-- TODO: Add Tooltip component injection here conditionally based on layout.isRail() -->\n  `,\n})\nexport class KtNavItemComponent {\n  label = input.required<string>();\n  protected readonly layout = inject(KtLayoutService);\n}\n","import { Directive, inject } from '@angular/core';\nimport { KtLayoutService } from './layout.service';\n\n/**\n * Directive applicable sur n'importe quel élément (souvent un bouton) pour basculer\n * l'état d'ouverture du panneau latéral (Sidenav).\n *\n * Expose l'état du layout pour des utilisations dynamiques dans le template\n * (ex: changer l'icône selon l'état).\n *\n * @example\n * ```html\n * <button ktSidenavToggle #btn=\"ktSidenavToggle\" [icon]=\"btn.isRail() ? 'right' : 'left'\">\n * ```\n */\n@Directive({\n  selector: '[ktSidenavToggle]',\n  exportAs: 'ktSidenavToggle',\n  standalone: true,\n  host: {\n    '(click)': 'onClick()',\n  },\n})\nexport class KtSidenavToggleDirective {\n  private readonly layout = inject(KtLayoutService);\n\n  /** Indique si le menu est actuellement réduit en mode rail. */\n  readonly isRail = this.layout.isRail;\n\n  /** Indique si le menu est actuellement complètement étendu sur bureau. */\n  readonly isExpanded = this.layout.isExpanded;\n\n  /** Indique si le menu est totalement masqué. */\n  readonly isHidden = this.layout.isHidden;\n\n  /** Indique si le tiroir est actuellement ouvert par-dessus le contenu (mobile). */\n  readonly isMobileOpen = this.layout.isMobileOpen;\n\n  /** Indique si l'écran actuel est de taille compacte (mobile). */\n  readonly isMobile = this.layout.isMobile;\n\n  onClick() {\n    this.layout.toggle();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAMa,uBAAuB,GAAG,IAAI,cAAc,CAAiB,yBAAyB,EAAE;AACnG,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,UAAU;AAC1B,CAAA;AAED;;;;;;;;AAQG;MAEU,eAAe,CAAA;AACT,IAAA,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC;AAC7B,IAAA,YAAY,GAAG,MAAM,CAAC,uBAAuB,CAAC;AAE/D;;;AAGG;IACM,oBAAoB,GAAG,MAAM,CAAoB,QAAQ;6FAAC;AAElD,IAAA,cAAc,GAAG,MAAM,CAAU,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ;uFAAC;IAChG,aAAa,GAAG,MAAM,CAAU,KAAK;sFAAC;AAE9C,IAAA,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ;IACjC,MAAM,GAAG,QAAQ,CACxB,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,oBAAoB,EAAE,KAAK,MAAM;+EAC3F;AACQ,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE;mFAAC;AACtE,IAAA,QAAQ,GAAG,QAAQ,CAC1B,MACE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACzC,SAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,oBAAoB,EAAE,KAAK,QAAQ,CAAC;iFAC3F;AACQ,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE;qFAAC;IAE/E,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACtC;aAAO;AACL,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACvC;IACF;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;QAC9B;aAAO;AACL,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;QAC/B;IACF;IAEA,KAAK,GAAA;AACH,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/B;aAAO;AACL,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC;QAChC;IACF;uGA/CW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;2GAAf,eAAe,EAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAD3B;;;ACjBD;;;AAGG;MAuBU,iBAAiB,CAAA;AAC5B;;;;;AAKG;IACM,oBAAoB,GAAG,KAAK,CAAoB,QAAQ;6FAAC;AAC/C,IAAA,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AAEnD,IAAA,WAAA,GAAA;QACE,MAAM,CACJ,MAAK;AACH,YAAA,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;AACnE,QAAA,CAAC,EACD,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAC5B;QAED,MAAM,CACJ,MAAK;;AAEH,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE;AACzD,gBAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;YACrB;AACF,QAAA,CAAC,EACD,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAC5B;IACH;uGA3BW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAhBlB;;;;;;;;;;;;;;AAcT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEU,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAtB7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,qBAAqB;AAC7B,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;AAcT,EAAA,CAAA;AACF,iBAAA;;;ACxBD;;;;AAIG;MAiBU,kBAAkB,CAAA;AACV,IAAA,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;IAChC,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;iFAAC;AACnD,IAAA,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC;AAEjD,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE;YACvD,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE;AACrD,QAAA,CAAC,CAAC;IACJ;uGAVW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,2ZAFnB,CAAA,yBAAA,CAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAE1B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAhB9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,YAAY;AACnB,wBAAA,mBAAmB,EAAE,YAAY;AACjC,wBAAA,iBAAiB,EAAE,iBAAiB;AACpC,wBAAA,wBAAwB,EAAE,uBAAuB;AACjD,wBAAA,sBAAsB,EAAE,qBAAqB;AAC7C,wBAAA,oBAAoB,EAAE,YAAY;AAClC,wBAAA,IAAI,EAAE,YAAY;AACnB,qBAAA;oBACD,cAAc,EAAE,CAAC,YAAY,CAAC;AAC9B,oBAAA,QAAQ,EAAE,CAAA,yBAAA,CAA2B;AACtC,iBAAA;;;ACtBD;;;AAGG;MAUU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,gJAFnB,CAAA,yBAAA,CAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAE1B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAT9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,YAAY;AACnB,wBAAA,IAAI,EAAE,QAAQ;AACf,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA,yBAAA,CAA2B;AACtC,iBAAA;;;MCMY,kBAAkB,CAAA;IAC7B,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;AACb,IAAA,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;uGAFxC,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAXnB;;;;;;;;;AAST,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAjB9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,aAAa;AACrB,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;;;;AAST,EAAA,CAAA;AACF,iBAAA;;;AChBD;;;;;;;;;;;AAWG;MASU,wBAAwB,CAAA;AAClB,IAAA,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;;AAGxC,IAAA,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM;;AAG3B,IAAA,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU;;AAGnC,IAAA,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ;;AAG/B,IAAA,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY;;AAGvC,IAAA,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ;IAExC,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;IACtB;uGApBW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBARpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA;AACF,iBAAA;;;ACtBD;;AAEG;;;;"}

package/fesm2022/ktortu-aaa.mjs

@@ -10,6 +10,7 @@ export * from '@ktortu/aaa/snackbar';
 export * from '@ktortu/aaa/tabs';
 export * from '@ktortu/aaa/tooltip';
 export * from '@ktortu/aaa/progress-bar';
+export * from '@ktortu/aaa/layout';
 
 /*
  * Public API Surface of @ktortu/aaa

package/fesm2022/ktortu-aaa.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ktortu-aaa.mjs","sources":["../../../../projects/ktortu/aaa/src/public-api.ts","../../../../projects/ktortu/aaa/src/ktortu-aaa.ts"],"sourcesContent":["/*\n * Public API Surface of @ktortu/aaa\n */\nexport * from '@ktortu/aaa/button';\nexport * from '@ktortu/aaa/card';\nexport * from '@ktortu/aaa/cdk';\nexport * from '@ktortu/aaa/dialog';\nexport * from '@ktortu/aaa/disclosure';\nexport * from '@ktortu/aaa/forms';\nexport * from '@ktortu/aaa/i18n';\nexport * from '@ktortu/aaa/menu';\nexport * from '@ktortu/aaa/snackbar';\nexport * from '@ktortu/aaa/tabs';\nexport * from '@ktortu/aaa/tooltip';\nexport * from '@ktortu/aaa/progress-bar';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
+{"version":3,"file":"ktortu-aaa.mjs","sources":["../../../../projects/ktortu/aaa/src/public-api.ts","../../../../projects/ktortu/aaa/src/ktortu-aaa.ts"],"sourcesContent":["/*\n * Public API Surface of @ktortu/aaa\n */\nexport * from '@ktortu/aaa/button';\nexport * from '@ktortu/aaa/card';\nexport * from '@ktortu/aaa/cdk';\nexport * from '@ktortu/aaa/dialog';\nexport * from '@ktortu/aaa/disclosure';\nexport * from '@ktortu/aaa/forms';\nexport * from '@ktortu/aaa/i18n';\nexport * from '@ktortu/aaa/menu';\nexport * from '@ktortu/aaa/snackbar';\nexport * from '@ktortu/aaa/tabs';\nexport * from '@ktortu/aaa/tooltip';\nexport * from '@ktortu/aaa/progress-bar';\nexport * from '@ktortu/aaa/layout';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}

package/forms/chips/chip-listbox.css

@@ -38,4 +38,19 @@
   .kt-chip-listbox__error-message {
     display: block;
   }
+
+  .kt-chip-listbox__legend--visually-hidden,
+  .kt-chip-listbox__error--visually-hidden {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 1px;
+    block-size: 1px;
+    min-block-size: 0;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
 }

package/forms/field/field.css

@@ -74,7 +74,9 @@
   /* Copie visually-hidden du texte d'aide : présente en permanence dans l'arbre d'accessibilité
      (technique clip), contrairement à la bulle du tooltip créée à la volée → aria-describedby du
      contrôle résout toujours sa cible (pas de référence pendante pour les lecteurs d'écran). */
-  .kt-field__help-description {
+  .kt-field__help-description,
+  .kt-field__label--visually-hidden,
+  .kt-field__error--visually-hidden {
     position: absolute;
     inset-block-start: 0;
     inset-inline-start: 0;

package/forms/styles/select-panel.css

@@ -79,7 +79,7 @@
     border-style: var(--field-border-style, solid);
     border-color: var(--field-border-color, #c4c7c5);
     border-radius: var(--field-radius, 8px);
-    background: var(--select-popup-bg, var(--kt-surface, #fff));
+    background: var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));
     color: var(--field-color, inherit);
     box-shadow: var(--select-popup-shadow, 0 4px 12px rgb(0 0 0 / 12%));
     /* Translucidité (verre) : bascule => aucun effet par défaut (cf. theme-liquid-glass). */
@@ -144,7 +144,7 @@
     padding: 0.375rem 0.625rem;
     border: var(--field-border-width, 1px) var(--field-border-style, solid) var(--field-border-color, #c4c7c5);
     border-radius: calc(var(--field-radius, 8px) * 0.75);
-    background: var(--select-popup-bg, var(--kt-surface, #fff));
+    background: var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));
     color: var(--field-color, inherit);
     font: inherit;
     /* Neutralise l'aspect natif de type=search (coins en pilule sur Safari) ; le rôle implicite
@@ -252,7 +252,7 @@
     z-index: 2;
     display: flex;
     flex-direction: column;
-    background: var(--select-popup-bg, var(--kt-surface, #fff));
+    background: var(--select-popup-bg, var(--kt-surface-container, var(--kt-surface, #fff)));
     border-radius: var(--kt-sheet-radius, 16px) var(--kt-sheet-radius, 16px) 0 0;
     box-shadow: var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));
     max-block-size: var(--kt-sheet-max-block-size, 85svh);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktortu/aaa",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "description": "Bibliothèque de composants Angular headless + thémés par tokens CSS.",
   "keywords": [
     "angular",
@@ -85,6 +85,10 @@
       "types": "./types/ktortu-aaa-i18n.d.ts",
       "default": "./fesm2022/ktortu-aaa-i18n.mjs"
     },
+    "./layout": {
+      "types": "./types/ktortu-aaa-layout.d.ts",
+      "default": "./fesm2022/ktortu-aaa-layout.mjs"
+    },
     "./menu": {
       "types": "./types/ktortu-aaa-menu.d.ts",
       "default": "./fesm2022/ktortu-aaa-menu.mjs"

package/styles/layout.css

@@ -0,0 +1,140 @@
+/* ktortu/aaa/styles/layout.css */
+:root {
+  --kt-sidenav-width: 280px;
+  --kt-sidenav-rail-width: 72px;
+  --kt-layout-transition: 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  --kt-toolbar-height: 64px;
+}
+
+.kt-layout-container {
+  display: flex;
+  height: 100dvh;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  background: var(--kt-surface, #f8f9fa);
+  color: var(--kt-on-surface, #1f1f1f);
+}
+
+.kt-sidenav {
+  width: var(--kt-sidenav-width);
+  background: var(--kt-surface, #ffffff);
+  border-right: 1px solid var(--kt-outline, #e0e0e0);
+  flex-shrink: 0;
+  transition:
+    width var(--kt-layout-transition),
+    transform var(--kt-layout-transition);
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 10;
+}
+
+.kt-sidenav.is-rail {
+  width: var(--kt-sidenav-rail-width);
+}
+
+@media (min-width: 601px) {
+  .kt-sidenav.is-hidden {
+    width: 0;
+    border-right-color: transparent;
+  }
+}
+
+.kt-layout-main-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.kt-toolbar {
+  height: var(--kt-toolbar-height);
+  background: var(--kt-surface, #ffffff);
+  border-bottom: 1px solid var(--kt-outline, #e0e0e0);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  flex-shrink: 0;
+  z-index: 5;
+}
+
+.kt-layout-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.kt-layout-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.32);
+  z-index: 99;
+  opacity: 0;
+  transition: opacity var(--kt-layout-transition);
+}
+
+/* Nav Item styling for truncation */
+.kt-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.kt-nav-item-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kt-nav-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: 1;
+  transition: opacity 100ms;
+}
+
+.kt-sidenav.is-rail .kt-nav-item-label {
+  opacity: 0;
+}
+
+/* 
+  Mobile Breakpoint - 600px par défaut 
+  (A copier/éjecter si modification nécessaire)
+*/
+@media (max-width: 600px) {
+  .kt-sidenav {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    transform: translateX(-100%);
+    width: 280px; /* On force la largeur étendue sur mobile */
+  }
+
+  .kt-sidenav.is-mobile-open {
+    transform: translateX(0);
+  }
+
+  .kt-layout-backdrop {
+    display: block;
+    pointer-events: none;
+  }
+
+  .kt-layout-backdrop.is-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}

package/styles/styles.css

@@ -25,3 +25,4 @@
 @import './snackbar.css';
 @import './disclosure.css';
 @import './progress-bar.css';
+@import './layout.css';

package/themes/theme-ant.css

@@ -4,14 +4,14 @@
    → on prend les crans -7 de leurs palettes (blue-7 #0958d9, red-7 #cf1322), AA des deux côtés. */
 [data-theme='ant'] {
   /* ============ Socle ============ */
-  --kt-primary: #0958d9; /* blue-7 — blanc 6.2:1 */
-  --kt-danger: #cf1322; /* red-7 — blanc 5.6:1 */
-  --kt-neutral: #434343;
-  --kt-surface: #ffffff;
-  --kt-on-surface: #1f1f1f; /* ≈ rgba(0,0,0,.88) Ant */
-  --kt-muted: #595959; /* ≈ rgba(0,0,0,.65) */
-  --kt-outline: #d9d9d9;
-  --kt-outline-strong: #8c8c8c;
+  --kt-primary: light-dark(#0d4aa6, #368ef0); /* blue-7 — blanc 6.2:1 */
+  --kt-danger: light-dark(#b32d2f, #f56c70); /* red-7 — blanc 5.6:1 */
+  --kt-neutral: light-dark(#434343, #d9d9d9);
+  --kt-surface: light-dark(#ffffff, #000000);
+  --kt-on-surface: light-dark(#1f1f1f, rgba(255, 255, 255, 0.85)); /* ≈ rgba(0,0,0,.88) Ant */
+  --kt-muted: light-dark(#595959, rgba(255, 255, 255, 0.65)); /* ≈ rgba(0,0,0,.65) */
+  --kt-outline: light-dark(#d9d9d9, #424242);
+  --kt-outline-strong: light-dark(#8c8c8c, #636363);
   --kt-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 
   /* ============ Géométrie ============ */
@@ -24,14 +24,14 @@
 
   /* ============ Boutons ============ */
   --btn-tonal-weight: 12%; /* containers discrets façon Ant (color-bg variants) */
-  --btn-on-primary-container: #003eb3;
-  --btn-on-danger-container: #820014;
-  --btn-on-neutral-container: #1f1f1f;
+  --btn-on-primary-container: light-dark(#003eb3, #69b1ff);
+  --btn-on-danger-container: light-dark(#820014, #ff7875);
+  --btn-on-neutral-container: light-dark(#1f1f1f, rgba(255, 255, 255, 0.85));
 
   /* ============ Select / tooltip ============ */
-  --select-popup-shadow: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px rgb(0 0 0 / 12%);
-  --tooltip-bg: #1f1f1f; /* ≈ rgba(0,0,0,.85) */
-  --tooltip-fg: #ffffff;
+  --select-popup-shadow: light-dark(0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px rgb(0 0 0 / 12%), 0 0 0 1px #424242);
+  --tooltip-bg: light-dark(#1f1f1f, rgba(255, 255, 255, 0.85)); /* ≈ rgba(0,0,0,.85) */
+  --tooltip-fg: light-dark(#ffffff, #1f1f1f);
 
   /* ============ Dialog (Ant Design : rayon 8, sans bord) ============ */
   --dialog-radius: 8px;
@@ -39,6 +39,11 @@
 
   /* ============ Card (Ant : rayon 8, boxShadowCard discret) ============ */
   --card-radius: 8px;
-  --card-filled-bg: #fafafa; /* colorFillAlter */
-  --card-shadow: 0 1px 2px rgb(0 0 0 / 3%), 0 1px 6px -1px rgb(0 0 0 / 2%), 0 2px 4px rgb(0 0 0 / 2%);
+  --card-filled-bg: light-dark(#fafafa, #1f1f1f); /* colorFillAlter */
+  --card-shadow: light-dark(
+    0 1px 2px rgb(0 0 0 / 3%),
+    0 1px 6px -1px rgb(0 0 0 / 2%),
+    0 2px 4px rgb(0 0 0 / 2%),
+    0 0 0 1px #424242
+  );
 }