Initial commit: notification-elements-ui library

Angular 19 component library for notifications & communication:
- ntf-bell: notification bell with badge count and shake animation
- ntf-feed / ntf-feed-item: real-time notification feed with grouping
- ntf-center: full notification center with category filter tabs
- ntf-inbox / ntf-inbox-item: two-column inbox with search and detail
- ntf-comment / ntf-thread: comment threads with replies and reactions
- ntf-mention-input: text input with @mention autocomplete
- ntf-empty-state: empty state placeholder
- ntf-item-def: custom template directive for notification items

Includes signal-based services, SCSS design tokens with dark mode,
utility functions, and full TypeScript type definitions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ntf-mention-input/ntf-mention-input.component.scss

@@ -0,0 +1,133 @@
+:host {
+  display: block;
+}
+
+.ntf-mention-input {
+  position: relative;
+}
+
+.ntf-mention-input__wrapper {
+  position: relative;
+}
+
+.ntf-mention-input__field {
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid var(--ntf-feed-border);
+  border-radius: 0.5rem;
+  background: var(--ntf-item-bg);
+  color: var(--ntf-item-title-color);
+  font-size: var(--font-size-sm, 0.875rem);
+  font-family: inherit;
+  line-height: 1.5;
+  resize: none;
+  transition:
+    border-color var(--ntf-transition, 150ms ease-in-out),
+    box-shadow var(--ntf-transition, 150ms ease-in-out);
+
+  &::placeholder {
+    color: var(--ntf-item-time-color);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-primary-500, #3b82f6);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  }
+
+  &--multiline {
+    min-height: 80px;
+    resize: vertical;
+  }
+}
+
+.ntf-mention-input__popup {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  margin-bottom: 4px;
+  background: var(--ntf-mention-popup-bg);
+  border: 1px solid var(--ntf-feed-border);
+  border-radius: var(--ntf-mention-popup-radius);
+  box-shadow: var(--ntf-mention-popup-shadow);
+  max-height: var(--ntf-mention-popup-max-height);
+  overflow-y: auto;
+  z-index: 10;
+  animation: ntf-popup-in 150ms var(--ntf-ease-smooth, ease-out);
+}
+
+.ntf-mention-input__popup-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--ntf-transition, 150ms ease-in-out);
+
+  &:hover,
+  &--active {
+    background: var(--ntf-item-hover-bg);
+  }
+
+  &:first-child {
+    border-radius: var(--ntf-mention-popup-radius) var(--ntf-mention-popup-radius) 0 0;
+  }
+
+  &:last-child {
+    border-radius: 0 0 var(--ntf-mention-popup-radius) var(--ntf-mention-popup-radius);
+  }
+}
+
+.ntf-mention-input__popup-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.ntf-mention-input__popup-avatar-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--color-primary-50, #eff6ff);
+  color: var(--color-primary-500, #3b82f6);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.ntf-mention-input__popup-name {
+  font-size: var(--font-size-sm, 0.875rem);
+  color: var(--ntf-item-title-color);
+}
+
+.ntf-mention-input__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 0.25rem;
+}
+
+.ntf-mention-input__counter {
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--ntf-item-time-color);
+}
+
+@keyframes ntf-popup-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}