@schukai/monster 3.90.0 → 3.92.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 (60) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/package.json +1 -1
  3. package/source/components/datatable/datatable.mjs +2 -0
  4. package/source/components/datatable/filter.mjs +3 -0
  5. package/source/components/datatable/save-button.mjs +3 -0
  6. package/source/components/form/action-button.mjs +11 -40
  7. package/source/components/form/api-bar.mjs +551 -0
  8. package/source/components/form/button.mjs +1 -3
  9. package/source/components/form/context-error.mjs +2 -13
  10. package/source/components/form/context-help.mjs +1 -1
  11. package/source/components/form/field-set.mjs +1 -3
  12. package/source/components/form/message-state-button.mjs +10 -12
  13. package/source/components/form/password.mjs +3 -3
  14. package/source/components/form/reload.mjs +1 -1
  15. package/source/components/form/shadow-reload.mjs +1 -1
  16. package/source/components/form/style/action-button.pcss +11 -17
  17. package/source/components/form/style/api-bar.pcss +0 -0
  18. package/source/components/form/style/button-bar.pcss +5 -0
  19. package/source/components/form/style/button.pcss +1 -0
  20. package/source/components/form/style/message-state-button.pcss +1 -0
  21. package/source/components/form/style/state-button.pcss +1 -0
  22. package/source/components/form/stylesheet/action-button.mjs +1 -1
  23. package/source/components/form/stylesheet/api-bar.mjs +38 -0
  24. package/source/components/form/stylesheet/button-bar.mjs +1 -1
  25. package/source/components/form/stylesheet/button.mjs +1 -1
  26. package/source/components/form/stylesheet/message-state-button.mjs +1 -1
  27. package/source/components/form/stylesheet/state-button.mjs +1 -1
  28. package/source/components/form/template.mjs +49 -18
  29. package/source/components/form/tree-select.mjs +60 -42
  30. package/source/components/layout/iframe.mjs +1 -3
  31. package/source/components/layout/tabs.mjs +38 -3
  32. package/source/components/style/badge.css +147 -1
  33. package/source/components/style/border.css +65 -1
  34. package/source/components/style/button.css +205 -1
  35. package/source/components/style/card.css +149 -1
  36. package/source/components/style/color.css +166 -1
  37. package/source/components/style/common.css +159 -1
  38. package/source/components/style/control.css +14 -1
  39. package/source/components/style/data-grid.css +447 -1
  40. package/source/components/style/display.css +32 -1
  41. package/source/components/style/floating-ui.css +42 -1
  42. package/source/components/style/form.css +47 -1
  43. package/source/components/style/host.css +14 -1
  44. package/source/components/style/icons.css +1584 -1
  45. package/source/components/style/link.css +37 -1
  46. package/source/components/style/normalize.css +144 -1
  47. package/source/components/style/popper.css +101 -1
  48. package/source/components/style/property.css +327 -1
  49. package/source/components/style/ripple.css +13 -1
  50. package/source/components/style/skeleton.css +164 -1
  51. package/source/components/style/space.css +240 -1
  52. package/source/components/style/spinner.css +7 -1
  53. package/source/components/style/table.css +39 -1
  54. package/source/components/style/theme.css +356 -1
  55. package/source/components/style/typography.css +178 -1
  56. package/source/monster.mjs +1 -0
  57. package/source/types/version.mjs +1 -1
  58. package/test/cases/monster.mjs +1 -1
  59. package/test/web/test.html +2 -2
  60. package/test/web/tests.js +119 -64
@@ -40,9 +40,12 @@ const intersectionObserverWasInitialized = Symbol("wasInitialized");
40
40
  /**
41
41
  * A Template control is a control that can be used to load content from a URL and display it in the ShadowRoot.
42
42
  *
43
- * @fragments /fragments/components/form/template/
43
+ * @fragments /fragments/components/form/template
44
44
  *
45
45
  * @example /examples/components/form/template-simple
46
+ * @example /examples/components/form/template-with-default
47
+ * @example /examples/components/form/template-with-processor
48
+ * @example /examples/components/form/template-onshow
46
49
  *
47
50
  * @since 1.11.0
48
51
  * @copyright schukai GmbH
@@ -69,7 +72,7 @@ class Template extends CustomElement {
69
72
  * @property {string} templates.main Main template
70
73
  * @property {string} url=undefined
71
74
  * @property {string} reload=undefined currently the only value defined is `onshow`. Currently the only value defined is onshow. this removes the IntersectionObserver. this means that the content is only loaded once. reloading of the content does not occur.
72
- * @property {Monster.Components.Form.Processor[]} processors
75
+ * @property {Object[]} processors
73
76
  * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
74
77
  * @property {String} fetch.redirect=error
75
78
  * @property {String} fetch.method=GET
@@ -85,8 +88,8 @@ class Template extends CustomElement {
85
88
  templates: {
86
89
  main: getTemplate(),
87
90
  },
88
- url: undefined,
89
- reload: undefined,
91
+ url: null,
92
+ reload: null,
90
93
  processors: [],
91
94
  fetch: {
92
95
  redirect: "error",
@@ -123,8 +126,6 @@ class Template extends CustomElement {
123
126
  this[attributeObserverSymbol][ATTRIBUTE_FORM_URL] = (url) => {
124
127
  if (this.hasAttribute(ATTRIBUTE_FORM_URL)) {
125
128
  this.setOption("url", new URL(url, document.location).toString());
126
- } else {
127
- this.setOption("url", undefined);
128
129
  }
129
130
  };
130
131
  }
@@ -139,7 +140,7 @@ class Template extends CustomElement {
139
140
  * @throws {Error} not found
140
141
  * @throws {Error} undefined status or type
141
142
  * @fires monster-fetched
142
- * @return {Monster.Components.Form.Form}
143
+ * @return {void}
143
144
  */
144
145
  [assembleMethodSymbol]() {
145
146
  super[assembleMethodSymbol]();
@@ -181,13 +182,6 @@ class Template extends CustomElement {
181
182
  }
182
183
  }
183
184
 
184
- /**
185
- * @typedef {Object} Processor
186
- * @property {String} destination
187
- * @property {String} source
188
- * @since 1.11.8
189
- */
190
-
191
185
  /**
192
186
  * This attribute can be used to pass a URL to this select.
193
187
  *
@@ -276,7 +270,12 @@ function loadContent() {
276
270
  throw new Error("no shadow-root is defined");
277
271
  }
278
272
 
279
- const url = this.getOption("url", undefined);
273
+ let url = this.getOption("url", undefined);
274
+
275
+ if (url instanceof URL) {
276
+ url = url.toString();
277
+ }
278
+
280
279
  if (!isString(url) || url === "") {
281
280
  throw new Error("missing url");
282
281
  }
@@ -303,6 +302,7 @@ function loadContent() {
303
302
  loadAndAssignContent(container, url, options)
304
303
  .then(() => {
305
304
  defaultSlot.style.display = "none";
305
+ container.style.display = "block";
306
306
  runProcessors.call(this);
307
307
  })
308
308
  .catch((e) => {
@@ -316,15 +316,40 @@ function loadContent() {
316
316
  */
317
317
  function runProcessors() {
318
318
  const processors = this.getOption("processors");
319
- if (!isArray(processors)) return;
319
+ if (!isArray(processors)) return this;
320
320
 
321
321
  for (const [, processor] of processors.entries()) {
322
322
  const source = processor?.source;
323
- const destination = processor?.destination;
323
+ let destination = processor?.destination;
324
+
325
+ if (source === null) {
326
+ addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "missing source");
327
+ continue;
328
+ }
329
+
330
+ if (
331
+ destination === null ||
332
+ destination === undefined ||
333
+ destination === ""
334
+ ) {
335
+ destination = "[" + ATTRIBUTE_ROLE + "=container]";
336
+ }
324
337
 
325
338
  if (isString(source) && isString(destination)) {
326
339
  const sourceNode = this.shadowRoot.querySelector(source);
327
- const destinationNode = document.querySelector(destination);
340
+ let destinationNode = document.querySelector(destination);
341
+
342
+ if (destinationNode === null) {
343
+ destinationNode = this.shadowRoot.querySelector(destination);
344
+ if (destinationNode === null) {
345
+ addAttributeToken(
346
+ this,
347
+ ATTRIBUTE_ERRORMESSAGE,
348
+ "destination not found",
349
+ );
350
+ continue;
351
+ }
352
+ }
328
353
 
329
354
  if (
330
355
  sourceNode instanceof HTMLElement &&
@@ -332,6 +357,12 @@ function runProcessors() {
332
357
  ) {
333
358
  destinationNode.innerHTML = sourceNode.cloneNode(true).innerHTML;
334
359
  }
360
+ } else {
361
+ addAttributeToken(
362
+ this,
363
+ ATTRIBUTE_ERRORMESSAGE,
364
+ "invalid source or destination",
365
+ );
335
366
  }
336
367
  }
337
368
 
@@ -13,8 +13,12 @@
13
13
  */
14
14
 
15
15
  import { buildTree } from "../../data/buildtree.mjs";
16
- import { findClosestByAttribute } from "../../dom/attributes.mjs";
17
16
  import {
17
+ addAttributeToken,
18
+ findClosestByAttribute,
19
+ } from "../../dom/attributes.mjs";
20
+ import {
21
+ ATTRIBUTE_ERRORMESSAGE,
18
22
  ATTRIBUTE_ROLE,
19
23
  ATTRIBUTE_UPDATER_INSERT_REFERENCE,
20
24
  } from "../../dom/constants.mjs";
@@ -57,7 +61,7 @@ const keyEventHandler = Symbol("keyEventHandler");
57
61
  *
58
62
  * @fragments /fragments/components/form/tree-select
59
63
  *
60
- * @example /examples/components/form/tree-select
64
+ * @example /examples/components/form/tree-select-simple
61
65
  *
62
66
  * @since 1.9.0
63
67
  * @copyright schukai GmbH
@@ -98,8 +102,12 @@ class TreeSelect extends Select {
98
102
  {
99
103
  mapping: {
100
104
  rootReferences: ["0", undefined, null],
101
- idTemplate: "id",
102
- parentTemplate: "parent",
105
+ id: "id",
106
+ parent: "parent",
107
+
108
+ selector: "*",
109
+ labelTemplate: "",
110
+ valueTemplate: "",
103
111
  },
104
112
  formatter: {
105
113
  selection: formatHierarchicalSelection,
@@ -145,54 +153,58 @@ class TreeSelect extends Select {
145
153
  const filter = mappingOptions?.["filter"];
146
154
  const rootReferences = mappingOptions?.["rootReferences"];
147
155
 
148
- const id = this.getOption("mapping.idTemplate", "id");
149
- const parentID = this.getOption("mapping.parentTemplate", "parent");
156
+ const id = this.getOption("mapping.id", "id");
157
+ const parentID = this.getOption("mapping.parent", "parent");
150
158
 
151
159
  const selector = mappingOptions?.["selector"];
152
-
153
- const nodes = buildTree(data, selector, id, parentID, {
154
- filter,
155
- rootReferences,
156
- });
157
-
158
160
  const options = [];
159
- for (const node of nodes) {
160
- const iterator = new NodeRecursiveIterator(node);
161
- for (const n of iterator) {
162
- const formattedValues = formatKeyLabel.call(this, n);
163
-
164
- const label = formattedValues.label;
165
- const value = formattedValues.value;
166
- const intend = n.level;
167
-
168
- const visibility = intend > 0 ? "hidden" : "visible";
169
- const state = "close";
170
-
171
- this[internalNodesSymbol].set(value, n);
172
-
173
- options.push({
174
- value,
175
- label,
176
- intend,
177
- state,
178
- visibility,
179
- ["has-children"]: n.hasChildNodes(),
180
- });
161
+
162
+ try {
163
+ const nodes = buildTree(data, selector, id, parentID, {
164
+ filter,
165
+ rootReferences,
166
+ });
167
+
168
+ for (const node of nodes) {
169
+ const iterator = new NodeRecursiveIterator(node);
170
+ for (const n of iterator) {
171
+ const formattedValues = formatKeyLabel.call(this, n);
172
+
173
+ const label = formattedValues.label;
174
+ const value = formattedValues.value;
175
+ const intend = n.level;
176
+
177
+ const visibility = intend > 0 ? "hidden" : "visible";
178
+ const state = "close";
179
+
180
+ this[internalNodesSymbol].set(value, n);
181
+
182
+ options.push({
183
+ value,
184
+ label,
185
+ intend,
186
+ state,
187
+ visibility,
188
+ ["has-children"]: n.hasChildNodes(),
189
+ });
190
+ }
181
191
  }
182
- }
183
192
 
184
- this.setOption("options", options);
193
+ this.setOption("options", options);
185
194
 
186
- fireCustomEvent(this, "monster-options-set", {
187
- options,
188
- });
195
+ fireCustomEvent(this, "monster-options-set", {
196
+ options,
197
+ });
198
+ } catch (e) {
199
+ addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e?.message || e);
200
+ }
189
201
 
190
202
  return this;
191
203
  }
192
204
 
193
205
  /**
194
206
  *
195
- * @return {Monster.Components.Form.Select}
207
+ * @return {TreeSelect}
196
208
  */
197
209
  [assembleMethodSymbol]() {
198
210
  super[assembleMethodSymbol]();
@@ -251,10 +263,16 @@ function closeOrOpenCurrentOption(event, mode) {
251
263
  function formatKeyLabel(node) {
252
264
  validateInstance(node, Node);
253
265
 
254
- const label = new Formatter(node.value).format(
266
+ const v = node.value;
267
+ if (v === undefined) {
268
+ throw new Error("the object has no value for the specified id");
269
+ }
270
+
271
+ const label = new Formatter(v).format(
255
272
  this.getOption("mapping.labelTemplate", ""),
256
273
  );
257
- const value = new Formatter(node.value).format(
274
+
275
+ const value = new Formatter(v).format(
258
276
  this.getOption("mapping.valueTemplate", ""),
259
277
  );
260
278
 
@@ -156,9 +156,7 @@ class Iframe extends CustomElement {
156
156
  loading: "eager",
157
157
 
158
158
  actions: {
159
- click: () => {
160
- throw new Error("the click action is not defined");
161
- },
159
+ click: () => {},
162
160
  },
163
161
  });
164
162
  }
@@ -146,6 +146,10 @@ const resizeObserverSymbol = Symbol("resizeObserver");
146
146
  * @fragments /fragments/components/layout/tabs/
147
147
  *
148
148
  * @example /examples/components/layout/tabs-simple
149
+ * @example /examples/components/layout/tabs-active
150
+ * @example /examples/components/layout/tabs-removable
151
+ *
152
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html
149
153
  *
150
154
  * @since 3.74.0
151
155
  * @copyright schukai GmbH
@@ -172,6 +176,7 @@ class Tabs extends CustomElement {
172
176
  * @property {string} labels.new-tab-label="New Tab"
173
177
  * @property {Object} features
174
178
  * @property {number} features.openDelay=500 Open delay in milliseconds
179
+ * @property {string} features.removeBehavior="auto" Remove behavior, auto (default), next, previous and none
175
180
  * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
176
181
  * @property {String} fetch.redirect=error
177
182
  * @property {String} fetch.method=GET
@@ -206,6 +211,7 @@ class Tabs extends CustomElement {
206
211
 
207
212
  features: {
208
213
  openDelay: null,
214
+ removeBehavior: "auto",
209
215
  },
210
216
 
211
217
  classes: {
@@ -510,7 +516,6 @@ function attachTabChangeObserver() {
510
516
  * @private
511
517
  * @return {Select}
512
518
  * @external "external:createPopper"
513
- * @see {@link Plugins}
514
519
  */
515
520
  function initPopper() {
516
521
  const self = this;
@@ -685,6 +690,10 @@ function initEventHandler() {
685
690
  const reference = button.getAttribute(
686
691
  `${ATTRIBUTE_PREFIX}tab-reference`,
687
692
  );
693
+
694
+ const previous = button.previousElementSibling;
695
+ const next = button.nextElementSibling;
696
+
688
697
  if (reference) {
689
698
  const container = this.querySelector(`[id=${reference}]`);
690
699
  if (container instanceof HTMLElement) {
@@ -695,6 +704,32 @@ function initEventHandler() {
695
704
  });
696
705
  }
697
706
  }
707
+
708
+ switch (this.getOption("features.removeBehavior")) {
709
+ case "auto":
710
+ if (next instanceof HTMLButtonElement) {
711
+ next.click();
712
+ } else {
713
+ // get previous button
714
+ if (previous instanceof HTMLButtonElement) {
715
+ previous.click();
716
+ }
717
+ }
718
+ break;
719
+ case "next":
720
+ if (next instanceof HTMLButtonElement) {
721
+ next.click();
722
+ }
723
+ break;
724
+ case "previous":
725
+ if (previous instanceof HTMLButtonElement) {
726
+ previous.click();
727
+ }
728
+ break;
729
+
730
+ default: // and "none"
731
+ break;
732
+ }
698
733
  }
699
734
  }
700
735
  };
@@ -826,7 +861,7 @@ function initTabButtons() {
826
861
  }
827
862
 
828
863
  if (node.hasAttribute(`${ATTRIBUTE_PREFIX}button-icon`)) {
829
- label = `<span part="label">${label}</span><img part="icon" src="${node.getAttribute(
864
+ label = `<span part="label">${label}</span><img part="icon" alt="this is an icon" src="${node.getAttribute(
830
865
  `${ATTRIBUTE_PREFIX}button-icon`,
831
866
  )}">`;
832
867
  }
@@ -1107,7 +1142,7 @@ function getTemplate() {
1107
1142
  data-monster-insert="buttons path:buttons.standard">
1108
1143
  <slot name="start" class="invisible"></slot>
1109
1144
  <div data-monster-role="popper" part="popper" tabindex="-1"
1110
- data-monster-attributes="class path:classes.popper">
1145
+ data-monster-attributes="class path:classes.popper">
1111
1146
  <div data-popper-arrow></div>
1112
1147
 
1113
1148
 
@@ -1,2 +1,148 @@
1
1
  /** generated from badge.pcss **/
2
- .monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}
2
+ .monster-badge-primary {
3
+ padding: .25em .4em;
4
+ }
5
+ .monster-badge-primary,
6
+ .monster-badge-primary-pill {
7
+ background-color: var(--monster-bg-color-primary-4);
8
+ border-radius: .25rem;
9
+ color: var(--monster-color-primary-4);
10
+ display: inline-block;
11
+ font-size: 75%;
12
+ font-weight: 700;
13
+ line-height: 1;
14
+ text-align: center;
15
+ text-decoration: none;
16
+ vertical-align: baseline;
17
+ white-space: nowrap;
18
+ }
19
+ .monster-badge-primary-pill {
20
+ border-radius: 10rem;
21
+ padding: .25em .6em;
22
+ }
23
+ .monster-badge-secondary {
24
+ padding: .25em .4em;
25
+ }
26
+ .monster-badge-secondary,
27
+ .monster-badge-secondary-pill {
28
+ background-color: var(--monster-bg-color-secondary-3);
29
+ border-radius: .25rem;
30
+ color: var(--monster-color-secondary-3);
31
+ display: inline-block;
32
+ font-size: 75%;
33
+ font-weight: 700;
34
+ line-height: 1;
35
+ text-align: center;
36
+ text-decoration: none;
37
+ vertical-align: baseline;
38
+ white-space: nowrap;
39
+ }
40
+ .monster-badge-secondary-pill {
41
+ border-radius: 10rem;
42
+ padding: .25em .6em;
43
+ }
44
+ .monster-badge-tertiary {
45
+ padding: .25em .4em;
46
+ }
47
+ .monster-badge-tertiary,
48
+ .monster-badge-tertiary-pill {
49
+ background-color: var(--monster-bg-color-tertiary-3);
50
+ border-radius: .25rem;
51
+ color: var(--monster-color-tertiary-3);
52
+ display: inline-block;
53
+ font-size: 75%;
54
+ font-weight: 700;
55
+ line-height: 1;
56
+ text-align: center;
57
+ text-decoration: none;
58
+ vertical-align: baseline;
59
+ white-space: nowrap;
60
+ }
61
+ .monster-badge-tertiary-pill {
62
+ border-radius: 10rem;
63
+ padding: .25em .6em;
64
+ }
65
+ .monster-badge-destructive {
66
+ padding: .25em .4em;
67
+ }
68
+ .monster-badge-destructive,
69
+ .monster-badge-destructive-pill {
70
+ background-color: var(--monster-bg-color-destructive-1);
71
+ border-radius: .25rem;
72
+ color: var(--monster-color-destructive-1);
73
+ display: inline-block;
74
+ font-size: 75%;
75
+ font-weight: 700;
76
+ line-height: 1;
77
+ text-align: center;
78
+ text-decoration: none;
79
+ vertical-align: baseline;
80
+ white-space: nowrap;
81
+ }
82
+ .monster-badge-destructive-pill {
83
+ border-radius: 10rem;
84
+ padding: .25em .6em;
85
+ }
86
+ .monster-badge-success {
87
+ padding: .25em .4em;
88
+ }
89
+ .monster-badge-success,
90
+ .monster-badge-success-pill {
91
+ background-color: var(--monster-bg-color-success-1);
92
+ border-radius: .25rem;
93
+ color: var(--monster-color-success-1);
94
+ display: inline-block;
95
+ font-size: 75%;
96
+ font-weight: 700;
97
+ line-height: 1;
98
+ text-align: center;
99
+ text-decoration: none;
100
+ vertical-align: baseline;
101
+ white-space: nowrap;
102
+ }
103
+ .monster-badge-success-pill {
104
+ border-radius: 10rem;
105
+ padding: .25em .6em;
106
+ }
107
+ .monster-badge-warning {
108
+ padding: .25em .4em;
109
+ }
110
+ .monster-badge-warning,
111
+ .monster-badge-warning-pill {
112
+ background-color: var(--monster-bg-color-warning-1);
113
+ border-radius: .25rem;
114
+ color: var(--monster-color-warning-1);
115
+ display: inline-block;
116
+ font-size: 75%;
117
+ font-weight: 700;
118
+ line-height: 1;
119
+ text-align: center;
120
+ text-decoration: none;
121
+ vertical-align: baseline;
122
+ white-space: nowrap;
123
+ }
124
+ .monster-badge-warning-pill {
125
+ border-radius: 10rem;
126
+ padding: .25em .6em;
127
+ }
128
+ .monster-badge-error {
129
+ padding: .25em .4em;
130
+ }
131
+ .monster-badge-error,
132
+ .monster-badge-error-pill {
133
+ background-color: var(--monster-bg-color-error-1);
134
+ border-radius: .25rem;
135
+ color: var(--monster-color-error-1);
136
+ display: inline-block;
137
+ font-size: 75%;
138
+ font-weight: 700;
139
+ line-height: 1;
140
+ text-align: center;
141
+ text-decoration: none;
142
+ vertical-align: baseline;
143
+ white-space: nowrap;
144
+ }
145
+ .monster-badge-error-pill {
146
+ border-radius: 10rem;
147
+ padding: .25em .6em;
148
+ }
@@ -1,2 +1,66 @@
1
1
  /** generated from border.pcss **/
2
- .monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}
2
+ .monster-border-primary-1,
3
+ .monster-border-primary-2,
4
+ .monster-border-primary-3,
5
+ .monster-border-primary-4 {
6
+ border-radius: var(--monster-border-radius);
7
+ border-style: var(--monster-border-style);
8
+ border-width: var(--monster-border-width);
9
+ }
10
+ .monster-border-0 {
11
+ border-radius: 0;
12
+ border-style: none;
13
+ border-width: 0;
14
+ }
15
+ .monster-border-primary-1 {
16
+ border-color: var(--monster-bg-color-primary-1);
17
+ }
18
+ .monster-border-primary-2 {
19
+ border-color: var(--monster-bg-color-primary-2);
20
+ }
21
+ .monster-border-primary-3 {
22
+ border-color: var(--monster-bg-color-primary-3);
23
+ }
24
+ .monster-border-primary-4 {
25
+ border-color: var(--monster-bg-color-primary-4);
26
+ }
27
+ .monster-border-secondary-1,
28
+ .monster-border-secondary-2,
29
+ .monster-border-secondary-3,
30
+ .monster-border-secondary-4 {
31
+ border-radius: var(--monster-border-radius);
32
+ border-style: var(--monster-border-style);
33
+ border-width: var(--monster-border-width);
34
+ }
35
+ .monster-border-secondary-1 {
36
+ border-color: var(--monster-bg-color-secondary-1);
37
+ }
38
+ .monster-border-secondary-2 {
39
+ border-color: var(--monster-bg-color-secondary-2);
40
+ }
41
+ .monster-border-secondary-3 {
42
+ border-color: var(--monster-bg-color-secondary-3);
43
+ }
44
+ .monster-border-secondary-4 {
45
+ border-color: var(--monster-bg-color-secondary-4);
46
+ }
47
+ .monster-border-tertiary-1,
48
+ .monster-border-tertiary-2,
49
+ .monster-border-tertiary-3,
50
+ .monster-border-tertiary-4 {
51
+ border-radius: var(--monster-border-radius);
52
+ border-style: var(--monster-border-style);
53
+ border-width: var(--monster-border-width);
54
+ }
55
+ .monster-border-tertiary-1 {
56
+ border-color: var(--monster-bg-color-tertiary-1);
57
+ }
58
+ .monster-border-tertiary-2 {
59
+ border-color: var(--monster-bg-color-tertiary-2);
60
+ }
61
+ .monster-border-tertiary-3 {
62
+ border-color: var(--monster-bg-color-tertiary-3);
63
+ }
64
+ .monster-border-tertiary-4 {
65
+ border-color: var(--monster-bg-color-tertiary-4);
66
+ }