Rename shared-ui to ui-design-system

- More descriptive name for design system library
- Update all imports and configurations
- No functional changes

🤖 Generated with [Claude Code](https://claude.ai/code)

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

CLAUDE.md

@@ -6,7 +6,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 SSuite is an Angular workspace containing three libraries and a demo application:
 
-- **shared-ui**: UI design system with comprehensive SCSS styling, design tokens, and reusable components
+- **ui-design-system**: UI design system with comprehensive SCSS styling, design tokens, and reusable components
 - **shared-utils**: Common utilities and shared services  
 - **ui-essentials**: Essential UI components with comprehensive component library (buttons, forms, data-display, navigation, media, feedback, overlays, layout)
 - **demo-ui-essentials**: Demo application showcasing all components with live examples
@@ -19,7 +19,7 @@ SSuite is an Angular workspace containing three libraries and a demo application
 ng build
 
 # Build specific library
-ng build shared-ui
+ng build ui-design-system
 ng build shared-utils  
 ng build ui-essentials
 
@@ -33,7 +33,7 @@ ng build --watch --configuration development
 ng test
 
 # Run tests for specific library
-ng test shared-ui
+ng test ui-design-system
 ng test shared-utils
 ng test ui-essentials
 ```
@@ -52,7 +52,7 @@ npm start
 ### Workspace Structure
 ```
 projects/
-├── shared-ui/          - Design system and SCSS architecture
+├── ui-design-system/          - Design system and SCSS architecture
 ├── shared-utils/       - Common utilities and services  
 ├── ui-essentials/      - Component library with 8 major categories
 └── demo-ui-essentials/ - Demo application with component examples
@@ -69,7 +69,7 @@ Each library follows Angular's standard structure:
 Libraries are mapped in `tsconfig.json` paths:
 ```json
 "paths": {
-  "shared-ui": ["./dist/shared-ui"],
+  "ui-design-system": ["./dist/ui-design-system"],
   "shared-utils": ["./dist/shared-utils"], 
   "ui-essentials": ["./dist/ui-essentials"]
 }
@@ -86,7 +86,7 @@ The component library is organized into these categories:
 - **overlays**: Modals, drawers, backdrops, overlay containers
 - **layout**: Containers, spacers, grid systems
 
-### Design System (shared-ui)
+### Design System (ui-design-system)
 Contains a comprehensive SCSS architecture:
 - **Base tokens**: Colors, typography, spacing, motion, shadows
 - **Semantic tokens**: High-level design tokens built on base tokens
@@ -99,25 +99,25 @@ Contains a comprehensive SCSS architecture:
 #### Style Import Options:
 ```scss
 // Complete design system (includes semantic + base tokens + fonts)
-@use 'shared-ui/src/styles' as ui;
+@use 'ui-design-system/src/styles' as ui;
 
 // Tokens only (semantic + base tokens)
-@use 'shared-ui/src/styles/tokens' as tokens;
+@use 'ui-design-system/src/styles/tokens' as tokens;
 
 // Semantic tokens only (includes base tokens)
-@use 'shared-ui/src/styles/semantic' as semantic;
+@use 'ui-design-system/src/styles/semantic' as semantic;
 
 // Base tokens only
-@use 'shared-ui/src/styles/base' as base;
+@use 'ui-design-system/src/styles/base' as base;
 
 // Components and utilities (import separately to avoid circular dependencies)
-@use 'shared-ui/src/styles/commons' as commons;
+@use 'ui-design-system/src/styles/commons' as commons;
 ```
 
 Entry points:
-- Main: `projects/shared-ui/src/styles/index.scss`
+- Main: `projects/ui-design-system/src/styles/index.scss`
-- Tokens: `projects/shared-ui/src/styles/tokens.scss` 
+- Tokens: `projects/ui-design-system/src/styles/tokens.scss` 
-- Semantic: `projects/shared-ui/src/styles/semantic/index.scss`
+- Semantic: `projects/ui-design-system/src/styles/semantic/index.scss`
 
 ## Development Workflow
 

angular.json

@@ -3,23 +3,23 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "shared-ui": {
+    "ui-design-system": {
       "projectType": "library",
-      "root": "projects/shared-ui",
+      "root": "projects/ui-design-system",
-      "sourceRoot": "projects/shared-ui/src",
+      "sourceRoot": "projects/ui-design-system/src",
       "prefix": "lib",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "project": "projects/shared-ui/ng-package.json"
+            "project": "projects/ui-design-system/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "projects/shared-ui/tsconfig.lib.prod.json"
+              "tsConfig": "projects/ui-design-system/tsconfig.lib.prod.json"
             },
             "development": {
-              "tsConfig": "projects/shared-ui/tsconfig.lib.json"
+              "tsConfig": "projects/ui-design-system/tsconfig.lib.json"
             }
           },
           "defaultConfiguration": "production"
@@ -27,7 +27,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "tsConfig": "projects/shared-ui/tsconfig.spec.json",
+            "tsConfig": "projects/ui-design-system/tsconfig.spec.json",
             "polyfills": [
               "zone.js",
               "zone.js/testing"

projects/demo-ui-essentials/src/app/demos/accordion-demo/accordion-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-lg;

projects/demo-ui-essentials/src/app/demos/alert-demo/alert-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   max-width: 1200px;

projects/demo-ui-essentials/src/app/demos/autocomplete-demo/autocomplete-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: 32px;

projects/demo-ui-essentials/src/app/demos/backdrop-demo/backdrop-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as tokens;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as tokens;
 
 .demo-container {
   padding: tokens.$semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/bottom-navigation-demo/bottom-navigation-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding-bottom: 120px; // Extra space to accommodate bottom navigation examples

projects/demo-ui-essentials/src/app/demos/carousel-demo/carousel-demo.component.scss

@@ -1,4 +1,4 @@
-@import "../../../../../shared-ui/src/styles/semantic";
+@import "../../../../../ui-design-system/src/styles/semantic";
 
 .carousel-demo {
   padding: $semantic-spacing-layout-lg;

projects/demo-ui-essentials/src/app/demos/color-picker-demo/color-picker-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-section-md;

projects/demo-ui-essentials/src/app/demos/command-palette-demo/command-palette-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic' as *;
+@use '../../../../../ui-design-system/src/styles/semantic' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-section-lg;

projects/demo-ui-essentials/src/app/demos/container-demo/container-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-wrapper {
   padding: $semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/divider-demo/divider-demo.component.scss

@@ -1,4 +1,4 @@
-@use "../../../../../shared-ui/src/styles/semantic/index" as *;
+@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/drawer-demo/drawer-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic' as *;
+@use '../../../../../ui-design-system/src/styles/semantic' as *;
 
 .demo-container {
   max-width: 1200px;

projects/demo-ui-essentials/src/app/demos/empty-state-demo/empty-state-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/enhanced-table-demo/enhanced-table-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic' as *;
+@use '../../../../../ui-design-system/src/styles/semantic' as *;
 
 .enhanced-table-demo {
   padding: $semantic-spacing-layout-section-lg;

projects/demo-ui-essentials/src/app/demos/fab-menu-demo/fab-menu-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic' as *;
+@use '../../../../../ui-design-system/src/styles/semantic' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-section-lg;

projects/demo-ui-essentials/src/app/demos/file-upload-demo/file-upload-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/floating-toolbar-demo/floating-toolbar-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-section-md;

projects/demo-ui-essentials/src/app/demos/fontawesome-demo/fontawesome-demo.component.scss

@@ -1,4 +1,4 @@
-@import "../../../../../shared-ui/src/styles/semantic";
+@import "../../../../../ui-design-system/src/styles/semantic";
 .demo-container {
   padding: 2rem;
   max-width: 1200px;

projects/demo-ui-essentials/src/app/demos/form-field-demo/form-field-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/grid-system-demo/grid-system-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic' as tokens;
+@use '../../../../../ui-design-system/src/styles/semantic' as tokens;
 
 .demo-container {
   padding: tokens.$semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/image-container-demo/image-container-demo.component.scss

@@ -1,4 +1,4 @@
-@import "../../../../../shared-ui/src/styles/semantic";
+@import "../../../../../ui-design-system/src/styles/semantic";
 
 // Tokens available globally via main application styles
 

projects/demo-ui-essentials/src/app/demos/menu-demo/menu-demo.component.scss

@@ -1,4 +1,4 @@
-@use "../../../../../shared-ui/src/styles/tokens" as *;
+@use "../../../../../ui-design-system/src/styles/tokens" as *;
 
 // Tokens available globally via main application styles
  

projects/demo-ui-essentials/src/app/demos/modal-demo/modal-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/overlay-container-demo/overlay-container-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as tokens;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as tokens;
 
 .demo-container {
   padding: tokens.$semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/popover-demo/popover-demo.component.scss

@@ -1,4 +1,4 @@
-@use "../../../../../shared-ui/src/styles/semantic/index" as *;
+@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
 
 .popover-demo {
   padding: $semantic-spacing-layout-section-xs;

projects/demo-ui-essentials/src/app/demos/progress-circle-demo/progress-circle-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-lg;

projects/demo-ui-essentials/src/app/demos/range-slider-demo/range-slider-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-lg;

projects/demo-ui-essentials/src/app/demos/snackbar-demo/snackbar-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-section-md;

projects/demo-ui-essentials/src/app/demos/spacer-demo/spacer-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic' as tokens;
+@use '../../../../../ui-design-system/src/styles/semantic' as tokens;
 
 .demo-container {
   padding: tokens.$semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/split-button-demo/split-button-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-component-lg;

projects/demo-ui-essentials/src/app/demos/stepper-demo/stepper-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-section-sm;

projects/demo-ui-essentials/src/app/demos/timeline-demo/timeline-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-section-md;

projects/demo-ui-essentials/src/app/demos/toast-demo/toast-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-section-md;

projects/demo-ui-essentials/src/app/demos/tooltip-demo/tooltip-demo.component.scss

@@ -1,4 +1,4 @@
-@use "../../../../../shared-ui/src/styles/semantic/index" as *;
+@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
 
 .demo-container {
   padding: $semantic-spacing-layout-md;

projects/demo-ui-essentials/src/app/demos/transfer-list-demo/transfer-list-demo.component.scss

@@ -1,4 +1,4 @@
-@import "../../../../../shared-ui/src/styles/semantic";
+@import "../../../../../ui-design-system/src/styles/semantic";
 
 .demo-container {
   padding: $semantic-spacing-layout-section-md;

projects/demo-ui-essentials/src/app/demos/tree-view-demo/tree-view-demo.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic/index' as *;
+@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
 
 .demo-container {
   padding: $semantic-spacing-component-lg;

projects/demo-ui-essentials/src/app/demos/video-player-demo/video-player-demo.component.scss

@@ -1,4 +1,4 @@
-@use "../../../../../shared-ui/src/styles/semantic" as *;
+@use "../../../../../ui-design-system/src/styles/semantic" as *;
 
 
 // ==========================================================================

projects/demo-ui-essentials/src/app/features/dashboard/dashboard.sidebar.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../../shared-ui/src/styles/semantic' as semantic;
+@use '../../../../../ui-design-system/src/styles/semantic' as semantic;
 
 .sidebar-container {
   padding: 1rem 0;

projects/ui-design-system/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/shared-ui",
+  "dest": "../../dist/ui-design-system",
   "lib": {
     "entryFile": "src/public-api.ts"
   },

projects/ui-design-system/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "shared-ui",
+  "name": "ui-design-system",
   "version": "0.0.1",
   "peerDependencies": {
     "@angular/common": "^19.2.0",