domma-js 0.45.0 → 0.46.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 (16) hide show
  1. package/package.json +1 -1
  2. package/public/dist/bundles/domma-complete.css +80 -46
  3. package/public/dist/bundles/domma-data-focused.css +80 -46
  4. package/public/dist/bundles/domma-essentials.css +80 -46
  5. package/public/dist/bundles/domma-full.css +80 -46
  6. package/public/dist/bundles/domma-minimal.css +8 -8
  7. package/public/dist/domma-flags.esm.js +3 -3
  8. package/public/dist/domma-flags.min.js +3 -3
  9. package/public/dist/domma-syntax.min.js +3 -3
  10. package/public/dist/domma.css +3 -3
  11. package/public/dist/domma.esm.js +5 -5
  12. package/public/dist/domma.min.js +5 -5
  13. package/public/dist/elements.css +69 -35
  14. package/public/dist/grid.css +3 -3
  15. package/public/dist/syntax.css +3 -3
  16. package/public/dist/themes/domma-themes.css +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "domma-js",
3
- "version": "0.45.0",
3
+ "version": "0.46.0",
4
4
  "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
5
5
  "main": "public/dist/domma.min.js",
6
6
  "module": "public/dist/domma.esm.js",
package/public/dist/bundles/domma-complete.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*!
2
- * Domma Complete CSS Bundle v0.45.0
2
+ * Domma Complete CSS Bundle v0.46.0
3
3
  * Dynamic Object Manipulation & Modeling API
4
4
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5
- * Built: 2026-09-27T17:59:46.994Z
5
+ * Built: 2026-09-27T20:30:22.686Z
6
6
  */
7
7
 
8
8
  /* ============================================
@@ -11,11 +11,11 @@
11
11
  ============================================ */
12
12
 
13
13
  /*!
14
- * Domma Core CSS v0.45.0
14
+ * Domma Core CSS v0.46.0
15
15
  * Dynamic Object Manipulation & Modeling API
16
16
  * (c) 2026 Darryl Waterhouse & DCBW-IT
17
- * Built: 2026-09-27T17:59:46.829Z
18
- * Commit: 224c5a0
17
+ * Built: 2026-09-27T20:30:22.523Z
18
+ * Commit: 2e6a350
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.45.0
4838
+ * Domma Grid CSS v0.46.0
4839
4839
  * Dynamic Object Manipulation & Modeling API
4840
4840
  * (c) 2026 Darryl Waterhouse & DCBW-IT
4841
- * Built: 2026-09-27T17:59:46.833Z
4842
- * Commit: 224c5a0
4841
+ * Built: 2026-09-27T20:30:22.527Z
4842
+ * Commit: 2e6a350
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.45.0
5463
+ * Domma Elements CSS v0.46.0
5464
5464
  * Dynamic Object Manipulation & Modeling API
5465
5465
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5466
- * Built: 2026-09-27T17:59:46.838Z
5467
- * Commit: 224c5a0
5466
+ * Built: 2026-09-27T20:30:22.531Z
5467
+ * Commit: 2e6a350
5468
5468
  */
5469
5469
 
5470
5470
  /**
@@ -6489,55 +6489,71 @@ textarea:not([class])::placeholder {
6489
6489
  min-width: 0;
6490
6490
  }
6491
6491
 
6492
- /* Icon-based input group (icon positioned inside input) */
6492
+ /* Addon input group (formConfig.prefix / suffix, E.inputGroup): an icon or
6493
+ * short text joined to the start or end of an input, Bootstrap-style. The
6494
+ * addon and the input share one border and one rounded outline; the addon is
6495
+ * as wide as what it holds, so "£", "kg" and "https://" all fit. */
6493
6496
  .input-group-icon {
6494
- position: relative;
6497
+ display: flex;
6498
+ align-items: stretch;
6495
6499
  width: 100%;
6500
+ min-width: 0;
6496
6501
  }
6497
6502
 
6498
6503
  .input-group-icon > .input-group-addon {
6499
- position: absolute;
6500
- top: 0;
6501
- bottom: 0;
6502
6504
  display: flex;
6505
+ flex: none;
6503
6506
  align-items: center;
6504
6507
  justify-content: center;
6508
+ gap: var(--dm-space-1);
6509
+ padding: 0 var(--dm-space-3);
6510
+ font-size: var(--dm-font-size-base);
6511
+ line-height: 1;
6512
+ white-space: nowrap;
6505
6513
  pointer-events: none;
6506
- z-index: 1;
6514
+ /* Full text colour: muted text on the tinted addon fell below 4.5:1 on the
6515
+ * mid-tone admin themes (validate:contrast). */
6507
6516
  color: var(--dm-text);
6508
- background-color: var(--dm-hover-bg);
6509
- padding: 0 var(--dm-space-3);
6517
+ background-color: color-mix(in srgb, var(--dm-text) 6%, var(--dm-surface, var(--dm-white)));
6518
+ border: 1px solid var(--dm-border, var(--dm-gray-300));
6519
+ transition: border-color var(--dm-transition-fast), color var(--dm-transition-fast);
6520
+ }
6521
+
6522
+ .input-group-icon > .input-group-addon [data-icon],
6523
+ .input-group-icon > .input-group-addon svg {
6524
+ width: 1.15em;
6525
+ height: 1.15em;
6510
6526
  }
6511
6527
 
6512
6528
  .input-group-icon > .input-group-addon-left {
6513
- left: 0;
6514
- border-right: 1px solid var(--dm-border, var(--dm-gray-300));
6515
- border-top-left-radius: var(--dm-radius-md);
6516
- border-bottom-left-radius: var(--dm-radius-md);
6529
+ border-right: 0;
6530
+ border-radius: var(--dm-radius-md) 0 0 var(--dm-radius-md);
6517
6531
  }
6518
6532
 
6519
6533
  .input-group-icon > .input-group-addon-right {
6520
- right: 0;
6521
- border-left: 1px solid var(--dm-border, var(--dm-gray-300));
6522
- border-top-right-radius: var(--dm-radius-md);
6523
- border-bottom-right-radius: var(--dm-radius-md);
6534
+ border-left: 0;
6535
+ border-radius: 0 var(--dm-radius-md) var(--dm-radius-md) 0;
6524
6536
  }
6525
6537
 
6526
- /* Dark theme variants */
6527
- [data-mode="dark"] .input-group-icon > .input-group-addon {
6528
- color: var(--dm-text-disabled);
6529
- background-color: var(--dm-surface);
6530
- border-color: var(--dm-text-secondary);
6538
+ .input-group-icon > .form-input,
6539
+ .input-group-icon > .form-select,
6540
+ .input-group-icon > .form-textarea,
6541
+ .input-group-icon > input,
6542
+ .input-group-icon > select,
6543
+ .input-group-icon > textarea {
6544
+ flex: 1 1 auto;
6545
+ width: 1%;
6546
+ min-width: 0;
6531
6547
  }
6532
6548
 
6533
- /* Adjust input padding when icon is present */
6534
6549
  .input-group-icon.has-addon-left > .form-input,
6535
6550
  .input-group-icon.has-addon-left > .form-select,
6536
6551
  .input-group-icon.has-addon-left > .form-textarea,
6537
6552
  .input-group-icon.has-addon-left > input,
6538
6553
  .input-group-icon.has-addon-left > select,
6539
6554
  .input-group-icon.has-addon-left > textarea {
6540
- padding-left: 3.5rem;
6555
+ border-top-left-radius: 0;
6556
+ border-bottom-left-radius: 0;
6541
6557
  }
6542
6558
 
6543
6559
  .input-group-icon.has-addon-right > .form-input,
@@ -6546,17 +6562,35 @@ textarea:not([class])::placeholder {
6546
6562
  .input-group-icon.has-addon-right > input,
6547
6563
  .input-group-icon.has-addon-right > select,
6548
6564
  .input-group-icon.has-addon-right > textarea {
6549
- padding-right: 3.5rem;
6565
+ border-top-right-radius: 0;
6566
+ border-bottom-right-radius: 0;
6567
+ }
6568
+
6569
+ /* The addon follows the input's own focus and error states, so the group
6570
+ * reads as one control: the focus ring goes round the whole group rather than
6571
+ * the input alone. */
6572
+ .input-group-icon:focus-within {
6573
+ border-radius: var(--dm-radius-md);
6574
+ box-shadow: 0 0 0 3px var(--dm-focus-ring);
6575
+ }
6576
+
6577
+ .input-group-icon > .form-input:focus,
6578
+ .input-group-icon > .form-select:focus,
6579
+ .input-group-icon > .form-textarea:focus,
6580
+ .input-group-icon > input:focus,
6581
+ .input-group-icon > select:focus,
6582
+ .input-group-icon > textarea:focus {
6583
+ box-shadow: none;
6550
6584
  }
6551
6585
 
6552
- .input-group-icon.has-addon-left.has-addon-right > .form-input,
6553
- .input-group-icon.has-addon-left.has-addon-right > .form-select,
6554
- .input-group-icon.has-addon-left.has-addon-right > .form-textarea,
6555
- .input-group-icon.has-addon-left.has-addon-right > input,
6556
- .input-group-icon.has-addon-left.has-addon-right > select,
6557
- .input-group-icon.has-addon-left.has-addon-right > textarea {
6558
- padding-left: 3.5rem;
6559
- padding-right: 3.5rem;
6586
+ .input-group-icon:focus-within > .input-group-addon {
6587
+ border-color: var(--dm-primary);
6588
+ color: var(--dm-primary);
6589
+ }
6590
+
6591
+ .input-group-icon:has(> .error) > .input-group-addon,
6592
+ .has-error .input-group-icon > .input-group-addon {
6593
+ border-color: var(--dm-danger);
6560
6594
  }
6561
6595
 
6562
6596
  /* Prepend/Append style (addon outside input) */
@@ -14117,11 +14151,11 @@ code {
14117
14151
  ============================================ */
14118
14152
 
14119
14153
  /*!
14120
- * Domma Themes v0.45.0
14154
+ * Domma Themes v0.46.0
14121
14155
  * Dynamic Object Manipulation & Modeling API
14122
14156
  * (c) 2026 Darryl Waterhouse & DCBW-IT
14123
- * Built: 2026-09-27T17:59:46.816Z
14124
- * Commit: 224c5a0
14157
+ * Built: 2026-09-27T20:30:22.510Z
14158
+ * Commit: 2e6a350
14125
14159
  */
14126
14160
 
14127
14161
  /**
package/public/dist/bundles/domma-data-focused.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*!
2
- * Domma Data-Focused CSS Bundle v0.45.0
2
+ * Domma Data-Focused CSS Bundle v0.46.0
3
3
  * Dynamic Object Manipulation & Modeling API
4
4
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5
- * Built: 2026-09-27T17:59:46.991Z
5
+ * Built: 2026-09-27T20:30:22.683Z
6
6
  */
7
7
 
8
8
  /* ============================================
@@ -11,11 +11,11 @@
11
11
  ============================================ */
12
12
 
13
13
  /*!
14
- * Domma Core CSS v0.45.0
14
+ * Domma Core CSS v0.46.0
15
15
  * Dynamic Object Manipulation & Modeling API
16
16
  * (c) 2026 Darryl Waterhouse & DCBW-IT
17
- * Built: 2026-09-27T17:59:46.829Z
18
- * Commit: 224c5a0
17
+ * Built: 2026-09-27T20:30:22.523Z
18
+ * Commit: 2e6a350
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.45.0
4838
+ * Domma Grid CSS v0.46.0
4839
4839
  * Dynamic Object Manipulation & Modeling API
4840
4840
  * (c) 2026 Darryl Waterhouse & DCBW-IT
4841
- * Built: 2026-09-27T17:59:46.833Z
4842
- * Commit: 224c5a0
4841
+ * Built: 2026-09-27T20:30:22.527Z
4842
+ * Commit: 2e6a350
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.45.0
5463
+ * Domma Elements CSS v0.46.0
5464
5464
  * Dynamic Object Manipulation & Modeling API
5465
5465
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5466
- * Built: 2026-09-27T17:59:46.838Z
5467
- * Commit: 224c5a0
5466
+ * Built: 2026-09-27T20:30:22.531Z
5467
+ * Commit: 2e6a350
5468
5468
  */
5469
5469
 
5470
5470
  /**
@@ -6489,55 +6489,71 @@ textarea:not([class])::placeholder {
6489
6489
  min-width: 0;
6490
6490
  }
6491
6491
 
6492
- /* Icon-based input group (icon positioned inside input) */
6492
+ /* Addon input group (formConfig.prefix / suffix, E.inputGroup): an icon or
6493
+ * short text joined to the start or end of an input, Bootstrap-style. The
6494
+ * addon and the input share one border and one rounded outline; the addon is
6495
+ * as wide as what it holds, so "£", "kg" and "https://" all fit. */
6493
6496
  .input-group-icon {
6494
- position: relative;
6497
+ display: flex;
6498
+ align-items: stretch;
6495
6499
  width: 100%;
6500
+ min-width: 0;
6496
6501
  }
6497
6502
 
6498
6503
  .input-group-icon > .input-group-addon {
6499
- position: absolute;
6500
- top: 0;
6501
- bottom: 0;
6502
6504
  display: flex;
6505
+ flex: none;
6503
6506
  align-items: center;
6504
6507
  justify-content: center;
6508
+ gap: var(--dm-space-1);
6509
+ padding: 0 var(--dm-space-3);
6510
+ font-size: var(--dm-font-size-base);
6511
+ line-height: 1;
6512
+ white-space: nowrap;
6505
6513
  pointer-events: none;
6506
- z-index: 1;
6514
+ /* Full text colour: muted text on the tinted addon fell below 4.5:1 on the
6515
+ * mid-tone admin themes (validate:contrast). */
6507
6516
  color: var(--dm-text);
6508
- background-color: var(--dm-hover-bg);
6509
- padding: 0 var(--dm-space-3);
6517
+ background-color: color-mix(in srgb, var(--dm-text) 6%, var(--dm-surface, var(--dm-white)));
6518
+ border: 1px solid var(--dm-border, var(--dm-gray-300));
6519
+ transition: border-color var(--dm-transition-fast), color var(--dm-transition-fast);
6520
+ }
6521
+
6522
+ .input-group-icon > .input-group-addon [data-icon],
6523
+ .input-group-icon > .input-group-addon svg {
6524
+ width: 1.15em;
6525
+ height: 1.15em;
6510
6526
  }
6511
6527
 
6512
6528
  .input-group-icon > .input-group-addon-left {
6513
- left: 0;
6514
- border-right: 1px solid var(--dm-border, var(--dm-gray-300));
6515
- border-top-left-radius: var(--dm-radius-md);
6516
- border-bottom-left-radius: var(--dm-radius-md);
6529
+ border-right: 0;
6530
+ border-radius: var(--dm-radius-md) 0 0 var(--dm-radius-md);
6517
6531
  }
6518
6532
 
6519
6533
  .input-group-icon > .input-group-addon-right {
6520
- right: 0;
6521
- border-left: 1px solid var(--dm-border, var(--dm-gray-300));
6522
- border-top-right-radius: var(--dm-radius-md);
6523
- border-bottom-right-radius: var(--dm-radius-md);
6534
+ border-left: 0;
6535
+ border-radius: 0 var(--dm-radius-md) var(--dm-radius-md) 0;
6524
6536
  }
6525
6537
 
6526
- /* Dark theme variants */
6527
- [data-mode="dark"] .input-group-icon > .input-group-addon {
6528
- color: var(--dm-text-disabled);
6529
- background-color: var(--dm-surface);
6530
- border-color: var(--dm-text-secondary);
6538
+ .input-group-icon > .form-input,
6539
+ .input-group-icon > .form-select,
6540
+ .input-group-icon > .form-textarea,
6541
+ .input-group-icon > input,
6542
+ .input-group-icon > select,
6543
+ .input-group-icon > textarea {
6544
+ flex: 1 1 auto;
6545
+ width: 1%;
6546
+ min-width: 0;
6531
6547
  }
6532
6548
 
6533
- /* Adjust input padding when icon is present */
6534
6549
  .input-group-icon.has-addon-left > .form-input,
6535
6550
  .input-group-icon.has-addon-left > .form-select,
6536
6551
  .input-group-icon.has-addon-left > .form-textarea,
6537
6552
  .input-group-icon.has-addon-left > input,
6538
6553
  .input-group-icon.has-addon-left > select,
6539
6554
  .input-group-icon.has-addon-left > textarea {
6540
- padding-left: 3.5rem;
6555
+ border-top-left-radius: 0;
6556
+ border-bottom-left-radius: 0;
6541
6557
  }
6542
6558
 
6543
6559
  .input-group-icon.has-addon-right > .form-input,
@@ -6546,17 +6562,35 @@ textarea:not([class])::placeholder {
6546
6562
  .input-group-icon.has-addon-right > input,
6547
6563
  .input-group-icon.has-addon-right > select,
6548
6564
  .input-group-icon.has-addon-right > textarea {
6549
- padding-right: 3.5rem;
6565
+ border-top-right-radius: 0;
6566
+ border-bottom-right-radius: 0;
6567
+ }
6568
+
6569
+ /* The addon follows the input's own focus and error states, so the group
6570
+ * reads as one control: the focus ring goes round the whole group rather than
6571
+ * the input alone. */
6572
+ .input-group-icon:focus-within {
6573
+ border-radius: var(--dm-radius-md);
6574
+ box-shadow: 0 0 0 3px var(--dm-focus-ring);
6575
+ }
6576
+
6577
+ .input-group-icon > .form-input:focus,
6578
+ .input-group-icon > .form-select:focus,
6579
+ .input-group-icon > .form-textarea:focus,
6580
+ .input-group-icon > input:focus,
6581
+ .input-group-icon > select:focus,
6582
+ .input-group-icon > textarea:focus {
6583
+ box-shadow: none;
6550
6584
  }
6551
6585
 
6552
- .input-group-icon.has-addon-left.has-addon-right > .form-input,
6553
- .input-group-icon.has-addon-left.has-addon-right > .form-select,
6554
- .input-group-icon.has-addon-left.has-addon-right > .form-textarea,
6555
- .input-group-icon.has-addon-left.has-addon-right > input,
6556
- .input-group-icon.has-addon-left.has-addon-right > select,
6557
- .input-group-icon.has-addon-left.has-addon-right > textarea {
6558
- padding-left: 3.5rem;
6559
- padding-right: 3.5rem;
6586
+ .input-group-icon:focus-within > .input-group-addon {
6587
+ border-color: var(--dm-primary);
6588
+ color: var(--dm-primary);
6589
+ }
6590
+
6591
+ .input-group-icon:has(> .error) > .input-group-addon,
6592
+ .has-error .input-group-icon > .input-group-addon {
6593
+ border-color: var(--dm-danger);
6560
6594
  }
6561
6595
 
6562
6596
  /* Prepend/Append style (addon outside input) */
@@ -14117,11 +14151,11 @@ code {
14117
14151
  ============================================ */
14118
14152
 
14119
14153
  /*!
14120
- * Domma Themes v0.45.0
14154
+ * Domma Themes v0.46.0
14121
14155
  * Dynamic Object Manipulation & Modeling API
14122
14156
  * (c) 2026 Darryl Waterhouse & DCBW-IT
14123
- * Built: 2026-09-27T17:59:46.816Z
14124
- * Commit: 224c5a0
14157
+ * Built: 2026-09-27T20:30:22.510Z
14158
+ * Commit: 2e6a350
14125
14159
  */
14126
14160
 
14127
14161
  /**
package/public/dist/bundles/domma-essentials.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /*!
2
- * Domma Essentials CSS Bundle v0.45.0
2
+ * Domma Essentials CSS Bundle v0.46.0
3
3
  * Dynamic Object Manipulation & Modeling API
4
4
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5
- * Built: 2026-09-27T17:59:46.982Z
5
+ * Built: 2026-09-27T20:30:22.675Z
6
6
  */
7
7
 
8
8
  /* ============================================
@@ -11,11 +11,11 @@
11
11
  ============================================ */
12
12
 
13
13
  /*!
14
- * Domma Core CSS v0.45.0
14
+ * Domma Core CSS v0.46.0
15
15
  * Dynamic Object Manipulation & Modeling API
16
16
  * (c) 2026 Darryl Waterhouse & DCBW-IT
17
- * Built: 2026-09-27T17:59:46.829Z
18
- * Commit: 224c5a0
17
+ * Built: 2026-09-27T20:30:22.523Z
18
+ * Commit: 2e6a350
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.45.0
4838
+ * Domma Grid CSS v0.46.0
4839
4839
  * Dynamic Object Manipulation & Modeling API
4840
4840
  * (c) 2026 Darryl Waterhouse & DCBW-IT
4841
- * Built: 2026-09-27T17:59:46.833Z
4842
- * Commit: 224c5a0
4841
+ * Built: 2026-09-27T20:30:22.527Z
4842
+ * Commit: 2e6a350
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.45.0
5463
+ * Domma Elements CSS v0.46.0
5464
5464
  * Dynamic Object Manipulation & Modeling API
5465
5465
  * (c) 2026 Darryl Waterhouse & DCBW-IT
5466
- * Built: 2026-09-27T17:59:46.838Z
5467
- * Commit: 224c5a0
5466
+ * Built: 2026-09-27T20:30:22.531Z
5467
+ * Commit: 2e6a350
5468
5468
  */
5469
5469
 
5470
5470
  /**
@@ -6489,55 +6489,71 @@ textarea:not([class])::placeholder {
6489
6489
  min-width: 0;
6490
6490
  }
6491
6491
 
6492
- /* Icon-based input group (icon positioned inside input) */
6492
+ /* Addon input group (formConfig.prefix / suffix, E.inputGroup): an icon or
6493
+ * short text joined to the start or end of an input, Bootstrap-style. The
6494
+ * addon and the input share one border and one rounded outline; the addon is
6495
+ * as wide as what it holds, so "£", "kg" and "https://" all fit. */
6493
6496
  .input-group-icon {
6494
- position: relative;
6497
+ display: flex;
6498
+ align-items: stretch;
6495
6499
  width: 100%;
6500
+ min-width: 0;
6496
6501
  }
6497
6502
 
6498
6503
  .input-group-icon > .input-group-addon {
6499
- position: absolute;
6500
- top: 0;
6501
- bottom: 0;
6502
6504
  display: flex;
6505
+ flex: none;
6503
6506
  align-items: center;
6504
6507
  justify-content: center;
6508
+ gap: var(--dm-space-1);
6509
+ padding: 0 var(--dm-space-3);
6510
+ font-size: var(--dm-font-size-base);
6511
+ line-height: 1;
6512
+ white-space: nowrap;
6505
6513
  pointer-events: none;
6506
- z-index: 1;
6514
+ /* Full text colour: muted text on the tinted addon fell below 4.5:1 on the
6515
+ * mid-tone admin themes (validate:contrast). */
6507
6516
  color: var(--dm-text);
6508
- background-color: var(--dm-hover-bg);
6509
- padding: 0 var(--dm-space-3);
6517
+ background-color: color-mix(in srgb, var(--dm-text) 6%, var(--dm-surface, var(--dm-white)));
6518
+ border: 1px solid var(--dm-border, var(--dm-gray-300));
6519
+ transition: border-color var(--dm-transition-fast), color var(--dm-transition-fast);
6520
+ }
6521
+
6522
+ .input-group-icon > .input-group-addon [data-icon],
6523
+ .input-group-icon > .input-group-addon svg {
6524
+ width: 1.15em;
6525
+ height: 1.15em;
6510
6526
  }
6511
6527
 
6512
6528
  .input-group-icon > .input-group-addon-left {
6513
- left: 0;
6514
- border-right: 1px solid var(--dm-border, var(--dm-gray-300));
6515
- border-top-left-radius: var(--dm-radius-md);
6516
- border-bottom-left-radius: var(--dm-radius-md);
6529
+ border-right: 0;
6530
+ border-radius: var(--dm-radius-md) 0 0 var(--dm-radius-md);
6517
6531
  }
6518
6532
 
6519
6533
  .input-group-icon > .input-group-addon-right {
6520
- right: 0;
6521
- border-left: 1px solid var(--dm-border, var(--dm-gray-300));
6522
- border-top-right-radius: var(--dm-radius-md);
6523
- border-bottom-right-radius: var(--dm-radius-md);
6534
+ border-left: 0;
6535
+ border-radius: 0 var(--dm-radius-md) var(--dm-radius-md) 0;
6524
6536
  }
6525
6537
 
6526
- /* Dark theme variants */
6527
- [data-mode="dark"] .input-group-icon > .input-group-addon {
6528
- color: var(--dm-text-disabled);
6529
- background-color: var(--dm-surface);
6530
- border-color: var(--dm-text-secondary);
6538
+ .input-group-icon > .form-input,
6539
+ .input-group-icon > .form-select,
6540
+ .input-group-icon > .form-textarea,
6541
+ .input-group-icon > input,
6542
+ .input-group-icon > select,
6543
+ .input-group-icon > textarea {
6544
+ flex: 1 1 auto;
6545
+ width: 1%;
6546
+ min-width: 0;
6531
6547
  }
6532
6548
 
6533
- /* Adjust input padding when icon is present */
6534
6549
  .input-group-icon.has-addon-left > .form-input,
6535
6550
  .input-group-icon.has-addon-left > .form-select,
6536
6551
  .input-group-icon.has-addon-left > .form-textarea,
6537
6552
  .input-group-icon.has-addon-left > input,
6538
6553
  .input-group-icon.has-addon-left > select,
6539
6554
  .input-group-icon.has-addon-left > textarea {
6540
- padding-left: 3.5rem;
6555
+ border-top-left-radius: 0;
6556
+ border-bottom-left-radius: 0;
6541
6557
  }
6542
6558
 
6543
6559
  .input-group-icon.has-addon-right > .form-input,
@@ -6546,17 +6562,35 @@ textarea:not([class])::placeholder {
6546
6562
  .input-group-icon.has-addon-right > input,
6547
6563
  .input-group-icon.has-addon-right > select,
6548
6564
  .input-group-icon.has-addon-right > textarea {
6549
- padding-right: 3.5rem;
6565
+ border-top-right-radius: 0;
6566
+ border-bottom-right-radius: 0;
6567
+ }
6568
+
6569
+ /* The addon follows the input's own focus and error states, so the group
6570
+ * reads as one control: the focus ring goes round the whole group rather than
6571
+ * the input alone. */
6572
+ .input-group-icon:focus-within {
6573
+ border-radius: var(--dm-radius-md);
6574
+ box-shadow: 0 0 0 3px var(--dm-focus-ring);
6575
+ }
6576
+
6577
+ .input-group-icon > .form-input:focus,
6578
+ .input-group-icon > .form-select:focus,
6579
+ .input-group-icon > .form-textarea:focus,
6580
+ .input-group-icon > input:focus,
6581
+ .input-group-icon > select:focus,
6582
+ .input-group-icon > textarea:focus {
6583
+ box-shadow: none;
6550
6584
  }
6551
6585
 
6552
- .input-group-icon.has-addon-left.has-addon-right > .form-input,
6553
- .input-group-icon.has-addon-left.has-addon-right > .form-select,
6554
- .input-group-icon.has-addon-left.has-addon-right > .form-textarea,
6555
- .input-group-icon.has-addon-left.has-addon-right > input,
6556
- .input-group-icon.has-addon-left.has-addon-right > select,
6557
- .input-group-icon.has-addon-left.has-addon-right > textarea {
6558
- padding-left: 3.5rem;
6559
- padding-right: 3.5rem;
6586
+ .input-group-icon:focus-within > .input-group-addon {
6587
+ border-color: var(--dm-primary);
6588
+ color: var(--dm-primary);
6589
+ }
6590
+
6591
+ .input-group-icon:has(> .error) > .input-group-addon,
6592
+ .has-error .input-group-icon > .input-group-addon {
6593
+ border-color: var(--dm-danger);
6560
6594
  }
6561
6595
 
6562
6596
  /* Prepend/Append style (addon outside input) */
@@ -14117,11 +14151,11 @@ code {
14117
14151
  ============================================ */
14118
14152
 
14119
14153
  /*!
14120
- * Domma Themes v0.45.0
14154
+ * Domma Themes v0.46.0
14121
14155
  * Dynamic Object Manipulation & Modeling API
14122
14156
  * (c) 2026 Darryl Waterhouse & DCBW-IT
14123
- * Built: 2026-09-27T17:59:46.816Z
14124
- * Commit: 224c5a0
14157
+ * Built: 2026-09-27T20:30:22.510Z
14158
+ * Commit: 2e6a350
14125
14159
  */
14126
14160
 
14127
14161
  /**