{"_id":"@ad-technology-inc/design-system","_rev":"8-4a76d9478b01a32e8dc2f22327c3b721","name":"@ad-technology-inc/design-system","dist-tags":{"latest":"3.0.0"},"versions":{"1.0.0":{"name":"@ad-technology-inc/design-system","version":"1.0.0","_id":"@ad-technology-inc/design-system@1.0.0","maintainers":[{"name":"zerexei","email":"angeloarcillas64@gmail.com"}],"dist":{"shasum":"65ed21bc9eac8fbd673e7a4fad695fb1760531c2","tarball":"https://registry.npmjs.org/@ad-technology-inc/design-system/-/design-system-1.0.0.tgz","fileCount":20,"integrity":"sha512-/+whyRWxPis/hOQLD9ueC8wsHTQDLI8Mp6R/sj+DKiGcOhyvG5RdzURGpFD8pZhc+iA1fd1Xue1pjqJ9j34VNg==","signatures":[{"sig":"MEYCIQC1LRpLmobd0TWGxpOGApdn5dmmtQRZ0f7dhdS6kE7BOgIhAMiUaMCEZJiwLwgPB8jg0W0Ar/3ww8iUC53U6rPmWt0u","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29017},"main":"src/css/index.css","type":"module","exports":{".":"./src/css/index.css","./app.css":"./src/css/app.css","./colors.css":"./src/css/theme/colors.css"},"gitHead":"24f2f9a6ef0d3b5ffd4545e57bb1ce3268f051eb","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"zerexei","email":"angeloarcillas64@gmail.com"},"_npmVersion":"11.15.0","description":"A high-premium, responsive, state-of-the-art Design System built with **Vue 3**, **Vite**, and **Tailwind CSS v4**. It features an elegant custom typographic configuration, semantic color tokens, and a fully interactive **Light, Dark, and System theme syn","directories":{},"_nodeVersion":"24.14.1","dependencies":{"vue":"^3.5.38","tailwindcss":"^4.3.1","@tailwindcss/vite":"^4.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.0","@vitejs/plugin-vue":"^6.0.7"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.0.0_1782871296722_0.6079182124351743","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@ad-technology-inc/design-system","version":"1.1.0","_id":"@ad-technology-inc/design-system@1.1.0","maintainers":[{"name":"zerexei","email":"angeloarcillas64@gmail.com"}],"dist":{"shasum":"35898b69abd20d8806bdd140a598d097f163e770","tarball":"https://registry.npmjs.org/@ad-technology-inc/design-system/-/design-system-1.1.0.tgz","fileCount":21,"integrity":"sha512-cnfqn6Ynksxd2nuL8DDqxLTO7Ku+2IB6+fjHBgtEfK6/nszIlE48K4oH24irEI6YqACF6TfwO73zNPgZ3x7KUA==","signatures":[{"sig":"MEUCIHpMx+mv8IOMSkQ5E8Q6WAp74sPCI2KPDoJYEObLG8OhAiEAlVZrm9vAWDwfTm4Ui51PRo4qdn1ZJYPSsZQhfEnH9L4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29099},"main":"src/css/index.css","type":"module","exports":{".":"./src/css/index.css","./app.css":"./src/css/app.css","./colors.css":"./src/css/theme/colors.css"},"gitHead":"844b7ced644ca3f2b869a60ed644707c944ba404","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"zerexei","email":"angeloarcillas64@gmail.com"},"_npmVersion":"11.15.0","description":"A premium, state-of-the-art CSS-first Design System built for modern SaaS applications. Compatible with vanilla HTML/CSS and fully integrated with Tailwind CSS v4.","directories":{},"_nodeVersion":"24.14.1","dependencies":{"vue":"^3.5.38","tailwindcss":"^4.3.1","@tailwindcss/vite":"^4.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.0","@vitejs/plugin-vue":"^6.0.7"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.1.0_1782872682423_0.6921954892278266","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@ad-technology-inc/design-system","version":"1.2.0","_id":"@ad-technology-inc/design-system@1.2.0","maintainers":[{"name":"zerexei","email":"angeloarcillas64@gmail.com"}],"dist":{"shasum":"5aa4976c9a88902fa3134351e8e28938e1d096ff","tarball":"https://registry.npmjs.org/@ad-technology-inc/design-system/-/design-system-1.2.0.tgz","fileCount":21,"integrity":"sha512-9zzddyN8Img04VJG+51JQT7HXELvtQaMqhOp4p349s0AhZP1xhPfA/JGv6RPmxzZYiQPqoO3vzeC1YoWHqvKog==","signatures":[{"sig":"MEYCIQDlyqBKOu4i727BJgYnAEQhvrEfkBoNtuipGvvG9HeulQIhAIypCWg3AuzrKOwRUqfvIJntlBXAehn188LX0/cUwU+M","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29200},"main":"src/css/index.css","type":"module","exports":{".":"./src/css/index.css","./app.css":"./src/css/app.css","./colors.css":"./src/css/theme/colors.css"},"gitHead":"acc2e68ae45d72f4a86226457c3a3295a9c8bbe5","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"zerexei","email":"angeloarcillas64@gmail.com"},"_npmVersion":"11.15.0","description":"A premium, state-of-the-art CSS-first Design System built for modern SaaS applications. Compatible with vanilla HTML/CSS and fully integrated with Tailwind CSS v4.","directories":{},"_nodeVersion":"24.14.1","dependencies":{"vue":"^3.5.38","tailwindcss":"^4.3.1","@tailwindcss/vite":"^4.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.0","@vitejs/plugin-vue":"^6.0.7"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.2.0_1782875580632_0.42166013586629303","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@ad-technology-inc/design-system","version":"1.3.0","_id":"@ad-technology-inc/design-system@1.3.0","maintainers":[{"name":"zerexei","email":"angeloarcillas64@gmail.com"}],"dist":{"shasum":"eeb0e607f39e486cf0f0530e5e55831c5e38b1fb","tarball":"https://registry.npmjs.org/@ad-technology-inc/design-system/-/design-system-1.3.0.tgz","fileCount":21,"integrity":"sha512-B77ERkwZBh4n/Mpb7hL7BSr5ZuM/av1Ljr4tvnAMAylvL7OWxrD94aDDNxOuyMatyhCyAuTGtAKj1+VqVmRL4g==","signatures":[{"sig":"MEYCIQCAWxB+B71tAWBqOyc6zEIsaj/b5DiNZIOSAk0smvc3zAIhAI5FQGR6HBp7UHRDO9viR93mm5VU53QPANfzREFhAADt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29098},"main":"src/css/index.css","type":"module","exports":{".":"./src/css/index.css","./app.css":"./src/css/app.css","./colors.css":"./src/css/theme/colors.css"},"gitHead":"485c3388ed607254085e480ab1fac901a8182189","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"zerexei","email":"angeloarcillas64@gmail.com"},"_npmVersion":"11.15.0","description":"A premium, state-of-the-art CSS-first Design System built for modern SaaS applications. Compatible with vanilla HTML/CSS and fully integrated with Tailwind CSS v4.","directories":{},"_nodeVersion":"24.14.1","dependencies":{"vue":"^3.5.38","tailwindcss":"^4.3.1","@tailwindcss/vite":"^4.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.0","@vitejs/plugin-vue":"^6.0.7"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.3.0_1782879681694_0.515232453320021","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"name":"@ad-technology-inc/design-system","version":"1.4.0","_id":"@ad-technology-inc/design-system@1.4.0","maintainers":[{"name":"zerexei","email":"angeloarcillas64@gmail.com"}],"dist":{"shasum":"2dfe0fa692b9003397ab8b233e437dd0d51f73d0","tarball":"https://registry.npmjs.org/@ad-technology-inc/design-system/-/design-system-1.4.0.tgz","fileCount":21,"integrity":"sha512-3cG49Sz7okHRdcYugzZ8MqbydrJu4heuxcZ8r3qFpz+agIgmyAI/4D1MBhEtbfYjkhfYyF2NGD7LSEu3qUgOQg==","signatures":[{"sig":"MEQCIFdwitzdLXYLukIABzxiea+E8wrelLx2uyyFflPkItnBAiB20cw0iUULzyeEJaNdL/hftLicm7Jjo+PiOKs1pQMVNA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30101},"main":"src/css/index.css","type":"module","exports":{".":"./src/css/index.css","./app.css":"./src/css/app.css","./colors.css":"./src/css/theme/colors.css"},"gitHead":"d85c2f9e5f624e68e751758a521352c3ea47c4b7","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"zerexei","email":"angeloarcillas64@gmail.com"},"_npmVersion":"11.15.0","description":"A premium, state-of-the-art CSS-first Design System built for modern SaaS applications. Compatible with vanilla HTML/CSS and fully integrated with Tailwind CSS v4.","directories":{},"_nodeVersion":"24.14.1","dependencies":{"vue":"^3.5.38","tailwindcss":"^4.3.1","@tailwindcss/vite":"^4.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.0","@vitejs/plugin-vue":"^6.0.7"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.4.0_1782882073389_0.5674624190202018","host":"s3://npm-registry-packages-npm-production"}},"1.5.0":{"name":"@ad-technology-inc/design-system","version":"1.5.0","_id":"@ad-technology-inc/design-system@1.5.0","maintainers":[{"name":"zerexei","email":"angeloarcillas64@gmail.com"}],"dist":{"shasum":"2c95fe5571e8ce33de6a6ba8b781f18ee2c27477","tarball":"https://registry.npmjs.org/@ad-technology-inc/design-system/-/design-system-1.5.0.tgz","fileCount":21,"integrity":"sha512-pYbssNL/iYWTwnUCgJvFjDJOfb9kHZncTHH37bA6f/R8dF9CGNKRoEve2pnxbR2LtiUIWs+x4YUj84dpRIo+kg==","signatures":[{"sig":"MEUCIHf9NP8m+yDaobDTmIgdxWaiTPsnzhs1FlcuDkz4v0o1AiEAp0HSktet/4CyvibjSeHW8dO1qCOgBEhnNO6ZDrbFVFI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30353},"main":"src/css/index.css","type":"module","exports":{".":"./src/css/index.css","./app.css":"./src/css/app.css","./colors.css":"./src/css/theme/colors.css"},"gitHead":"3ed37cb378161cc8bd1b434f6e41f5b107bddef8","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"zerexei","email":"angeloarcillas64@gmail.com"},"_npmVersion":"11.15.0","description":"A premium, state-of-the-art CSS-first Design System built for modern SaaS applications. Compatible with vanilla HTML/CSS and fully integrated with Tailwind CSS v4.","directories":{},"_nodeVersion":"24.14.1","dependencies":{"vue":"^3.5.38","tailwindcss":"^4.3.1","@tailwindcss/vite":"^4.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.0","@vitejs/plugin-vue":"^6.0.7"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.5.0_1782890108030_0.02079639959740409","host":"s3://npm-registry-packages-npm-production"}},"1.6.0":{"name":"@ad-technology-inc/design-system","version":"1.6.0","_id":"@ad-technology-inc/design-system@1.6.0","maintainers":[{"name":"zerexei","email":"angeloarcillas64@gmail.com"}],"dist":{"shasum":"b400223256ad82633f2c84d660b82358abd07c8e","tarball":"https://registry.npmjs.org/@ad-technology-inc/design-system/-/design-system-1.6.0.tgz","fileCount":21,"integrity":"sha512-5FoD716wgttlrOQ1C24tWgliEhXETNMg01z5r5UcBVtl8r0D89+Ma4xL6edlp2IHz+LTlh2EaocyDHIuke2HWw==","signatures":[{"sig":"MEQCIGIDcdOecU550peajvnyRU/lQX1WFE/Q3bjUFedcpQQ/AiBkN/LSghLdoKb7Y8N8K3XQsxWYC71uJoGcLBU1U29VPQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30622},"main":"src/css/index.css","type":"module","exports":{".":"./src/css/index.css","./app.css":"./src/css/app.css","./colors.css":"./src/css/theme/colors.css"},"gitHead":"e68afed60dd3a1f0d8440d1eee38de1be02c1e68","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"zerexei","email":"angeloarcillas64@gmail.com"},"_npmVersion":"10.8.2","description":"A premium, state-of-the-art CSS-first Design System built for modern SaaS applications. Compatible with vanilla HTML/CSS and fully integrated with Tailwind CSS v4.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"vue":"^3.5.38","tailwindcss":"^4.3.1","lightningcss":"^1.32.0","@tailwindcss/vite":"^4.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.0","stylelint":"^17.14.1","@vitejs/plugin-vue":"^6.0.7","stylelint-config-standard":"^40.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.6.0_1784523582521_0.38988047272775095","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"_id":"@ad-technology-inc/design-system@3.0.0","dist":{"shasum":"368b7c7401bbf5e699892133347fd970c8e22bea","tarball":"https://registry.npmjs.org/@ad-technology-inc/design-system/-/design-system-3.0.0.tgz","fileCount":21,"integrity":"sha512-p8z+LUSXXu0GUH+QxUZt7X+dayxsjWTLUN2cxqxT6qP59Sbzb/WynzzE6bnrKQDMFM0eSBBHLnpshf889iNd8Q==","signatures":[{"sig":"MEUCIEsKyvHbmqD1h/ydeP6gLKRLieIgkSiMBMGj/0ZIa6QHAiEA6WcM9P5q4CXL9sHS1XlimkTVkrc3jFJhaIeXo9LpGMY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDs/Bk0KY+aOIGCCXsI8zGQZJpvywlO9efK2tKkVZBUWQIhAKfRdaSgbsM978lJJ4GqFcMFIRJnTxMQgl0gIJOR82dL"}],"unpackedSize":46503},"main":"src/css/index.css","name":"@ad-technology-inc/design-system","type":"module","exports":{".":"./src/css/index.css","./app.css":"./src/css/app.css","./colors.css":"./src/css/theme/colors.css"},"gitHead":"db932671db02ac71e85823ec396a7c582338d218","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"version":"3.0.0","_npmUser":{"name":"zerexei","email":"angeloarcillas64@gmail.com"},"_npmVersion":"10.8.2","description":"A premium, state-of-the-art CSS-first Design System built for modern SaaS applications. Compatible with vanilla HTML/CSS and fully integrated with Tailwind CSS v4.","directories":{},"maintainers":[{"name":"zerexei","email":"angeloarcillas64@gmail.com"}],"_nodeVersion":"20.20.2","dependencies":{"vue":"^3.5.38","tailwindcss":"^4.3.1","lightningcss":"^1.32.0","@tailwindcss/vite":"^4.3.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.1.0","stylelint":"^17.14.1","@vitejs/plugin-vue":"^6.0.7","stylelint-config-standard":"^40.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_3.0.0_1790416001532_0.8814837278912406"}}},"time":{"created":"2026-07-01T02:01:36.576Z","modified":"2026-09-26T09:46:41.831Z","1.0.0":"2026-07-01T02:01:36.867Z","1.1.0":"2026-07-01T02:24:42.564Z","1.2.0":"2026-07-01T03:13:00.850Z","1.3.0":"2026-07-01T04:21:21.850Z","1.4.0":"2026-07-01T05:01:13.520Z","1.5.0":"2026-07-01T07:15:08.173Z","1.6.0":"2026-07-20T04:59:42.676Z","3.0.0":"2026-09-26T09:46:41.623Z"},"description":"A premium, state-of-the-art CSS-first Design System built for modern SaaS applications. Compatible with vanilla HTML/CSS and fully integrated with Tailwind CSS v4.","maintainers":[{"name":"zerexei","email":"angeloarcillas64@gmail.com"}],"readme":"# @ad-technology-inc/design-system\n\nA premium, state-of-the-art CSS-first Design System built for modern SaaS applications. Compatible with vanilla HTML/CSS and fully integrated with Tailwind CSS v4.\n\n---\n\n## 🚀 Installation\n\nInstall the package via your preferred package manager:\n\n```bash\nnpm install @ad-technology-inc/design-system\n# or\nyarn add @ad-technology-inc/design-system\n# or\npnpm add @ad-technology-inc/design-system\n```\n\n---\n\n## 🛠️ Usage\n\n### 1. Vanilla CSS Integration\nImport the clean CSS bundle into your main stylesheet:\n\n```css\n@import \"@ad-technology-inc/design-system\";\n```\n\n### 2. Tailwind CSS v4 Integration\nIf your project is built with Tailwind CSS v4, import Tailwind and then load our theme wrapper stylesheet:\n\n```css\n@import \"tailwindcss\";\n\n/* Imports all components and links theme variables to Tailwind v4 */\n@import \"@ad-technology-inc/design-system/app.css\";\n```\n\n#### Configuring Dark Mode:\nBy default, Tailwind CSS v4 handles dark mode using media queries. If your project uses class-based dark mode (e.g. toggling `.dark` class on the `<html>` element), define the custom variant in your stylesheet:\n\n```css\n@import \"tailwindcss\";\n@custom-variant dark (&:is(.dark *)); /* Only add if using class-based dark mode */\n\n@import \"@ad-technology-inc/design-system/app.css\";\n```\n\n#### Disabling Dark Mode (Light Mode Only):\nIf you want to disable dark mode entirely and force your website to stay in light mode (even if the user's OS prefers dark mode), simply add the `light` class to your root `<html>` element:\n\n```html\n<html class=\"light\">\n```\nThis disables the built-in prefers-color-scheme media query and keeps the light-mode variables active.\n\n---\n\n## 🎨 Theme Variables & Customization\n\nThe design system is engineered for modern B2B SaaS interfaces. It exposes slate neutrals, brand blue (`#1976D2`), micro-elevations (`shadow-xs`), and strict mathematical corner radii:\n\n```css\n:root {\n  --primary: #1976d2;           /* Primary brand action */\n  --primary-hover: #1565c0;     /* Hover state */\n  --primary-active: #0d47a1;    /* Active state */\n  --radius-xl: 0.75rem;         /* Page containers, cards, modals */\n  --radius-lg: 0.5rem;          /* Action buttons, form inputs */\n  --radius-md: 0.375rem;        /* Badges, table chips, segmented tabs */\n}\n\n.dark {\n  --background: #020617;        /* Deep slate-950 canvas (no pitch black) */\n  --card: #0f172a;              /* Slate-900 surface */\n  --border: #1e293b;            /* Crisp 1px border */\n}\n```\n![Design Tokens](./src/assets/design-tokens.png)\n\n### Core Semantic Tokens Available:\n* `--background` / `--foreground`: Base canvas (`slate-50` / `slate-950`) & text\n* `--card` / `--card-nested`: Surfaces & cluster wells (`slate-50/70` / `slate-800/40`)\n* `--primary` / `--primary-hover` / `--primary-active` / `--primary-foreground`: Brand actions (`#1976D2`)\n* `--primary-tint` / `--primary-border`: Subtle brand highlighting\n* `--secondary` / `--secondary-hover` / `--secondary-foreground`: Secondary actions\n* `--accent` / `--accent-hover` / `--accent-foreground`: Interactive highlights\n* `--neutral` / `--neutral-hover` / `--neutral-foreground`: Muted helpers and subtle backgrounds\n* `--border`: Structural container borders (`slate-200` / `slate-800`)\n* `--success` / `--warning` / `--info` / `--danger`: High-contrast semantic indicators (Emerald, Amber, Blue, Rose)\n* `--radius-xl` / `--radius-lg` / `--radius-md` / `--radius-full`: Geometry scale\n* `--shadow-xs` / `--shadow-lg` / `--shadow-xl`: Crisp micro-elevation hierarchy\n\n---\n\n## ⚡ Component & Layout Reference\n\nThe package includes pre-styled, accessibility-compliant CSS components with zero AI artifacts (no purple orbs, no decorative emojis, no indiscriminate pill badges):\n\n- **`.button`**: Standardized, transition-ready buttons with `rounded-lg` and `shadow-xs`. Variants: `.button-primary`, `.button-secondary`, `.button-outline`, `.button-destructive`, `.button-ghost`, `.button-icon`, and `.button-link`. Sizes: `.button-sm`, `.button-lg`.\n- **`.segmented-switcher` & `.segmented-tab`**: Segmented view switchers.\n- **`.card`**: 5-level container rhythm (`.card`, `.card-well`, `.card-tile`, `.icon-box`, `.stat-value`, `.stat-change`).\n- **`.table-container` & `.table`**: Tabular ledgers with sticky headers, `.table-numeric` right-aligned monospace numbers, and `.table-footer` pagination.\n- **`.form-group`**: Form elements:\n  * `.form-input` / `.form-select` / `.form-textarea`: Form control fields with brand focus ring (`#1976D2`)\n  * `.form-search`: Search input with inline icon positioning\n  * `.form-error-banner`: Structured validation callout banner\n  * `.form-file` / `.form-range` / `.form-checkbox` / `.form-radio`: Fully styled input components\n- **`.badge`**: Rectangular status badges (`rounded-md uppercase tracking-wider`) with `.badge-dot` pulsing indicators and `.badge-mono` numeric chips. Never pill-shaped.\n- **`.alert`**: Semantic feedback containers with 1px tinted borders (`.alert-success`, `.alert-warning`, `.alert-danger`, `.alert-info`).\n- **`.dialog` & `.drawer`**: 5-region modal dialogs (`shadow-lg`, backdrop blur) and slide-over preview drawers (`shadow-xl`).\n- **`.sidebar` & `.navbar`**: Collapsible sidebars with subtle blue tint active highlighting (`.sidebar-item.active`) and `.telemetry-pulse` operational indicators.\n\n---\n\n## 🔧 Local Development & Sandbox (Vue Playground)\n\nIf you are contributing to this design system project:\n\n1. Clone the repository and install local dev dependencies:\n   ```bash\n   npm install\n   ```\n2. Start the Vue sandbox to preview components:\n   ```bash\n   npm run dev\n   ```\n3. Compile the production bundles:\n   ```bash\n   npm run build\n   ```\n","readmeFilename":"README.md"}