@design.estate/dees-wcctools 1.0.100 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,31 +13,68 @@ import { WccDashboard } from './wcc-dashboard.js';
13
13
  let WccSidebar = class WccSidebar extends DeesElement {
14
14
  render() {
15
15
  return html `
16
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
16
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
17
17
  <style>
18
18
  :host {
19
+ /* CSS Variables - Always dark theme to match wcc-properties */
20
+ --background: #0a0a0a;
21
+ --foreground: #e5e5e5;
22
+ --card: #0f0f0f;
23
+ --card-foreground: #f0f0f0;
24
+ --muted: #1a1a1a;
25
+ --muted-foreground: #666;
26
+ --accent: #222;
27
+ --accent-foreground: #fff;
28
+ --border: rgba(255, 255, 255, 0.06);
29
+ --input: #141414;
30
+ --primary: #3b82f6;
31
+ --primary-foreground: #fff;
32
+ --ring: #3b82f6;
33
+ --radius: 4px;
34
+
19
35
  display: block;
20
- border-right: 1px solid #999;
21
- font-family: 'Roboto', 'Inter', sans-serif;
22
- font-size: 12px;
36
+ border-right: 1px solid rgba(255, 255, 255, 0.08);
37
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
38
+ font-size: 14px;
23
39
  box-sizing: border-box;
24
40
  position: absolute;
25
41
  left: 0px;
26
42
  width: 200px;
27
43
  top: 0px;
28
44
  bottom: 0px;
29
- overflow-y: scroll;
45
+ overflow-y: auto;
30
46
  overflow-x: hidden;
31
- background: #222;
32
- color: #fff;
33
- padding: 5px;
47
+ background: var(--background);
48
+ color: var(--foreground);
49
+ }
50
+
51
+ .menu {
52
+ padding: 0.5rem 0;
53
+ }
54
+
55
+ h3 {
56
+ padding: 0.3rem 0.75rem;
57
+ font-size: 0.65rem;
58
+ font-weight: 500;
59
+ text-transform: uppercase;
60
+ letter-spacing: 0.08em;
61
+ color: #888;
62
+ margin: 0;
63
+ margin-top: 0.5rem;
64
+ background: rgba(59, 130, 246, 0.03);
65
+ border-bottom: 1px solid var(--border);
66
+ border-top: 1px solid var(--border);
67
+ }
68
+
69
+ h3:first-child {
70
+ margin-top: 0;
34
71
  }
35
72
 
36
73
  .material-symbols-outlined {
37
74
  font-family: 'Material Symbols Outlined';
38
75
  font-weight: normal;
39
76
  font-style: normal;
40
- font-size: 24px; /* Preferred icon size */
77
+ font-size: 16px;
41
78
  display: inline-block;
42
79
  line-height: 1;
43
80
  text-transform: none;
@@ -45,51 +82,75 @@ let WccSidebar = class WccSidebar extends DeesElement {
45
82
  word-wrap: normal;
46
83
  white-space: nowrap;
47
84
  direction: ltr;
48
- font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
85
+ font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
86
+ opacity: 0.5;
49
87
  }
50
88
 
51
89
  .selectOption {
52
90
  user-select: none;
53
91
  position: relative;
54
- line-height: 24px;
55
- padding: 5px;
56
- transition: all 0.2s;
92
+ margin: 0.125rem 0.5rem;
93
+ padding: 0.5rem 0.75rem;
94
+ transition: all 0.15s ease;
57
95
  display: grid;
58
- grid-template-columns: 28px auto;
96
+ grid-template-columns: 20px 1fr;
97
+ align-items: center;
98
+ gap: 0.5rem;
99
+ border-radius: var(--radius);
100
+ cursor: pointer;
101
+ font-size: 0.75rem;
102
+ color: #999;
103
+ background: transparent;
59
104
  }
105
+
60
106
  .selectOption:hover {
61
- padding: 5px;
62
- color: #333;
63
- background: #fff;
107
+ background: rgba(59, 130, 246, 0.05);
108
+ color: #bbb;
109
+ }
110
+
111
+ .selectOption:hover .material-symbols-outlined {
112
+ opacity: 0.7;
64
113
  }
65
114
 
66
115
  .selectOption.selected {
67
- background: #455A64;;
116
+ background: rgba(59, 130, 246, 0.15);
117
+ color: var(--primary);
118
+ }
119
+
120
+ .selectOption.selected .material-symbols-outlined {
121
+ opacity: 1;
122
+ font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
68
123
  }
69
124
 
70
125
  .selectOption.selected:hover {
71
- color: #ffffff;
72
- background: #455A64;
126
+ background: rgba(59, 130, 246, 0.2);
127
+ color: var(--primary);
73
128
  }
74
129
 
75
- .selectOption .material-symbols-outlined {
76
- color: #666;
130
+ .selectOption .text {
77
131
  display: block;
78
- transition: all 0.2s;
132
+ overflow: hidden;
133
+ text-overflow: ellipsis;
134
+ white-space: nowrap;
135
+ font-weight: 400;
79
136
  }
80
137
 
81
- .selectOption.selected .material-symbols-outlined {
82
- color: #000;
138
+ ::-webkit-scrollbar {
139
+ width: 8px;
83
140
  }
84
141
 
85
- .selectOption .text {
86
- display: block;
87
- word-wrap: break-word;
88
- word-break: break-all;
89
- max-width: 100%;
142
+ ::-webkit-scrollbar-track {
143
+ background: transparent;
90
144
  }
91
145
 
92
-
146
+ ::-webkit-scrollbar-thumb {
147
+ background: rgba(255, 255, 255, 0.1);
148
+ border-radius: 4px;
149
+ }
150
+
151
+ ::-webkit-scrollbar-thumb:hover {
152
+ background: rgba(255, 255, 255, 0.2);
153
+ }
93
154
  </style>
94
155
  <div class="menu">
95
156
  <h3>Pages</h3>
@@ -167,4 +228,4 @@ WccSidebar = __decorate([
167
228
  customElement('wcc-sidebar')
168
229
  ], WccSidebar);
169
230
  export { WccSidebar };
170
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLXNpZGViYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvd2NjLXNpZGViYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE9BQU8sTUFBTSx3QkFBd0IsQ0FBQztBQUNsRCxPQUFPLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQzlHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUszQyxJQUFNLFVBQVUsR0FBaEIsTUFBTSxVQUFXLFNBQVEsV0FBVztJQVVsQyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztVQWlGTCxDQUFDLEdBQUcsRUFBRTtZQUNOLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNuRCxPQUFPLEtBQUssQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLEVBQUU7Z0JBQzFCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO2dCQUMvQyxPQUFPLElBQUksQ0FBQTs7c0NBRWUsSUFBSSxDQUFDLFlBQVksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsSUFBSTt5QkFDM0QsS0FBSyxJQUFJLEVBQUU7b0JBQ2xCLE1BQU0sUUFBUSxHQUFHLE1BQU0sT0FBTyxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLENBQUM7b0JBQ3JFLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxFQUFFLFFBQVEsRUFBRSxJQUFJLENBQUMsQ0FBQztnQkFDMUMsQ0FBQzs7O29DQUdtQixRQUFROzthQUUvQixDQUFDO1lBQ0osQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsRUFBRTs7VUFFRixDQUFDLEdBQUcsRUFBRTtZQUNOLE1BQU0sUUFBUSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztZQUN6RCxPQUFPLFFBQVEsQ0FBQyxHQUFHLENBQUMsV0FBVyxDQUFDLEVBQUU7Z0JBQ2hDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2dCQUNyRCxPQUFPLElBQUksQ0FBQTs7c0NBRWUsSUFBSSxDQUFDLFlBQVksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsSUFBSTt5QkFDM0QsS0FBSyxJQUFJLEVBQUU7b0JBQ2xCLE1BQU0sUUFBUSxHQUFHLE1BQU0sT0FBTyxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLENBQUM7b0JBQ3JFLElBQUksQ0FBQyxVQUFVLENBQUMsU0FBUyxFQUFFLFdBQVcsRUFBRSxJQUFJLENBQUMsQ0FBQztnQkFDaEQsQ0FBQzs7O29DQUdtQixXQUFXOzthQUVsQyxDQUFDO1lBQ0osQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsRUFBRTs7S0FFUCxDQUFDO0lBQ0osQ0FBQztJQUVNLFVBQVUsQ0FBQyxPQUFxQixFQUFFLFdBQW1CLEVBQUUsT0FBNkM7UUFDekcsT0FBTyxDQUFDLEdBQUcsQ0FBQyxlQUFlLENBQUMsQ0FBQztRQUM3QixPQUFPLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ3pCLE9BQU8sQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDckIsSUFBSSxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUM7UUFDNUIsSUFBSSxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUM7UUFDNUIsSUFBSSxDQUFDLGFBQWEsQ0FDaEIsSUFBSSxXQUFXLENBQUMsY0FBYyxFQUFFO1lBQzlCLE1BQU0sRUFBRSxPQUFPO1NBQ2hCLENBQUMsQ0FDSCxDQUFDO1FBQ0YsSUFBSSxDQUFDLGFBQWEsQ0FDaEIsSUFBSSxXQUFXLENBQUMsa0JBQWtCLEVBQUU7WUFDbEMsTUFBTSxFQUFFLFdBQVc7U0FDcEIsQ0FBQyxDQUNILENBQUM7UUFDRixJQUFJLENBQUMsYUFBYSxDQUNoQixJQUFJLFdBQVcsQ0FBQyxjQUFjLEVBQUU7WUFDOUIsTUFBTSxFQUFFLE9BQU87U0FDaEIsQ0FBQyxDQUNILENBQUM7UUFFRixJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQy9CLENBQUM7Q0FDRixDQUFBO0FBM0pRO0lBRE4sUUFBUSxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDOztnREFDMkI7QUFHbkQ7SUFETixRQUFRLENBQUMsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7O2dEQUNHO0FBRzNCO0lBRE4sUUFBUSxFQUFFOzhCQUNVLFlBQVk7Z0RBQUM7QUFSdkIsVUFBVTtJQUR0QixhQUFhLENBQUMsYUFBYSxDQUFDO0dBQ2hCLFVBQVUsQ0E2SnRCIn0=
231
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLXNpZGViYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvd2NjLXNpZGViYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE9BQU8sTUFBTSx3QkFBd0IsQ0FBQztBQUNsRCxPQUFPLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQzlHLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUszQyxJQUFNLFVBQVUsR0FBaEIsTUFBTSxVQUFXLFNBQVEsV0FBVztJQVVsQyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7VUE4SUwsQ0FBQyxHQUFHLEVBQUU7WUFDTixNQUFNLEtBQUssR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDbkQsT0FBTyxLQUFLLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxFQUFFO2dCQUMxQixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQztnQkFDL0MsT0FBTyxJQUFJLENBQUE7O3NDQUVlLElBQUksQ0FBQyxZQUFZLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLElBQUk7eUJBQzNELEtBQUssSUFBSSxFQUFFO29CQUNsQixNQUFNLFFBQVEsR0FBRyxNQUFNLE9BQU8sQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLGFBQWEsRUFBRSxDQUFDO29CQUNyRSxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRSxRQUFRLEVBQUUsSUFBSSxDQUFDLENBQUM7Z0JBQzFDLENBQUM7OztvQ0FHbUIsUUFBUTs7YUFFL0IsQ0FBQztZQUNKLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQyxDQUFDLEVBQUU7O1VBRUYsQ0FBQyxHQUFHLEVBQUU7WUFDTixNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLENBQUM7WUFDekQsT0FBTyxRQUFRLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxFQUFFO2dCQUNoQyxNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsQ0FBQztnQkFDckQsT0FBTyxJQUFJLENBQUE7O3NDQUVlLElBQUksQ0FBQyxZQUFZLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLElBQUk7eUJBQzNELEtBQUssSUFBSSxFQUFFO29CQUNsQixNQUFNLFFBQVEsR0FBRyxNQUFNLE9BQU8sQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLGFBQWEsRUFBRSxDQUFDO29CQUNyRSxJQUFJLENBQUMsVUFBVSxDQUFDLFNBQVMsRUFBRSxXQUFXLEVBQUUsSUFBSSxDQUFDLENBQUM7Z0JBQ2hELENBQUM7OztvQ0FHbUIsV0FBVzs7YUFFbEMsQ0FBQztZQUNKLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQyxDQUFDLEVBQUU7O0tBRVAsQ0FBQztJQUNKLENBQUM7SUFFTSxVQUFVLENBQUMsT0FBcUIsRUFBRSxXQUFtQixFQUFFLE9BQTZDO1FBQ3pHLE9BQU8sQ0FBQyxHQUFHLENBQUMsZUFBZSxDQUFDLENBQUM7UUFDN0IsT0FBTyxDQUFDLEdBQUcsQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUN6QixPQUFPLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3JCLElBQUksQ0FBQyxZQUFZLEdBQUcsT0FBTyxDQUFDO1FBQzVCLElBQUksQ0FBQyxZQUFZLEdBQUcsT0FBTyxDQUFDO1FBQzVCLElBQUksQ0FBQyxhQUFhLENBQ2hCLElBQUksV0FBVyxDQUFDLGNBQWMsRUFBRTtZQUM5QixNQUFNLEVBQUUsT0FBTztTQUNoQixDQUFDLENBQ0gsQ0FBQztRQUNGLElBQUksQ0FBQyxhQUFhLENBQ2hCLElBQUksV0FBVyxDQUFDLGtCQUFrQixFQUFFO1lBQ2xDLE1BQU0sRUFBRSxXQUFXO1NBQ3BCLENBQUMsQ0FDSCxDQUFDO1FBQ0YsSUFBSSxDQUFDLGFBQWEsQ0FDaEIsSUFBSSxXQUFXLENBQUMsY0FBYyxFQUFFO1lBQzlCLE1BQU0sRUFBRSxPQUFPO1NBQ2hCLENBQUMsQ0FDSCxDQUFDO1FBRUYsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMvQixDQUFDO0NBQ0YsQ0FBQTtBQXhOUTtJQUROLFFBQVEsQ0FBQyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsQ0FBQzs7Z0RBQzJCO0FBR25EO0lBRE4sUUFBUSxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDOztnREFDRztBQUczQjtJQUROLFFBQVEsRUFBRTs4QkFDVSxZQUFZO2dEQUFDO0FBUnZCLFVBQVU7SUFEdEIsYUFBYSxDQUFDLGFBQWEsQ0FBQztHQUNoQixVQUFVLENBME50QiJ9