@getpara/core-components 2.0.0-alpha.64 → 2.0.0-alpha.66

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.
@@ -55,11 +55,11 @@
55
55
  */
56
56
  :host {
57
57
  --container-gap: 8px;
58
- --container-padding-top: 14px;
59
- --container-padding-bottom: 14px;
60
- --container-padding-start: 16px;
61
- --container-padding-end: 16px;
62
- --container-font-size: var(--cpsl-font-size-body-m);
58
+ --container-padding-top: 8px;
59
+ --container-padding-bottom: 8px;
60
+ --container-padding-start: 8px;
61
+ --container-padding-end: 8px;
62
+ --container-font-size: var(--cpsl-font-size-body-s);
63
63
  --container-border-width: 1px;
64
64
  --container-border-radius: var(--cpsl-border-radius-alert);
65
65
  --container-background-color: var(--cpsl-color-background-0);
@@ -68,13 +68,15 @@
68
68
  --container-align-items: center;
69
69
  --container-justify-content: center;
70
70
  --title-container-gap: 8px;
71
- --title-container-align-items: center;
71
+ --title-container-align-items: flex-start;
72
72
  --title-container-justify-content: center;
73
73
  display: inline-block;
74
74
  font-family: var(--cpsl-font-family, inherit);
75
75
  }
76
76
 
77
77
  :host(.error) {
78
+ --container-color: var(--cpsl-color-black);
79
+ --container-icon-color: var(--cpsl-color-utility-red);
78
80
  --container-border-color: var(--cpsl-color-utility-red);
79
81
  }
80
82
  :host(.error):host(.filled) {
@@ -82,6 +84,8 @@
82
84
  }
83
85
 
84
86
  :host(.warning) {
87
+ --container-color: var(--cpsl-color-black);
88
+ --container-icon-color: var(--cpsl-color-utility-yellow);
85
89
  --container-border-color: var(--cpsl-color-utility-yellow);
86
90
  }
87
91
  :host(.warning):host(.filled) {
@@ -89,6 +93,8 @@
89
93
  }
90
94
 
91
95
  :host(.success) {
96
+ --container-color: var(--cpsl-color-black);
97
+ --container-icon-color: var(--cpsl-color-utility-green);
92
98
  --container-border-color: var(--cpsl-color-utility-green);
93
99
  }
94
100
  :host(.success):host(.filled) {
@@ -97,8 +103,8 @@
97
103
 
98
104
  :host cpsl-icon {
99
105
  --icon-color: var(--container-icon-color);
100
- --height: 20px;
101
- --width: 20px;
106
+ --height: 24px;
107
+ --width: 24px;
102
108
  }
103
109
 
104
110
  .alert-container {
@@ -86,6 +86,7 @@
86
86
  border-radius: var(--icon-border-radius, 0);
87
87
  background: var(--icon-background, transparent);
88
88
  color: var(--icon-color);
89
+ box-sizing: border-box;
89
90
  }
90
91
 
91
92
  :host svg {
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, h, H as Host, c as createEvent, g as getElement, F as Fragment } from './index-91db3414.js';
2
2
  import { M as MOBILE_SIZE, a as DEFAULT_Z_INDICES } from './constants-fce138fa.js';
3
3
 
4
- const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:14px;--container-padding-bottom:14px;--container-padding-start:16px;--container-padding-end:16px;--container-font-size:var(--cpsl-font-size-body-m);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);--container-background-color:var(--cpsl-color-background-0);--container-color:var(--cpsl-color-text-primary);--container-icon-color:var(--container-color);--container-align-items:center;--container-justify-content:center;--title-container-gap:8px;--title-container-align-items:center;--title-container-justify-content:center;display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-border-color:var(--cpsl-color-utility-red)}:host(.error):host(.filled){--container-background-color:var(--cpsl-color-utility-red-light)}:host(.warning){--container-border-color:var(--cpsl-color-utility-yellow)}:host(.warning):host(.filled){--container-background-color:var(--cpsl-color-utility-yellow-light)}:host(.success){--container-border-color:var(--cpsl-color-utility-green)}:host(.success):host(.filled){--container-background-color:var(--cpsl-color-utility-green-light)}:host cpsl-icon{--icon-color:var(--container-icon-color);--height:20px;--width:20px}.alert-container{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);display:flex;flex-direction:column;align-items:var(--container-align-items);justify-content:var(--container-justify-content);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}.title-container{display:flex;align-items:var(--title-container-align-items);justify-content:var(--title-container-justify-content);gap:var(--title-container-gap)}";
4
+ const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:8px;--container-padding-bottom:8px;--container-padding-start:8px;--container-padding-end:8px;--container-font-size:var(--cpsl-font-size-body-s);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);--container-background-color:var(--cpsl-color-background-0);--container-color:var(--cpsl-color-text-primary);--container-icon-color:var(--container-color);--container-align-items:center;--container-justify-content:center;--title-container-gap:8px;--title-container-align-items:flex-start;--title-container-justify-content:center;display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-color:var(--cpsl-color-black);--container-icon-color:var(--cpsl-color-utility-red);--container-border-color:var(--cpsl-color-utility-red)}:host(.error):host(.filled){--container-background-color:var(--cpsl-color-utility-red-light)}:host(.warning){--container-color:var(--cpsl-color-black);--container-icon-color:var(--cpsl-color-utility-yellow);--container-border-color:var(--cpsl-color-utility-yellow)}:host(.warning):host(.filled){--container-background-color:var(--cpsl-color-utility-yellow-light)}:host(.success){--container-color:var(--cpsl-color-black);--container-icon-color:var(--cpsl-color-utility-green);--container-border-color:var(--cpsl-color-utility-green)}:host(.success):host(.filled){--container-background-color:var(--cpsl-color-utility-green-light)}:host cpsl-icon{--icon-color:var(--container-icon-color);--height:24px;--width:24px}.alert-container{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);display:flex;flex-direction:column;align-items:var(--container-align-items);justify-content:var(--container-justify-content);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}.title-container{display:flex;align-items:var(--title-container-align-items);justify-content:var(--title-container-justify-content);gap:var(--title-container-gap)}";
5
5
  const CpslAlertStyle0 = cpslAlertCss;
6
6
 
7
7
  const CpslAlert = class {
@@ -13132,7 +13132,7 @@ const CpslFileUpload = class {
13132
13132
  let inputIds$2 = 0;
13133
13133
  CpslFileUpload.style = CpslFileUploadStyle0;
13134
13134
 
13135
- const cpslIconCss = ":host{display:block;--filter:auto;--height:24px;--width:24px;--inset:0px;--computed-height:calc(var(--height) - (2 * var(--inset)));--computed-width:calc(var(--width) - (2 * var(--inset)));--icon-color:var(--icon-color, currentColor);--icon-fill-color:var(--icon-fill-color, var(--icon-color, currentColor));--icon-stroke-color:var(--icon-stroke-color, var(--icon-color, currentColor));width:var(--width);height:var(--height)}:host .foreground-0{fill:var(--cpsl-color-foreground-0);stop-color:var(--cpsl-color-foreground-0)}:host .accent-0{fill:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));stop-color:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0))}:host div{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border:var(--icon-border, auto);border-radius:var(--icon-border-radius, 0);background:var(--icon-background, transparent);color:var(--icon-color)}:host svg{width:var(--computed-width, \"100%\");height:var(--computed-height, \"100%\");filter:var(--filter)}:host svg .background-16{fill:var(--cpsl-color-background-16)}:host svg .foreground-0{fill:var(--cpsl-color-foreground-0)}:host svg .fill{fill:var(--icon-fill-color)}:host svg .stroke{stroke:var(--icon-stroke-color)}:host img{width:var(--computed-width, 100%);height:var(--computed-height, 100%);max-width:100%;max-height:100%;object-fit:contain}";
13135
+ const cpslIconCss = ":host{display:block;--filter:auto;--height:24px;--width:24px;--inset:0px;--computed-height:calc(var(--height) - (2 * var(--inset)));--computed-width:calc(var(--width) - (2 * var(--inset)));--icon-color:var(--icon-color, currentColor);--icon-fill-color:var(--icon-fill-color, var(--icon-color, currentColor));--icon-stroke-color:var(--icon-stroke-color, var(--icon-color, currentColor));width:var(--width);height:var(--height)}:host .foreground-0{fill:var(--cpsl-color-foreground-0);stop-color:var(--cpsl-color-foreground-0)}:host .accent-0{fill:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));stop-color:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0))}:host div{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border:var(--icon-border, auto);border-radius:var(--icon-border-radius, 0);background:var(--icon-background, transparent);color:var(--icon-color);box-sizing:border-box}:host svg{width:var(--computed-width, \"100%\");height:var(--computed-height, \"100%\");filter:var(--filter)}:host svg .background-16{fill:var(--cpsl-color-background-16)}:host svg .foreground-0{fill:var(--cpsl-color-foreground-0)}:host svg .fill{fill:var(--icon-fill-color)}:host svg .stroke{stroke:var(--icon-stroke-color)}:host img{width:var(--computed-width, 100%);height:var(--computed-height, 100%);max-width:100%;max-height:100%;object-fit:contain}";
13136
13136
  const CpslIconStyle0 = cpslIconCss;
13137
13137
 
13138
13138
  const CpslIcon = class {