@design.estate/dees-catalog 3.53.0 → 3.55.0

package/ts_web/elements/00group-media/{dees-tile-video → dees-thumbnail-video}/component.ts

@@ -8,22 +8,22 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-video': DeesTileVideo;
+    'dees-thumbnail-video': DeesThumbnailVideo;
   }
 }
 
-@customElement('dees-tile-video')
-export class DeesTileVideo extends DeesTileBase {
+@customElement('dees-thumbnail-video')
+export class DeesThumbnailVideo extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .video-wrapper {
         position: relative;

package/ts_web/elements/00group-media/{dees-tile-video → dees-thumbnail-video}/demo.ts

@@ -26,54 +26,54 @@ export const demo = () => html`
     <div class="demo-section">
       <h3>Video Tiles</h3>
       <div class="tile-row">
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="bunny.mp4"
           @tile-click=${(e: CustomEvent) => console.log('Video clicked:', e.detail)}
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/movie.mp4"
           poster="https://picsum.photos/400/300"
           label="movie.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="another-video.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>Size Variants</h3>
       <div class="tile-row">
-        <dees-tile-video
+        <dees-thumbnail-video
           size="small"
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="small.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="default.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           size="large"
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="large.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>With Poster Image</h3>
-      <dees-tile-video
+      <dees-thumbnail-video
         src="https://www.w3schools.com/html/movie.mp4"
         poster="https://picsum.photos/600/400"
         label="poster-video.mp4"
-      ></dees-tile-video>
+      ></dees-thumbnail-video>
     </div>
   </div>
 `;

package/ts_web/elements/00group-media/index.ts

@@ -8,11 +8,11 @@ export * from './dees-preview/index.js';
 export * from './dees-pdf-shared/index.js';
 export * from './dees-pdf-viewer/index.js';
 
-// Tile Components
-export * from './dees-tile-shared/index.js';
-export * from './dees-tile-pdf/index.js';
-export * from './dees-tile-image/index.js';
-export * from './dees-tile-audio/index.js';
-export * from './dees-tile-video/index.js';
-export * from './dees-tile-note/index.js';
-export * from './dees-tile-folder/index.js';
+// Thumbnail Components
+export * from './dees-thumbnail-shared/index.js';
+export * from './dees-thumbnail-pdf/index.js';
+export * from './dees-thumbnail-image/index.js';
+export * from './dees-thumbnail-audio/index.js';
+export * from './dees-thumbnail-video/index.js';
+export * from './dees-thumbnail-note/index.js';
+export * from './dees-thumbnail-folder/index.js';

package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -102,8 +102,8 @@ export class DeesSimpleAppDash extends DeesElement {
         left: 0px;
         height: calc(100% - 24px);
         width: 240px;
-        background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(0 0% 7%)')};
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
         font-size: 13px;
         font-family: 'Geist Sans', sans-serif;
         z-index: 2;
@@ -114,7 +114,7 @@ export class DeesSimpleAppDash extends DeesElement {
 
       .sidebar-header {
         padding: 20px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
         display: flex;
         align-items: center;
         gap: 12px;
@@ -127,25 +127,22 @@ export class DeesSimpleAppDash extends DeesElement {
         width: 36px;
         height: 36px;
         border-radius: 10px;
-        background: ${cssManager.bdTheme(
-          'linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)',
-          'linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)'
-        )};
+        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
         box-shadow: ${cssManager.bdTheme(
-          '0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)',
-          '0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)'
+          '0 1px 2px rgb(0 0 0 / 0.05)',
+          '0 1px 2px rgb(0 0 0 / 0.2)'
         )};
       }
 
       .header-icon-wrapper dees-icon {
         font-size: 18px;
-        color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
       }
 
       .appName {
         font-size: 15px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -181,7 +178,7 @@ export class DeesSimpleAppDash extends DeesElement {
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        color: ${cssManager.bdTheme('#737373', '#737373')};
         padding: 8px 12px 8px;
         margin-bottom: 4px;
       }
@@ -199,25 +196,25 @@ export class DeesSimpleAppDash extends DeesElement {
         padding: 10px 12px;
         cursor: default;
         transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
+        color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
         user-select: none;
         position: relative;
         border-radius: 8px;
       }
 
       .viewTab:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
       }
 
       .viewTab:active {
-        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')};
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
         transform: scale(0.99);
       }
 
       .viewTab.selected {
-        background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')};
-        color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')};
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
         font-weight: 500;
       }
 
@@ -229,7 +226,7 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 8px;
         width: 3px;
         border-radius: 0 2px 2px 0;
-        background: ${cssManager.bdTheme('hsl(215 70% 50%)', 'hsl(215 70% 60%)')};
+        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
       }
 
       .viewTab dees-icon {
@@ -243,8 +240,8 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .viewTab.selected dees-icon {
-        opacity: 0.9;
-        color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')};
+        opacity: 1;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
       }
 
       .viewTab span {
@@ -256,7 +253,7 @@ export class DeesSimpleAppDash extends DeesElement {
 
       .appActions {
         padding: 12px 8px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
       }
 
       .action {
@@ -267,7 +264,7 @@ export class DeesSimpleAppDash extends DeesElement {
         border-radius: 8px;
         cursor: default;
         transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
+        color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
       }
 
       .action:hover {
@@ -295,7 +292,7 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 24px;
         width: calc(100% - 240px);
         overflow: auto;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 5%)')};
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
         overscroll-behavior: contain;
       }
 
@@ -335,14 +332,14 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .controlbar {
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
         position: absolute;
         bottom: 0px;
         left: 0px;
         width: 100%;
         height: 24px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
         z-index: 11;
         display: flex;
         justify-content: flex-end;
@@ -361,9 +358,9 @@ export class DeesSimpleAppDash extends DeesElement {
         height: 100%;
         white-space: nowrap;
         cursor: default;
-        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 50%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
         transition: all 0.15s ease;
-        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
 
       }
 
@@ -372,8 +369,8 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .control:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.06)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
       }
 
       .control dees-icon {
@@ -381,11 +378,11 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .control.status-connected dees-icon {
-        color: hsl(142 70% 50%);
+        color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 50%)')};
       }
 
       .control.status-terminal dees-icon {
-        color: hsl(45 90% 55%);
+        color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
       }
 
       /* Global Message Banners */

package/ts_web/elements/00theme.ts

@@ -1,4 +1,4 @@
-import { css, type CSSResult } from '@design.estate/dees-element';
+import { css, cssManager, unsafeCSS, type CSSResult } from '@design.estate/dees-element';
 
 // ============================================
 // Theme Token Type Definitions
@@ -11,6 +11,7 @@ export interface IThemeColors {
   textPrimary: string;
   textSecondary: string;
   textMuted: string;
+  textWarm: string;
   borderDefault: string;
   borderSubtle: string;
   borderStrong: string;
@@ -18,6 +19,14 @@ export interface IThemeColors {
   accentSuccess: string;
   accentWarning: string;
   accentError: string;
+  badgeDefaultBg: string;
+  badgeDefaultFg: string;
+  badgeSuccessBg: string;
+  badgeSuccessFg: string;
+  badgeWarningBg: string;
+  badgeWarningFg: string;
+  badgeErrorBg: string;
+  badgeErrorFg: string;
 }
 
 export interface IThemeSpacing {
@@ -79,34 +88,52 @@ export interface ITheme {
 export const themeDefaults: ITheme = {
   colors: {
     light: {
-      bgPrimary: '#ffffff',
-      bgSecondary: '#fafafa',
-      bgTertiary: '#f4f4f5',
-      textPrimary: '#09090b',
-      textSecondary: '#374151',
-      textMuted: '#71717a',
-      borderDefault: '#e5e7eb',
-      borderSubtle: '#f4f4f5',
-      borderStrong: '#d1d5db',
+      bgPrimary: 'hsl(0 0% 100%)',    // #ffffff
+      bgSecondary: 'hsl(0 0% 98%)',   // #fafafa
+      bgTertiary: 'hsl(0 0% 96%)',    // #f5f5f5
+      textPrimary: 'hsl(0 0% 3.9%)',  // #0a0a0a
+      textSecondary: 'hsl(0 0% 20%)', // #333333
+      textMuted: 'hsl(0 0% 45%)',     // #737373
+      textWarm: '#78716c',            // warm stone
+      borderDefault: 'hsl(0 0% 89.8%)', // #e5e5e5
+      borderSubtle: 'hsl(0 0% 93%)',    // #ededed
+      borderStrong: 'hsl(0 0% 80%)',    // #cccccc
       accentPrimary: '#3b82f6',
       accentSuccess: '#22c55e',
       accentWarning: '#f59e0b',
       accentError: '#ef4444',
+      badgeDefaultBg: '#f4f4f5',
+      badgeDefaultFg: '#3f3f46',
+      badgeSuccessBg: '#dcfce7',
+      badgeSuccessFg: '#166534',
+      badgeWarningBg: '#fef3c7',
+      badgeWarningFg: '#92400e',
+      badgeErrorBg: '#fee2e2',
+      badgeErrorFg: '#991b1b',
     },
     dark: {
-      bgPrimary: '#09090b',
-      bgSecondary: '#0a0a0a',
-      bgTertiary: '#18181b',
-      textPrimary: '#fafafa',
-      textSecondary: '#d4d4d8',
-      textMuted: '#a1a1aa',
-      borderDefault: '#27272a',
-      borderSubtle: '#1a1a1a',
-      borderStrong: '#3f3f46',
+      bgPrimary: 'hsl(0 0% 3.9%)',    // #0a0a0a
+      bgSecondary: 'hsl(0 0% 3.9%)', // #0a0a0a (matches sidebar/tile in dark)
+      bgTertiary: 'hsl(0 0% 7%)',    // #121212
+      textPrimary: 'hsl(0 0% 98%)',   // #fafafa
+      textSecondary: 'hsl(0 0% 63.9%)', // #a3a3a3
+      textMuted: 'hsl(0 0% 55%)',       // #8c8c8c
+      textWarm: '#b5a99a',              // warm stone
+      borderDefault: 'hsl(0 0% 14.9%)', // #262626
+      borderSubtle: 'hsl(0 0% 11%)',     // #1c1c1c
+      borderStrong: 'hsl(0 0% 20%)',     // #333333
       accentPrimary: '#3b82f6',
       accentSuccess: '#22c55e',
       accentWarning: '#f59e0b',
       accentError: '#ef4444',
+      badgeDefaultBg: '#27272a',
+      badgeDefaultFg: '#a1a1aa',
+      badgeSuccessBg: '#14532d',
+      badgeSuccessFg: '#4ade80',
+      badgeWarningBg: '#451a03',
+      badgeWarningFg: '#fbbf24',
+      badgeErrorBg: '#450a0a',
+      badgeErrorFg: '#f87171',
     },
   },
   spacing: {
@@ -146,13 +173,17 @@ export const themeDefaults: ITheme = {
   },
 };
 
+// Shorthand aliases for CSS template usage
+const l = themeDefaults.colors.light;
+const d = themeDefaults.colors.dark;
+
 // ============================================
 // CSS Block for Component Import
 // ============================================
 
 /**
  * Default theme styles to be imported into every component's static styles array.
- * Provides CSS custom properties for spacing, radius, shadows, transitions, and control heights.
+ * Provides CSS custom properties for colors, spacing, radius, shadows, transitions, and control heights.
  *
  * Usage:
  * ```typescript
@@ -170,6 +201,93 @@ export const themeDefaults: ITheme = {
  */
 export const themeDefaultStyles: CSSResult = css`
   :host {
+    /* ========================================
+     * Colors — Background (from themeDefaults)
+     * ======================================== */
+    --dees-color-bg-primary: ${cssManager.bdTheme(l.bgPrimary, d.bgPrimary)};
+    --dees-color-bg-secondary: ${cssManager.bdTheme(l.bgSecondary, d.bgSecondary)};
+    --dees-color-bg-tertiary: ${cssManager.bdTheme(l.bgTertiary, d.bgTertiary)};
+
+    /* ========================================
+     * Colors — Text (from themeDefaults)
+     * ======================================== */
+    --dees-color-text-primary: ${cssManager.bdTheme(l.textPrimary, d.textPrimary)};
+    --dees-color-text-secondary: ${cssManager.bdTheme(l.textSecondary, d.textSecondary)};
+    --dees-color-text-muted: ${cssManager.bdTheme(l.textMuted, d.textMuted)};
+
+    /* ========================================
+     * Colors — Border (from themeDefaults)
+     * ======================================== */
+    --dees-color-border-default: ${cssManager.bdTheme(l.borderDefault, d.borderDefault)};
+    --dees-color-border-subtle: ${cssManager.bdTheme(l.borderSubtle, d.borderSubtle)};
+    --dees-color-border-strong: ${cssManager.bdTheme(l.borderStrong, d.borderStrong)};
+
+    /* ========================================
+     * Colors — Warm Text (from themeDefaults)
+     * ======================================== */
+    --dees-color-text-warm: ${cssManager.bdTheme(l.textWarm, d.textWarm)};
+
+    /* ========================================
+     * Colors — Accent (from themeDefaults)
+     * ======================================== */
+    --dees-color-accent-primary: ${cssManager.bdTheme(l.accentPrimary, d.accentPrimary)};
+    --dees-color-accent-success: ${cssManager.bdTheme(l.accentSuccess, d.accentSuccess)};
+    --dees-color-accent-warning: ${cssManager.bdTheme(l.accentWarning, d.accentWarning)};
+    --dees-color-accent-error: ${cssManager.bdTheme(l.accentError, d.accentError)};
+
+    /* ========================================
+     * Colors — Badge (from themeDefaults)
+     * ======================================== */
+    --dees-color-badge-default-bg: ${cssManager.bdTheme(l.badgeDefaultBg, d.badgeDefaultBg)};
+    --dees-color-badge-default-fg: ${cssManager.bdTheme(l.badgeDefaultFg, d.badgeDefaultFg)};
+    --dees-color-badge-success-bg: ${cssManager.bdTheme(l.badgeSuccessBg, d.badgeSuccessBg)};
+    --dees-color-badge-success-fg: ${cssManager.bdTheme(l.badgeSuccessFg, d.badgeSuccessFg)};
+    --dees-color-badge-warning-bg: ${cssManager.bdTheme(l.badgeWarningBg, d.badgeWarningBg)};
+    --dees-color-badge-warning-fg: ${cssManager.bdTheme(l.badgeWarningFg, d.badgeWarningFg)};
+    --dees-color-badge-error-bg: ${cssManager.bdTheme(l.badgeErrorBg, d.badgeErrorBg)};
+    --dees-color-badge-error-fg: ${cssManager.bdTheme(l.badgeErrorFg, d.badgeErrorFg)};
+
+    /* ========================================
+     * Colors — Interactive States
+     * ======================================== */
+    --dees-color-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+    --dees-color-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+    --dees-color-pressed: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
+
+    /* ========================================
+     * Colors — Focus Ring
+     * ======================================== */
+    --dees-color-focus-ring: ${cssManager.bdTheme('rgba(59, 130, 246, 0.4)', 'rgba(59, 130, 246, 0.4)')};
+
+    /* ========================================
+     * Colors — Tooltip (inverted contrast)
+     * ======================================== */
+    --dees-color-tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
+    --dees-color-tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+
+    /* ========================================
+     * Colors — Link
+     * ======================================== */
+    --dees-color-link: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+    --dees-color-link-hover: ${cssManager.bdTheme('#2563eb', '#93bbfd')};
+
+    /* ========================================
+     * Colors — Code
+     * ======================================== */
+    --dees-color-code-bg: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
+    --dees-color-code-block-bg: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+
+    /* ========================================
+     * Colors — Selection
+     * ======================================== */
+    --dees-color-selection: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.3)')};
+
+    /* ========================================
+     * Colors — Scrollbar
+     * ======================================== */
+    --dees-color-scrollbar-thumb: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+    --dees-color-scrollbar-thumb-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+
     /* ========================================
      * Spacing Scale
      * ======================================== */

package/dist_ts_web/elements/00group-media/dees-tile-pdf/index.js

@@ -1,2 +0,0 @@
-export * from './component.js';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1tZWRpYS9kZWVzLXRpbGUtcGRmL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsZ0JBQWdCLENBQUMifQ==

package/dist_ts_web/elements/00group-media/dees-tile-shared/index.d.ts

@@ -1,2 +0,0 @@
-export { DeesTileBase } from './DeesTileBase.js';
-export { tileBaseStyles } from './styles.js';

package/dist_ts_web/elements/00group-media/dees-tile-shared/index.js

@@ -1,3 +0,0 @@
-export { DeesTileBase } from './DeesTileBase.js';
-export { tileBaseStyles } from './styles.js';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1tZWRpYS9kZWVzLXRpbGUtc2hhcmVkL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNqRCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sYUFBYSxDQUFDIn0=

package/dist_ts_web/elements/00group-media/dees-tile-shared/styles.d.ts

@@ -1 +0,0 @@
-export declare const tileBaseStyles: import("@design.estate/dees-element").CSSResult[];

package/dist_ts_web/elements/00group-media/dees-tile-video/index.js

@@ -1,2 +0,0 @@
-export * from './component.js';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1tZWRpYS9kZWVzLXRpbGUtdmlkZW8vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxnQkFBZ0IsQ0FBQyJ9

package/ts_web/elements/00group-media/dees-tile-shared/index.ts

@@ -1,2 +0,0 @@
-export { DeesTileBase } from './DeesTileBase.js';
-export { tileBaseStyles } from './styles.js';