domma-js 0.3.0-a → 0.3.1-alpha

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.
package/README.md CHANGED
@@ -18,6 +18,47 @@ modern UI components in one cohesive package.
18
18
 
19
19
  ## Installation
20
20
 
21
+ ### Via npm (Recommended)
22
+
23
+ To install Domma-js in your project:
24
+
25
+ ```bash
26
+ npm install domma-js@alpha
27
+ ```
28
+
29
+ Then, import it into your JavaScript:
30
+
31
+ ```javascript
32
+ import Domma, { $, _, M, D } from 'domma-js';
33
+ ```
34
+
35
+ Or use CommonJS:
36
+
37
+ ```javascript
38
+ const Domma = require('domma-js');
39
+ const { $, _, M, D } = Domma;
40
+ ```
41
+
42
+ ### Via jsDelivr CDN
43
+
44
+ For quick integration, you can directly include Domma-js from jsDelivr in your HTML. Always specify the version to
45
+ ensure stability.
46
+
47
+ ```html
48
+ <!-- CSS (include these in your <head>) -->
49
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/domma.css">
50
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/grid.css">
51
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/elements.css">
52
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/themes/domma-themes.css">
53
+
54
+ <!-- JavaScript (include before your closing </body> tag) -->
55
+ <script src="https://cdn.jsdelivr.net/npm/domma-js@0.3.0-a/public/dist/domma.min.js"></script>
56
+ ```
57
+
58
+ ### Local Files (UMD and ES Module)
59
+
60
+ You can also download the distribution files and host them yourself.
61
+
21
62
  **Browser (UMD):**
22
63
 
23
64
  ```html
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "domma-js",
3
- "version": "0.3.0-a",
3
+ "version": "0.3.1-alpha",
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",
@@ -13,6 +13,7 @@
13
13
  "public/dist/elements.css",
14
14
  "public/dist/grid.css",
15
15
  "public/dist/syntax.css",
16
+ "public/dist/themes/",
16
17
  "assets/types/",
17
18
  "LICENSE",
18
19
  "README.md"
@@ -1,8 +1,8 @@
1
1
  /*!
2
- * Domma Complete CSS Bundle v0.3.0a
2
+ * Domma Complete CSS Bundle v0.3.0-alpha.0
3
3
  * Dynamic Object Manipulation & Modeling API
4
- * (c) 2025 Darryl Waterhouse & DCBW-IT
5
- * Built: 2025-12-28T23:38:36.430Z
4
+ * (c) 2026 Darryl Waterhouse & DCBW-IT
5
+ * Built: 2026-01-02T14:32:25.779Z
6
6
  */
7
7
 
8
8
  /* ============================================
@@ -11,11 +11,11 @@
11
11
  ============================================ */
12
12
 
13
13
  /*!
14
- * Domma Core CSS v0.3.0a
14
+ * Domma Core CSS v0.3.0-alpha.0
15
15
  * Dynamic Object Manipulation & Modeling API
16
- * (c) 2025 Darryl Waterhouse & DCBW-IT
17
- * Built: 2025-12-28T23:38:36.947Z
18
- * Commit: 7d9e9e8
16
+ * (c) 2026 Darryl Waterhouse & DCBW-IT
17
+ * Built: 2026-01-02T14:32:25.385Z
18
+ * Commit: bc8e519
19
19
  */
20
20
 
21
21
  /**
@@ -389,11 +389,12 @@ body {
389
389
  a {
390
390
  color: var(--dm-primary);
391
391
  text-decoration: none;
392
+ transition: color 0.2s ease;
392
393
  }
393
394
 
394
395
  a:hover {
395
396
  color: var(--dm-primary-hover);
396
- text-decoration: underline;
397
+ text-decoration: none;
397
398
  }
398
399
 
399
400
  code, pre {
@@ -430,6 +431,12 @@ code, pre {
430
431
  max-width: 1280px;
431
432
  }
432
433
 
434
+ .container-fluid {
435
+ width: 100%;
436
+ padding-left: var(--dm-space-4);
437
+ padding-right: var(--dm-space-4);
438
+ }
439
+
433
440
  /* Display */
434
441
  .block {
435
442
  display: block;
@@ -1396,6 +1403,91 @@ code, pre {
1396
1403
  box-shadow: var(--dm-shadow-xl);
1397
1404
  }
1398
1405
 
1406
+ /* ============================================
1407
+ GLOW UTILITIES
1408
+ ============================================ */
1409
+
1410
+ .glow-sm {
1411
+ text-shadow: var(--dm-glow-sm);
1412
+ transition: text-shadow 0.3s ease;
1413
+ }
1414
+
1415
+ .glow {
1416
+ text-shadow: var(--dm-glow);
1417
+ transition: text-shadow 0.3s ease;
1418
+ }
1419
+
1420
+ .glow-md {
1421
+ text-shadow: var(--dm-glow-md);
1422
+ transition: text-shadow 0.3s ease;
1423
+ }
1424
+
1425
+ .glow-lg {
1426
+ text-shadow: var(--dm-glow-lg);
1427
+ transition: text-shadow 0.3s ease;
1428
+ }
1429
+
1430
+ .glow-xl {
1431
+ text-shadow: var(--dm-glow-xl);
1432
+ transition: text-shadow 0.3s ease;
1433
+ }
1434
+
1435
+ .glow-primary {
1436
+ text-shadow: var(--dm-glow-primary);
1437
+ transition: text-shadow 0.3s ease;
1438
+ }
1439
+
1440
+ .glow-secondary {
1441
+ text-shadow: var(--dm-glow-secondary);
1442
+ transition: text-shadow 0.3s ease;
1443
+ }
1444
+
1445
+ .glow-success {
1446
+ text-shadow: var(--dm-glow-success);
1447
+ transition: text-shadow 0.3s ease;
1448
+ }
1449
+
1450
+ .glow-warning {
1451
+ text-shadow: var(--dm-glow-warning);
1452
+ transition: text-shadow 0.3s ease;
1453
+ }
1454
+
1455
+ .glow-danger {
1456
+ text-shadow: var(--dm-glow-danger);
1457
+ transition: text-shadow 0.3s ease;
1458
+ }
1459
+
1460
+ .glow-info {
1461
+ text-shadow: var(--dm-glow-info);
1462
+ transition: text-shadow 0.3s ease;
1463
+ }
1464
+
1465
+ /* Hover variants */
1466
+ .glow-hover:hover {
1467
+ text-shadow: var(--dm-glow);
1468
+ transition: text-shadow 0.3s ease;
1469
+ }
1470
+
1471
+ .glow-primary-hover:hover {
1472
+ text-shadow: var(--dm-glow-primary);
1473
+ transition: text-shadow 0.3s ease;
1474
+ }
1475
+
1476
+ .glow-success-hover:hover {
1477
+ text-shadow: var(--dm-glow-success);
1478
+ transition: text-shadow 0.3s ease;
1479
+ }
1480
+
1481
+ .glow-warning-hover:hover {
1482
+ text-shadow: var(--dm-glow-warning);
1483
+ transition: text-shadow 0.3s ease;
1484
+ }
1485
+
1486
+ .glow-danger-hover:hover {
1487
+ text-shadow: var(--dm-glow-danger);
1488
+ transition: text-shadow 0.3s ease;
1489
+ }
1490
+
1399
1491
  /* ============================================
1400
1492
  SIZE UTILITIES
1401
1493
  ============================================ */
@@ -2317,6 +2409,22 @@ code, pre {
2317
2409
  --dm-black-t30: rgba(0, 0, 0, 0.3);
2318
2410
  --dm-black-t50: rgba(0, 0, 0, 0.5);
2319
2411
  --dm-black-t70: rgba(0, 0, 0, 0.7);
2412
+
2413
+ /* ================================================
2414
+ GLOW EFFECTS
2415
+ ================================================ */
2416
+ --dm-glow-sm: 0 0 8px rgba(255, 255, 255, 0.3);
2417
+ --dm-glow: 0 0 15px rgba(255, 255, 255, 0.5);
2418
+ --dm-glow-md: 0 0 20px rgba(255, 255, 255, 0.6);
2419
+ --dm-glow-lg: 0 0 30px rgba(255, 255, 255, 0.7);
2420
+ --dm-glow-xl: 0 0 40px rgba(255, 255, 255, 0.8);
2421
+
2422
+ --dm-glow-primary: 0 0 20px rgba(59, 130, 246, 0.6);
2423
+ --dm-glow-secondary: 0 0 20px rgba(139, 92, 246, 0.6);
2424
+ --dm-glow-success: 0 0 20px rgba(34, 197, 94, 0.6);
2425
+ --dm-glow-warning: 0 0 20px rgba(245, 158, 11, 0.6);
2426
+ --dm-glow-danger: 0 0 20px rgba(239, 68, 68, 0.6);
2427
+ --dm-glow-info: 0 0 20px rgba(14, 165, 233, 0.6);
2320
2428
  }
2321
2429
 
2322
2430
 
@@ -2326,11 +2434,11 @@ code, pre {
2326
2434
  ============================================ */
2327
2435
 
2328
2436
  /*!
2329
- * Domma Grid CSS v0.3.0a
2437
+ * Domma Grid CSS v0.3.0-alpha.0
2330
2438
  * Dynamic Object Manipulation & Modeling API
2331
- * (c) 2025 Darryl Waterhouse & DCBW-IT
2332
- * Built: 2025-12-28T23:38:36.954Z
2333
- * Commit: 7d9e9e8
2439
+ * (c) 2026 Darryl Waterhouse & DCBW-IT
2440
+ * Built: 2026-01-02T14:32:25.394Z
2441
+ * Commit: bc8e519
2334
2442
  */
2335
2443
 
2336
2444
  /**
@@ -2871,11 +2979,11 @@ code, pre {
2871
2979
  ============================================ */
2872
2980
 
2873
2981
  /*!
2874
- * Domma Elements CSS v0.3.0a
2982
+ * Domma Elements CSS v0.3.0-alpha.0
2875
2983
  * Dynamic Object Manipulation & Modeling API
2876
- * (c) 2025 Darryl Waterhouse & DCBW-IT
2877
- * Built: 2025-12-28T23:38:36.097Z
2878
- * Commit: 7d9e9e8
2984
+ * (c) 2026 Darryl Waterhouse & DCBW-IT
2985
+ * Built: 2026-01-02T14:32:25.401Z
2986
+ * Commit: bc8e519
2879
2987
  */
2880
2988
 
2881
2989
  /**
@@ -7669,6 +7777,225 @@ code {
7669
7777
  background: var(--dm-slate-700);
7670
7778
  }
7671
7779
 
7780
+ /* ============================================
7781
+ TIMELINE
7782
+ ============================================ */
7783
+
7784
+ /* Base Timeline Styles */
7785
+ .dm-timeline {
7786
+ position: relative;
7787
+ max-width: 800px;
7788
+ margin: 0 auto;
7789
+ padding: var(--dm-space-8) 0;
7790
+ }
7791
+
7792
+ .dm-timeline-item {
7793
+ position: relative;
7794
+ display: flex;
7795
+ margin-bottom: var(--dm-space-8);
7796
+ align-items: flex-start;
7797
+ }
7798
+
7799
+ .dm-timeline-year {
7800
+ flex-shrink: 0;
7801
+ width: 120px;
7802
+ padding: var(--dm-space-2) var(--dm-space-3);
7803
+ background: var(--dm-primary);
7804
+ color: var(--dm-white);
7805
+ border-radius: var(--dm-radius-md);
7806
+ text-align: center;
7807
+ font-weight: 600;
7808
+ font-size: var(--dm-font-size-sm);
7809
+ margin-right: var(--dm-space-6);
7810
+ }
7811
+
7812
+ .dm-timeline-content {
7813
+ flex: 1;
7814
+ background: var(--dm-white);
7815
+ padding: var(--dm-space-6);
7816
+ border-radius: var(--dm-radius-lg);
7817
+ box-shadow: var(--dm-shadow);
7818
+ border: 1px solid var(--dm-gray-200);
7819
+ transition: all var(--dm-transition-normal);
7820
+ }
7821
+
7822
+ .dm-timeline-content:hover {
7823
+ box-shadow: var(--dm-shadow-md);
7824
+ transform: translateY(-2px);
7825
+ }
7826
+
7827
+ .dm-timeline-title {
7828
+ margin: 0 0 var(--dm-space-3) 0;
7829
+ font-size: var(--dm-font-size-lg);
7830
+ font-weight: 600;
7831
+ color: var(--dm-gray-900);
7832
+ }
7833
+
7834
+ .dm-timeline-description {
7835
+ margin: 0;
7836
+ color: var(--dm-gray-700);
7837
+ line-height: 1.6;
7838
+ }
7839
+
7840
+ /* Vertical Layout (Default) */
7841
+ .dm-timeline-vertical {
7842
+ /* Default styles already applied above */
7843
+ }
7844
+
7845
+ /* Centered Layout */
7846
+ .dm-timeline-centered::before {
7847
+ content: '';
7848
+ position: absolute;
7849
+ left: 50%;
7850
+ top: 0;
7851
+ bottom: 0;
7852
+ width: 2px;
7853
+ background: var(--dm-gray-300);
7854
+ transform: translateX(-50%);
7855
+ }
7856
+
7857
+ .dm-timeline-centered .dm-timeline-item {
7858
+ width: 50%;
7859
+ padding-right: var(--dm-space-8);
7860
+ justify-content: flex-end;
7861
+ }
7862
+
7863
+ .dm-timeline-centered .dm-timeline-item:nth-child(even) {
7864
+ left: 50%;
7865
+ padding-left: var(--dm-space-8);
7866
+ padding-right: 0;
7867
+ justify-content: flex-start;
7868
+ }
7869
+
7870
+ .dm-timeline-centered .dm-timeline-year {
7871
+ order: 2;
7872
+ margin-left: var(--dm-space-6);
7873
+ margin-right: 0;
7874
+ }
7875
+
7876
+ .dm-timeline-centered .dm-timeline-item:nth-child(even) .dm-timeline-year {
7877
+ order: 0;
7878
+ margin-left: 0;
7879
+ margin-right: var(--dm-space-6);
7880
+ }
7881
+
7882
+ /* Horizontal Layout */
7883
+ .dm-timeline-horizontal {
7884
+ display: flex;
7885
+ overflow-x: auto;
7886
+ padding-bottom: var(--dm-space-4);
7887
+ max-width: 100%;
7888
+ gap: var(--dm-space-6);
7889
+ }
7890
+
7891
+ .dm-timeline-horizontal .dm-timeline-item {
7892
+ flex-direction: column;
7893
+ margin-bottom: 0;
7894
+ min-width: 250px;
7895
+ flex-shrink: 0;
7896
+ }
7897
+
7898
+ .dm-timeline-horizontal .dm-timeline-year {
7899
+ width: auto;
7900
+ margin-right: 0;
7901
+ margin-bottom: var(--dm-space-4);
7902
+ }
7903
+
7904
+ /* Theme Variants */
7905
+ .dm-timeline-minimal .dm-timeline-content {
7906
+ box-shadow: none;
7907
+ border: 1px solid var(--dm-gray-200);
7908
+ background: var(--dm-gray-50);
7909
+ }
7910
+
7911
+ .dm-timeline-minimal .dm-timeline-year {
7912
+ background: var(--dm-gray-600);
7913
+ }
7914
+
7915
+ .dm-timeline-corporate .dm-timeline-year {
7916
+ background: var(--dm-slate-700);
7917
+ font-size: var(--dm-font-size-xs);
7918
+ text-transform: uppercase;
7919
+ letter-spacing: 0.05em;
7920
+ }
7921
+
7922
+ .dm-timeline-corporate .dm-timeline-content {
7923
+ background: var(--dm-slate-50);
7924
+ border-color: var(--dm-slate-200);
7925
+ }
7926
+
7927
+ /* Responsive Design */
7928
+ @media (max-width: 768px) {
7929
+ .dm-timeline-centered {
7930
+ /* Switch to vertical layout on mobile */
7931
+ }
7932
+
7933
+ .dm-timeline-centered::before {
7934
+ left: 30px;
7935
+ transform: none;
7936
+ }
7937
+
7938
+ .dm-timeline-centered .dm-timeline-item,
7939
+ .dm-timeline-centered .dm-timeline-item:nth-child(even) {
7940
+ width: 100%;
7941
+ left: 0;
7942
+ padding-left: var(--dm-space-16);
7943
+ padding-right: 0;
7944
+ justify-content: flex-start;
7945
+ }
7946
+
7947
+ .dm-timeline-centered .dm-timeline-year,
7948
+ .dm-timeline-centered .dm-timeline-item:nth-child(even) .dm-timeline-year {
7949
+ order: 0;
7950
+ margin-right: var(--dm-space-6);
7951
+ margin-left: 0;
7952
+ position: absolute;
7953
+ left: 0;
7954
+ width: 80px;
7955
+ }
7956
+
7957
+ .dm-timeline-horizontal {
7958
+ flex-direction: column;
7959
+ }
7960
+
7961
+ .dm-timeline-horizontal .dm-timeline-item {
7962
+ flex-direction: row;
7963
+ min-width: auto;
7964
+ margin-bottom: var(--dm-space-6);
7965
+ }
7966
+
7967
+ .dm-timeline-horizontal .dm-timeline-year {
7968
+ margin-bottom: 0;
7969
+ margin-right: var(--dm-space-4);
7970
+ width: 100px;
7971
+ }
7972
+ }
7973
+
7974
+ /* Dark Theme Support */
7975
+ [data-theme="dark"] .dm-timeline-content {
7976
+ background: var(--dm-slate-800);
7977
+ border-color: var(--dm-slate-700);
7978
+ color: var(--dm-slate-200);
7979
+ }
7980
+
7981
+ [data-theme="dark"] .dm-timeline-title {
7982
+ color: var(--dm-white);
7983
+ }
7984
+
7985
+ [data-theme="dark"] .dm-timeline-description {
7986
+ color: var(--dm-slate-300);
7987
+ }
7988
+
7989
+ [data-theme="dark"] .dm-timeline-minimal .dm-timeline-content {
7990
+ background: var(--dm-slate-900);
7991
+ border-color: var(--dm-slate-700);
7992
+ }
7993
+
7994
+ [data-theme="dark"] .dm-timeline-corporate .dm-timeline-content {
7995
+ background: var(--dm-slate-800);
7996
+ border-color: var(--dm-slate-600);
7997
+ }
7998
+
7672
7999
 
7673
8000
  /* ============================================
7674
8001
  THEME SYSTEM
@@ -7676,11 +8003,11 @@ code {
7676
8003
  ============================================ */
7677
8004
 
7678
8005
  /*!
7679
- * Domma Themes v0.3.0a
8006
+ * Domma Themes v0.3.0-alpha.0
7680
8007
  * Dynamic Object Manipulation & Modeling API
7681
- * (c) 2025 Darryl Waterhouse & DCBW-IT
7682
- * Built: 2025-12-28T23:38:37.685Z
7683
- * Commit: 7d9e9e8
8008
+ * (c) 2026 Darryl Waterhouse & DCBW-IT
8009
+ * Built: 2026-01-02T14:32:25.353Z
8010
+ * Commit: bc8e519
7684
8011
  */
7685
8012
 
7686
8013
  /**
@@ -10364,7 +10691,7 @@ code {
10364
10691
  --dm-surface-overlay: #f8f9fa;
10365
10692
 
10366
10693
  /* Text - Dark colors for readability on light */
10367
- --dm-text: #212529;
10694
+ --dm-text: #1a1a1a; /* Even darker for better contrast */
10368
10695
  --dm-text-secondary: #495057;
10369
10696
  --dm-text-muted: #6c757d;
10370
10697
  --dm-text-disabled: #adb5bd;
@@ -10377,8 +10704,8 @@ code {
10377
10704
 
10378
10705
 
10379
10706
  --dm-primary: #78909c;
10380
- --dm-primary-hover: #8a9fa9;
10381
- --dm-primary-active: #9caeb6;
10707
+ --dm-primary-hover: #546e7a;
10708
+ --dm-primary-active: #455a64;
10382
10709
  --dm-primary-light: rgba(120, 144, 156, 0.15);
10383
10710
  --dm-primary-dark: #607d8b;
10384
10711