@dnd-mapp/shared-ui 1.1.0 → 2.0.1

package/README.md

@@ -13,7 +13,8 @@ The official Angular component library for the **D&D Mapp** platform. This libra
 ## ✨ Key Features
 
 - **Modern Architecture**: Built with **Angular 21** using signals and standalone components.
-- **Next-Gen Styling**: Powered by **Tailwind CSS v4** with a CSS-first configuration.
+- **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.
 
@@ -29,36 +30,76 @@ Install the package via your preferred package manager:
 pnpm add @dnd-mapp/shared-ui
 ```
 
-### 2. Global Styles
+### 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/fonts",
+                                "output": "assets/fonts"
+                            },
+                            {
+                                "glob": "**/*",
+                                "input": "node_modules/@dnd-mapp/shared-ui/assets/images",
+                                "output": "assets/images"
+                            }
+                        ],
+                        "styles": ["src/styles.scss"]
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+### 3. Global Styles Integration
 
-Import the library's Tailwind-based styles into your application's global CSS file (e.g., `styles.css`):
+Additionally, you need to import the library styles directly into your application's primary SCSS file (e.g., `styles.scss`):
 
-```css
-@import "@dnd-mapp/shared-ui/assets/styles/main.css";
+```scss
+/*
+  1. Import Fonts first
+  2. Import Main Theme and Component Styles
+ */
+@import "@dnd-mapp/shared-ui/styles/fonts"; /* 1. */
+@import "@dnd-mapp/shared-ui/styles/main"; /* 2. */
 ```
 
-> [!NOTE]
-> Ensure your build pipeline is configured to process Tailwind CSS v4 imports.
+---
 
-### 3. Usage
+## 🧱 Usage
 
 All components are **Standalone**. Import them directly into your component's `imports` array:
 
 ```typescript
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ButtonComponent } from '@dnd-mapp/shared-ui';
 
 @Component({
-    selector: 'app-root', 
+    selector: 'app-root',
     template: `<button type="button" dma-button="primary">Roll Initiative</button>`,
+    changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [ButtonComponent],
 })
-export class RootComponent {}
+export class RootComponent {
+}
 ```
 
 ---
 
-## 🧱 Component Library
+## 🏟 Component Library
 
 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:
 
@@ -66,15 +107,16 @@ For detailed API definitions and interactive examples, visit our **[Storybook](h
 |----------------------------------------------------------|--------|--------------------------------------------------------------|
 | **[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 and primary variants.          |
+| **[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 and layout lock. |
+| **[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.          |
 
-> **Legend:**
+> **Legend:**  
 > ✅ Production Ready | 🚧 In Development | 🧪 Experimental
 
 ---

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);

package/assets/styles/colors/_blue.scss

@@ -0,0 +1,11 @@
+$blue-50: oklch(97% 0.014 254.604deg);
+$blue-100: oklch(93.2% 0.032 255.585deg);
+$blue-200: oklch(88.2% 0.059 254.128deg);
+$blue-300: oklch(80.9% 0.105 251.813deg);
+$blue-400: oklch(70.7% 0.165 254.624deg);
+$blue-500: oklch(62.3% 0.214 259.815deg);
+$blue-600: oklch(54.6% 0.245 262.881deg);
+$blue-700: oklch(48.8% 0.243 264.376deg);
+$blue-800: oklch(42.4% 0.199 265.638deg);
+$blue-900: oklch(37.9% 0.146 265.522deg);
+$blue-950: oklch(28.2% 0.091 267.935deg);

package/assets/styles/colors/_common.scss

@@ -0,0 +1,2 @@
+$white: #fff;
+$black: #000;

package/assets/styles/colors/_cyan.scss

@@ -0,0 +1,11 @@
+$cyan-50: oklch(98.4% 0.019 200.873deg);
+$cyan-100: oklch(95.6% 0.045 203.388deg);
+$cyan-200: oklch(91.7% 0.08 205.041deg);
+$cyan-300: oklch(86.5% 0.127 207.078deg);
+$cyan-400: oklch(78.9% 0.154 211.53deg);
+$cyan-500: oklch(71.5% 0.143 215.221deg);
+$cyan-600: oklch(60.9% 0.126 221.723deg);
+$cyan-700: oklch(52% 0.105 223.128deg);
+$cyan-800: oklch(45% 0.085 224.283deg);
+$cyan-900: oklch(39.8% 0.07 227.392deg);
+$cyan-950: oklch(30.2% 0.056 229.695deg);

package/assets/styles/colors/_emerald.scss

@@ -0,0 +1,11 @@
+$emerald-50: oklch(97.9% 0.021 166.113deg);
+$emerald-100: oklch(95% 0.052 163.051deg);
+$emerald-200: oklch(90.5% 0.093 164.15deg);
+$emerald-300: oklch(84.5% 0.143 164.978deg);
+$emerald-400: oklch(76.5% 0.177 163.223deg);
+$emerald-500: oklch(69.6% 0.17 162.48deg);
+$emerald-600: oklch(59.6% 0.145 163.225deg);
+$emerald-700: oklch(50.8% 0.118 165.612deg);
+$emerald-800: oklch(43.2% 0.095 166.913deg);
+$emerald-900: oklch(37.8% 0.077 168.94deg);
+$emerald-950: oklch(26.2% 0.051 172.552deg);

package/assets/styles/colors/_fuchsia.scss

@@ -0,0 +1,11 @@
+$fuchsia-50: oklch(97.7% 0.017 320.058deg);
+$fuchsia-100: oklch(95.2% 0.037 318.852deg);
+$fuchsia-200: oklch(90.3% 0.076 319.62deg);
+$fuchsia-300: oklch(83.3% 0.145 321.434deg);
+$fuchsia-400: oklch(74% 0.238 322.16deg);
+$fuchsia-500: oklch(66.7% 0.295 322.15deg);
+$fuchsia-600: oklch(59.1% 0.293 322.896deg);
+$fuchsia-700: oklch(51.8% 0.253 323.949deg);
+$fuchsia-800: oklch(45.2% 0.211 324.591deg);
+$fuchsia-900: oklch(40.1% 0.17 325.612deg);
+$fuchsia-950: oklch(29.3% 0.136 325.661deg);

package/assets/styles/colors/_gray.scss

@@ -0,0 +1,11 @@
+$gray-50: oklch(98.5% 0.002 247.839deg);
+$gray-100: oklch(96.7% 0.003 264.542deg);
+$gray-200: oklch(92.8% 0.006 264.531deg);
+$gray-300: oklch(87.2% 0.01 258.338deg);
+$gray-400: oklch(70.7% 0.022 261.325deg);
+$gray-500: oklch(55.1% 0.027 264.364deg);
+$gray-600: oklch(44.6% 0.03 256.802deg);
+$gray-700: oklch(37.3% 0.034 259.733deg);
+$gray-800: oklch(27.8% 0.033 256.848deg);
+$gray-900: oklch(21% 0.034 264.665deg);
+$gray-950: oklch(13% 0.028 261.692deg);

package/assets/styles/colors/_green.scss

@@ -0,0 +1,11 @@
+$green-50: oklch(98.2% 0.018 155.826deg);
+$green-100: oklch(96.2% 0.044 156.743deg);
+$green-200: oklch(92.5% 0.084 155.995deg);
+$green-300: oklch(87.1% 0.15 154.449deg);
+$green-400: oklch(79.2% 0.209 151.711deg);
+$green-500: oklch(72.3% 0.219 149.579deg);
+$green-600: oklch(62.7% 0.194 149.214deg);
+$green-700: oklch(52.7% 0.154 150.069deg);
+$green-800: oklch(44.8% 0.119 151.328deg);
+$green-900: oklch(39.3% 0.095 152.535deg);
+$green-950: oklch(26.6% 0.065 152.934deg);

package/assets/styles/colors/_indigo.scss

@@ -0,0 +1,11 @@
+$indigo-50: oklch(96.2% 0.018 272.314deg);
+$indigo-100: oklch(93% 0.034 272.788deg);
+$indigo-200: oklch(87% 0.065 274.039deg);
+$indigo-300: oklch(78.5% 0.115 274.713deg);
+$indigo-400: oklch(67.3% 0.182 276.935deg);
+$indigo-500: oklch(58.5% 0.233 277.117deg);
+$indigo-600: oklch(51.1% 0.262 276.966deg);
+$indigo-700: oklch(45.7% 0.24 277.023deg);
+$indigo-800: oklch(39.8% 0.195 277.366deg);
+$indigo-900: oklch(35.9% 0.144 278.697deg);
+$indigo-950: oklch(25.7% 0.09 281.288deg);