@jjlmoya/utils-tabletop 1.22.0 → 1.24.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jjlmoya/utils-tabletop",
3
- "version": "1.22.0",
3
+ "version": "1.24.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
@@ -16,12 +16,12 @@ const initialEvaluation = evaluateMap(initialMap, ui);
16
16
  <div class="dmg" data-dungeon-generator data-style="dungeon">
17
17
  <script is:inline type="application/json" data-ui set:html={JSON.stringify(ui)} />
18
18
  <section class="dmg-controls" aria-label={ui.styleLabel}>
19
- <div class="dmg-seed-row">
20
- <label class="dmg-field dmg-field--seed">
21
- <span>{ui.seedLabel}</span>
22
- <input name="seed" type="text" value={DEFAULT_CONFIG.seed} maxlength="48" spellcheck="false" />
23
- </label>
24
- <button class="dmg-shuffle" type="button" data-random-seed>{ui.randomSeed}</button>
19
+ <div class="dmg-field dmg-field-seed">
20
+ <label for="dmg-seed-input">{ui.seedLabel}</label>
21
+ <div class="dmg-seed-input-group">
22
+ <input id="dmg-seed-input" name="seed" type="text" value={DEFAULT_CONFIG.seed} maxlength="48" spellcheck="false" />
23
+ <button class="dmg-shuffle" type="button" data-random-seed>{ui.randomSeed}</button>
24
+ </div>
25
25
  </div>
26
26
 
27
27
  <fieldset class="dmg-styles">
@@ -92,18 +92,18 @@
92
92
  border-right: 1px solid var(--n-dmg-line);
93
93
  }
94
94
 
95
- .dmg-seed-row {
95
+ .dmg-field {
96
96
  display: grid;
97
- grid-template-columns: minmax(0, 1fr) auto;
98
- gap: 0.55rem;
99
- align-items: end;
97
+ gap: 0.4rem;
100
98
  }
101
99
 
102
- .dmg-field {
103
- display: grid;
100
+ .dmg-field-seed {
101
+ display: flex;
102
+ flex-direction: column;
104
103
  gap: 0.4rem;
105
104
  }
106
105
 
106
+ .dmg-field-seed label,
107
107
  .dmg-field > span,
108
108
  .dmg-styles legend,
109
109
  .dmg-section-label,
@@ -115,6 +115,13 @@
115
115
  text-transform: uppercase;
116
116
  }
117
117
 
118
+ .dmg-seed-input-group {
119
+ display: flex;
120
+ gap: 0.5rem;
121
+ align-items: center;
122
+ width: 100%;
123
+ }
124
+
118
125
  .dmg-field input {
119
126
  width: 100%;
120
127
  min-height: 2.65rem;
@@ -125,7 +132,13 @@
125
132
  border-radius: 0.65rem;
126
133
  }
127
134
 
135
+ .dmg-seed-input-group input {
136
+ flex: 1 1 auto;
137
+ min-width: 0;
138
+ }
139
+
128
140
  .dmg-shuffle {
141
+ flex: 0 0 auto;
129
142
  min-height: 2.65rem;
130
143
  padding: 0.55rem 0.72rem;
131
144
  color: var(--n-dmg-accent);
@@ -134,6 +147,7 @@
134
147
  border-radius: 0.65rem;
135
148
  font-size: 0.78rem;
136
149
  font-weight: 800;
150
+ white-space: nowrap;
137
151
  }
138
152
 
139
153
  .dmg-styles {