@mhmo91/schmancy 0.5.31 → 0.5.33

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.
@@ -50,6 +50,7 @@ import { SchmancyNavigationRail, SchmancyNavigationRailItem } from '@schmancy'
50
50
  | `alignment` | `'top' \| 'center' \| 'bottom'` | `'top'` | Vertical alignment of navigation items |
51
51
  | `showTooltips` | `boolean` | `true` | Show tooltips when labels are hidden |
52
52
  | `keyboardNavigation` | `boolean` | `true` | Enable keyboard navigation with arrow keys |
53
+ | `expanded` | `boolean` | `false` | Whether the navigation rail is expanded |
53
54
 
54
55
  ### Slots
55
56
 
@@ -73,14 +74,25 @@ import { SchmancyNavigationRail, SchmancyNavigationRailItem } from '@schmancy'
73
74
 
74
75
  | Property | Default | Description |
75
76
  |----------|---------|-------------|
76
- | `--rail-width` | `80px` | Fixed width of the rail |
77
- | `--rail-width-mobile` | `56px` | Width on mobile devices |
77
+ | `--rail-width` | `80px` (collapsed) / `240px` (expanded) | Fixed width of the rail |
78
+ | `--rail-width-mobile` | `56px` (collapsed) / `200px` (expanded) | Width on mobile devices |
79
+
80
+ ### CSS Parts
81
+
82
+ | Part | Description |
83
+ |------|-------------|
84
+ | `rail` | The main rail container |
85
+ | `header` | The header section containing FAB and menu |
86
+ | `nav` | The navigation items container |
87
+ | `footer` | The footer section |
78
88
 
79
89
  ### Methods
80
90
 
81
91
  | Method | Description |
82
92
  |--------|-------------|
83
- | None | Component is controlled via properties and events |
93
+ | `expand()` | Programmatically expand the navigation rail |
94
+ | `collapse()` | Programmatically collapse the navigation rail |
95
+ | `toggle()` | Toggle between expanded and collapsed states |
84
96
 
85
97
  ## Navigation Rail Item Component
86
98
 
@@ -116,12 +128,18 @@ import { SchmancyNavigationRail, SchmancyNavigationRailItem } from '@schmancy'
116
128
 
117
129
  ### CSS Custom Properties
118
130
 
119
- | Property | Default | Description |
120
- |----------|---------|-------------|
121
- | `--rail-item-height` | `56px` | Item height |
122
- | `--rail-item-icon-size` | `24px` | Icon size |
123
- | `--rail-item-padding` | `12px` | Item padding |
124
- | `--rail-item-gap` | `4px` | Gap between icon and label |
131
+ Navigation rail items use the Schmancy design token system and do not expose custom properties for theming.
132
+
133
+ ### CSS Parts
134
+
135
+ | Part | Description |
136
+ |------|-------------|
137
+ | `container` | The main item container |
138
+ | `indicator` | The active indicator behind the icon |
139
+ | `icon` | The icon container |
140
+ | `icon-text` | The icon text element |
141
+ | `label` | The label text |
142
+ | `badge` | The badge element |
125
143
 
126
144
  ## Examples
127
145
 
@@ -131,7 +149,7 @@ import { SchmancyNavigationRail, SchmancyNavigationRailItem } from '@schmancy'
131
149
  <schmancy-navigation-rail
132
150
  activeIndex="0"
133
151
  labelVisibility="selected"
134
- @navigation-change=${this.handleNavigation}
152
+ @navigate=${this.handleNavigation}
135
153
  @fab-click=${this.handleFabClick}
136
154
  @menu-click=${this.handleMenuClick}
137
155
  >
@@ -268,7 +286,7 @@ class MyApp extends LitElement {
268
286
  }
269
287
 
270
288
  // Handle navigation
271
- handleNavigationChange(event: CustomEvent<string>) {
289
+ handleNavigate(event: CustomEvent<string>) {
272
290
  const value = event.detail
273
291
  console.log(`Navigated to: ${value}`)
274
292
 
@@ -276,6 +294,19 @@ class MyApp extends LitElement {
276
294
  this.router.navigate(value)
277
295
  }
278
296
 
297
+ // Expand/collapse rail
298
+ expandRail() {
299
+ this.navigationRail.expand()
300
+ }
301
+
302
+ collapseRail() {
303
+ this.navigationRail.collapse()
304
+ }
305
+
306
+ toggleRail() {
307
+ this.navigationRail.toggle()
308
+ }
309
+
279
310
  // Change label visibility programmatically
280
311
  toggleLabels() {
281
312
  this.navigationRail.labelVisibility =
@@ -294,6 +325,44 @@ class MyApp extends LitElement {
294
325
  }
295
326
  ```
296
327
 
328
+ ### With Expanded State
329
+
330
+ ```html
331
+ <schmancy-navigation-rail
332
+ expanded
333
+ activeIndex="0"
334
+ >
335
+ <schmancy-button slot="menu" variant="text" @click=${this.toggleRail}>
336
+ <schmancy-icon>menu</schmancy-icon>
337
+ </schmancy-button>
338
+
339
+ <schmancy-navigation-rail-item
340
+ icon="home"
341
+ label="Home"
342
+ value="/home"
343
+ ></schmancy-navigation-rail-item>
344
+
345
+ <schmancy-navigation-rail-item
346
+ icon="dashboard"
347
+ label="Dashboard"
348
+ value="/dashboard"
349
+ ></schmancy-navigation-rail-item>
350
+
351
+ <schmancy-navigation-rail-item
352
+ icon="analytics"
353
+ label="Analytics"
354
+ value="/analytics"
355
+ ></schmancy-navigation-rail-item>
356
+ </schmancy-navigation-rail>
357
+
358
+ <script>
359
+ function toggleRail() {
360
+ const rail = document.querySelector('schmancy-navigation-rail')
361
+ rail.toggle()
362
+ }
363
+ </script>
364
+ ```
365
+
297
366
  ### With Router Integration
298
367
 
299
368
  ```typescript
@@ -372,24 +441,33 @@ The navigation rail adapts to different screen sizes:
372
441
 
373
442
  ## Theming
374
443
 
375
- The navigation rail uses Schmancy theme tokens:
444
+ The navigation rail uses Schmancy design tokens:
376
445
 
377
446
  ```css
378
447
  /* Custom theming */
379
448
  schmancy-navigation-rail {
380
- /* Colors */
381
- --schmancy-sys-color-surface-container: #f5f5f5;
382
- --schmancy-sys-color-secondary-container: #e3f2fd;
449
+ /* Colors - Surface and backgrounds */
450
+ --schmancy-sys-color-surface-default: #ffffff;
451
+ --schmancy-sys-color-surface-on: #1c1b1f;
452
+ --schmancy-sys-color-surface-containerHighest: #e6e0e9;
453
+
454
+ /* Colors - Active state */
455
+ --schmancy-sys-color-secondary-container: #e8def8;
456
+ --schmancy-sys-color-secondary-onContainer: #1d192b;
383
457
 
384
- /* Dimensions */
385
- --rail-width: 80px;
386
- --rail-width-mobile: 56px;
458
+ /* Colors - Inactive state */
459
+ --schmancy-sys-color-surface-onVariant: #49454f;
387
460
  }
388
461
 
389
462
  /* Dark theme */
390
463
  @media (prefers-color-scheme: dark) {
391
464
  schmancy-navigation-rail {
392
- --schmancy-sys-color-surface-container: #1e1e1e;
465
+ --schmancy-sys-color-surface-default: #1c1b1f;
466
+ --schmancy-sys-color-surface-on: #e6e0e9;
467
+ --schmancy-sys-color-surface-containerHighest: #36343b;
468
+ --schmancy-sys-color-secondary-container: #4a4458;
469
+ --schmancy-sys-color-secondary-onContainer: #e8def8;
470
+ --schmancy-sys-color-surface-onVariant: #cac4d0;
393
471
  }
394
472
  }
395
473
  ```
@@ -402,8 +480,13 @@ schmancy-navigation-rail {
402
480
  4. **Hierarchy**: Place most important items at the top
403
481
  5. **Badges**: Use sparingly for important notifications
404
482
  6. **FAB**: Only include if there's a clear primary action
405
- 7. **Label Visibility**: Use 'selected' for most cases, 'all' for better discoverability
406
- 8. **Mobile**: Consider using bottom navigation bar on mobile instead
483
+ 7. **Label Visibility**:
484
+ - Use `'selected'` for most cases to save space
485
+ - Use `'all'` for better discoverability
486
+ - Use `'none'` with tooltips for maximum space efficiency
487
+ - In expanded state, labels are always shown regardless of setting
488
+ 8. **Expanded State**: Use expanded rail for applications that need more descriptive labels or additional information
489
+ 9. **Mobile**: Consider using bottom navigation bar on mobile instead
407
490
 
408
491
  ## Migration Guide
409
492
 
@@ -50,6 +50,7 @@ import { SchmancyNavigationRail, SchmancyNavigationRailItem } from '@schmancy'
50
50
  | `alignment` | `'top' \| 'center' \| 'bottom'` | `'top'` | Vertical alignment of navigation items |
51
51
  | `showTooltips` | `boolean` | `true` | Show tooltips when labels are hidden |
52
52
  | `keyboardNavigation` | `boolean` | `true` | Enable keyboard navigation with arrow keys |
53
+ | `expanded` | `boolean` | `false` | Whether the navigation rail is expanded |
53
54
 
54
55
  ### Slots
55
56
 
@@ -73,14 +74,25 @@ import { SchmancyNavigationRail, SchmancyNavigationRailItem } from '@schmancy'
73
74
 
74
75
  | Property | Default | Description |
75
76
  |----------|---------|-------------|
76
- | `--rail-width` | `80px` | Fixed width of the rail |
77
- | `--rail-width-mobile` | `56px` | Width on mobile devices |
77
+ | `--rail-width` | `80px` (collapsed) / `240px` (expanded) | Fixed width of the rail |
78
+ | `--rail-width-mobile` | `56px` (collapsed) / `200px` (expanded) | Width on mobile devices |
79
+
80
+ ### CSS Parts
81
+
82
+ | Part | Description |
83
+ |------|-------------|
84
+ | `rail` | The main rail container |
85
+ | `header` | The header section containing FAB and menu |
86
+ | `nav` | The navigation items container |
87
+ | `footer` | The footer section |
78
88
 
79
89
  ### Methods
80
90
 
81
91
  | Method | Description |
82
92
  |--------|-------------|
83
- | None | Component is controlled via properties and events |
93
+ | `expand()` | Programmatically expand the navigation rail |
94
+ | `collapse()` | Programmatically collapse the navigation rail |
95
+ | `toggle()` | Toggle between expanded and collapsed states |
84
96
 
85
97
  ## Navigation Rail Item Component
86
98
 
@@ -116,12 +128,18 @@ import { SchmancyNavigationRail, SchmancyNavigationRailItem } from '@schmancy'
116
128
 
117
129
  ### CSS Custom Properties
118
130
 
119
- | Property | Default | Description |
120
- |----------|---------|-------------|
121
- | `--rail-item-height` | `56px` | Item height |
122
- | `--rail-item-icon-size` | `24px` | Icon size |
123
- | `--rail-item-padding` | `12px` | Item padding |
124
- | `--rail-item-gap` | `4px` | Gap between icon and label |
131
+ Navigation rail items use the Schmancy design token system and do not expose custom properties for theming.
132
+
133
+ ### CSS Parts
134
+
135
+ | Part | Description |
136
+ |------|-------------|
137
+ | `container` | The main item container |
138
+ | `indicator` | The active indicator behind the icon |
139
+ | `icon` | The icon container |
140
+ | `icon-text` | The icon text element |
141
+ | `label` | The label text |
142
+ | `badge` | The badge element |
125
143
 
126
144
  ## Examples
127
145
 
@@ -131,7 +149,7 @@ import { SchmancyNavigationRail, SchmancyNavigationRailItem } from '@schmancy'
131
149
  <schmancy-navigation-rail
132
150
  activeIndex="0"
133
151
  labelVisibility="selected"
134
- @navigation-change=${this.handleNavigation}
152
+ @navigate=${this.handleNavigation}
135
153
  @fab-click=${this.handleFabClick}
136
154
  @menu-click=${this.handleMenuClick}
137
155
  >
@@ -268,7 +286,7 @@ class MyApp extends LitElement {
268
286
  }
269
287
 
270
288
  // Handle navigation
271
- handleNavigationChange(event: CustomEvent<string>) {
289
+ handleNavigate(event: CustomEvent<string>) {
272
290
  const value = event.detail
273
291
  console.log(`Navigated to: ${value}`)
274
292
 
@@ -276,6 +294,19 @@ class MyApp extends LitElement {
276
294
  this.router.navigate(value)
277
295
  }
278
296
 
297
+ // Expand/collapse rail
298
+ expandRail() {
299
+ this.navigationRail.expand()
300
+ }
301
+
302
+ collapseRail() {
303
+ this.navigationRail.collapse()
304
+ }
305
+
306
+ toggleRail() {
307
+ this.navigationRail.toggle()
308
+ }
309
+
279
310
  // Change label visibility programmatically
280
311
  toggleLabels() {
281
312
  this.navigationRail.labelVisibility =
@@ -294,6 +325,44 @@ class MyApp extends LitElement {
294
325
  }
295
326
  ```
296
327
 
328
+ ### With Expanded State
329
+
330
+ ```html
331
+ <schmancy-navigation-rail
332
+ expanded
333
+ activeIndex="0"
334
+ >
335
+ <schmancy-button slot="menu" variant="text" @click=${this.toggleRail}>
336
+ <schmancy-icon>menu</schmancy-icon>
337
+ </schmancy-button>
338
+
339
+ <schmancy-navigation-rail-item
340
+ icon="home"
341
+ label="Home"
342
+ value="/home"
343
+ ></schmancy-navigation-rail-item>
344
+
345
+ <schmancy-navigation-rail-item
346
+ icon="dashboard"
347
+ label="Dashboard"
348
+ value="/dashboard"
349
+ ></schmancy-navigation-rail-item>
350
+
351
+ <schmancy-navigation-rail-item
352
+ icon="analytics"
353
+ label="Analytics"
354
+ value="/analytics"
355
+ ></schmancy-navigation-rail-item>
356
+ </schmancy-navigation-rail>
357
+
358
+ <script>
359
+ function toggleRail() {
360
+ const rail = document.querySelector('schmancy-navigation-rail')
361
+ rail.toggle()
362
+ }
363
+ </script>
364
+ ```
365
+
297
366
  ### With Router Integration
298
367
 
299
368
  ```typescript
@@ -372,24 +441,33 @@ The navigation rail adapts to different screen sizes:
372
441
 
373
442
  ## Theming
374
443
 
375
- The navigation rail uses Schmancy theme tokens:
444
+ The navigation rail uses Schmancy design tokens:
376
445
 
377
446
  ```css
378
447
  /* Custom theming */
379
448
  schmancy-navigation-rail {
380
- /* Colors */
381
- --schmancy-sys-color-surface-container: #f5f5f5;
382
- --schmancy-sys-color-secondary-container: #e3f2fd;
449
+ /* Colors - Surface and backgrounds */
450
+ --schmancy-sys-color-surface-default: #ffffff;
451
+ --schmancy-sys-color-surface-on: #1c1b1f;
452
+ --schmancy-sys-color-surface-containerHighest: #e6e0e9;
453
+
454
+ /* Colors - Active state */
455
+ --schmancy-sys-color-secondary-container: #e8def8;
456
+ --schmancy-sys-color-secondary-onContainer: #1d192b;
383
457
 
384
- /* Dimensions */
385
- --rail-width: 80px;
386
- --rail-width-mobile: 56px;
458
+ /* Colors - Inactive state */
459
+ --schmancy-sys-color-surface-onVariant: #49454f;
387
460
  }
388
461
 
389
462
  /* Dark theme */
390
463
  @media (prefers-color-scheme: dark) {
391
464
  schmancy-navigation-rail {
392
- --schmancy-sys-color-surface-container: #1e1e1e;
465
+ --schmancy-sys-color-surface-default: #1c1b1f;
466
+ --schmancy-sys-color-surface-on: #e6e0e9;
467
+ --schmancy-sys-color-surface-containerHighest: #36343b;
468
+ --schmancy-sys-color-secondary-container: #4a4458;
469
+ --schmancy-sys-color-secondary-onContainer: #e8def8;
470
+ --schmancy-sys-color-surface-onVariant: #cac4d0;
393
471
  }
394
472
  }
395
473
  ```
@@ -402,8 +480,13 @@ schmancy-navigation-rail {
402
480
  4. **Hierarchy**: Place most important items at the top
403
481
  5. **Badges**: Use sparingly for important notifications
404
482
  6. **FAB**: Only include if there's a clear primary action
405
- 7. **Label Visibility**: Use 'selected' for most cases, 'all' for better discoverability
406
- 8. **Mobile**: Consider using bottom navigation bar on mobile instead
483
+ 7. **Label Visibility**:
484
+ - Use `'selected'` for most cases to save space
485
+ - Use `'all'` for better discoverability
486
+ - Use `'none'` with tooltips for maximum space efficiency
487
+ - In expanded state, labels are always shown regardless of setting
488
+ 8. **Expanded State**: Use expanded rail for applications that need more descriptive labels or additional information
489
+ 9. **Mobile**: Consider using bottom navigation bar on mobile instead
407
490
 
408
491
  ## Migration Guide
409
492
 
@@ -1,4 +1,4 @@
1
- "use strict";const l=require("lit"),o=require("lit/decorators.js"),n=require("rxjs");require("./animated-text-BZUrBdvN.cjs");const I=require("./area.component-Ch2Eaa4i.cjs");require("./autocomplete-CenwFcT1.cjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const N=require("./tailwind.mixin-ClfV2_Nh.cjs"),g=require("./ripple-DqQrvaTe.cjs");require("lit/directives/guard.js"),require("./boat-Dfx9-P8c.cjs"),require("./spinner-CaXU45TV.cjs"),require("./icon-button-DwnnW2oj.cjs"),require("./media-CsYVcfaX.cjs"),require("./checkbox-8djp_8NK.cjs"),require("./suggestion-chip-PI24Hc3s.cjs"),require("./input-chip-B7ANrtLF.cjs"),require("./code-preview-BFoEmN8y.cjs"),require("./payment-card-form--v94EhJF.cjs");const y=require("./types.cjs"),p=require("./provide-BxZ2kn_p.cjs"),w=require("./litElement.mixin-LplXbzd8.cjs"),m=require("./consume-edta5ng5.cjs");require("./date-range-DoCtnpW6.cjs"),require("./date-range-inline-DNr7C5X-.cjs"),require("./delay-CrdOikhP.cjs"),require("./details-CsqhGMjL.cjs"),require("./dialog-content-BzSQoM2J.cjs"),require("./dialog-service-Bdaxn2t0.cjs"),require("./divider-CNxOc8ep.cjs"),require("./dropdown-content-De0OkNoq.cjs"),require("./timezone-Bw4EXBt7.cjs"),require("./form-DzDksPgv.cjs"),require("./icon-DbIBlAjy.cjs"),require("./input-C2Vz-51i.cjs"),require("./flex-CHf9Gc5V.cjs"),require("./list-BH8OJ3Rv.cjs"),require("./email-recipients-DS01C3V3.cjs"),require("./map-C7lxYU4A.cjs"),require("./menu-Boqsyfmh.cjs");const j=require("lit/directives/when.js");require("./navigation-rail-D_dDK8C4.cjs"),require("./notification-service-9HXSKWcw.cjs"),require("./option-D2bxihLu.cjs"),require("./progress-CjkD8QBy.cjs"),require("./radio-button-CGmGOAil.cjs"),require("./index-CCi1otmh.cjs"),require("./select-CrB02cIO.cjs"),require("./sheet-sgVoRMi1.cjs");const W=require("./sheet.service-BxvWBGsJ.cjs");require("./slider-Dd1L6oYm.cjs"),require("./schmancy-steps-container-CydL78yk.cjs"),require("./context-object-DA9DM9QJ.cjs");const d=require("rxjs/operators");require("./surface-Ax6I7ldp.cjs"),require("./table-BlwUyf_4.cjs"),require("./tabs-compatibility-CX0cIu_Y.cjs"),require("./textarea-qLA0vP78.cjs"),require("./theme.component-CQ1trrZB.cjs"),require("./theme-button-D7fBEUGf.cjs"),require("./tooltip-Dhs4HL3A.cjs"),require("./tree-D-ezei_U.cjs"),require("./typewriter-CtPh4Pyj.cjs"),require("./typography-BrIaOYmC.cjs");const a=require("./theme.interface-BMeNadVb.cjs");var Y=Object.defineProperty,F=Object.getOwnPropertyDescriptor,v=(e,t,i,s)=>{for(var c,r=s>1?void 0:s?F(t,i):t,h=e.length-1;h>=0;h--)(c=e[h])&&(r=(s?c(t,i,r):c(r))||r);return s&&r&&Y(t,i,r),r};exports.SchmancyBadgeV2=class extends N.TailwindElement(l.css`
1
+ "use strict";const l=require("lit"),o=require("lit/decorators.js"),n=require("rxjs");require("./animated-text-BZUrBdvN.cjs");const I=require("./area.component-Ch2Eaa4i.cjs");require("./autocomplete-CenwFcT1.cjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const N=require("./tailwind.mixin-ClfV2_Nh.cjs"),g=require("./ripple-DqQrvaTe.cjs");require("lit/directives/guard.js"),require("./boat-Dfx9-P8c.cjs"),require("./spinner-CaXU45TV.cjs"),require("./icon-button-DwnnW2oj.cjs"),require("./media-CsYVcfaX.cjs"),require("./checkbox-8djp_8NK.cjs"),require("./suggestion-chip-PI24Hc3s.cjs"),require("./input-chip-B7ANrtLF.cjs"),require("./code-preview-BFoEmN8y.cjs"),require("./payment-card-form--v94EhJF.cjs");const y=require("./types.cjs"),p=require("./provide-BxZ2kn_p.cjs"),w=require("./litElement.mixin-LplXbzd8.cjs"),m=require("./consume-edta5ng5.cjs");require("./date-range-DoCtnpW6.cjs"),require("./date-range-inline-DNr7C5X-.cjs"),require("./delay-CrdOikhP.cjs"),require("./details-CsqhGMjL.cjs"),require("./dialog-content-BzSQoM2J.cjs"),require("./dialog-service-Bdaxn2t0.cjs"),require("./divider-CNxOc8ep.cjs"),require("./dropdown-content-De0OkNoq.cjs"),require("./timezone-Bw4EXBt7.cjs"),require("./form-DzDksPgv.cjs"),require("./icon-DebIySqv.cjs"),require("./input-C2Vz-51i.cjs"),require("./flex-CHf9Gc5V.cjs"),require("./list-BH8OJ3Rv.cjs"),require("./email-recipients-DS01C3V3.cjs"),require("./map-C7lxYU4A.cjs"),require("./menu-Boqsyfmh.cjs");const j=require("lit/directives/when.js");require("./navigation-rail-D_dDK8C4.cjs"),require("./notification-service-9HXSKWcw.cjs"),require("./option-D2bxihLu.cjs"),require("./progress-CjkD8QBy.cjs"),require("./radio-button-CGmGOAil.cjs"),require("./index-CCi1otmh.cjs"),require("./select-CrB02cIO.cjs"),require("./sheet-sgVoRMi1.cjs");const W=require("./sheet.service-BxvWBGsJ.cjs");require("./slider-Dd1L6oYm.cjs"),require("./schmancy-steps-container-CydL78yk.cjs"),require("./context-object-DA9DM9QJ.cjs");const d=require("rxjs/operators");require("./surface-Ax6I7ldp.cjs"),require("./table-BlwUyf_4.cjs"),require("./tabs-compatibility-CX0cIu_Y.cjs"),require("./textarea-qLA0vP78.cjs"),require("./theme.component-CQ1trrZB.cjs"),require("./theme-button-D7fBEUGf.cjs"),require("./tooltip-Dhs4HL3A.cjs"),require("./tree-D-ezei_U.cjs"),require("./typewriter-CtPh4Pyj.cjs"),require("./typography-BrIaOYmC.cjs");const a=require("./theme.interface-BMeNadVb.cjs");var Y=Object.defineProperty,F=Object.getOwnPropertyDescriptor,v=(e,t,i,s)=>{for(var c,r=s>1?void 0:s?F(t,i):t,h=e.length-1;h>=0;h--)(c=e[h])&&(r=(s?c(t,i,r):c(r))||r);return s&&r&&Y(t,i,r),r};exports.SchmancyBadgeV2=class extends N.TailwindElement(l.css`
2
2
  :host {
3
3
  display: inline-flex;
4
4
  }
@@ -300,4 +300,4 @@
300
300
  `}getColorAttributes(){const e={primary:{bgColor:a.SchmancyTheme.sys.color.primary.container,color:a.SchmancyTheme.sys.color.primary.onContainer},secondary:{bgColor:a.SchmancyTheme.sys.color.secondary.container,color:a.SchmancyTheme.sys.color.secondary.onContainer},tertiary:{bgColor:a.SchmancyTheme.sys.color.tertiary.container,color:a.SchmancyTheme.sys.color.tertiary.onContainer},success:{bgColor:a.SchmancyTheme.sys.color.success.container,color:a.SchmancyTheme.sys.color.success.onContainer},error:{bgColor:a.SchmancyTheme.sys.color.error.container,color:a.SchmancyTheme.sys.color.error.onContainer},neutral:{bgColor:a.SchmancyTheme.sys.color.surface.container,color:a.SchmancyTheme.sys.color.surface.on}};return g.color(e[this.color])}renderStatusIndicator(){const e={online:a.SchmancyTheme.sys.color.success.default,offline:a.SchmancyTheme.sys.color.surface.onVariant,busy:a.SchmancyTheme.sys.color.error.default,away:a.SchmancyTheme.sys.color.tertiary.default},t={"absolute bottom-0 right-0 rounded-full border-2 border-surface-default":!0,[{xs:"w-1.5 h-1.5",sm:"w-2 h-2",md:"w-2.5 h-2.5",lg:"w-3 h-3",xl:"w-4 h-4"}[this.size]]:!0};return l.html`
301
301
  <div class="${this.classMap(t)}" style="background-color: ${e[this.status]};"></div>
302
302
  `}},b([o.property({type:String})],exports.SchmancyAvatar.prototype,"initials",2),b([o.property({type:String})],exports.SchmancyAvatar.prototype,"src",2),b([o.property({type:String})],exports.SchmancyAvatar.prototype,"icon",2),b([o.property({type:String})],exports.SchmancyAvatar.prototype,"size",2),b([o.property({type:String})],exports.SchmancyAvatar.prototype,"color",2),b([o.property({type:String})],exports.SchmancyAvatar.prototype,"shape",2),b([o.property({type:Boolean})],exports.SchmancyAvatar.prototype,"bordered",2),b([o.property({type:String})],exports.SchmancyAvatar.prototype,"status",2),exports.SchmancyAvatar=b([o.customElement("schmancy-avatar")],exports.SchmancyAvatar),exports.$drawer=re,exports.HereMorty=R,exports.SchmancyContentDrawerID=L,exports.SchmancyContentDrawerMaxHeight=M,exports.SchmancyContentDrawerMinWidth=z,exports.SchmancyContentDrawerSheetMode=O,exports.SchmancyContentDrawerSheetState=P,exports.SchmancyDrawerNavbarMode=B,exports.SchmancyDrawerNavbarState=A,exports.WhereAreYouRicky=H,exports.schmancyContentDrawer=G,exports.schmancyNavDrawer=X,exports.teleport=E;
303
- //# sourceMappingURL=avatar-DVvQCuqb.cjs.map
303
+ //# sourceMappingURL=avatar-8TnYDr70.cjs.map