@duskmoon-dev/core 1.18.5 → 1.19.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.
Files changed (127) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/tailwind-plugin.cjs +2 -2
  3. package/dist/components/console-page.css +178 -0
  4. package/dist/components/home-page.css +94 -0
  5. package/dist/components/index.css +366 -0
  6. package/dist/components/sign-page.css +80 -0
  7. package/dist/components/table.css +10 -0
  8. package/dist/components/tooltip.css +1 -0
  9. package/dist/esm/components/accordion.d.ts +5 -0
  10. package/dist/esm/components/accordion.js +4 -2
  11. package/dist/esm/components/alert.d.ts +5 -0
  12. package/dist/esm/components/alert.js +4 -2
  13. package/dist/esm/components/appbar.d.ts +5 -0
  14. package/dist/esm/components/appbar.js +4 -2
  15. package/dist/esm/components/autocomplete.d.ts +5 -0
  16. package/dist/esm/components/autocomplete.js +4 -2
  17. package/dist/esm/components/avatar.d.ts +5 -0
  18. package/dist/esm/components/avatar.js +4 -2
  19. package/dist/esm/components/badge.d.ts +5 -0
  20. package/dist/esm/components/badge.js +4 -2
  21. package/dist/esm/components/bottom-navigation.d.ts +5 -0
  22. package/dist/esm/components/bottom-navigation.js +4 -2
  23. package/dist/esm/components/bottomsheet.d.ts +5 -0
  24. package/dist/esm/components/bottomsheet.js +4 -2
  25. package/dist/esm/components/button.d.ts +5 -0
  26. package/dist/esm/components/button.js +4 -2
  27. package/dist/esm/components/card.d.ts +5 -0
  28. package/dist/esm/components/card.js +4 -2
  29. package/dist/esm/components/cascader.d.ts +5 -0
  30. package/dist/esm/components/cascader.js +4 -2
  31. package/dist/esm/components/chat.d.ts +5 -0
  32. package/dist/esm/components/chat.js +4 -2
  33. package/dist/esm/components/checkbox.d.ts +5 -0
  34. package/dist/esm/components/checkbox.js +4 -2
  35. package/dist/esm/components/chip.d.ts +5 -0
  36. package/dist/esm/components/chip.js +4 -2
  37. package/dist/esm/components/circle-menu.d.ts +5 -0
  38. package/dist/esm/components/circle-menu.js +4 -2
  39. package/dist/esm/components/code-block.d.ts +5 -0
  40. package/dist/esm/components/code-block.js +4 -2
  41. package/dist/esm/components/collapse.d.ts +5 -0
  42. package/dist/esm/components/collapse.js +4 -2
  43. package/dist/esm/components/console-page.d.ts +5 -0
  44. package/dist/esm/components/console-page.js +187 -0
  45. package/dist/esm/components/datepicker.d.ts +5 -0
  46. package/dist/esm/components/datepicker.js +4 -2
  47. package/dist/esm/components/dialog.d.ts +5 -0
  48. package/dist/esm/components/dialog.js +4 -2
  49. package/dist/esm/components/divider.d.ts +5 -0
  50. package/dist/esm/components/divider.js +4 -2
  51. package/dist/esm/components/drawer.d.ts +5 -0
  52. package/dist/esm/components/drawer.js +4 -2
  53. package/dist/esm/components/file-upload.d.ts +5 -0
  54. package/dist/esm/components/file-upload.js +4 -2
  55. package/dist/esm/components/form-group.d.ts +5 -0
  56. package/dist/esm/components/form-group.js +4 -2
  57. package/dist/esm/components/form.d.ts +5 -0
  58. package/dist/esm/components/form.js +4 -2
  59. package/dist/esm/components/home-page.d.ts +5 -0
  60. package/dist/esm/components/home-page.js +103 -0
  61. package/dist/esm/components/input.d.ts +5 -0
  62. package/dist/esm/components/input.js +4 -2
  63. package/dist/esm/components/list.d.ts +5 -0
  64. package/dist/esm/components/list.js +4 -2
  65. package/dist/esm/components/markdown-body.d.ts +5 -0
  66. package/dist/esm/components/markdown-body.js +4 -2
  67. package/dist/esm/components/modal.d.ts +5 -0
  68. package/dist/esm/components/modal.js +4 -2
  69. package/dist/esm/components/multi-select.d.ts +5 -0
  70. package/dist/esm/components/multi-select.js +4 -2
  71. package/dist/esm/components/navigation.d.ts +5 -0
  72. package/dist/esm/components/navigation.js +4 -2
  73. package/dist/esm/components/nested-menu.d.ts +5 -0
  74. package/dist/esm/components/nested-menu.js +4 -2
  75. package/dist/esm/components/otp-input.d.ts +5 -0
  76. package/dist/esm/components/otp-input.js +4 -2
  77. package/dist/esm/components/pin-input.d.ts +5 -0
  78. package/dist/esm/components/pin-input.js +4 -2
  79. package/dist/esm/components/popover.d.ts +5 -0
  80. package/dist/esm/components/popover.js +4 -2
  81. package/dist/esm/components/progress.d.ts +5 -0
  82. package/dist/esm/components/progress.js +4 -2
  83. package/dist/esm/components/radio.d.ts +5 -0
  84. package/dist/esm/components/radio.js +4 -2
  85. package/dist/esm/components/rating.d.ts +5 -0
  86. package/dist/esm/components/rating.js +4 -2
  87. package/dist/esm/components/segment-control.d.ts +5 -0
  88. package/dist/esm/components/segment-control.js +4 -2
  89. package/dist/esm/components/select.d.ts +5 -0
  90. package/dist/esm/components/select.js +4 -2
  91. package/dist/esm/components/sign-page.d.ts +5 -0
  92. package/dist/esm/components/sign-page.js +89 -0
  93. package/dist/esm/components/skeleton.d.ts +5 -0
  94. package/dist/esm/components/skeleton.js +4 -2
  95. package/dist/esm/components/slider.d.ts +5 -0
  96. package/dist/esm/components/slider.js +4 -2
  97. package/dist/esm/components/snackbar.d.ts +5 -0
  98. package/dist/esm/components/snackbar.js +4 -2
  99. package/dist/esm/components/stepper.d.ts +5 -0
  100. package/dist/esm/components/stepper.js +4 -2
  101. package/dist/esm/components/switch.d.ts +5 -0
  102. package/dist/esm/components/switch.js +4 -2
  103. package/dist/esm/components/table.d.ts +5 -0
  104. package/dist/esm/components/table.js +14 -2
  105. package/dist/esm/components/textarea.d.ts +5 -0
  106. package/dist/esm/components/textarea.js +4 -2
  107. package/dist/esm/components/theme-controller.d.ts +5 -0
  108. package/dist/esm/components/theme-controller.js +4 -2
  109. package/dist/esm/components/time-input.d.ts +5 -0
  110. package/dist/esm/components/time-input.js +4 -2
  111. package/dist/esm/components/timeline.d.ts +5 -0
  112. package/dist/esm/components/timeline.js +4 -2
  113. package/dist/esm/components/toast.d.ts +5 -0
  114. package/dist/esm/components/toast.js +4 -2
  115. package/dist/esm/components/toggle.d.ts +5 -0
  116. package/dist/esm/components/toggle.js +4 -2
  117. package/dist/esm/components/tooltip.d.ts +5 -0
  118. package/dist/esm/components/tooltip.js +5 -2
  119. package/dist/esm/components/tree-select.d.ts +5 -0
  120. package/dist/esm/components/tree-select.js +4 -2
  121. package/dist/index.css +366 -0
  122. package/dist/index.min.css +1 -1
  123. package/dist/standalone/duskmoonui-themes.css +1 -1
  124. package/dist/standalone/duskmoonui.css +368 -2
  125. package/dist/standalone/duskmoonui.js +10 -6
  126. package/dist/standalone/duskmoonui.mjs +10 -6
  127. package/package.json +72 -1
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for snackbar
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -327,7 +327,9 @@ export const css = `/**
327
327
  }
328
328
  `;
329
329
 
330
- const sheet = new CSSStyleSheet();
331
- sheet.replaceSync(css);
330
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
331
+ if (sheet) {
332
+ sheet.replaceSync(css);
333
+ }
332
334
  export const styles = sheet;
333
335
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for stepper
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -314,7 +314,9 @@ export const css = `/**
314
314
  }
315
315
  `;
316
316
 
317
- const sheet = new CSSStyleSheet();
318
- sheet.replaceSync(css);
317
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
318
+ if (sheet) {
319
+ sheet.replaceSync(css);
320
+ }
319
321
  export const styles = sheet;
320
322
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for switch
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -276,7 +276,9 @@ export const css = `/**
276
276
  }
277
277
  `;
278
278
 
279
- const sheet = new CSSStyleSheet();
280
- sheet.replaceSync(css);
279
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
280
+ if (sheet) {
281
+ sheet.replaceSync(css);
282
+ }
281
283
  export const styles = sheet;
282
284
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for table
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -128,6 +128,16 @@ export const css = `/**
128
128
  box-shadow: var(--shadow-xs);
129
129
  }
130
130
 
131
+ .table-sticky th,
132
+ .table-sticky thead th,
133
+ .table-sticky .table-header-cell {
134
+ position: sticky;
135
+ top: 0;
136
+ z-index: 10;
137
+ background-color: var(--color-surface-container);
138
+ box-shadow: var(--shadow-xs);
139
+ }
140
+
131
141
  /* Sortable Header */
132
142
  .table-sortable th {
133
143
  cursor: pointer;
@@ -242,7 +252,9 @@ export const css = `/**
242
252
  }
243
253
  `;
244
254
 
245
- const sheet = new CSSStyleSheet();
246
- sheet.replaceSync(css);
255
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
256
+ if (sheet) {
257
+ sheet.replaceSync(css);
258
+ }
247
259
  export const styles = sheet;
248
260
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for textarea
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -331,7 +331,9 @@ export const css = `/**
331
331
  }
332
332
  `;
333
333
 
334
- const sheet = new CSSStyleSheet();
335
- sheet.replaceSync(css);
334
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
335
+ if (sheet) {
336
+ sheet.replaceSync(css);
337
+ }
336
338
  export const styles = sheet;
337
339
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for theme-controller
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -282,7 +282,9 @@ export const css = `/**
282
282
  }
283
283
  `;
284
284
 
285
- const sheet = new CSSStyleSheet();
286
- sheet.replaceSync(css);
285
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
286
+ if (sheet) {
287
+ sheet.replaceSync(css);
288
+ }
287
289
  export const styles = sheet;
288
290
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for time-input
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -329,7 +329,9 @@ export const css = `/**
329
329
  }
330
330
  `;
331
331
 
332
- const sheet = new CSSStyleSheet();
333
- sheet.replaceSync(css);
332
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
333
+ if (sheet) {
334
+ sheet.replaceSync(css);
335
+ }
334
336
  export const styles = sheet;
335
337
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for timeline
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -354,7 +354,9 @@ export const css = `/**
354
354
  }
355
355
  `;
356
356
 
357
- const sheet = new CSSStyleSheet();
358
- sheet.replaceSync(css);
357
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
358
+ if (sheet) {
359
+ sheet.replaceSync(css);
360
+ }
359
361
  export const styles = sheet;
360
362
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for toast
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -366,7 +366,9 @@ export const css = `/**
366
366
  }
367
367
  `;
368
368
 
369
- const sheet = new CSSStyleSheet();
370
- sheet.replaceSync(css);
369
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
370
+ if (sheet) {
371
+ sheet.replaceSync(css);
372
+ }
371
373
  export const styles = sheet;
372
374
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for toggle
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -359,7 +359,9 @@ export const css = `/**
359
359
  }
360
360
  `;
361
361
 
362
- const sheet = new CSSStyleSheet();
363
- sheet.replaceSync(css);
362
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
363
+ if (sheet) {
364
+ sheet.replaceSync(css);
365
+ }
364
366
  export const styles = sheet;
365
367
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for tooltip
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -35,6 +35,7 @@ export const css = `/**
35
35
  pointer-events: none;
36
36
  opacity: 0;
37
37
  transform: scale(0.95);
38
+ overflow: visible;
38
39
  position-area: top;
39
40
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
40
41
  transition:
@@ -241,7 +242,9 @@ export const css = `/**
241
242
  }
242
243
  `;
243
244
 
244
- const sheet = new CSSStyleSheet();
245
- sheet.replaceSync(css);
245
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
246
+ if (sheet) {
247
+ sheet.replaceSync(css);
248
+ }
246
249
  export const styles = sheet;
247
250
  export default sheet;
@@ -0,0 +1,5 @@
1
+ // Auto-generated type declaration for tree-select
2
+ export declare const css: string;
3
+ export declare const styles: CSSStyleSheet | null;
4
+ declare const sheet: CSSStyleSheet | null;
5
+ export default sheet;
@@ -543,7 +543,9 @@ export const css = `/**
543
543
  }
544
544
  `;
545
545
 
546
- const sheet = new CSSStyleSheet();
547
- sheet.replaceSync(css);
546
+ const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
547
+ if (sheet) {
548
+ sheet.replaceSync(css);
549
+ }
548
550
  export const styles = sheet;
549
551
  export default sheet;
package/dist/index.css CHANGED
@@ -5977,6 +5977,16 @@ html {
5977
5977
  box-shadow: var(--shadow-xs);
5978
5978
  }
5979
5979
 
5980
+ .table-sticky th,
5981
+ .table-sticky thead th,
5982
+ .table-sticky .table-header-cell {
5983
+ position: sticky;
5984
+ top: 0;
5985
+ z-index: 10;
5986
+ background-color: var(--color-surface-container);
5987
+ box-shadow: var(--shadow-xs);
5988
+ }
5989
+
5980
5990
  /* Sortable Header */
5981
5991
  .table-sortable th {
5982
5992
  cursor: pointer;
@@ -15269,6 +15279,7 @@ html {
15269
15279
  pointer-events: none;
15270
15280
  opacity: 0;
15271
15281
  transform: scale(0.95);
15282
+ overflow: visible;
15272
15283
  position-area: top;
15273
15284
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
15274
15285
  transition:
@@ -16141,6 +16152,185 @@ html {
16141
16152
  }
16142
16153
  }
16143
16154
 
16155
+ /**
16156
+ * Console Page Layout
16157
+ * Responsive application shell with expanded, icon-rail, and hidden sidebar states.
16158
+ */
16159
+
16160
+ @layer components {
16161
+ .console-page {
16162
+ --console-page-sidebar-width: 17.5rem;
16163
+ --console-page-sidebar-compact-width: 5rem;
16164
+ container-type: inline-size;
16165
+ container-name: console-page;
16166
+ width: 100%;
16167
+ min-width: 0;
16168
+ min-height: var(--console-page-min-height, 100dvh);
16169
+ background-color: var(--color-surface);
16170
+ color: var(--color-on-surface);
16171
+ }
16172
+
16173
+ .console-page-frame {
16174
+ display: grid;
16175
+ min-height: inherit;
16176
+ grid-template-areas:
16177
+ "appbar"
16178
+ "main";
16179
+ grid-template-columns: minmax(0, 1fr);
16180
+ grid-template-rows: auto minmax(0, 1fr);
16181
+ transition: grid-template-columns 240ms ease-out;
16182
+ }
16183
+
16184
+ .console-page-appbar {
16185
+ grid-area: appbar;
16186
+ z-index: 20;
16187
+ }
16188
+
16189
+ .console-page-sidebar {
16190
+ display: none;
16191
+ grid-area: sidebar;
16192
+ min-width: 0;
16193
+ overflow: hidden;
16194
+ background-color: var(--color-surface-container-low);
16195
+ border-inline-end: 1px solid var(--color-outline-variant);
16196
+ transition:
16197
+ opacity 160ms ease-out,
16198
+ visibility 160ms ease-out;
16199
+ }
16200
+
16201
+ .console-page-sidebar-header,
16202
+ .console-page-sidebar-footer {
16203
+ display: flex;
16204
+ align-items: center;
16205
+ gap: 0.75rem;
16206
+ min-height: 4rem;
16207
+ padding: 0.75rem 1rem;
16208
+ flex-shrink: 0;
16209
+ }
16210
+
16211
+ .console-page-sidebar-header {
16212
+ border-bottom: 1px solid var(--color-outline-variant);
16213
+ }
16214
+
16215
+ .console-page-sidebar-body {
16216
+ flex: 1;
16217
+ min-height: 0;
16218
+ overflow-y: auto;
16219
+ overflow-x: hidden;
16220
+ padding-block: 0.5rem;
16221
+ }
16222
+
16223
+ .console-page-sidebar-footer {
16224
+ border-top: 1px solid var(--color-outline-variant);
16225
+ }
16226
+
16227
+ .console-page-main {
16228
+ grid-area: main;
16229
+ min-width: 0;
16230
+ overflow: auto;
16231
+ padding: clamp(1rem, 4cqi, 2.5rem);
16232
+ background-color: var(--color-surface);
16233
+ }
16234
+
16235
+ .console-page-nav-label {
16236
+ overflow: hidden;
16237
+ text-overflow: ellipsis;
16238
+ white-space: nowrap;
16239
+ }
16240
+
16241
+ .console-page-sidebar-toggle {
16242
+ display: none;
16243
+ }
16244
+
16245
+ .console-page-menu-trigger {
16246
+ display: inline-flex;
16247
+ }
16248
+
16249
+ .console-page-mobile-menu {
16250
+ max-width: min(20rem, calc(100cqi - 2rem));
16251
+ }
16252
+
16253
+ @container console-page (min-width: 48rem) {
16254
+ .console-page-frame {
16255
+ grid-template-areas:
16256
+ "appbar appbar"
16257
+ "sidebar main";
16258
+ grid-template-columns: var(--console-page-sidebar-width) minmax(0, 1fr);
16259
+ }
16260
+
16261
+ .console-page-sidebar {
16262
+ display: flex;
16263
+ flex-direction: column;
16264
+ }
16265
+
16266
+ .console-page-sidebar-toggle {
16267
+ display: inline-flex;
16268
+ }
16269
+
16270
+ .console-page-menu-trigger {
16271
+ display: none;
16272
+ }
16273
+
16274
+ .console-page-mobile-menu {
16275
+ display: none;
16276
+ }
16277
+
16278
+ .console-page-sidebar-compact .console-page-frame {
16279
+ grid-template-columns: var(--console-page-sidebar-compact-width) minmax(0, 1fr);
16280
+ }
16281
+
16282
+ .console-page-sidebar-compact .console-page-nav-label {
16283
+ position: absolute;
16284
+ width: 1px;
16285
+ height: 1px;
16286
+ padding: 0;
16287
+ margin: -1px;
16288
+ overflow: hidden;
16289
+ clip: rect(0, 0, 0, 0);
16290
+ white-space: nowrap;
16291
+ border: 0;
16292
+ }
16293
+
16294
+ .console-page-sidebar-compact .console-page-sidebar-header,
16295
+ .console-page-sidebar-compact .console-page-sidebar-footer {
16296
+ justify-content: center;
16297
+ padding-inline: 0.75rem;
16298
+ }
16299
+
16300
+ .console-page-sidebar-compact .console-page-sidebar-body :is(.nested-menu li > a, .nested-menu li > button, .nested-menu summary) {
16301
+ justify-content: center;
16302
+ padding-inline: 0.75rem;
16303
+ }
16304
+
16305
+ .console-page-sidebar-compact .console-page-sidebar-body .drawer-item {
16306
+ justify-content: center;
16307
+ padding-inline: 0.75rem;
16308
+ }
16309
+
16310
+ .console-page-sidebar-compact .console-page-sidebar-body :is(.nested-menu-title, details > ul, summary::after) {
16311
+ display: none;
16312
+ }
16313
+
16314
+ .console-page-sidebar-hidden .console-page-frame {
16315
+ grid-template-areas:
16316
+ "appbar"
16317
+ "main";
16318
+ grid-template-columns: minmax(0, 1fr);
16319
+ }
16320
+
16321
+ .console-page-sidebar-hidden .console-page-sidebar {
16322
+ display: none;
16323
+ }
16324
+ }
16325
+
16326
+ @media (prefers-reduced-motion: reduce) {
16327
+ .console-page-frame,
16328
+ .console-page-sidebar {
16329
+ transition: none;
16330
+ }
16331
+ }
16332
+ }
16333
+
16144
16334
  /**
16145
16335
  * Divider Component Styles
16146
16336
  * DuskMoonUI - Material Design 3 inspired divider system
@@ -16516,6 +16706,182 @@ html {
16516
16706
  }
16517
16707
  }
16518
16708
 
16709
+ /**
16710
+ * Home Page Layout
16711
+ * App-bar-led public application shell driven by its containing width.
16712
+ */
16713
+
16714
+ @layer components {
16715
+ .home-page {
16716
+ container-type: inline-size;
16717
+ container-name: home-page;
16718
+ width: 100%;
16719
+ min-width: 0;
16720
+ min-height: var(--home-page-min-height, 100dvh);
16721
+ background-color: var(--color-surface);
16722
+ color: var(--color-on-surface);
16723
+ }
16724
+
16725
+ .home-page-frame {
16726
+ display: grid;
16727
+ min-height: inherit;
16728
+ grid-template-rows: auto minmax(0, 1fr) auto;
16729
+ }
16730
+
16731
+ .home-page-header {
16732
+ z-index: 10;
16733
+ }
16734
+
16735
+ .home-page-nav {
16736
+ display: none;
16737
+ align-items: center;
16738
+ gap: 0.25rem;
16739
+ }
16740
+
16741
+ .home-page-actions {
16742
+ display: none;
16743
+ align-items: center;
16744
+ gap: 0.25rem;
16745
+ }
16746
+
16747
+ .home-page-menu-trigger {
16748
+ display: inline-flex;
16749
+ }
16750
+
16751
+ .home-page-mobile-menu {
16752
+ max-width: min(20rem, calc(100cqi - 2rem));
16753
+ }
16754
+
16755
+ .home-page-main {
16756
+ min-width: 0;
16757
+ }
16758
+
16759
+ .home-page-content {
16760
+ width: min(100%, 80rem);
16761
+ margin-inline: auto;
16762
+ padding: clamp(1rem, 5cqi, 3rem);
16763
+ }
16764
+
16765
+ .home-page-hero {
16766
+ display: grid;
16767
+ align-items: center;
16768
+ grid-template-columns: minmax(0, 1fr);
16769
+ gap: clamp(2rem, 5cqi, 4rem);
16770
+ }
16771
+
16772
+ .home-page-footer {
16773
+ border-top: 1px solid var(--color-outline-variant);
16774
+ background-color: var(--color-surface-container-low);
16775
+ }
16776
+
16777
+ @container home-page (min-width: 48rem) {
16778
+ .home-page-nav {
16779
+ display: flex;
16780
+ }
16781
+
16782
+ .home-page-actions {
16783
+ display: flex;
16784
+ }
16785
+
16786
+ .home-page-menu-trigger {
16787
+ display: none;
16788
+ }
16789
+
16790
+ .home-page-mobile-menu {
16791
+ display: none;
16792
+ }
16793
+
16794
+ .home-page-content {
16795
+ padding-inline: clamp(2rem, 5cqi, 5rem);
16796
+ }
16797
+
16798
+ .home-page-hero {
16799
+ grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
16800
+ }
16801
+ }
16802
+ }
16803
+
16804
+ /**
16805
+ * Sign Page Layout
16806
+ * Responsive authentication shell driven by its containing width.
16807
+ */
16808
+
16809
+ @layer components {
16810
+ .sign-page {
16811
+ container-type: inline-size;
16812
+ container-name: sign-page;
16813
+ width: 100%;
16814
+ min-width: 0;
16815
+ min-height: var(--sign-page-min-height, 100dvh);
16816
+ overflow: hidden;
16817
+ background-color: var(--color-surface);
16818
+ color: var(--color-on-surface);
16819
+ }
16820
+
16821
+ .sign-page-frame {
16822
+ display: grid;
16823
+ min-height: inherit;
16824
+ grid-template-columns: minmax(0, 1fr);
16825
+ }
16826
+
16827
+ .sign-page-aside {
16828
+ display: none;
16829
+ position: relative;
16830
+ isolation: isolate;
16831
+ overflow: hidden;
16832
+ padding: clamp(2rem, 6cqi, 5rem);
16833
+ background-color: var(--color-primary-container);
16834
+ color: var(--color-on-primary-container);
16835
+ }
16836
+
16837
+ .sign-page-aside::before,
16838
+ .sign-page-aside::after {
16839
+ content: "";
16840
+ position: absolute;
16841
+ z-index: -1;
16842
+ border-radius: var(--radius-full);
16843
+ background: color-mix(in oklch, var(--color-tertiary) 24%, transparent);
16844
+ filter: blur(1px);
16845
+ }
16846
+
16847
+ .sign-page-aside::before {
16848
+ width: 22rem;
16849
+ height: 22rem;
16850
+ inset: -8rem -6rem auto auto;
16851
+ }
16852
+
16853
+ .sign-page-aside::after {
16854
+ width: 15rem;
16855
+ height: 15rem;
16856
+ inset: auto auto -5rem -4rem;
16857
+ background: color-mix(in oklch, var(--color-secondary) 22%, transparent);
16858
+ }
16859
+
16860
+ .sign-page-main {
16861
+ display: grid;
16862
+ place-items: center;
16863
+ min-width: 0;
16864
+ padding: clamp(1rem, 6cqi, 4rem);
16865
+ background-color: var(--color-surface);
16866
+ }
16867
+
16868
+ .sign-page-content {
16869
+ width: min(100%, 30rem);
16870
+ }
16871
+
16872
+ @container sign-page (min-width: 48rem) {
16873
+ .sign-page-frame {
16874
+ grid-template-columns: minmax(20rem, 1.15fr) minmax(24rem, 0.85fr);
16875
+ }
16876
+
16877
+ .sign-page-aside {
16878
+ display: flex;
16879
+ flex-direction: column;
16880
+ justify-content: space-between;
16881
+ }
16882
+ }
16883
+ }
16884
+
16519
16885
 
16520
16886
  /* ============================================
16521
16887
  * NAVIGATION COMPONENTS