@dnd-mapp/shared-ui 1.0.0 → 2.0.0

package/README.md

@@ -4,116 +4,121 @@
 ![NPM Version](https://img.shields.io/npm/v/@dnd-mapp/shared-ui)
 ![License: Proprietary](https://img.shields.io/badge/License-Proprietary-red.svg)
 
-The official Angular component library for the **D&D Mapp** platform. This library provides a unified design language and a collection of reusable, accessible UI components built specifically for tabletop gaming applications.
+The official Angular component library for the **D&D Mapp** platform. This library provides a unified design language and high-performance, accessible UI components built specifically for tabletop gaming applications.
 
-## 🏰 Features
-
-- **Angular 21 Native**: Built with the latest signals-based patterns and standalone components.
-- **Tailwind CSS v4**: CSS-first configuration for high-performance styling.
-- **Accessible**: Built with A11y best practices to ensure all players can use the tools.
-- **Design Driven**: Single source of truth for the D&D Mapp brand.
+🏰 **[Explore the Live Storybook](https://dnd-mapp.github.io/shared-ui/)**
 
 ---
 
-## 🧱 UI Components
-
-A collection of high-performance, accessible components. Click on a component name to view its specific documentation, API, and usage examples.
+## ✨ Key Features
 
-| Component                              | Status | Description                                                         |
-|----------------------------------------|--------|---------------------------------------------------------------------|
-| **[Button](src/lib/button/README.md)** | ✅      | Primary action component with support for variants (base, primary). |
-
-> **[!TIP]** ✅ Ready for Production | 🚧 In Development | 🧪 Experimental
+- **Modern Architecture**: Built with **Angular 21** using signals and standalone components.
+- **Custom Theming**: A proprietary SCSS-based design system.
+- **Integrated Typography**: Includes custom fonts optimized for readability in high-density gaming interfaces.
+- **Layout Integrity**: Specialized components like `Active Marker` prevent Layout Shifts (CLS) during state toggles.
+- **Accessible & Consistent**: A11y-focused components that serve as the single source of truth for the D&D Mapp brand.
 
 ---
 
-## 🚀 Installation
+## 🚀 Getting Started
+
+### 1. Installation
 
-Install the package via pnpm (recommended) or your preferred package manager:
+Install the package via your preferred package manager:
 
 ```bash
 pnpm add @dnd-mapp/shared-ui
 ```
 
-### 1. Global Styles Integration
-
-The library requires the shared Tailwind-based styles to function correctly. Add the following import to your application's global CSS file (e.g., `styles.css` or `main.css`):
-
-```css
-@import "@dnd-mapp/shared-ui/styles.css";
+### 2. Configuration (Angular.json)
+
+To ensure the custom themes, fonts, and assets are correctly bundled, update your `angular.json` file. You must include the global styles and the assets folder:
+
+```json
+{
+    "projects": {
+        "your-app-name": {
+            "architect": {
+                "build": {
+                    "options": {
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets",
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@dnd-mapp/shared-ui/assets",
+                                "output": "assets"
+                            }
+                        ],
+                        "styles": ["src/styles.scss"]
+                    }
+                }
+            }
+        }
+    }
+}
 ```
 
-### 2. Configuration
+### 3. Global Styles Integration
 
-Since this library uses **Tailwind CSS v4**, ensure your application is configured to process Tailwind imports. If you are using the Angular CLI with Tailwind support, no additional configuration is typically required beyond the import.
+Additionally, you need to import the library styles directly into your application's primary SCSS file (e.g., `styles.scss`):
 
----
+```scss
+/*
+  1. Import Fonts first
+  2. Import Main Theme and Component Styles
+ */
+@import "@dnd-mapp/shared-ui/assets/styles/fonts.scss"; /* 1. */
+@import "@dnd-mapp/shared-ui/assets/styles/main.scss"; /* 2. */
+```
 
-## 📖 Usage
+---
 
-All components are exported as **Standalone Components**. You can import them directly into your component's `imports` array.
+## 🧱 Usage
 
-### Example: Using the Button Component
+All components are **Standalone**. Import them directly into your component's `imports` array:
 
 ```typescript
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ButtonComponent } from '@dnd-mapp/shared-ui'; 
+import { ButtonComponent } from '@dnd-mapp/shared-ui';
 
 @Component({
-      selector: 'dma-root',
-      template: `
-        <section>
-            <h1>Encounter Initiative</h1>
-            <button dma-button (click)="onRoll()">Roll for Initiative</button>
-        </section>
-      `,
+    selector: 'app-root',
+    template: `<button type="button" dma-button="primary">Roll Initiative</button>`,
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [ButtonComponent],
 })
 export class RootComponent {
-  protected onRoll() {
-    console.log('Natural 20!');
-  }
 }
 ```
 
 ---
 
-## 🛠 Development & Storybook
-
-If you are contributing to the library or want to explore the components in isolation:
-
-1. **Clone the repo**:
-
-   ```bash
-   git clone https://github.com/dnd-mapp/shared-ui.git
-   ```
-
-2. **Setup environment**:
-
-   This project uses [mise-en-place](https://mise.jdx.dev/) to manage Node.js and pnpm versions.
-
-   ```bash
-   mise install
-   pnpm install
-   ```
+## 🏟 Component Library
 
-3. **Launch Storybook**:
+For detailed API definitions and interactive examples, visit our **[Storybook](https://dnd-mapp.github.io/shared-ui/)** or view the documentation for the specific components below:
 
-   ```bash
-   pnpm storybook
-   ```
+| Component                                                | Status | Description                                                  |
+|----------------------------------------------------------|--------|--------------------------------------------------------------|
+| **[Active Marker](src/lib/nav/active-marker/README.md)** | ✅      | Prevents CLS by reserving space for bold text states.        |
+| **[App Top Bar](src/lib/nav/app-top-bar/README.md)**     | ✅      | Layout-oriented header with `start` and `end` sections.      |
+| **[Button](src/lib/button/README.md)**                   | ✅      | Actions with support for base, primary, and danger variants. |
+| **[Dropdown](src/lib/dropdown/README.md)**               | ✅      | Directive-based overlay system using Angular CDK.            |
+| **[Input](src/lib/forms/input/README.md)**               | ✅      | Debounced, form-aware text inputs with validation states.    |
+| **[Navbar](src/lib/nav/navbar/README.md)**               | ✅      | Semantic `<nav>` container with standardized flex spacing.   |
+| **[Navbar Brand](src/lib/nav/navbar-brand/README.md)**   | ✅      | A standardized header element for logo and brand identity.   |
+| **[Navbar Link](src/lib/nav/navbar-link/README.md)**     | ✅      | Navigation link with automatic active state detection.       |
+| **[Navbar Menu](src/lib/nav/navbar-menu/README.md)**     | ✅      | Specialized dropdown trigger for navigation bars.            |
+| **[Vertical Rule](src/lib/vertical-rule/README.md)**     | ✅      | A layout-stretching divider for content separation.          |
 
-   Navigate to `http://localhost:6006` to view the documentation and component playground.
+> **Legend:**  
+> ✅ Production Ready | 🚧 In Development | 🧪 Experimental
 
 ---
 
-## 📜 Available Scripts
+## 🛠 Development
 
-- `pnpm build`: Compiles the library for production.
-- `pnpm test`: Runs unit tests via Karma.
-- `pnpm lint`: Validates TypeScript and Angular logic.
-- `pnpm stylelint`: Validates CSS/Tailwind compliance.
+If you are contributing or wish to run the documentation locally, please refer to the [Main Repository README](https://github.com/dnd-mapp/shared-ui/blob/main/README.md) for environment setup and contribution guidelines.
 
 ---
 
@@ -121,4 +126,4 @@ If you are contributing to the library or want to explore the components in isol
 
 Copyright © 2026 NoNamer777. All rights reserved.
 
-This software is **proprietary**. Unauthorized copying, modification, or distribution is strictly prohibited. Use is subject to the terms in the [LICENSE](https://github.com/dnd-mapp/shared-ui?tab=License-1-ov-file) file.
+Proprietary software. Unauthorized copying or distribution is strictly prohibited. See the [LICENSE](https://github.com/dnd-mapp/shared-ui?tab=License-1-ov-file) for full terms.

package/assets/styles/_normalize.scss

@@ -0,0 +1,380 @@
+@use "./theme-variables" as tv;
+
+/*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+    box-sizing: border-box; /* 1 */
+    margin: 0; /* 2 */
+    padding: 0; /* 2 */
+    border: 0 solid; /* 3 */
+}
+
+/*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured `sans` font-family by default.
+  5. Use the user's configured `sans` font-feature-settings by default.
+  6. Use the user's configured `sans` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+html,
+:host {
+    line-height: 1.5; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    tab-size: 4; /* 3 */
+    font-family:
+        tv.$font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+        "Noto Color Emoji"; /* 4 */
+    font-feature-settings: normal; /* 5 */
+    font-variation-settings: tv.$font-variation-settings; /* 6 */
+    -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+hr {
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
+}
+
+/*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+}
+
+/*
+  Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+/*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+}
+
+/*
+  Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/*
+  1. Use the user's configured `mono` font-family by default.
+  2. Use the user's configured `mono` font-feature-settings by default.
+  3. Use the user's configured `mono` font-variation-settings by default.
+  4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+    font-family:
+        tv.$font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+        monospace; /* 1 */
+    font-feature-settings: normal; /* 2 */
+    font-variation-settings: tv.$font-variation-settings; /* 3 */
+    font-size: 1em; /* 4 */
+}
+
+/*
+  Add the correct font size in all browsers.
+*/
+
+small {
+    font-size: 80%;
+}
+
+/*
+  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+table {
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
+}
+
+/*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+    outline: auto;
+}
+
+/*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+    vertical-align: baseline;
+}
+
+/*
+  Add the correct display in Chrome and Safari.
+*/
+
+summary {
+    display: list-item;
+}
+
+/*
+  Make lists unstyled by default.
+*/
+
+ol,
+ul,
+menu {
+    list-style: none;
+}
+
+/*
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+}
+
+/*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+    max-width: 100%;
+    height: auto;
+}
+
+/*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+button,
+input,
+select,
+optgroup,
+textarea,
+::file-selector-button {
+    font: inherit; /* 1 */
+    font-feature-settings: inherit; /* 1 */
+    font-variation-settings: inherit; /* 1 */
+    letter-spacing: inherit; /* 1 */
+    color: inherit; /* 1 */
+    border-radius: 0; /* 2 */
+    background-color: transparent; /* 3 */
+    opacity: 1; /* 4 */
+}
+
+/*
+  Restore default font weight.
+*/
+
+:where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+}
+
+/*
+  Restore indentation.
+*/
+
+:where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+}
+
+/*
+  Restore space after button.
+*/
+
+::file-selector-button {
+    margin-inline-end: 4px;
+}
+
+/*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+::placeholder {
+    opacity: 1;
+}
+
+/*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px)
+    /* Safari 17+ */ {
+    ::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+}
+
+/*
+  Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+    resize: vertical;
+}
+
+/*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+::-webkit-date-and-time-value {
+    min-height: 1lh; /* 1 */
+    text-align: inherit; /* 2 */
+}
+
+/*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
+*/
+
+::-webkit-datetime-edit {
+    display: inline-flex;
+}
+
+/*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+}
+
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+}
+
+/*
+  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+::-webkit-calendar-picker-indicator {
+    line-height: 1;
+}
+
+/*
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+    box-shadow: none;
+}
+
+/*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+button,
+input:where([type="button"], [type="reset"], [type="submit"]),
+::file-selector-button {
+    appearance: button;
+}
+
+/*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+[hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+}

package/assets/styles/colors/_amber.scss

@@ -0,0 +1,11 @@
+$amber-50: oklch(98.7% 0.022 95.277deg);
+$amber-100: oklch(96.2% 0.059 95.617deg);
+$amber-200: oklch(92.4% 0.12 95.746deg);
+$amber-300: oklch(87.9% 0.169 91.605deg);
+$amber-400: oklch(82.8% 0.189 84.429deg);
+$amber-500: oklch(76.9% 0.188 70.08deg);
+$amber-600: oklch(66.6% 0.179 58.318deg);
+$amber-700: oklch(55.5% 0.163 48.998deg);
+$amber-800: oklch(47.3% 0.137 46.201deg);
+$amber-900: oklch(41.4% 0.112 45.904deg);
+$amber-950: oklch(27.9% 0.077 45.635deg);