@surfnet/curve-angular 0.2.0

package/src/lib/ui/sidebar/src/index.ts

@@ -0,0 +1,75 @@
+import { HlmSidebar } from './lib/hlm-sidebar';
+import { HlmSidebarContent } from './lib/hlm-sidebar-content';
+import { HlmSidebarFooter } from './lib/hlm-sidebar-footer';
+import { HlmSidebarGroup } from './lib/hlm-sidebar-group';
+import { HlmSidebarGroupAction } from './lib/hlm-sidebar-group-action';
+import { HlmSidebarGroupContent } from './lib/hlm-sidebar-group-content';
+import { HlmSidebarGroupLabel } from './lib/hlm-sidebar-group-label';
+import { HlmSidebarHeader } from './lib/hlm-sidebar-header';
+import { HlmSidebarInput } from './lib/hlm-sidebar-input';
+import { HlmSidebarInset } from './lib/hlm-sidebar-inset';
+import { HlmSidebarMenu } from './lib/hlm-sidebar-menu';
+import { HlmSidebarMenuAction } from './lib/hlm-sidebar-menu-action';
+import { HlmSidebarMenuBadge } from './lib/hlm-sidebar-menu-badge';
+import { HlmSidebarMenuButton } from './lib/hlm-sidebar-menu-button';
+import { HlmSidebarMenuItem } from './lib/hlm-sidebar-menu-item';
+import { HlmSidebarMenuSkeleton } from './lib/hlm-sidebar-menu-skeleton';
+import { HlmSidebarMenuSub } from './lib/hlm-sidebar-menu-sub';
+import { HlmSidebarMenuSubButton } from './lib/hlm-sidebar-menu-sub-button';
+import { HlmSidebarMenuSubItem } from './lib/hlm-sidebar-menu-sub-item';
+import { HlmSidebarRail } from './lib/hlm-sidebar-rail';
+import { HlmSidebarSeparator } from './lib/hlm-sidebar-separator';
+import { HlmSidebarTrigger } from './lib/hlm-sidebar-trigger';
+import { HlmSidebarWrapper } from './lib/hlm-sidebar-wrapper';
+
+export * from './lib/hlm-sidebar';
+export * from './lib/hlm-sidebar-content';
+export * from './lib/hlm-sidebar-footer';
+export * from './lib/hlm-sidebar-group';
+export * from './lib/hlm-sidebar-group-action';
+export * from './lib/hlm-sidebar-group-content';
+export * from './lib/hlm-sidebar-group-label';
+export * from './lib/hlm-sidebar-header';
+export * from './lib/hlm-sidebar-input';
+export * from './lib/hlm-sidebar-inset';
+export * from './lib/hlm-sidebar-menu';
+export * from './lib/hlm-sidebar-menu-action';
+export * from './lib/hlm-sidebar-menu-badge';
+export * from './lib/hlm-sidebar-menu-button';
+export * from './lib/hlm-sidebar-menu-item';
+export * from './lib/hlm-sidebar-menu-skeleton';
+export * from './lib/hlm-sidebar-menu-sub';
+export * from './lib/hlm-sidebar-menu-sub-button';
+export * from './lib/hlm-sidebar-menu-sub-item';
+export * from './lib/hlm-sidebar-rail';
+export * from './lib/hlm-sidebar-separator';
+export * from './lib/hlm-sidebar-trigger';
+export * from './lib/hlm-sidebar-wrapper';
+export * from './lib/hlm-sidebar.service';
+export * from './lib/hlm-sidebar.token';
+
+export const HlmSidebarImports = [
+  HlmSidebar,
+  HlmSidebarContent,
+  HlmSidebarFooter,
+  HlmSidebarGroup,
+  HlmSidebarGroupAction,
+  HlmSidebarGroupContent,
+  HlmSidebarGroupLabel,
+  HlmSidebarHeader,
+  HlmSidebarInput,
+  HlmSidebarInset,
+  HlmSidebarMenu,
+  HlmSidebarMenuSkeleton,
+  HlmSidebarMenuAction,
+  HlmSidebarMenuBadge,
+  HlmSidebarMenuButton,
+  HlmSidebarMenuItem,
+  HlmSidebarMenuSub,
+  HlmSidebarMenuSubButton,
+  HlmSidebarRail,
+  HlmSidebarSeparator,
+  HlmSidebarTrigger,
+  HlmSidebarWrapper,
+  HlmSidebarMenuSubItem,
+] as const;

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-content.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSidebarContent],hlm-sidebar-content',
+  host: {
+    'data-slot': 'sidebar-content',
+    'data-sidebar': 'content',
+  },
+})
+export class HlmSidebarContent {
+  constructor() {
+    classes(
+      () =>
+        'no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+    );
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-footer.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSidebarFooter],hlm-sidebar-footer',
+  host: {
+    'data-slot': 'sidebar-footer',
+    'data-sidebar': 'footer',
+  },
+})
+export class HlmSidebarFooter {
+  constructor() {
+    classes(() => 'gap-2 p-2 flex flex-col');
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-group-action.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'button[hlmSidebarGroupAction]',
+  host: {
+    'data-slot': 'sidebar-group-action',
+    'data-sidebar': 'group-action',
+  },
+})
+export class HlmSidebarGroupAction {
+  constructor() {
+    classes(
+      () =>
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 w-5 rounded-md p-0 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)] flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>ng-icon]:shrink-0',
+    );
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-group-content.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'div[hlmSidebarGroupContent]',
+  host: {
+    'data-slot': 'sidebar-group-content',
+    'data-sidebar': 'group-content',
+  },
+})
+export class HlmSidebarGroupContent {
+  constructor() {
+    classes(() => 'text-sm w-full');
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-group-label.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'div[hlmSidebarGroupLabel], button[hlmSidebarGroupLabel]',
+  host: {
+    'data-slot': 'sidebar-group-label',
+    'data-sidebar': 'group-label',
+  },
+})
+export class HlmSidebarGroupLabel {
+  constructor() {
+    classes(
+      () =>
+        'text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)] flex shrink-0 items-center outline-hidden [&>ng-icon]:shrink-0',
+    );
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-group.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSidebarGroup],hlm-sidebar-group',
+  host: {
+    'data-slot': 'sidebar-group',
+    'data-sidebar': 'group',
+  },
+})
+export class HlmSidebarGroup {
+  constructor() {
+    classes(() => 'p-2 relative flex w-full min-w-0 flex-col');
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-header.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSidebarHeader],hlm-sidebar-header',
+  host: {
+    'data-slot': 'sidebar-header',
+    'data-sidebar': 'header',
+  },
+})
+export class HlmSidebarHeader {
+  constructor() {
+    classes(() => 'gap-2 p-2 flex flex-col');
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-input.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { HlmInput } from '../../../input/src';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'input[hlmSidebarInput]',
+  hostDirectives: [HlmInput],
+  host: {
+    'data-slot': 'sidebar-input',
+    'data-sidebar': 'input',
+  },
+})
+export class HlmSidebarInput {
+  constructor() {
+    classes(() => 'bg-background h-8 w-full shadow-none');
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-inset.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'main[hlmSidebarInset]',
+  host: { 'data-slot': 'sidebar-inset' },
+})
+export class HlmSidebarInset {
+  constructor() {
+    classes(
+      () =>
+        'bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 relative flex w-full flex-1 flex-col',
+    );
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-menu-action.ts

@@ -0,0 +1,24 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, Directive, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'button[hlmSidebarMenuAction]',
+  host: {
+    'data-slot': 'sidebar-menu-action',
+    'data-sidebar': 'menu-action',
+  },
+})
+export class HlmSidebarMenuAction {
+  public readonly showOnHover = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  constructor() {
+    classes(() => [
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)] flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>ng-icon]:shrink-0',
+      this.showOnHover() &&
+        'peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0',
+    ]);
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-menu-badge.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSidebarMenuBadge],hlm-sidebar-menu-badge',
+  host: {
+    'data-slot': 'sidebar-menu-badge',
+    'data-sidebar': 'menu-badge',
+  },
+})
+export class HlmSidebarMenuBadge {
+  constructor() {
+    classes(
+      () =>
+        'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute end-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden',
+    );
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-menu-button.ts

@@ -0,0 +1,97 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';
+import {
+  BrnTooltip,
+  BrnTooltipPosition,
+  provideBrnTooltipDefaultOptions,
+} from '@spartan-ng/brain/tooltip';
+import { classes, hlm } from '../../../utils/src';
+import type {
+  SidebarMenuButtonSizeName,
+  SidebarMenuButtonVariantName,
+} from '@surfnet/curve-contracts';
+import { cva } from 'class-variance-authority';
+import { HlmSidebarService } from './hlm-sidebar.service';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+import {
+  DEFAULT_TOOLTIP_CONTENT_CLASSES,
+  DEFAULT_TOOLTIP_SVG_CLASS,
+  tooltipPositionVariants,
+} from '../../../tooltip/src';
+
+const sidebarMenuButtonVariants = cva(
+  'ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-start text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_ng-icon]:shrink-0 [&_ng-icon]:text-[calc(var(--spacing)*4)] [&>span:last-child]:truncate',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
+      } satisfies Record<SidebarMenuButtonVariantName, string>,
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      } satisfies Record<SidebarMenuButtonSizeName, string>,
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+@Directive({
+  selector: 'button[hlmSidebarMenuButton], a[hlmSidebarMenuButton]',
+  providers: [
+    provideBrnTooltipDefaultOptions({
+      showDelay: 150,
+      hideDelay: 0,
+      tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+      svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+      arrowClasses: (position: BrnTooltipPosition) => hlm(tooltipPositionVariants({ position })),
+      position: 'right',
+    }),
+  ],
+  hostDirectives: [
+    {
+      directive: BrnTooltip,
+      inputs: ['brnTooltip: tooltip'],
+    },
+  ],
+  host: {
+    'data-slot': 'sidebar-menu-button',
+    'data-sidebar': 'menu-button',
+    '[attr.data-size]': 'size()',
+    '[attr.data-active]': 'isActive()',
+    '(click)': 'onClick()',
+  },
+})
+export class HlmSidebarMenuButton {
+  private readonly _config = injectHlmSidebarConfig();
+  private readonly _sidebarService = inject(HlmSidebarService);
+  private readonly _brnTooltip = inject(BrnTooltip);
+
+  public readonly variant = input<SidebarMenuButtonVariantName>('default');
+  public readonly size = input<SidebarMenuButtonSizeName>('default');
+  public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+  public readonly closeMobileSidebarOnClick = input<boolean, BooleanInput>(
+    this._config.closeMobileSidebarOnMenuButtonClick,
+    { transform: booleanAttribute },
+  );
+
+  protected readonly _isTooltipHidden = computed(
+    () => this._sidebarService.state() !== 'collapsed' || this._sidebarService.isMobile(),
+  );
+
+  constructor() {
+    classes(() => sidebarMenuButtonVariants({ variant: this.variant(), size: this.size() }));
+    effect(() => this._brnTooltip.mutableTooltipDisabled.set(this._isTooltipHidden()));
+  }
+
+  protected onClick(): void {
+    if (this.closeMobileSidebarOnClick()) {
+      this._sidebarService.setOpenMobile(false);
+    }
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-menu-item.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'li[hlmSidebarMenuItem]',
+  host: {
+    'data-slot': 'sidebar-menu-item',
+    'data-sidebar': 'menu-item',
+  },
+})
+export class HlmSidebarMenuItem {
+  constructor() {
+    classes(() => 'group/menu-item relative');
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-menu-skeleton.ts

@@ -0,0 +1,33 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { HlmSkeletonImports } from '../../../skeleton/src';
+import { classes } from '../../../utils/src';
+
+@Component({
+  selector: 'hlm-sidebar-menu-skeleton,div[hlmSidebarMenuSkeleton]',
+  imports: [HlmSkeletonImports],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'sidebar-menu-skeleton',
+    'data-sidebar': 'menu-skeleton',
+  },
+  template: `
+    @if (showIcon()) {
+      <hlm-skeleton data-sidebar="menu-skeleton-icon" class="size-4 rounded-md" />
+    } @else {
+      <hlm-skeleton
+        data-sidebar="menu-skeleton-text"
+        class="h-4 max-w-(--skeleton-width) flex-1"
+        [style.--skeleton-width]="_width"
+      />
+    }
+  `,
+})
+export class HlmSidebarMenuSkeleton {
+  public readonly showIcon = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+  protected readonly _width = `${Math.floor(Math.random() * 40) + 50}%`;
+
+  constructor() {
+    classes(() => 'h-8 gap-2 rounded-md px-2 flex items-center');
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-menu-sub-button.ts

@@ -0,0 +1,41 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, Directive, inject, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+import { HlmSidebarService } from './hlm-sidebar.service';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+@Directive({
+  selector: 'a[hlmSidebarMenuSubButton], button[hlmSidebarMenuSubButton]',
+  host: {
+    'data-slot': 'sidebar-menu-sub-button',
+    'data-sidebar': 'menu-sub-button',
+    '[attr.data-active]': 'isActive()',
+    '[attr.data-size]': 'size()',
+    '(click)': 'onClick()',
+  },
+})
+export class HlmSidebarMenuSubButton {
+  private readonly _sidebarService = inject(HlmSidebarService);
+  private readonly _config = injectHlmSidebarConfig();
+
+  public readonly closeMobileSidebarOnClick = input<boolean, BooleanInput>(
+    this._config.closeMobileSidebarOnMenuButtonClick,
+    { transform: booleanAttribute },
+  );
+
+  public readonly size = input<'sm' | 'md'>('md');
+  public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  constructor() {
+    classes(
+      () =>
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>ng-icon]:text-[calc(var(--spacing)*4)] flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>ng-icon]:shrink-0 [&>span:last-child]:truncate',
+    );
+  }
+
+  protected onClick(): void {
+    if (this.closeMobileSidebarOnClick()) {
+      this._sidebarService.setOpenMobile(false);
+    }
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-menu-sub-item.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'li[hlmSidebarMenuSubItem]',
+  host: {
+    'data-slot': 'sidebar-menu-sub-item',
+    'data-sidebar': 'menu-sub-item',
+  },
+})
+export class HlmSidebarMenuSubItem {
+  constructor() {
+    classes(() => 'group/menu-sub-item relative');
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-menu-sub.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'ul[hlmSidebarMenuSub]',
+  host: {
+    'data-slot': 'sidebar-menu-sub',
+    'data-sidebar': 'menu-sub',
+  },
+})
+export class HlmSidebarMenuSub {
+  constructor() {
+    classes(
+      () =>
+        'border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px flex min-w-0 flex-col',
+    );
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-menu.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'ul[hlmSidebarMenu]',
+  host: {
+    'data-slot': 'sidebar-menu',
+    'data-sidebar': 'menu',
+  },
+})
+export class HlmSidebarMenu {
+  constructor() {
+    classes(() => 'gap-1 flex w-full min-w-0 flex-col');
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-rail.ts

@@ -0,0 +1,34 @@
+import { Directive, inject, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+import { HlmSidebarService } from './hlm-sidebar.service';
+
+@Directive({
+  selector: 'button[hlmSidebarRail]',
+  host: {
+    'data-sidebar': 'rail',
+    'data-slot': 'sidebar-rail',
+    '[attr.aria-label]': 'ariaLabel()',
+    tabindex: '-1',
+    '(click)': 'onClick()',
+  },
+})
+export class HlmSidebarRail {
+  private readonly _sidebarService = inject(HlmSidebarService);
+
+  public readonly ariaLabel = input<string>('Toggle Sidebar', { alias: 'aria-label' });
+
+  constructor() {
+    classes(() => [
+      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
+      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+    ]);
+  }
+
+  protected onClick(): void {
+    this._sidebarService.toggleSidebar();
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-separator.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { HlmSeparator } from '../../../separator/src';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSidebarSeparator],hlm-sidebar-separator',
+  hostDirectives: [HlmSeparator],
+  host: {
+    'data-slot': 'sidebar-separator',
+    'data-sidebar': 'separator',
+  },
+})
+export class HlmSidebarSeparator {
+  constructor() {
+    classes(() => 'bg-sidebar-border mx-2 w-auto');
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-trigger.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorSidebarSimple } from '@ng-icons/phosphor-icons/regular';
+import { HlmButton, provideBrnButtonConfig } from '../../../button/src';
+import { HlmSidebarService } from './hlm-sidebar.service';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'button[hlmSidebarTrigger]',
+  imports: [NgIcon],
+  providers: [
+    provideIcons({ phosphorSidebarSimple }),
+    provideBrnButtonConfig({ variant: 'ghost', size: 'icon-sm' }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
+  host: {
+    'data-slot': 'sidebar-trigger',
+    'data-sidebar': 'trigger',
+    '(click)': '_onClick()',
+  },
+  template: `
+    <ng-icon name="phosphorSidebarSimple" />
+    <span class="sr-only">{{ srOnlyText() }}</span>
+  `,
+})
+export class HlmSidebarTrigger {
+  private readonly _sidebarService = inject(HlmSidebarService);
+
+  public readonly srOnlyText = input('Toggle Sidebar');
+
+  protected _onClick(): void {
+    this._sidebarService.toggleSidebar();
+  }
+}

package/src/lib/ui/sidebar/src/lib/hlm-sidebar-wrapper.ts

@@ -0,0 +1,24 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+@Directive({
+  selector: '[hlmSidebarWrapper],hlm-sidebar-wrapper',
+  host: {
+    'data-slot': 'sidebar-wrapper',
+    '[style.--sidebar-width]': 'sidebarWidth()',
+    '[style.--sidebar-width-icon]': 'sidebarWidthIcon()',
+  },
+})
+export class HlmSidebarWrapper {
+  private readonly _config = injectHlmSidebarConfig();
+
+  public readonly sidebarWidth = input<string>(this._config.sidebarWidth);
+  public readonly sidebarWidthIcon = input<string>(this._config.sidebarWidthIcon);
+
+  constructor() {
+    classes(
+      () => 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+    );
+  }
+}