@surfnet/curve-angular 0.2.0

package/src/lib/ui/input-group/src/lib/hlm-input-group-button.ts

@@ -0,0 +1,47 @@
+import { Directive, input } from '@angular/core';
+import { HlmButton, provideBrnButtonConfig } from '../../../button/src';
+import { classes } from '../../../utils/src';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const inputGroupAddonVariants = cva('gap-2 text-sm flex items-center shadow-none', {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)]",
+      sm: '',
+      'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>ng-icon]:p-0',
+      'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
+    },
+  },
+  defaultVariants: {
+    size: 'xs',
+  },
+});
+
+type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
+
+@Directive({
+  selector: 'button[hlmInputGroupButton]',
+  providers: [
+    provideBrnButtonConfig({
+      variant: 'ghost',
+    }),
+  ],
+  hostDirectives: [
+    {
+      directive: HlmButton,
+      inputs: ['variant'],
+    },
+  ],
+  host: {
+    '[attr.data-size]': 'size()',
+    '[type]': 'type()',
+  },
+})
+export class HlmInputGroupButton {
+  public readonly size = input<InputGroupAddonVariants['size']>('xs');
+  public readonly type = input<'button' | 'submit' | 'reset'>('button');
+
+  constructor() {
+    classes(() => inputGroupAddonVariants({ size: this.size() }));
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { HlmInput } from '../../../input/src';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'input[hlmInputGroupInput]',
+  hostDirectives: [HlmInput],
+  host: { 'data-slot': 'input-group-control' },
+})
+export class HlmInputGroupInput {
+  constructor() {
+    classes(
+      () =>
+        `rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1`,
+    );
+  }
+}

package/src/lib/ui/input-group/src/lib/hlm-input-group-text.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmInputGroupText],hlm-input-group-text',
+})
+export class HlmInputGroupText {
+  constructor() {
+    classes(
+      () =>
+        "text-muted-foreground gap-2 text-sm [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] flex items-center [&_ng-icon]:pointer-events-none",
+    );
+  }
+}

package/src/lib/ui/input-group/src/lib/hlm-input-group-textarea.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { HlmTextarea } from '../../../textarea/src';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: 'textarea[hlmInputGroupTextarea]',
+  hostDirectives: [HlmTextarea],
+  host: { 'data-slot': 'input-group-control' },
+})
+export class HlmInputGroupTextarea {
+  constructor() {
+    classes(
+      () =>
+        'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent flex-1 resize-none',
+    );
+  }
+}

package/src/lib/ui/input-group/src/lib/hlm-input-group.stories.ts

@@ -0,0 +1,133 @@
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  phosphorInfo,
+  phosphorMagnifyingGlass,
+  phosphorPaperPlaneTilt,
+  phosphorPlus,
+} from '@ng-icons/phosphor-icons/regular';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { inputGroupContract } from '@surfnet/curve-contracts';
+import { HlmInputGroup, HlmInputGroupImports } from '..';
+import { HlmDropdownMenuImports } from '../../../dropdown-menu/src';
+
+const meta: Meta<HlmInputGroup> = {
+  title: 'Components/Input Group',
+  component: HlmInputGroup,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmInputGroupImports, HlmDropdownMenuImports, NgIcon, ReactiveFormsModule],
+      providers: [
+        provideIcons({
+          phosphorInfo,
+          phosphorMagnifyingGlass,
+          phosphorPaperPlaneTilt,
+          phosphorPlus,
+        }),
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: inputGroupContract.docs.description,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmInputGroup>;
+
+/** Search field with a leading icon and trailing result count. */
+export const WithLeadingAndTrailingAddon: Story = {
+  render: () => ({
+    template: `
+			<div class="w-full max-w-sm">
+				<div hlmInputGroup>
+					<div hlmInputGroupAddon>
+						<ng-icon name="phosphorMagnifyingGlass" />
+					</div>
+					<input hlmInputGroupInput placeholder="Search…" />
+					<div hlmInputGroupAddon align="inline-end">12 results</div>
+				</div>
+			</div>
+		`,
+  }),
+};
+
+/** URL input with a text prefix on the leading side. */
+export const WithTextPrefix: Story = {
+  render: () => ({
+    template: `
+			<div class="w-full max-w-sm">
+				<div hlmInputGroup>
+					<div hlmInputGroupAddon>
+						<span hlmInputGroupText>https://</span>
+					</div>
+					<input hlmInputGroupInput placeholder="example.com" class="!pl-1" />
+					<div hlmInputGroupAddon align="inline-end">
+						<button hlmInputGroupButton class="rounded-full" size="icon-xs" [hlmTooltip]="'This is content in a tooltip.'">
+							<ng-icon name="phosphorInfo" />
+						</button>
+					</div>
+				</div>
+			</div>
+		`,
+  }),
+};
+
+/** Category select prefix — picking an option updates the leading trigger label. */
+export const WithLeadingDropdown: Story = {
+  render: () => ({
+    props: {
+      category: 'All',
+      categories: ['All', 'Articles', 'Pages'],
+      select(this: { category: string }, value: string) {
+        this.category = value;
+      },
+    },
+    template: `
+			<div class="w-full max-w-sm">
+				<div hlmInputGroup>
+					<div hlmInputGroupAddon>
+						<button hlmInputGroupButton variant="ghost" [hlmDropdownMenuTrigger]="menu">{{ category }}</button>
+						<ng-template #menu>
+							<hlm-dropdown-menu>
+								@for (option of categories; track option) {
+									<button hlmDropdownMenuItem (click)="select(option)">{{ option }}</button>
+								}
+							</hlm-dropdown-menu>
+						</ng-template>
+					</div>
+					<input hlmInputGroupInput [placeholder]="'Search ' + category.toLowerCase() + '…'" />
+				</div>
+			</div>
+		`,
+  }),
+};
+
+/** Chat-style textarea with a block-end toolbar row. */
+export const TextareaWithBlockEndToolbar: Story = {
+  render: () => ({
+    template: `
+			<div class="w-full max-w-sm">
+				<div hlmInputGroup>
+					<textarea hlmInputGroupTextarea placeholder="Ask, Search or Chat…"></textarea>
+					<div hlmInputGroupAddon align="block-end">
+						<button hlmInputGroupButton variant="outline" class="rounded-full" size="icon-xs">
+							<ng-icon name="phosphorPlus" />
+						</button>
+						<span hlmInputGroupText class="ml-auto">52% used</span>
+						<hlm-separator orientation="vertical" class="!h-4" />
+						<button hlmInputGroupButton variant="default" class="rounded-full" size="icon-xs" disabled>
+							<ng-icon name="phosphorPaperPlaneTilt" />
+							<span class="sr-only">Send</span>
+						</button>
+					</div>
+				</div>
+			</div>
+		`,
+  }),
+};

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

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmInputGroup],hlm-input-group',
+  host: {
+    'data-slot': 'input-group',
+    role: 'group',
+  },
+})
+export class HlmInputGroup {
+  constructor() {
+    classes(
+      () =>
+        'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+    );
+  }
+}

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

@@ -0,0 +1,5 @@
+import { HlmLabel } from './lib/hlm-label';
+
+export * from './lib/hlm-label';
+
+export const HlmLabelImports = [HlmLabel] as const;

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

@@ -0,0 +1,55 @@
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { labelContract } from '@surfnet/curve-contracts';
+import { HlmLabel } from '..';
+import { HlmField, HlmInput } from '../../../../../public-api';
+
+const meta: Meta<HlmLabel> = {
+  title: 'Components/Label',
+  component: HlmLabel,
+  decorators: [
+    moduleMetadata({
+      imports: [HlmField, HlmInput],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: labelContract.docs.description,
+      },
+    },
+  },
+  args: {
+    children: 'Email',
+  },
+};
+
+export default meta;
+type Story = StoryObj<HlmLabel>;
+
+/** A standalone label. */
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+			<div ${argsToTemplate(args)}>
+				<label hlmLabel>
+					{{children}}
+    		</label>
+			</div>
+		`,
+  }),
+};
+
+/** A label wired to an input through `htmlFor`. */
+export const WithInput: Story = {
+  render: () => ({
+    template: `
+			<div class="w-full max-w-md">
+				<div hlmField class="w-72">
+					<label hlmLabel for="email">Email</label>
+					<input hlmInput id="email" placeholder="you@surf.nl"/>
+				</div>
+			</div>
+		`,
+  }),
+};

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnLabel } from '@spartan-ng/brain/label';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmLabel]',
+  hostDirectives: [{ directive: BrnLabel, inputs: ['id', 'for'] }],
+  host: { 'data-slot': 'label' },
+})
+export class HlmLabel {
+  constructor() {
+    classes(
+      () =>
+        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+    );
+  }
+}

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

@@ -0,0 +1,52 @@
+import { HlmSelect } from './lib/hlm-select';
+import { HlmSelectContent } from './lib/hlm-select-content';
+import { HlmSelectGroup } from './lib/hlm-select-group';
+import { HlmSelectItem } from './lib/hlm-select-item';
+import { HlmSelectLabel } from './lib/hlm-select-label';
+import { HlmSelectMultiple } from './lib/hlm-select-multiple';
+import { HlmSelectPlaceholder } from './lib/hlm-select-placeholder';
+import { HlmSelectPortal } from './lib/hlm-select-portal';
+import { HlmSelectScrollDown } from './lib/hlm-select-scroll-down';
+import { HlmSelectScrollUp } from './lib/hlm-select-scroll-up';
+import { HlmSelectSeparator } from './lib/hlm-select-separator';
+import { HlmSelectTrigger } from './lib/hlm-select-trigger';
+import { HlmSelectValue } from './lib/hlm-select-value';
+import { HlmSelectValueTemplate } from './lib/hlm-select-value-template';
+import { HlmSelectValues } from './lib/hlm-select-values';
+import { HlmSelectValuesContent } from './lib/hlm-select-values-content';
+
+export * from './lib/hlm-select';
+export * from './lib/hlm-select-content';
+export * from './lib/hlm-select-group';
+export * from './lib/hlm-select-item';
+export * from './lib/hlm-select-label';
+export * from './lib/hlm-select-multiple';
+export * from './lib/hlm-select-placeholder';
+export * from './lib/hlm-select-portal';
+export * from './lib/hlm-select-scroll-down';
+export * from './lib/hlm-select-scroll-up';
+export * from './lib/hlm-select-separator';
+export * from './lib/hlm-select-trigger';
+export * from './lib/hlm-select-value';
+export * from './lib/hlm-select-value-template';
+export * from './lib/hlm-select-values';
+export * from './lib/hlm-select-values-content';
+
+export const HlmSelectImports = [
+  HlmSelect,
+  HlmSelectContent,
+  HlmSelectGroup,
+  HlmSelectItem,
+  HlmSelectLabel,
+  HlmSelectMultiple,
+  HlmSelectPlaceholder,
+  HlmSelectPortal,
+  HlmSelectScrollDown,
+  HlmSelectScrollUp,
+  HlmSelectSeparator,
+  HlmSelectTrigger,
+  HlmSelectValue,
+  HlmSelectValues,
+  HlmSelectValuesContent,
+  HlmSelectValueTemplate,
+] as const;

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

@@ -0,0 +1,44 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { BrnSelectContent } from '@spartan-ng/brain/select';
+import { classes, hlm } from '../../../utils/src';
+import { HlmSelectScrollDown } from './hlm-select-scroll-down';
+import { HlmSelectScrollUp } from './hlm-select-scroll-up';
+
+@Component({
+  selector: 'hlm-select-content',
+  imports: [HlmSelectScrollUp, HlmSelectScrollDown],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnSelectContent],
+  template: `
+    @if (showScroll()) {
+      <hlm-select-scroll-up />
+    }
+
+    <div role="listbox" [class]="_computedListboxClasses()">
+      <ng-content />
+    </div>
+
+    @if (showScroll()) {
+      <hlm-select-scroll-down />
+    }
+  `,
+})
+export class HlmSelectContent {
+  protected readonly _computedListboxClasses = computed(() => hlm('flex flex-col'));
+
+  public readonly showScroll = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  constructor() {
+    classes(
+      () =>
+        'bg-popover no-scrollbar text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 max-h-72 min-w-36 flex-col rounded-md shadow-md ring-1 duration-100 relative flex w-(--brn-select-width) overflow-x-hidden overflow-y-auto',
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnSelectGroup } from '@spartan-ng/brain/select';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSelectGroup],hlm-select-group',
+  hostDirectives: [{ directive: BrnSelectGroup }],
+  host: { 'data-slot': 'select-group' },
+})
+export class HlmSelectGroup {
+  constructor() {
+    classes(() => 'scroll-my-1 p-1');
+  }
+}

package/src/lib/ui/select/src/lib/hlm-select-item.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorCheck } from '@ng-icons/phosphor-icons/regular';
+import { BrnSelectItem } from '@spartan-ng/brain/select';
+import { classes } from '../../../utils/src';
+
+@Component({
+  selector: 'hlm-select-item',
+  imports: [NgIcon],
+  providers: [provideIcons({ phosphorCheck })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: BrnSelectItem, inputs: ['id', 'disabled', 'value'] }],
+  host: { 'data-slot': 'select-item' },
+  template: `
+    <ng-content />
+    @if (_active()) {
+      <ng-icon
+        name="phosphorCheck"
+        class="absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*4)]"
+        aria-hidden="true"
+      />
+    }
+  `,
+})
+export class HlmSelectItem {
+  private readonly _brnSelectItem = inject(BrnSelectItem);
+
+  protected readonly _active = this._brnSelectItem.active;
+
+  constructor() {
+    classes(
+      () =>
+        'data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+    );
+  }
+}

package/src/lib/ui/select/src/lib/hlm-select-label.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnSelectLabel } from '@spartan-ng/brain/select';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSelectLabel],hlm-select-label',
+  hostDirectives: [{ directive: BrnSelectLabel, inputs: ['id'] }],
+  host: { 'data-slot': 'select-label' },
+})
+export class HlmSelectLabel {
+  constructor() {
+    classes(() => 'text-muted-foreground px-2 py-1.5 text-xs flex');
+  }
+}

package/src/lib/ui/select/src/lib/hlm-select-multiple.ts

@@ -0,0 +1,45 @@
+import { Directive } from '@angular/core';
+import { provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { BrnPopover, provideBrnPopoverConfig } from '@spartan-ng/brain/popover';
+import { BrnSelectMultiple } from '@spartan-ng/brain/select';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSelectMultiple],hlm-select-multiple',
+  providers: [
+    provideBrnPopoverConfig({
+      align: 'start',
+      sideOffset: 6,
+    }),
+    provideBrnDialogDefaultOptions({
+      autoFocus: 'first-heading',
+    }),
+  ],
+  hostDirectives: [
+    {
+      directive: BrnSelectMultiple,
+      inputs: ['disabled', 'value', 'isItemEqualToValue', 'itemToString'],
+      outputs: ['valueChange'],
+    },
+    {
+      directive: BrnPopover,
+      inputs: [
+        'align',
+        'autoFocus',
+        'closeDelay',
+        'closeOnOutsidePointerEvents',
+        'sideOffset',
+        'state',
+        'offsetX',
+        'restoreFocus',
+      ],
+      outputs: ['stateChanged', 'closed'],
+    },
+  ],
+  host: { 'data-slot': 'select' },
+})
+export class HlmSelectMultiple {
+  constructor() {
+    classes(() => 'block');
+  }
+}

package/src/lib/ui/select/src/lib/hlm-select-placeholder.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnSelectPlaceholder } from '@spartan-ng/brain/select';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSelectPlaceholder],hlm-select-placeholder',
+  hostDirectives: [BrnSelectPlaceholder],
+  host: { 'data-slot': 'select-placeholder' },
+})
+export class HlmSelectPlaceholder {
+  constructor() {
+    classes(
+      () =>
+        "gap-2 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] flex items-center data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+    );
+  }
+}

package/src/lib/ui/select/src/lib/hlm-select-portal.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnPopoverContent } from '@spartan-ng/brain/popover';
+
+@Directive({
+  selector: '[hlmSelectPortal]',
+  hostDirectives: [{ directive: BrnPopoverContent, inputs: ['context', 'class'] }],
+})
+export class HlmSelectPortal {}

package/src/lib/ui/select/src/lib/hlm-select-scroll-down.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorCaretDown } from '@ng-icons/phosphor-icons/regular';
+import { BrnSelectScrollDown } from '@spartan-ng/brain/select';
+import { classes } from '../../../utils/src';
+
+@Component({
+  selector: 'hlm-select-scroll-down',
+  imports: [NgIcon],
+  providers: [provideIcons({ phosphorCaretDown })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnSelectScrollDown],
+  template: ` <ng-icon name="phosphorCaretDown" /> `,
+})
+export class HlmSelectScrollDown {
+  constructor() {
+    classes(
+      () =>
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] sticky bottom-0 w-full data-hidden:hidden",
+    );
+  }
+}

package/src/lib/ui/select/src/lib/hlm-select-scroll-up.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorCaretUp } from '@ng-icons/phosphor-icons/regular';
+import { BrnSelectScrollUp } from '@spartan-ng/brain/select';
+import { classes } from '../../../utils/src';
+
+@Component({
+  selector: 'hlm-select-scroll-up',
+  imports: [NgIcon],
+  providers: [provideIcons({ phosphorCaretUp })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnSelectScrollUp],
+  template: ` <ng-icon name="phosphorCaretUp" /> `,
+})
+export class HlmSelectScrollUp {
+  constructor() {
+    classes(
+      () =>
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] sticky top-0 w-full data-hidden:hidden",
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnSelectSeparator } from '@spartan-ng/brain/select';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmSelectSeparator],hlm-select-separator',
+  hostDirectives: [{ directive: BrnSelectSeparator, inputs: ['orientation'] }],
+  host: { 'data-slot': 'select-separator' },
+})
+export class HlmSelectSeparator {
+  constructor() {
+    classes(() => 'bg-border -mx-1 my-1 h-px pointer-events-none');
+  }
+}