domma-js 0.47.0 → 0.49.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.
@@ -1,8 +1,8 @@
1
1
  /*!
2
- * Domma Complete CSS Bundle v0.47.0
2
+ * Domma Complete CSS Bundle v0.49.0
3
3
  * Dynamic Object Manipulation & Modeling API
4
4
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5
- * Built: 2026-09-27T21:27:08.523Z
5
+ * Built: 2026-09-27T22:28:46.105Z
6
6
  */
7
7
 
8
8
  /* ============================================
@@ -11,11 +11,11 @@
11
11
  ============================================ */
12
12
 
13
13
  /*!
14
- * Domma Core CSS v0.47.0
14
+ * Domma Core CSS v0.49.0
15
15
  * Dynamic Object Manipulation & Modeling API
16
16
  * (c) 2026 Darryl Waterhouse & DCBW-IT
17
- * Built: 2026-09-27T21:27:08.360Z
18
- * Commit: eff3166
17
+ * Built: 2026-09-27T22:28:45.940Z
18
+ * Commit: 5bc521e
19
19
  */
20
20
 
21
21
  /**
@@ -4835,11 +4835,11 @@ body.dm-cloaked.dm-ready {
4835
4835
  ============================================ */
4836
4836
 
4837
4837
  /*!
4838
- * Domma Grid CSS v0.47.0
4838
+ * Domma Grid CSS v0.49.0
4839
4839
  * Dynamic Object Manipulation & Modeling API
4840
4840
  * (c) 2026 Darryl Waterhouse & DCBW-IT
4841
- * Built: 2026-09-27T21:27:08.363Z
4842
- * Commit: eff3166
4841
+ * Built: 2026-09-27T22:28:45.944Z
4842
+ * Commit: 5bc521e
4843
4843
  */
4844
4844
 
4845
4845
  /**
@@ -5460,11 +5460,11 @@ body.dm-cloaked.dm-ready {
5460
5460
  ============================================ */
5461
5461
 
5462
5462
  /*!
5463
- * Domma Elements CSS v0.47.0
5463
+ * Domma Elements CSS v0.49.0
5464
5464
  * Dynamic Object Manipulation & Modeling API
5465
5465
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5466
- * Built: 2026-09-27T21:27:08.368Z
5467
- * Commit: eff3166
5466
+ * Built: 2026-09-27T22:28:45.949Z
5467
+ * Commit: 5bc521e
5468
5468
  */
5469
5469
 
5470
5470
  /**
@@ -5510,9 +5510,12 @@ body.dm-cloaked.dm-ready {
5510
5510
  box-shadow: 0 0 0 3px var(--dm-focus-ring);
5511
5511
  }
5512
5512
 
5513
- .btn:disabled {
5513
+ .btn:disabled,
5514
+ .btn[aria-disabled="true"],
5515
+ .btn.disabled {
5514
5516
  opacity: 0.65;
5515
5517
  cursor: not-allowed;
5518
+ pointer-events: none;
5516
5519
  }
5517
5520
 
5518
5521
  .btn-primary {
@@ -5962,7 +5965,8 @@ body.dm-cloaked.dm-ready {
5962
5965
  border-bottom-color: var(--dm-border);
5963
5966
  }
5964
5967
 
5965
- .tab-item.active {
5968
+ .tab-item.active,
5969
+ .tab-item[aria-selected="true"] {
5966
5970
  color: var(--dm-link, color-mix(in oklab, var(--dm-primary, #0070d6), var(--dm-text, #1a1a1a) 55%));
5967
5971
  border-bottom-color: var(--dm-primary);
5968
5972
  }
@@ -5994,7 +5998,8 @@ body.dm-cloaked.dm-ready {
5994
5998
  margin-bottom: 0;
5995
5999
  }
5996
6000
 
5997
- .tabs-pills .tab-item.active {
6001
+ .tabs-pills .tab-item.active,
6002
+ .tabs-pills .tab-item[aria-selected="true"] {
5998
6003
  background-color: var(--dm-surface);
5999
6004
  box-shadow: var(--dm-shadow-sm);
6000
6005
  border-bottom: none;
@@ -6037,7 +6042,8 @@ body.dm-cloaked.dm-ready {
6037
6042
  transition: transform var(--dm-transition-normal);
6038
6043
  }
6039
6044
 
6040
- .accordion-item.active .accordion-icon {
6045
+ .accordion-item.active .accordion-icon,
6046
+ .accordion-header[aria-expanded="true"] .accordion-icon {
6041
6047
  transform: rotate(180deg);
6042
6048
  }
6043
6049
 
@@ -6316,7 +6322,10 @@ textarea:not([class])::placeholder {
6316
6322
 
6317
6323
  .form-input:disabled,
6318
6324
  .form-select:disabled,
6319
- .form-textarea:disabled {
6325
+ .form-textarea:disabled,
6326
+ .form-input[aria-disabled="true"],
6327
+ .form-select[aria-disabled="true"],
6328
+ .form-textarea[aria-disabled="true"] {
6320
6329
  background-color: var(--dm-hover-bg);
6321
6330
  cursor: not-allowed;
6322
6331
  opacity: 0.7;
@@ -6324,7 +6333,10 @@ textarea:not([class])::placeholder {
6324
6333
 
6325
6334
  [data-mode="dark"].form-input:disabled,
6326
6335
  [data-mode="dark"].form-select:disabled,
6327
- [data-mode="dark"].form-textarea:disabled {
6336
+ [data-mode="dark"].form-textarea:disabled,
6337
+ [data-mode="dark"].form-input[aria-disabled="true"],
6338
+ [data-mode="dark"].form-select[aria-disabled="true"],
6339
+ [data-mode="dark"].form-textarea[aria-disabled="true"] {
6328
6340
  background-color: var(--dm-surface);
6329
6341
  }
6330
6342
 
@@ -6342,13 +6354,25 @@ textarea:not([class])::placeholder {
6342
6354
 
6343
6355
  .form-input.error,
6344
6356
  .form-select.error,
6345
- .form-textarea.error {
6357
+ .form-textarea.error,
6358
+ .form-input[aria-invalid="true"],
6359
+ .form-select[aria-invalid="true"],
6360
+ .form-textarea[aria-invalid="true"],
6361
+ .form-input.is-invalid,
6362
+ .form-select.is-invalid,
6363
+ .form-textarea.is-invalid {
6346
6364
  border-color: var(--dm-danger);
6347
6365
  }
6348
6366
 
6349
6367
  .form-input.error:focus,
6350
6368
  .form-select.error:focus,
6351
- .form-textarea.error:focus {
6369
+ .form-textarea.error:focus,
6370
+ .form-input[aria-invalid="true"]:focus,
6371
+ .form-select[aria-invalid="true"]:focus,
6372
+ .form-textarea[aria-invalid="true"]:focus,
6373
+ .form-input.is-invalid:focus,
6374
+ .form-select.is-invalid:focus,
6375
+ .form-textarea.is-invalid:focus {
6352
6376
  box-shadow: 0 0 0 3px var(--dm-focus-ring-danger);
6353
6377
  }
6354
6378
 
@@ -7124,19 +7148,22 @@ textarea:not([class])::placeholder {
7124
7148
  }
7125
7149
 
7126
7150
  /* Active/selected state - accent background takes precedence over colour variants */
7127
- .list-group-item.active {
7151
+ .list-group-item.active,
7152
+ .list-group-item[aria-selected="true"] {
7128
7153
  background-color: var(--dm-primary);
7129
7154
  color: var(--dm-primary-text, var(--dm-white));
7130
7155
  border-bottom-color: var(--dm-primary-hover);
7131
7156
  z-index: 1;
7132
7157
  }
7133
7158
 
7134
- .list-group-item.active .list-group-item-text {
7159
+ .list-group-item.active .list-group-item-text,
7160
+ .list-group-item[aria-selected="true"] .list-group-item-text {
7135
7161
  color: rgba(255, 255, 255, 0.75);
7136
7162
  }
7137
7163
 
7138
7164
  /* Disabled state - dimmed and non-interactive */
7139
- .list-group-item.disabled {
7165
+ .list-group-item.disabled,
7166
+ .list-group-item[aria-disabled="true"] {
7140
7167
  opacity: 0.7;
7141
7168
  cursor: not-allowed;
7142
7169
  pointer-events: none;
@@ -7587,14 +7614,16 @@ code {
7587
7614
  text-decoration: none;
7588
7615
  }
7589
7616
 
7590
- .pagination-link.active {
7617
+ .pagination-link.active,
7618
+ .pagination-link[aria-current="page"] {
7591
7619
  background-color: var(--dm-primary);
7592
7620
  border-color: var(--dm-primary);
7593
7621
  color: var(--dm-primary-text, var(--dm-white));
7594
7622
  }
7595
7623
 
7596
7624
  .pagination-link:disabled,
7597
- .pagination-link.disabled {
7625
+ .pagination-link.disabled,
7626
+ .pagination-link[aria-disabled="true"] {
7598
7627
  opacity: 0.5;
7599
7628
  cursor: not-allowed;
7600
7629
  pointer-events: none;
@@ -11459,7 +11488,8 @@ code {
11459
11488
  color: var(--dm-primary, #6495ED);
11460
11489
  }
11461
11490
 
11462
- .dm-breadcrumbs-item.active {
11491
+ .dm-breadcrumbs-item.active,
11492
+ .dm-breadcrumbs-item[aria-current="page"] {
11463
11493
  color: var(--dm-text);
11464
11494
  font-weight: 500;
11465
11495
  }
@@ -11477,7 +11507,8 @@ code {
11477
11507
  color: var(--dm-text-muted);
11478
11508
  }
11479
11509
 
11480
- [data-mode="dark"] .dm-breadcrumbs-item.active {
11510
+ [data-mode="dark"] .dm-breadcrumbs-item.active,
11511
+ [data-mode="dark"] .dm-breadcrumbs-item[aria-current="page"] {
11481
11512
  color: var(--dm-text);
11482
11513
  }
11483
11514
 
@@ -14256,6 +14287,412 @@ code {
14256
14287
  }
14257
14288
  }
14258
14289
 
14290
+ /* ============================================
14291
+ SKELETON LOADERS
14292
+ Shimmering placeholders shaped like the content on its way. The tint is the
14293
+ theme's text colour mixed into its surface, so it reads as a quiet grey on
14294
+ light themes and a quiet lift on dark ones. Written by E.skeleton() or by
14295
+ hand. Override hooks: --dm-skeleton-bg, --dm-skeleton-shine,
14296
+ --dm-skeleton-duration, --dm-skeleton-columns (table).
14297
+ ============================================ */
14298
+ .skeleton {
14299
+ position: relative;
14300
+ display: block;
14301
+ overflow: hidden;
14302
+ background-color: var(--dm-skeleton-bg, color-mix(in srgb, var(--dm-text) 10%, var(--dm-surface)));
14303
+ border-radius: var(--dm-radius-md);
14304
+ user-select: none;
14305
+ pointer-events: none;
14306
+ }
14307
+
14308
+ /* The sweep: a soft band that crosses each shape. Towards the surface on light
14309
+ themes, towards the text on dark ones - lighter in both cases. */
14310
+ .skeleton::after {
14311
+ content: '';
14312
+ position: absolute;
14313
+ inset: 0;
14314
+ transform: translateX(-100%);
14315
+ background-image: linear-gradient(90deg,
14316
+ transparent 0%,
14317
+ var(--dm-skeleton-shine, color-mix(in srgb, var(--dm-surface) 70%, transparent)) 50%,
14318
+ transparent 100%);
14319
+ animation: dm-skeleton-sweep var(--dm-skeleton-duration, 1.6s) ease-in-out infinite;
14320
+ }
14321
+
14322
+ [data-mode="dark"] .skeleton::after {
14323
+ background-image: linear-gradient(90deg,
14324
+ transparent 0%,
14325
+ var(--dm-skeleton-shine, color-mix(in srgb, var(--dm-text) 8%, transparent)) 50%,
14326
+ transparent 100%);
14327
+ }
14328
+
14329
+ @keyframes dm-skeleton-sweep {
14330
+ 100% {
14331
+ transform: translateX(100%);
14332
+ }
14333
+ }
14334
+
14335
+ /* animate: false, or by hand on a shape or a group of shapes */
14336
+ .skeleton-static::after,
14337
+ .skeleton-static .skeleton::after {
14338
+ display: none;
14339
+ }
14340
+
14341
+ /* Lines of text: 0.875em bars on a 1.5em rhythm, like body copy */
14342
+ .skeleton-text {
14343
+ width: 100%;
14344
+ height: 0.875em;
14345
+ border-radius: var(--dm-radius-sm);
14346
+ }
14347
+
14348
+ .skeleton-text + .skeleton-text {
14349
+ margin-top: 0.625em;
14350
+ }
14351
+
14352
+ .skeleton-text-sm {
14353
+ height: 0.75em;
14354
+ }
14355
+
14356
+ /* The last line of a paragraph runs short */
14357
+ .skeleton-lines > .skeleton-text:last-child:not(:first-child) {
14358
+ width: 60%;
14359
+ }
14360
+
14361
+ .skeleton-lines + .skeleton-lines {
14362
+ margin-top: var(--dm-space-6);
14363
+ }
14364
+
14365
+ .skeleton-heading {
14366
+ width: 50%;
14367
+ height: 1.25rem;
14368
+ margin-bottom: var(--dm-space-4);
14369
+ border-radius: var(--dm-radius-sm);
14370
+ }
14371
+
14372
+ .skeleton-w-25 { width: 25%; }
14373
+ .skeleton-w-50 { width: 50%; }
14374
+ .skeleton-w-75 { width: 75%; }
14375
+ .skeleton-w-100 { width: 100%; }
14376
+
14377
+ .skeleton-lines > .skeleton-w-25:last-child:not(:first-child) { width: 25%; }
14378
+ .skeleton-lines > .skeleton-w-50:last-child:not(:first-child) { width: 50%; }
14379
+ .skeleton-lines > .skeleton-w-75:last-child:not(:first-child) { width: 75%; }
14380
+ .skeleton-lines > .skeleton-w-100:last-child:not(:first-child) { width: 100%; }
14381
+
14382
+ /* Circles - avatars, icons. 2.5rem by default */
14383
+ .skeleton-circle,
14384
+ .skeleton-avatar {
14385
+ flex-shrink: 0;
14386
+ width: 2.5rem;
14387
+ height: 2.5rem;
14388
+ border-radius: var(--dm-radius-full);
14389
+ }
14390
+
14391
+ .skeleton-circle.skeleton-sm,
14392
+ .skeleton-avatar.skeleton-sm { width: 2rem; height: 2rem; }
14393
+ .skeleton-circle.skeleton-lg,
14394
+ .skeleton-avatar.skeleton-lg { width: 3.5rem; height: 3.5rem; }
14395
+ .skeleton-circle.skeleton-xl,
14396
+ .skeleton-avatar.skeleton-xl { width: 5rem; height: 5rem; }
14397
+
14398
+ /* Blocks and images - 16:9 unless told otherwise */
14399
+ .skeleton-rect,
14400
+ .skeleton-image {
14401
+ width: 100%;
14402
+ aspect-ratio: 16 / 9;
14403
+ }
14404
+
14405
+ .skeleton-ratio-1x1 { aspect-ratio: 1 / 1; }
14406
+ .skeleton-ratio-4x3 { aspect-ratio: 4 / 3; }
14407
+ .skeleton-ratio-16x9 { aspect-ratio: 16 / 9; }
14408
+ .skeleton-ratio-21x9 { aspect-ratio: 21 / 9; }
14409
+
14410
+ /* The size of a .btn: small text on a 1.5 line, space-2 padding, 1px border */
14411
+ .skeleton-button {
14412
+ display: inline-block;
14413
+ width: 6rem;
14414
+ height: calc(var(--dm-font-size-sm) * 1.5 + var(--dm-space-2) * 2 + 2px);
14415
+ vertical-align: middle;
14416
+ border-radius: var(--dm-radius-md);
14417
+ }
14418
+
14419
+ /* Card: the .card frame, an image with square corners, a .card-body's padding */
14420
+ .skeleton-card {
14421
+ overflow: hidden;
14422
+ color: var(--dm-text);
14423
+ background-color: var(--dm-card-bg, var(--dm-surface));
14424
+ border: 1px solid var(--dm-card-border, var(--dm-border));
14425
+ border-radius: var(--dm-radius-lg);
14426
+ }
14427
+
14428
+ .skeleton-card > .skeleton-image {
14429
+ border-radius: 0;
14430
+ }
14431
+
14432
+ .skeleton-card-body {
14433
+ padding: var(--dm-space-6);
14434
+ }
14435
+
14436
+ /* List: the .list-group frame and item padding, circle then two lines */
14437
+ .skeleton-list {
14438
+ overflow: hidden;
14439
+ color: var(--dm-text);
14440
+ background-color: var(--dm-surface);
14441
+ border: 1px solid var(--dm-border);
14442
+ border-radius: var(--dm-radius-md);
14443
+ }
14444
+
14445
+ .skeleton-list-item {
14446
+ display: flex;
14447
+ align-items: center;
14448
+ gap: var(--dm-space-3);
14449
+ padding: var(--dm-space-3) var(--dm-space-4);
14450
+ font-size: var(--dm-font-size-sm);
14451
+ border-bottom: 1px solid var(--dm-border-light);
14452
+ }
14453
+
14454
+ .skeleton-list-item:last-child {
14455
+ border-bottom: none;
14456
+ }
14457
+
14458
+ .skeleton-list-item-content {
14459
+ flex: 1 1 auto;
14460
+ min-width: 0;
14461
+ }
14462
+
14463
+ /* Table: rows of cells with .table's padding and rule */
14464
+ .skeleton-table {
14465
+ overflow: hidden;
14466
+ color: var(--dm-text);
14467
+ font-size: var(--dm-font-size-sm);
14468
+ border: 1px solid var(--dm-table-border, var(--dm-border));
14469
+ border-radius: var(--dm-radius-md);
14470
+ }
14471
+
14472
+ .skeleton-table-row {
14473
+ display: grid;
14474
+ grid-template-columns: repeat(var(--dm-skeleton-columns, 4), minmax(0, 1fr));
14475
+ align-items: center;
14476
+ gap: var(--dm-space-4);
14477
+ padding: var(--dm-space-3) var(--dm-space-4);
14478
+ border-bottom: 1px solid var(--dm-table-border, var(--dm-border));
14479
+ }
14480
+
14481
+ .skeleton-table-row:last-child {
14482
+ border-bottom: none;
14483
+ }
14484
+
14485
+ /* Cells sit side by side: no line spacing between them */
14486
+ .skeleton-table-row > .skeleton-text + .skeleton-text {
14487
+ margin-top: 0;
14488
+ }
14489
+
14490
+ .skeleton-table-head {
14491
+ color: var(--dm-table-header-text, var(--dm-text));
14492
+ background-color: var(--dm-table-header-bg, var(--dm-background-alt));
14493
+ }
14494
+
14495
+ /* Inside a real table cell (the DataTable's loading rows) */
14496
+ td > .skeleton-text {
14497
+ min-width: 3rem;
14498
+ }
14499
+
14500
+ /* The "Loading..." announcement: read out, not shown */
14501
+ .skeleton-status {
14502
+ position: absolute;
14503
+ width: 1px;
14504
+ height: 1px;
14505
+ margin: -1px;
14506
+ padding: 0;
14507
+ overflow: hidden;
14508
+ clip: rect(0 0 0 0);
14509
+ white-space: nowrap;
14510
+ border: 0;
14511
+ }
14512
+
14513
+ /* Reduced motion: no sweep, just the still tint */
14514
+ @media (prefers-reduced-motion: reduce) {
14515
+ .skeleton::after {
14516
+ display: none;
14517
+ animation: none;
14518
+ }
14519
+ }
14520
+
14521
+ /* ============================================
14522
+ POPOVER
14523
+ E.popover(trigger, options) - src/popover.js
14524
+ ============================================ */
14525
+
14526
+ /*
14527
+ * Portalled to <body> and positioned with `fixed`, so no ancestor's overflow
14528
+ * or stacking context can clip it. Above modals and slideovers (a popover is
14529
+ * usually opened from inside one), below the context menu (10050), which can
14530
+ * be opened from inside a popover.
14531
+ *
14532
+ * Width options arrive as custom properties, so a theme or page stylesheet
14533
+ * can still set them without fighting inline styles.
14534
+ */
14535
+ .dm-popover {
14536
+ position: fixed;
14537
+ top: 0;
14538
+ left: 0;
14539
+ z-index: 10045;
14540
+ box-sizing: border-box;
14541
+ display: flex;
14542
+ flex-direction: column;
14543
+ width: var(--dm-popover-width, auto);
14544
+ max-width: min(var(--dm-popover-max-width, 20rem), calc(100vw - 16px));
14545
+ max-height: calc(100vh - 16px);
14546
+ background: var(--dm-surface);
14547
+ color: var(--dm-text);
14548
+ border: 1px solid var(--dm-border);
14549
+ border-radius: var(--dm-radius-md);
14550
+ box-shadow: var(--dm-shadow-lg);
14551
+ font-size: 0.875rem;
14552
+ line-height: 1.5;
14553
+ text-align: left;
14554
+ white-space: normal;
14555
+ overflow-wrap: break-word;
14556
+ opacity: 0;
14557
+ transform: scale(0.96);
14558
+ transform-origin: top center;
14559
+ transition:
14560
+ opacity var(--dm-popover-duration, 150ms) ease,
14561
+ transform var(--dm-popover-duration, 150ms) cubic-bezier(0.16, 1, 0.3, 1);
14562
+ outline: none;
14563
+ }
14564
+
14565
+ .dm-popover[data-side="top"] { transform-origin: bottom center; }
14566
+ .dm-popover[data-side="bottom"] { transform-origin: top center; }
14567
+ .dm-popover[data-side="left"] { transform-origin: center right; }
14568
+ .dm-popover[data-side="right"] { transform-origin: center left; }
14569
+
14570
+ .dm-popover.is-open {
14571
+ opacity: 1;
14572
+ transform: none;
14573
+ }
14574
+
14575
+ .dm-popover[data-animation="off"] {
14576
+ transition: none;
14577
+ }
14578
+
14579
+ /* The trigger has scrolled out of view; the panel waits for it. */
14580
+ .dm-popover.is-detached {
14581
+ visibility: hidden;
14582
+ pointer-events: none;
14583
+ }
14584
+
14585
+ .dm-popover [hidden] {
14586
+ display: none;
14587
+ }
14588
+
14589
+ .dm-popover-header {
14590
+ padding: 0.625rem 0.875rem 0;
14591
+ }
14592
+
14593
+ .dm-popover-title {
14594
+ margin: 0;
14595
+ font-size: 0.9375rem;
14596
+ font-weight: 600;
14597
+ line-height: 1.35;
14598
+ color: var(--dm-text);
14599
+ }
14600
+
14601
+ /* The body scrolls when the content is taller than the viewport, so the
14602
+ panel itself keeps overflow visible and the arrow is not clipped. */
14603
+ .dm-popover-body {
14604
+ min-height: 0;
14605
+ padding: 0.625rem 0.875rem;
14606
+ overflow: auto;
14607
+ }
14608
+
14609
+ .dm-popover-body > :first-child { margin-top: 0; }
14610
+ .dm-popover-body > :last-child { margin-bottom: 0; }
14611
+
14612
+ .dm-popover.is-dismissible .dm-popover-header,
14613
+ .dm-popover.is-dismissible:not(.has-title) .dm-popover-body {
14614
+ padding-right: 2.25rem;
14615
+ }
14616
+
14617
+ .dm-popover-close {
14618
+ position: absolute;
14619
+ top: 0.375rem;
14620
+ right: 0.375rem;
14621
+ display: inline-flex;
14622
+ align-items: center;
14623
+ justify-content: center;
14624
+ width: 1.5rem;
14625
+ height: 1.5rem;
14626
+ padding: 0;
14627
+ border: 0;
14628
+ border-radius: var(--dm-radius-sm);
14629
+ background: transparent;
14630
+ color: var(--dm-text);
14631
+ cursor: pointer;
14632
+ }
14633
+
14634
+ .dm-popover-close:hover {
14635
+ background: var(--dm-hover-bg);
14636
+ color: var(--dm-text);
14637
+ }
14638
+
14639
+ .dm-popover-close:focus-visible {
14640
+ outline: 2px solid var(--dm-primary);
14641
+ outline-offset: 1px;
14642
+ }
14643
+
14644
+ /*
14645
+ * A square turned 45 degrees, bordered on the two edges that face out, so it
14646
+ * reads as a continuation of the panel's own border. JS sets its position
14647
+ * along the edge (left for top/bottom, top for left/right).
14648
+ */
14649
+ .dm-popover-arrow {
14650
+ position: absolute;
14651
+ width: 10px;
14652
+ height: 10px;
14653
+ margin: -5px 0 0 -5px;
14654
+ background: var(--dm-surface);
14655
+ border: 1px solid var(--dm-border);
14656
+ transform: rotate(45deg);
14657
+ pointer-events: none;
14658
+ }
14659
+
14660
+ .dm-popover[data-side="bottom"] .dm-popover-arrow {
14661
+ top: -1px;
14662
+ border-right: 0;
14663
+ border-bottom: 0;
14664
+ }
14665
+
14666
+ .dm-popover[data-side="top"] .dm-popover-arrow {
14667
+ top: calc(100% + 1px);
14668
+ border-left: 0;
14669
+ border-top: 0;
14670
+ }
14671
+
14672
+ .dm-popover[data-side="right"] .dm-popover-arrow {
14673
+ left: -1px;
14674
+ margin: -5px 0 0 -5px;
14675
+ border-top: 0;
14676
+ border-right: 0;
14677
+ }
14678
+
14679
+ .dm-popover[data-side="left"] .dm-popover-arrow {
14680
+ left: calc(100% + 1px);
14681
+ border-bottom: 0;
14682
+ border-left: 0;
14683
+ }
14684
+
14685
+ .dm-popover-trigger[role="button"] {
14686
+ cursor: pointer;
14687
+ }
14688
+
14689
+ @media (prefers-reduced-motion: reduce) {
14690
+ .dm-popover {
14691
+ transition: none;
14692
+ transform: none;
14693
+ }
14694
+ }
14695
+
14259
14696
 
14260
14697
  /* ============================================
14261
14698
  THEME SYSTEM
@@ -14263,11 +14700,11 @@ code {
14263
14700
  ============================================ */
14264
14701
 
14265
14702
  /*!
14266
- * Domma Themes v0.47.0
14703
+ * Domma Themes v0.49.0
14267
14704
  * Dynamic Object Manipulation & Modeling API
14268
14705
  * (c) 2026 Darryl Waterhouse & DCBW-IT
14269
- * Built: 2026-09-27T21:27:08.347Z
14270
- * Commit: eff3166
14706
+ * Built: 2026-09-27T22:28:45.927Z
14707
+ * Commit: 5bc521e
14271
14708
  */
14272
14709
 
14273
14710
  /**
@@ -17374,8 +17811,8 @@ code {
17374
17811
  --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 55%);
17375
17812
 
17376
17813
  /* Focus ring with charcoal colour */
17377
- --dm-focus-ring: 0 0 0 3px rgba(54, 69, 79, 0.3);
17378
- --dm-border-focus: #36454f;
17814
+ --dm-focus-ring: 0 0 0 3px rgba(138, 155, 171, 0.4);
17815
+ --dm-border-focus: #8a9bab;
17379
17816
 
17380
17817
  /* ================================================
17381
17818
  SECONDARY COLOURS - Slate
@@ -21009,7 +21446,7 @@ code {
21009
21446
  --dm-primary-text: #ffffff;
21010
21447
  --dm-primary-hover-text: #ffffff;
21011
21448
  --dm-focus-ring: 0 0 0 3px rgba(59, 118, 188, 0.35);
21012
- --dm-border-focus: #3b76bc;
21449
+ --dm-border-focus: #7fb0e0;
21013
21450
  --dm-secondary: #5f6f7a;
21014
21451
  --dm-secondary-hover: #52606b;
21015
21452
  --dm-secondary-active: #46535d;
@@ -21030,11 +21467,11 @@ code {
21030
21467
  --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 60%);
21031
21468
  --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 75%);
21032
21469
 
21033
- --dm-success: #2e8b50;
21034
- --dm-success-hover: #287d49;
21035
- --dm-success-active: #226b3f;
21036
- --dm-success-light: rgba(46, 139, 80, 0.15);
21037
- --dm-success-dark: #1c5733;
21470
+ --dm-success: #287c47;
21471
+ --dm-success-hover: #236e3e;
21472
+ --dm-success-active: #1e5f35;
21473
+ --dm-success-light: rgba(40, 124, 71, 0.15);
21474
+ --dm-success-dark: #164627;
21038
21475
  --dm-success-text: #ffffff;
21039
21476
  --dm-success-hover-text: #ffffff;
21040
21477
  --dm-danger: #c0432f;
@@ -21151,7 +21588,7 @@ code {
21151
21588
  --dm-primary-text: #ffffff;
21152
21589
  --dm-primary-hover-text: #ffffff;
21153
21590
  --dm-focus-ring: 0 0 0 3px rgba(91, 99, 168, 0.35);
21154
- --dm-border-focus: #5b63a8;
21591
+ --dm-border-focus: #9aa0d4;
21155
21592
  --dm-secondary: #5f6f7a;
21156
21593
  --dm-secondary-hover: #52606b;
21157
21594
  --dm-secondary-active: #46535d;
@@ -21172,11 +21609,11 @@ code {
21172
21609
  --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 65%);
21173
21610
  --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 80%);
21174
21611
 
21175
- --dm-success: #2e8b50;
21176
- --dm-success-hover: #287d49;
21177
- --dm-success-active: #226b3f;
21178
- --dm-success-light: rgba(46, 139, 80, 0.15);
21179
- --dm-success-dark: #1c5733;
21612
+ --dm-success: #287c47;
21613
+ --dm-success-hover: #236e3e;
21614
+ --dm-success-active: #1e5f35;
21615
+ --dm-success-light: rgba(40, 124, 71, 0.15);
21616
+ --dm-success-dark: #164627;
21180
21617
  --dm-success-text: #ffffff;
21181
21618
  --dm-success-hover-text: #ffffff;
21182
21619
  --dm-danger: #c0432f;
@@ -21293,7 +21730,7 @@ code {
21293
21730
  --dm-primary-text: #ffffff;
21294
21731
  --dm-primary-hover-text: #ffffff;
21295
21732
  --dm-focus-ring: 0 0 0 3px rgba(42, 129, 120, 0.35);
21296
- --dm-border-focus: #2a8178;
21733
+ --dm-border-focus: #66c2b8;
21297
21734
  --dm-secondary: #5f6f7a;
21298
21735
  --dm-secondary-hover: #52606b;
21299
21736
  --dm-secondary-active: #46535d;
@@ -21314,11 +21751,11 @@ code {
21314
21751
  --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 60%);
21315
21752
  --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 75%);
21316
21753
 
21317
- --dm-success: #2e8b50;
21318
- --dm-success-hover: #287d49;
21319
- --dm-success-active: #226b3f;
21320
- --dm-success-light: rgba(46, 139, 80, 0.15);
21321
- --dm-success-dark: #1c5733;
21754
+ --dm-success: #287c47;
21755
+ --dm-success-hover: #236e3e;
21756
+ --dm-success-active: #1e5f35;
21757
+ --dm-success-light: rgba(40, 124, 71, 0.15);
21758
+ --dm-success-dark: #164627;
21322
21759
  --dm-success-text: #ffffff;
21323
21760
  --dm-success-hover-text: #ffffff;
21324
21761
  --dm-danger: #c0432f;
@@ -21397,7 +21834,7 @@ code {
21397
21834
  --dm-surface-overlay: #ffffff;
21398
21835
  --dm-text: #1f2733;
21399
21836
  --dm-text-secondary: #5a6677;
21400
- --dm-text-muted: #8893a3;
21837
+ --dm-text-muted: #687486;
21401
21838
  --dm-text-disabled: #aab2bd;
21402
21839
  --dm-text-inverse: #ffffff;
21403
21840
  --dm-border: #e4e8ef;
@@ -21456,11 +21893,11 @@ code {
21456
21893
  --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 25%);
21457
21894
  --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 40%);
21458
21895
 
21459
- --dm-success: #2e8b50;
21460
- --dm-success-hover: #287d49;
21461
- --dm-success-active: #226b3f;
21896
+ --dm-success: #287c47;
21897
+ --dm-success-hover: #236e3e;
21898
+ --dm-success-active: #1e5f35;
21462
21899
  --dm-success-light: #e3f3e8;
21463
- --dm-success-dark: #1c5733;
21900
+ --dm-success-dark: #164627;
21464
21901
  --dm-success-text: #ffffff;
21465
21902
  --dm-success-hover-text: #ffffff;
21466
21903
  --dm-danger: #c0432f;
@@ -21539,7 +21976,7 @@ code {
21539
21976
  --dm-surface-overlay: #ffffff;
21540
21977
  --dm-text: #1f2733;
21541
21978
  --dm-text-secondary: #5a6677;
21542
- --dm-text-muted: #8893a3;
21979
+ --dm-text-muted: #687486;
21543
21980
  --dm-text-disabled: #aab2bd;
21544
21981
  --dm-text-inverse: #ffffff;
21545
21982
  --dm-border: #e4e8ef;
@@ -21596,11 +22033,11 @@ code {
21596
22033
  --dm-accent-3: #455a64;
21597
22034
  --dm-accent-4: #263238;
21598
22035
 
21599
- --dm-success: #2e8b50;
21600
- --dm-success-hover: #287d49;
21601
- --dm-success-active: #226b3f;
22036
+ --dm-success: #287c47;
22037
+ --dm-success-hover: #236e3e;
22038
+ --dm-success-active: #1e5f35;
21602
22039
  --dm-success-light: #e3f3e8;
21603
- --dm-success-dark: #1c5733;
22040
+ --dm-success-dark: #164627;
21604
22041
  --dm-success-text: #ffffff;
21605
22042
  --dm-success-hover-text: #ffffff;
21606
22043
  --dm-danger: #c0432f;
@@ -21679,7 +22116,7 @@ code {
21679
22116
  --dm-surface-overlay: #ffffff;
21680
22117
  --dm-text: #1f2733;
21681
22118
  --dm-text-secondary: #5a6677;
21682
- --dm-text-muted: #8893a3;
22119
+ --dm-text-muted: #687486;
21683
22120
  --dm-text-disabled: #aab2bd;
21684
22121
  --dm-text-inverse: #ffffff;
21685
22122
  --dm-border: #e4e8ef;
@@ -21738,11 +22175,11 @@ code {
21738
22175
  --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 25%);
21739
22176
  --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 40%);
21740
22177
 
21741
- --dm-success: #2e8b50;
21742
- --dm-success-hover: #287d49;
21743
- --dm-success-active: #226b3f;
22178
+ --dm-success: #287c47;
22179
+ --dm-success-hover: #236e3e;
22180
+ --dm-success-active: #1e5f35;
21744
22181
  --dm-success-light: #e3f3e8;
21745
- --dm-success-dark: #1c5733;
22182
+ --dm-success-dark: #164627;
21746
22183
  --dm-success-text: #ffffff;
21747
22184
  --dm-success-hover-text: #ffffff;
21748
22185
  --dm-danger: #c0432f;
@@ -21859,7 +22296,7 @@ code {
21859
22296
  --dm-primary-text: #ffffff;
21860
22297
  --dm-primary-hover-text: #ffffff;
21861
22298
  --dm-focus-ring: 0 0 0 3px rgba(59, 118, 188, 0.35);
21862
- --dm-border-focus: #3b76bc;
22299
+ --dm-border-focus: #7fb0e0;
21863
22300
  --dm-secondary: #5f6f7a;
21864
22301
  --dm-secondary-hover: #52606b;
21865
22302
  --dm-secondary-active: #46535d;
@@ -21880,11 +22317,11 @@ code {
21880
22317
  --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 50%);
21881
22318
  --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 65%);
21882
22319
 
21883
- --dm-success: #2e8b50;
21884
- --dm-success-hover: #287d49;
21885
- --dm-success-active: #226b3f;
21886
- --dm-success-light: rgba(46, 139, 80, 0.15);
21887
- --dm-success-dark: #1c5733;
22320
+ --dm-success: #287c47;
22321
+ --dm-success-hover: #236e3e;
22322
+ --dm-success-active: #1e5f35;
22323
+ --dm-success-light: rgba(40, 124, 71, 0.15);
22324
+ --dm-success-dark: #164627;
21888
22325
  --dm-success-text: #ffffff;
21889
22326
  --dm-success-hover-text: #ffffff;
21890
22327
  --dm-danger: #c0432f;
@@ -22001,7 +22438,7 @@ code {
22001
22438
  --dm-primary-text: #ffffff;
22002
22439
  --dm-primary-hover-text: #ffffff;
22003
22440
  --dm-focus-ring: 0 0 0 3px rgba(91, 99, 168, 0.35);
22004
- --dm-border-focus: #5b63a8;
22441
+ --dm-border-focus: #9aa0d4;
22005
22442
  --dm-secondary: #5f6f7a;
22006
22443
  --dm-secondary-hover: #52606b;
22007
22444
  --dm-secondary-active: #46535d;
@@ -22022,11 +22459,11 @@ code {
22022
22459
  --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 50%);
22023
22460
  --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 65%);
22024
22461
 
22025
- --dm-success: #2e8b50;
22026
- --dm-success-hover: #287d49;
22027
- --dm-success-active: #226b3f;
22028
- --dm-success-light: rgba(46, 139, 80, 0.15);
22029
- --dm-success-dark: #1c5733;
22462
+ --dm-success: #287c47;
22463
+ --dm-success-hover: #236e3e;
22464
+ --dm-success-active: #1e5f35;
22465
+ --dm-success-light: rgba(40, 124, 71, 0.15);
22466
+ --dm-success-dark: #164627;
22030
22467
  --dm-success-text: #ffffff;
22031
22468
  --dm-success-hover-text: #ffffff;
22032
22469
  --dm-danger: #c0432f;
@@ -22143,7 +22580,7 @@ code {
22143
22580
  --dm-primary-text: #ffffff;
22144
22581
  --dm-primary-hover-text: #ffffff;
22145
22582
  --dm-focus-ring: 0 0 0 3px rgba(42, 129, 120, 0.35);
22146
- --dm-border-focus: #2a8178;
22583
+ --dm-border-focus: #66c2b8;
22147
22584
  --dm-secondary: #5f6f7a;
22148
22585
  --dm-secondary-hover: #52606b;
22149
22586
  --dm-secondary-active: #46535d;
@@ -22164,11 +22601,11 @@ code {
22164
22601
  --dm-link: color-mix(in oklab, var(--dm-primary), var(--dm-text) 50%);
22165
22602
  --dm-link-hover: color-mix(in oklab, var(--dm-primary), var(--dm-text) 65%);
22166
22603
 
22167
- --dm-success: #2e8b50;
22168
- --dm-success-hover: #287d49;
22169
- --dm-success-active: #226b3f;
22170
- --dm-success-light: rgba(46, 139, 80, 0.15);
22171
- --dm-success-dark: #1c5733;
22604
+ --dm-success: #287c47;
22605
+ --dm-success-hover: #236e3e;
22606
+ --dm-success-active: #1e5f35;
22607
+ --dm-success-light: rgba(40, 124, 71, 0.15);
22608
+ --dm-success-dark: #164627;
22172
22609
  --dm-success-text: #ffffff;
22173
22610
  --dm-success-hover-text: #ffffff;
22174
22611
  --dm-danger: #c0432f;