@surfnet/curve-angular 0.2.0

package/ng-package.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@angular/cdk",
+    "@angular/forms",
+    "@angular/router",
+    "@fontsource-variable/geist",
+    "@ng-icons/phosphor-icons",
+    "@spartan-ng/brain",
+    "@tanstack/angular-table",
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge",
+    "tslib"
+  ]
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@surfnet/curve-angular",
+  "version": "0.2.0",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "./dist/fesm2022/surfnet-curve-angular.mjs",
+  "types": "./dist/types/surfnet-curve-angular.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/surfnet-curve-angular.d.ts",
+      "default": "./dist/fesm2022/surfnet-curve-angular.mjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@ng-icons/core": "^33.0.0",
+    "rxjs": "^7.8.0"
+  },
+  "dependencies": {
+    "@angular/cdk": "22.0.0",
+    "@angular/forms": ">=21.0.0 <23.0.0",
+    "@angular/router": ">=21.0.0 <23.0.0",
+    "@fontsource-variable/geist": "5.2.9",
+    "@ng-icons/phosphor-icons": ">=32.0.0 <34.0.0",
+    "@spartan-ng/brain": "0.0.1-alpha.715",
+    "@tanstack/angular-table": "^8.21.4",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "tailwind-merge": "3.6.0",
+    "tslib": "2.8.1"
+  },
+  "devDependencies": {
+    "@angular/build": "22.0.2",
+    "@angular/cli": "22.0.2",
+    "@angular/common": "22.0.2",
+    "@angular/compiler": "22.0.2",
+    "@angular/compiler-cli": "22.0.2",
+    "@angular/core": "22.0.2",
+    "@angular/platform-browser": "22.0.2",
+    "@ng-icons/core": "33.3.0",
+    "@spartan-ng/cli": "0.0.1-alpha.715",
+    "@storybook/addon-a11y": "10.4.5",
+    "@storybook/addon-docs": "10.4.5",
+    "@storybook/angular": "10.4.5",
+    "@tailwindcss/cli": "4.3.1",
+    "@tailwindcss/postcss": "4.3.1",
+    "jiti": "2.7.0",
+    "ng-packagr": "22.0.0",
+    "rxjs": "7.8.2",
+    "storybook": "10.4.5",
+    "tailwindcss": "4.3.1",
+    "tw-animate-css": "1.4.0",
+    "typescript": "6.0.3",
+    "zone.js": "0.16.2",
+    "@surfnet/curve-contracts": "0.2.0",
+    "@surfnet/curve-storybook-config": "0.2.0",
+    "@surfnet/curve-tokens": "0.2.0",
+    "@surfnet/curve-typescript-config": "0.2.0"
+  },
+  "scripts": {
+    "build": "ng build angular && pnpm build:css",
+    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify && jiti scripts/copy-font-files.ts",
+    "dev": "ng build angular --watch --configuration development",
+    "lint": "ngc --noEmit -p tsconfig.json",
+    "storybook": "ng run angular:storybook",
+    "build-storybook": "ng run angular:build-storybook",
+    "fix-helm-imports": "jiti scripts/rewrite-helm-imports.ts"
+  }
+}

package/scripts/copy-font-files.ts

@@ -0,0 +1,15 @@
+// Cross-platform replacement for `rm -rf` + `cp -RL` (fail on Windows).
+// dereference: true is needed since pnpm symlinks node_modules packages.
+
+import { cpSync, rmSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageRoot = join(dirname(fileURLToPath(import.meta.url)), '..');
+const source = join(packageRoot, 'node_modules/@fontsource-variable/geist/files');
+const destination = join(packageRoot, 'dist/files');
+
+rmSync(destination, { recursive: true, force: true });
+cpSync(source, destination, { recursive: true, dereference: true });
+
+console.log(`Copied font files to ${join('dist', 'files')}.`);

package/scripts/rewrite-helm-imports.ts

@@ -0,0 +1,60 @@
+/**
+ * Rewrites `@spartan-ng/helm/<name>` imports to relative paths.
+ *
+ * The Spartan CLI always vendors cross-component references through the
+ * `@spartan-ng/helm/<name>` tsconfig path alias. That alias only resolves at
+ * build time in a consuming *app* (whose own bundler reads tsconfig `paths`).
+ * `@surfnet/curve-angular` instead builds itself into a redistributable package via
+ * ng-packagr, which does not consult tsconfig `paths` and leaves the alias as
+ * an unresolved external import in the published bundle. Run this after every
+ * `ng g @spartan-ng/cli:ui <component>` to convert the new alias imports to
+ * relative ones so ng-packagr inlines them correctly.
+ *
+ * Usage: pnpm --filter @surfnet/curve-angular fix-helm-imports
+ */
+
+import { readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
+import { dirname, join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageRoot = join(dirname(fileURLToPath(import.meta.url)), '..');
+const srcRoot = join(packageRoot, 'src');
+const importPattern = /from (['"])@spartan-ng\/helm\/([a-z0-9-]+)\1/g;
+
+function walk(dir: string, files: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      walk(full, files);
+    } else if (entry.endsWith('.ts')) {
+      files.push(full);
+    }
+  }
+  return files;
+}
+
+function toRelativeSpecifier(fromFile: string, name: string): string {
+  const targetDir = join(srcRoot, 'lib', 'ui', name, 'src');
+  let rel = relative(dirname(fromFile), targetDir).replace(/\\/g, '/');
+  if (!rel.startsWith('.')) rel = `./${rel}`;
+  return rel;
+}
+
+let changedFiles = 0;
+let changedImports = 0;
+
+for (const file of walk(srcRoot)) {
+  const original = readFileSync(file, 'utf8');
+  let fileChanged = false;
+  const updated = original.replace(importPattern, (_match, quote: string, name: string) => {
+    fileChanged = true;
+    changedImports++;
+    return `from ${quote}${toRelativeSpecifier(file, name)}${quote}`;
+  });
+  if (fileChanged) {
+    writeFileSync(file, updated);
+    changedFiles++;
+  }
+}
+
+console.log(`Rewrote ${changedImports} import(s) across ${changedFiles} file(s).`);

package/src/foundations/design-tokens.stories.ts

@@ -0,0 +1,198 @@
+import { Component, Input, type OnInit } from '@angular/core';
+import { type Meta, moduleMetadata, type StoryObj } from '@storybook/angular';
+import {
+  getTokenGroups,
+  getTokenValue,
+  getTypographyScale,
+  type TokenGroupWithTokens,
+} from '@surfnet/curve-storybook-config';
+
+/**
+ * Renders the named token groups. The selected `theme` / `mode` come in as inputs
+ * (read from the toolbar globals in the story), and values are looked up straight
+ * from the `@surfnet/curve-tokens` map. Swatch visuals still use `var(--token)` so they
+ * reflect the live painted theme.
+ */
+@Component({
+  selector: 'surf-design-tokens',
+  standalone: true,
+  template: `
+    <div class="max-w-5xl text-foreground">
+      @for (entry of groups; track entry.group.id) {
+        <section class="mb-12">
+          <h3 class="text-lg font-semibold text-foreground">{{ entry.group.title }}</h3>
+          <p class="mb-5 max-w-prose text-sm text-muted-foreground">
+            {{ entry.group.description }}
+          </p>
+
+          @switch (entry.group.kind) {
+            @case ('color') {
+              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                @for (t of entry.tokens; track t.name) {
+                  <div class="flex items-center gap-3">
+                    <div
+                      class="size-10 shrink-0 overflow-hidden rounded-md border border-border"
+                      [style.background-image]="checker.image"
+                      [style.background-size]="checker.size"
+                    >
+                      <div class="size-full" [style.background-color]="cssVar(t.name)"></div>
+                    </div>
+                    <div class="min-w-0">
+                      <div class="truncate font-mono text-sm">{{ t.name }}</div>
+                      <div class="truncate font-mono text-xs text-muted-foreground">
+                        {{ val(t.name) || '—' }}
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            }
+            @case ('radius') {
+              <div class="flex flex-wrap gap-6">
+                @for (t of entry.tokens; track t.name) {
+                  <div class="flex flex-col items-center gap-2 text-center">
+                    <div
+                      class="size-16 border-2 border-primary bg-muted"
+                      [style.border-radius]="cssVar(t.name)"
+                    ></div>
+                    <div class="font-mono text-xs">{{ t.name }}</div>
+                    <div class="font-mono text-xs text-muted-foreground">{{ val(t.name) }}</div>
+                  </div>
+                }
+              </div>
+            }
+            @case ('font-family') {
+              @for (t of entry.tokens; track t.name) {
+                <div class="border-b border-border py-3 last:border-b-0">
+                  <div class="flex items-baseline justify-between gap-6">
+                    <span class="font-mono text-sm">{{ t.name }}</span>
+                    <span class="shrink-0 font-mono text-xs text-muted-foreground">{{
+                      val(t.name)
+                    }}</span>
+                  </div>
+                  <p class="mt-1 text-xl" [style.font-family]="cssVar(t.name)">
+                    The quick brown fox jumps over the lazy dog
+                  </p>
+                </div>
+              }
+            }
+            @case ('font-weight') {
+              @for (t of entry.tokens; track t.name) {
+                <div
+                  class="flex items-baseline justify-between gap-6 border-b border-border py-2 last:border-b-0"
+                >
+                  <span class="text-lg" [style.font-weight]="val(t.name)">{{
+                    weightLabel(t.name)
+                  }}</span>
+                  <span class="shrink-0 font-mono text-xs text-muted-foreground">{{
+                    val(t.name)
+                  }}</span>
+                </div>
+              }
+            }
+            @case ('font-size') {
+              @for (s of typeScale; track s.id) {
+                <div
+                  class="flex items-baseline justify-between gap-6 border-b border-border py-3 last:border-b-0"
+                >
+                  <span
+                    class="truncate"
+                    [style.font-size]="cssVar(s.fontSizeName)"
+                    [style.line-height]="cssVar(s.lineHeightName)"
+                    >{{ s.id }} — Almost before we knew it</span
+                  >
+                  <span class="shrink-0 font-mono text-xs text-muted-foreground"
+                    >{{ val(s.fontSizeName) }} / {{ val(s.lineHeightName) }}</span
+                  >
+                </div>
+              }
+            }
+            @default {
+              @for (t of entry.tokens; track t.name) {
+                <div
+                  class="flex items-center justify-between gap-6 border-b border-border py-1.5 last:border-b-0"
+                >
+                  <span class="font-mono text-sm">{{ t.name }}</span>
+                  <span class="shrink-0 font-mono text-xs text-muted-foreground">{{
+                    val(t.name) || '—'
+                  }}</span>
+                </div>
+              }
+            }
+          }
+        </section>
+      }
+    </div>
+  `,
+})
+export class DesignTokensComponent implements OnInit {
+  @Input({ required: true }) ids: string[] = [];
+  @Input() theme = 'default';
+  @Input() mode = 'light';
+
+  protected groups: TokenGroupWithTokens[] = [];
+  protected readonly typeScale = getTypographyScale();
+  protected readonly checker = {
+    image: 'repeating-conic-gradient(#cbd5e1 0% 25%, #ffffff 0% 50%)',
+    size: '12px 12px',
+  };
+
+  ngOnInit(): void {
+    const byId = new Map(getTokenGroups().map((g) => [g.group.id, g]));
+    this.groups = this.ids
+      .map((id) => byId.get(id))
+      .filter((g): g is TokenGroupWithTokens => Boolean(g));
+  }
+
+  protected val(name: string): string {
+    return getTokenValue(this.theme, this.mode, name);
+  }
+
+  protected cssVar(name: string): string {
+    return `var(--${name})`;
+  }
+
+  protected weightLabel(name: string): string {
+    return name.replace('font-weight-', '');
+  }
+}
+
+const meta: Meta<DesignTokensComponent> = {
+  title: 'Foundations/Design Tokens',
+  component: DesignTokensComponent,
+  decorators: [moduleMetadata({ imports: [DesignTokensComponent] })],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The design tokens shipped by `@surfnet/curve-tokens`. Use the **Theme** and **Mode** ' +
+          'toolbar selectors to see each token’s resolved value in any theme or in light / dark mode.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<DesignTokensComponent>;
+
+const story = (ids: string[]): Story => ({
+  render: (_args, { globals }) => ({
+    props: { ids, theme: globals['theme'] ?? 'default', mode: globals['mode'] ?? 'light' },
+    template: `<surf-design-tokens [ids]="ids" [theme]="theme" [mode]="mode"></surf-design-tokens>`,
+  }),
+});
+
+/** Semantic, chart, sidebar, alpha and internal colour tokens. */
+export const Colors: Story = story(['semantic', 'chart', 'sidebar', 'alpha', 'custom']);
+
+/** The type scale, font families and font weights. */
+export const Typography: Story = story(['typography', 'font-family', 'font-weight']);
+
+/** Corner radii, container widths and breakpoints. */
+export const RadiusAndSpacing: Story = story(['radius', 'container', 'breakpoint']);
+
+/** Shadow primitives and blur radii. */
+export const ShadowsAndEffects: Story = story(['shadow', 'blur']);

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

@@ -0,0 +1,22 @@
+import { HlmAvatar } from './lib/hlm-avatar';
+import { HlmAvatarBadge } from './lib/hlm-avatar-badge';
+import { HlmAvatarFallback } from './lib/hlm-avatar-fallback';
+import { HlmAvatarGroup } from './lib/hlm-avatar-group';
+import { HlmAvatarGroupCount } from './lib/hlm-avatar-group-count';
+import { HlmAvatarImage } from './lib/hlm-avatar-image';
+
+export * from './lib/hlm-avatar';
+export * from './lib/hlm-avatar-badge';
+export * from './lib/hlm-avatar-fallback';
+export * from './lib/hlm-avatar-group';
+export * from './lib/hlm-avatar-group-count';
+export * from './lib/hlm-avatar-image';
+
+export const HlmAvatarImports = [
+  HlmAvatar,
+  HlmAvatarBadge,
+  HlmAvatarFallback,
+  HlmAvatarGroup,
+  HlmAvatarGroupCount,
+  HlmAvatarImage,
+] as const;

package/src/lib/ui/avatar/src/lib/hlm-avatar-badge.ts

@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmAvatarBadge],hlm-avatar-badge',
+  host: {
+    'data-slot': 'avatar-badge',
+  },
+})
+export class HlmAvatarBadge {
+  constructor() {
+    classes(() => [
+      'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
+      'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>ng-icon]:hidden',
+      'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>ng-icon]:text-[calc(var(--spacing)*2)]',
+      'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>ng-icon]:text-[calc(var(--spacing)*2)]',
+    ]);
+  }
+}

package/src/lib/ui/avatar/src/lib/hlm-avatar-fallback.ts

@@ -0,0 +1,20 @@
+import { Directive } from '@angular/core';
+import { BrnAvatarFallback } from '@spartan-ng/brain/avatar';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmAvatarFallback]',
+  exportAs: 'avatarFallback',
+  hostDirectives: [BrnAvatarFallback],
+  host: {
+    'data-slot': 'avatar-fallback',
+  },
+})
+export class HlmAvatarFallback {
+  constructor() {
+    classes(
+      () =>
+        'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',
+    );
+  }
+}

package/src/lib/ui/avatar/src/lib/hlm-avatar-group-count.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmAvatarGroupCount],hlm-avatar-group-count',
+  host: {
+    'data-slot': 'avatar-group-count',
+  },
+})
+export class HlmAvatarGroupCount {
+  constructor() {
+    classes(
+      () =>
+        'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>ng-icon]:text-base group-has-data-[size=lg]/avatar-group:[&>ng-icon]:text-xl group-has-data-[size=sm]/avatar-group:[&>ng-icon]:text-xs',
+    );
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmAvatarGroup],hlm-avatar-group',
+  host: {
+    'data-slot': 'avatar-group',
+  },
+})
+export class HlmAvatarGroup {
+  constructor() {
+    classes(
+      () =>
+        '*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
+    );
+  }
+}

package/src/lib/ui/avatar/src/lib/hlm-avatar-image.ts

@@ -0,0 +1,19 @@
+import { Directive, inject } from '@angular/core';
+import { BrnAvatarImage } from '@spartan-ng/brain/avatar';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'img[hlmAvatarImage]',
+  exportAs: 'avatarImage',
+  hostDirectives: [BrnAvatarImage],
+  host: {
+    'data-slot': 'avatar-image',
+  },
+})
+export class HlmAvatarImage {
+  public readonly canShow = inject(BrnAvatarImage).canShow;
+
+  constructor() {
+    classes(() => 'rounded-full aspect-square size-full object-cover');
+  }
+}

package/src/lib/ui/avatar/src/lib/hlm-avatar.stories.ts

@@ -0,0 +1,107 @@
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { avatarContract } from '@surfnet/curve-contracts';
+import { HlmAvatar, HlmAvatarImports } from '..';
+
+const meta: Meta<HlmAvatar> = {
+  title: 'Components/Avatar',
+  component: HlmAvatar,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmAvatarImports],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: avatarContract.docs.description,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: avatarContract.props.sizes,
+      description: avatarContract.props.sizes
+        .map((size) => `\`${size}\` — ${avatarContract.docs.sizes[size]}`)
+        .join('\n\n'),
+      table: {
+        defaultValue: { summary: avatarContract.defaults.sizes },
+      },
+    },
+  },
+  args: {
+    size: avatarContract.defaults.sizes,
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmAvatar>;
+
+/** An avatar with an image and a fallback. */
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <hlm-avatar ${argsToTemplate(args)}>
+        <img hlmAvatarImage src="https://i.pravatar.cc/80?img=12" alt="Ada Lovelace">
+        <span hlmAvatarFallback>AL</span>
+      </hlm-avatar>
+    `,
+  }),
+};
+
+/** When the image fails to load, the initials fallback shows. */
+export const Fallback: Story = {
+  render: () => ({
+    template: `
+      <hlm-avatar>
+        <img hlmAvatarImage src="https://example.com/does-not-exist.jpg" alt="Grace Hopper">
+        <span hlmAvatarFallback>GH</span>
+      </hlm-avatar>
+    `,
+  }),
+};
+
+/** Every size declared in the contract. */
+export const Sizes: Story = {
+  render: () => ({
+    template: `
+      <div style="display:flex; align-items:center; gap:12px;">
+        ${avatarContract.props.sizes
+          .map(
+            (size) => `
+              <hlm-avatar size="${size}" title="${avatarContract.docs.sizes[size]}">
+                <span hlmAvatarFallback>
+                  ${size.slice(0, 2).toUpperCase()}
+                </span>
+              </hlm-avatar>
+            `,
+          )
+          .join('')}
+      </div>
+    `,
+  }),
+};
+
+/** Stacked avatars with an overflow count. */
+export const Group: Story = {
+  render: () => ({
+    template: `
+      <hlm-avatar-group>
+        <hlm-avatar>
+          <span hlmAvatarFallback>AL</span>
+        </hlm-avatar>
+
+        <hlm-avatar>
+          <span hlmAvatarFallback>GH</span>
+        </hlm-avatar>
+
+        <hlm-avatar>
+          <span hlmAvatarFallback>KJ</span>
+        </hlm-avatar>
+
+        <hlm-avatar-group-count>+3</hlm-avatar-group-count>
+      </hlm-avatar-group>
+    `,
+  }),
+};

package/src/lib/ui/avatar/src/lib/hlm-avatar.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { BrnAvatar } from '@spartan-ng/brain/avatar';
+import { classes } from '../../../utils/src';
+import type { AvatarSizeName } from '@surfnet/curve-contracts';
+
+@Component({
+  selector: 'hlm-avatar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'avatar',
+    '[attr.data-size]': 'size()',
+  },
+  template: `
+    @if (_image()?.canShow()) {
+      <ng-content select="[hlmAvatarImage],[brnAvatarImage]" />
+    } @else {
+      <ng-content select="[hlmAvatarFallback],[brnAvatarFallback]" />
+    }
+    <ng-content />
+  `,
+})
+export class HlmAvatar extends BrnAvatar {
+  public readonly size = input<AvatarSizeName>('default');
+
+  constructor() {
+    super();
+    classes(
+      () =>
+        'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 group/avatar after:border-border relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',
+    );
+  }
+}

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

@@ -0,0 +1,30 @@
+import { HlmBreadcrumb } from './lib/hlm-breadcrumb';
+import { HlmBreadcrumbEllipsis } from './lib/hlm-breadcrumb-ellipsis';
+import { HlmBreadcrumbItem } from './lib/hlm-breadcrumb-item';
+import { HlmBreadcrumbLink } from './lib/hlm-breadcrumb-link';
+import { HlmBreadcrumbList } from './lib/hlm-breadcrumb-list';
+import { HlmBreadcrumbPage } from './lib/hlm-breadcrumb-page';
+import { HlmBreadcrumbSeparator } from './lib/hlm-breadcrumb-separator';
+
+export * from './lib/hlm-breadcrumb';
+export * from './lib/hlm-breadcrumb-ellipsis';
+export * from './lib/hlm-breadcrumb-item';
+export * from './lib/hlm-breadcrumb-link';
+export * from './lib/hlm-breadcrumb-list';
+export * from './lib/hlm-breadcrumb-page';
+export * from './lib/hlm-breadcrumb-separator';
+
+export const HlmBreadcrumbImports = [
+  HlmBreadcrumb,
+  HlmBreadcrumbEllipsis,
+  HlmBreadcrumbSeparator,
+  HlmBreadcrumbItem,
+  HlmBreadcrumbLink,
+  HlmBreadcrumbPage,
+  HlmBreadcrumbList,
+] as const;
+
+/**
+ * @deprecated Use `HlmBreadcrumbImports` instead.
+ */
+export const HlmBreadCrumbImports = HlmBreadcrumbImports;