@esportsplus/ui 0.42.9 → 0.42.10

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 (9) hide show
  1. package/build/components/alert/index.d.ts +2 -1
  2. package/build/components/alert/index.js +38 -38
  3. package/build/components/alert/scss/index.scss +1 -1
  4. package/build/css-utilities/flex/scss/index.scss +1 -1
  5. package/build/css-utilities/index.scss +1 -1
  6. package/package.json +1 -1
  7. package/src/components/alert/index.ts +50 -50
  8. package/src/components/alert/scss/index.scss +0 -6
  9. package/src/css-utilities/flex/scss/index.scss +0 -1
package/build/components/alert/index.d.ts CHANGED
@@ -3,7 +3,8 @@ import { Response } from '@esportsplus/action';
3
3
  import { Attributes, Renderable } from '@esportsplus/template';
4
4
  import './scss/index.scss';
5
5
  declare const _default: (attributes: Attributes & {
6
- close?: Attributes;
6
+ "alert-close"?: Attributes;
7
+ "alert-messages"?: Attributes;
7
8
  message?: Attributes;
8
9
  }) => {
9
10
  content: Node;
package/build/components/alert/index.js CHANGED
@@ -7,7 +7,7 @@ import check from './svg/check.svg';
7
7
  import close from './svg/close.svg';
8
8
  import e from './svg/error.svg';
9
9
  import './scss/index.scss';
10
- const OMIT = ['close', 'message'];
10
+ const OMIT = ['alert-close', 'alert-messages', 'message'];
11
11
  let modifiers = {
12
12
  error: 'red',
13
13
  info: 'black',
@@ -21,28 +21,24 @@ function activate(key, messages, seconds, state) {
21
21
  return;
22
22
  }
23
23
  if (state.type !== key) {
24
+ state.active = false;
24
25
  state.messages.clear();
25
26
  }
26
- else {
27
- state.type = '';
28
- }
27
+ state.type = key;
29
28
  for (let message of messages) {
30
29
  state.messages.add(message);
31
30
  }
32
31
  if (state.active) {
33
- state.active = false;
34
- setTimeout(() => {
35
- state.active = true;
36
- state.type = key;
37
- if (seconds) {
38
- ``;
39
- setTimeout(deactivate, 500 * seconds);
40
- }
41
- }, timeout);
32
+ state.rerender++;
33
+ if (!seconds) {
34
+ return;
35
+ }
36
+ setTimeout(deactivate, timeout + (500 * seconds));
42
37
  }
43
38
  else {
44
39
  setTimeout(() => {
45
40
  state.active = true;
41
+ state.rerender++;
46
42
  state.type = key;
47
43
  if (seconds) {
48
44
  setTimeout(deactivate, 500 * seconds);
@@ -60,6 +56,7 @@ export default (attributes) => {
60
56
  let state = reactive({
61
57
  active: false,
62
58
  messages: new Set(),
59
+ rerender: 0,
63
60
  type: ''
64
61
  });
65
62
  const error = (messages, seconds = 0) => activate('error', messages, seconds, state);
@@ -77,47 +74,50 @@ export default (attributes) => {
77
74
  return {
78
75
  content: html `
79
76
  <div
80
- class='alert anchor anchor--n ${() => state.active && '--active'}'
77
+ class='alert anchor anchor--n ${() => state.active && '--active'} --flex-row'
81
78
  ${omit(attributes, OMIT)}
82
79
  >
83
- <div class='--flex-row'>
84
- ${() => {
80
+ ${() => {
85
81
  let type = state.type;
86
82
  return html `
87
- <div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
88
- ${icon({ class: '--margin-right --margin-600 --size-500' }, type === 'error' ? e : check)}
89
- </div>
90
- `;
83
+ <div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
84
+ ${icon({ class: '--size-500' }, type === 'error' ? e : check)}
85
+ </div>
86
+ `;
91
87
  }}
92
88
 
93
- <div class='--flex-fill --flex-column --gap-100 --padding-right --padding-800'>
94
- ${() => {
89
+ <div
90
+ class='alert-messages --flex-fill --flex-column --padding-right --padding-800'
91
+ ${attributes['alert-messages']}
92
+ >
93
+ ${() => {
95
94
  let message = attributes.message;
96
95
  return state.type && [...state.messages].map((content) => {
97
96
  if (typeof content === 'string') {
98
97
  return html `
99
- <p ${message}>
100
- ${content}
101
- </p>
102
- `;
103
- }
104
- return html `
105
- <div class='--flex-start'>
98
+ <p ${message}>
106
99
  ${content}
107
- </div>
100
+ </p>
108
101
  `;
102
+ }
103
+ return html `
104
+ <div class='--flex-start'>
105
+ ${content}
106
+ </div>
107
+ `;
109
108
  });
110
109
  }}
111
- </div>
112
110
  </div>
113
111
 
114
- <div
115
- class='alert-close button --padding-300'
116
- onclick='${() => deactivate(state)}'
117
- ${attributes.close}
118
- >
119
- <div class="icon" style='--size: 14px;'>
120
- ${svg.sprite(close)}
112
+ <div class="--flex-vertical">
113
+ <div
114
+ class='alert-close button --padding-300'
115
+ onclick='${() => deactivate(state)}'
116
+ ${attributes['alert-close']}
117
+ >
118
+ <div class="icon" style='--size: 14px;'>
119
+ ${svg.sprite(close)}
120
+ </div>
121
121
  </div>
122
122
  </div>
123
123
  </div>
package/build/components/alert/scss/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal)*2);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;transform:translate(50%)}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}.alert{--max-width:640px;max-width:var(--max-width);padding:var(--padding-vertical)var(--padding-horizontal);width:calc(100% - var(--margin-horizontal)*2);z-index:11;position:fixed}.alert.anchor--n:not(.--active){transform:translate(50%,-100%)}.alert.anchor--ne:not(.--active){transform:translateY(-100%)}.alert-close{bottom:50%;right:var(--size-500);z-index:0;position:absolute;transform:translateY(50%)}.alert-message{opacity:0;transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out}.alert-message:not(.--active){pointer-events:none;position:absolute;top:0;left:0;transform:translate(-25%)}.alert-message.--active{opacity:1}}
1
+ @layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal)*2);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;transform:translate(50%)}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}.alert{--max-width:640px;max-width:var(--max-width);padding:var(--padding-vertical)var(--padding-horizontal);width:calc(100% - var(--margin-horizontal)*2);z-index:11;position:fixed}.alert.anchor--n:not(.--active){transform:translate(50%,-100%)}.alert.anchor--ne:not(.--active){transform:translateY(-100%)}.alert-message{opacity:0;transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out}.alert-message:not(.--active){pointer-events:none;position:absolute;top:0;left:0;transform:translate(-25%)}.alert-message.--active{opacity:1}}
2
2
  /*$vite$:1*/
package/build/css-utilities/flex/scss/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer css-utilities {.--flex-center,.--flex-column,.--flex-end,.--flex-horizontal,.--flex-horizontal-space-between,.--flex-row,.--flex-start,.--flex-vertical,.--flex-vertical-space-between{--gap-horizontal:0px;--gap-vertical:0px}.--flex-center,.--flex-end,.--flex-horizontal,.--flex-start,.--flex-vertical{gap:var(--gap-vertical)var(--gap-horizontal);flex-flow:wrap;display:flex;position:relative}.--flex-center,.--flex-horizontal{justify-content:center}.--flex-center,.--flex-vertical{align-items:center}.--flex-column,.--flex-fill,.--flex-fixed,.--flex-row{display:flex;position:relative}.--flex-column{gap:var(--gap-vertical)0px;flex-flow:column}.--flex-end{justify-content:flex-end}.--flex-fill{flex:1;min-width:0}.--flex-fixed{flex:0 0 var(--width)}.--flex-row{gap:0px var(--gap-horizontal);flex-flow:row}.--flex-start{justify-content:flex-start}}
1
+ @layer css-utilities {.--flex-center,.--flex-column,.--flex-end,.--flex-horizontal,.--flex-horizontal-space-between,.--flex-row,.--flex-start,.--flex-vertical,.--flex-vertical-space-between{--gap-horizontal:0px;--gap-vertical:0px}.--flex-center,.--flex-end,.--flex-horizontal,.--flex-start,.--flex-vertical{gap:var(--gap-vertical)var(--gap-horizontal);flex-flow:wrap;display:flex}.--flex-center,.--flex-horizontal{justify-content:center}.--flex-center,.--flex-vertical{align-items:center}.--flex-column,.--flex-fill,.--flex-fixed,.--flex-row{display:flex;position:relative}.--flex-column{gap:var(--gap-vertical)0px;flex-flow:column}.--flex-end{justify-content:flex-end}.--flex-fill{flex:1;min-width:0}.--flex-fixed{flex:0 0 var(--width)}.--flex-row{gap:0px var(--gap-horizontal);flex-flow:row}.--flex-start{justify-content:flex-start}}
2
2
  /*$vite$:1*/
package/build/css-utilities/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer css-utilities {.--margin-border-width,.--margin-horizontal-border-width,.--margin-border-width-400,.--margin-horizontal-border-width-400,.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal:var(--border-width-400)}.--margin-border-width-500,.--margin-horizontal-border-width-500{--margin-horizontal:var(--border-width-500)}.--margin-border-width-600,.--margin-horizontal-border-width-600{--margin-horizontal:var(--border-width-600)}.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal:var(--border-width-400)}.--margin-border-width-700,.--margin-horizontal-border-width-700{--margin-horizontal:var(--border-width-700)}.--margin-spacer-100,.--margin-horizontal-spacer-100{--margin-horizontal:var(--spacer-100)}.--margin-spacer-200,.--margin-horizontal-spacer-200{--margin-horizontal:var(--spacer-200)}.--margin-spacer-300,.--margin-horizontal-spacer-300{--margin-horizontal:var(--spacer-300)}.--margin-spacer,.--margin-horizontal-spacer,.--margin-spacer-400,.--margin-horizontal-spacer-400,.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal:var(--spacer-400)}.--margin-spacer-500,.--margin-horizontal-spacer-500{--margin-horizontal:var(--spacer-500)}.--margin-spacer-600,.--margin-horizontal-spacer-600{--margin-horizontal:var(--spacer-600)}.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal:var(--spacer-400)}.--margin-spacer-700,.--margin-horizontal-spacer-700{--margin-horizontal:var(--spacer-700)}.--margin-100,.--margin-horizontal-100{--margin-horizontal:var(--size-100)}.--margin-200,.--margin-horizontal-200{--margin-horizontal:var(--size-200)}.--margin-300,.--margin-horizontal-300{--margin-horizontal:var(--size-300)}.--margin-400,.--margin-horizontal-400{--margin-horizontal:var(--size-400)}.--margin-500,.--margin-horizontal-500{--margin-horizontal:var(--size-500)}.--margin-600,.--margin-horizontal-600{--margin-horizontal:var(--size-600)}.--margin-700,.--margin-horizontal-700{--margin-horizontal:var(--size-700)}.--margin-800,.--margin-horizontal-800{--margin-horizontal:var(--size-800)}.--margin-900,.--margin-horizontal-900{--margin-horizontal:var(--size-900)}.--margin-0px,.--margin-horizontal-0px{--margin-horizontal:var(--size-0px)}.--margin-inherit,.--margin-horizontal-inherit{--margin-horizontal:inherit}.--margin-border-width,.--margin-vertical-border-width,.--margin-border-width-400,.--margin-vertical-border-width-400,.--margin-border-width,.--margin-vertical-border-width{--margin-vertical:var(--border-width-400)}.--margin-border-width-500,.--margin-vertical-border-width-500{--margin-vertical:var(--border-width-500)}.--margin-border-width-600,.--margin-vertical-border-width-600{--margin-vertical:var(--border-width-600)}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical:var(--border-width-400)}.--margin-border-width-700,.--margin-vertical-border-width-700{--margin-vertical:var(--border-width-700)}.--margin-spacer-100,.--margin-vertical-spacer-100{--margin-vertical:var(--spacer-100)}.--margin-spacer-200,.--margin-vertical-spacer-200{--margin-vertical:var(--spacer-200)}.--margin-spacer-300,.--margin-vertical-spacer-300{--margin-vertical:var(--spacer-300)}.--margin-spacer,.--margin-vertical-spacer,.--margin-spacer-400,.--margin-vertical-spacer-400,.--margin-spacer,.--margin-vertical-spacer{--margin-vertical:var(--spacer-400)}.--margin-spacer-500,.--margin-vertical-spacer-500{--margin-vertical:var(--spacer-500)}.--margin-spacer-600,.--margin-vertical-spacer-600{--margin-vertical:var(--spacer-600)}.--margin-spacer,.--margin-vertical-spacer{--margin-vertical:var(--spacer-400)}.--margin-spacer-700,.--margin-vertical-spacer-700{--margin-vertical:var(--spacer-700)}.--margin-100,.--margin-vertical-100{--margin-vertical:var(--size-100)}.--margin-200,.--margin-vertical-200{--margin-vertical:var(--size-200)}.--margin-300,.--margin-vertical-300{--margin-vertical:var(--size-300)}.--margin-400,.--margin-vertical-400{--margin-vertical:var(--size-400)}.--margin-500,.--margin-vertical-500{--margin-vertical:var(--size-500)}.--margin-600,.--margin-vertical-600{--margin-vertical:var(--size-600)}.--margin-700,.--margin-vertical-700{--margin-vertical:var(--size-700)}.--margin-800,.--margin-vertical-800{--margin-vertical:var(--size-800)}.--margin-900,.--margin-vertical-900{--margin-vertical:var(--size-900)}.--margin-0px,.--margin-vertical-0px{--margin-vertical:var(--size-0px)}.--margin-inherit,.--margin-vertical-inherit{--margin-vertical:inherit}.--padding-border-width,.--padding-horizontal-border-width,.--padding-border-width-400,.--padding-horizontal-border-width-400,.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal:var(--border-width-400)}.--padding-border-width-500,.--padding-horizontal-border-width-500{--padding-horizontal:var(--border-width-500)}.--padding-border-width-600,.--padding-horizontal-border-width-600{--padding-horizontal:var(--border-width-600)}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal:var(--border-width-400)}.--padding-border-width-700,.--padding-horizontal-border-width-700{--padding-horizontal:var(--border-width-700)}.--padding-spacer-100,.--padding-horizontal-spacer-100{--padding-horizontal:var(--spacer-100)}.--padding-spacer-200,.--padding-horizontal-spacer-200{--padding-horizontal:var(--spacer-200)}.--padding-spacer-300,.--padding-horizontal-spacer-300{--padding-horizontal:var(--spacer-300)}.--padding-spacer,.--padding-horizontal-spacer,.--padding-spacer-400,.--padding-horizontal-spacer-400,.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal:var(--spacer-400)}.--padding-spacer-500,.--padding-horizontal-spacer-500{--padding-horizontal:var(--spacer-500)}.--padding-spacer-600,.--padding-horizontal-spacer-600{--padding-horizontal:var(--spacer-600)}.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal:var(--spacer-400)}.--padding-spacer-700,.--padding-horizontal-spacer-700{--padding-horizontal:var(--spacer-700)}.--padding-100,.--padding-horizontal-100{--padding-horizontal:var(--size-100)}.--padding-200,.--padding-horizontal-200{--padding-horizontal:var(--size-200)}.--padding-300,.--padding-horizontal-300{--padding-horizontal:var(--size-300)}.--padding-400,.--padding-horizontal-400{--padding-horizontal:var(--size-400)}.--padding-500,.--padding-horizontal-500{--padding-horizontal:var(--size-500)}.--padding-600,.--padding-horizontal-600{--padding-horizontal:var(--size-600)}.--padding-700,.--padding-horizontal-700{--padding-horizontal:var(--size-700)}.--padding-800,.--padding-horizontal-800{--padding-horizontal:var(--size-800)}.--padding-900,.--padding-horizontal-900{--padding-horizontal:var(--size-900)}.--padding-0px,.--padding-horizontal-0px{--padding-horizontal:var(--size-0px)}.--padding-inherit,.--padding-horizontal-inherit{--padding-horizontal:inherit}.--padding-border-width,.--padding-vertical-border-width,.--padding-border-width-400,.--padding-vertical-border-width-400,.--padding-border-width,.--padding-vertical-border-width{--padding-vertical:var(--border-width-400)}.--padding-border-width-500,.--padding-vertical-border-width-500{--padding-vertical:var(--border-width-500)}.--padding-border-width-600,.--padding-vertical-border-width-600{--padding-vertical:var(--border-width-600)}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical:var(--border-width-400)}.--padding-border-width-700,.--padding-vertical-border-width-700{--padding-vertical:var(--border-width-700)}.--padding-spacer-100,.--padding-vertical-spacer-100{--padding-vertical:var(--spacer-100)}.--padding-spacer-200,.--padding-vertical-spacer-200{--padding-vertical:var(--spacer-200)}.--padding-spacer-300,.--padding-vertical-spacer-300{--padding-vertical:var(--spacer-300)}.--padding-spacer,.--padding-vertical-spacer,.--padding-spacer-400,.--padding-vertical-spacer-400,.--padding-spacer,.--padding-vertical-spacer{--padding-vertical:var(--spacer-400)}.--padding-spacer-500,.--padding-vertical-spacer-500{--padding-vertical:var(--spacer-500)}.--padding-spacer-600,.--padding-vertical-spacer-600{--padding-vertical:var(--spacer-600)}.--padding-spacer,.--padding-vertical-spacer{--padding-vertical:var(--spacer-400)}.--padding-spacer-700,.--padding-vertical-spacer-700{--padding-vertical:var(--spacer-700)}.--padding-100,.--padding-vertical-100{--padding-vertical:var(--size-100)}.--padding-200,.--padding-vertical-200{--padding-vertical:var(--size-200)}.--padding-300,.--padding-vertical-300{--padding-vertical:var(--size-300)}.--padding-400,.--padding-vertical-400{--padding-vertical:var(--size-400)}.--padding-500,.--padding-vertical-500{--padding-vertical:var(--size-500)}.--padding-600,.--padding-vertical-600{--padding-vertical:var(--size-600)}.--padding-700,.--padding-vertical-700{--padding-vertical:var(--size-700)}.--padding-800,.--padding-vertical-800{--padding-vertical:var(--size-800)}.--padding-900,.--padding-vertical-900{--padding-vertical:var(--size-900)}.--padding-0px,.--padding-vertical-0px{--padding-vertical:var(--size-0px)}.--padding-inherit,.--padding-vertical-inherit{--padding-vertical:inherit}.--margin-auto,.--margin-horizontal-auto{--margin-horizontal:auto}.--margin-auto,.--margin-vertical-auto{--margin-vertical:auto}.--margin,.--margin-horizontal{margin-left:var(--margin-horizontal);margin-right:var(--margin-horizontal)}.--margin,.--margin-vertical{margin-bottom:var(--margin-vertical);margin-top:var(--margin-vertical)}.--margin-bottom{margin-bottom:var(--margin-vertical)}.--margin-top{margin-top:var(--margin-vertical)}.--margin-left{margin-left:var(--margin-horizontal)}.--margin-right{margin-right:var(--margin-horizontal)}.--padding,.--padding-horizontal{padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.--padding.--border,.--padding-horizontal.--border{padding-left:calc(var(--padding-horizontal) - var(--border-width));padding-right:calc(var(--padding-horizontal) - var(--border-width))}.--padding,.--padding-vertical{padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical)}.--padding.--border,.--padding-vertical.--border{padding-bottom:calc(var(--padding-vertical) - var(--border-width));padding-top:calc(var(--padding-vertical) - var(--border-width))}.--padding-bottom{padding-bottom:var(--padding-vertical)}.--padding-top{padding-top:var(--padding-vertical)}.--padding-left{padding-left:var(--padding-horizontal)}.--padding-right{padding-right:var(--padding-horizontal)}.--absolute-horizontal-bottom,.--absolute-vertical-bottom{bottom:0}.--absolute-horizontal-top,.--absolute-vertical-top{top:0}.--absolute-horizontal,.--absolute-horizontal-bottom,.--absolute-horizontal-top{position:absolute;right:50%;transform:translate(50%)}.--absolute-vertical,.--absolute-vertical-left,.--absolute-vertical-right{position:absolute;bottom:50%;transform:translateY(50%)}.--absolute-bottom{position:absolute;inset:auto 0 0}.--absolute-center{position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.--absolute-full{position:absolute;inset:0}.--absolute-left{position:absolute;inset:0 auto 0 0}.--absolute-right{position:absolute;inset:0 0 0 auto}.--absolute-top{position:absolute;inset:0 0 auto}.--background-default{--background:var(--background-default);--background-active:var(--background-default);--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--background-state{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--background-state.--active{--background:var(--background-active)}.--background-state:not(.--active):hover{--background:var(--background-hover)}.--background-state:not(.--active):active{--background:var(--background-pressed)}.--background-primary{--background-active:var(--color-primary-300);--background-default:var(--color-primary-400);--background-hover:var(--color-primary-300);--background-pressed:var(--color-primary-500)}.--background-secondary{--background-active:var(--color-secondary-300);--background-default:var(--color-secondary-400);--background-hover:var(--color-secondary-300);--background-pressed:var(--color-secondary-500)}.--background-black{--background-active:var(--color-black-300);--background-default:var(--color-black-400);--background-hover:var(--color-black-300);--background-pressed:var(--color-black-500)}.--background-blue{--background-active:var(--color-blue-300);--background-default:var(--color-blue-400);--background-hover:var(--color-blue-300);--background-pressed:var(--color-blue-500)}.--background-border{--background-active:var(--color-border-300);--background-default:var(--color-border-400);--background-hover:var(--color-border-300);--background-pressed:var(--color-border-500)}.--background-green{--background-active:var(--color-green-300);--background-default:var(--color-green-400);--background-hover:var(--color-green-300);--background-pressed:var(--color-green-500)}.--background-grey{--background-active:var(--color-grey-300);--background-default:var(--color-grey-400);--background-hover:var(--color-grey-300);--background-pressed:var(--color-grey-500)}.--background-purple{--background-active:var(--color-purple-300);--background-default:var(--color-purple-400);--background-hover:var(--color-purple-300);--background-pressed:var(--color-purple-500)}.--background-red{--background-active:var(--color-red-300);--background-default:var(--color-red-400);--background-hover:var(--color-red-300);--background-pressed:var(--color-red-500)}.--background-text{--background-active:var(--color-text-300);--background-default:var(--color-text-400);--background-hover:var(--color-text-300);--background-pressed:var(--color-text-500)}.--background-white{--background-active:var(--color-white-300);--background-default:var(--color-white-400);--background-hover:var(--color-white-300);--background-pressed:var(--color-white-500)}.--background-yellow{--background-active:var(--color-yellow-300);--background-default:var(--color-yellow-400);--background-hover:var(--color-yellow-300);--background-pressed:var(--color-yellow-500)}.--border,.--border-bottom,.--border-left,.--border-right,.--border-top{--border-style:solid;--border-width:var(--border-width-400)}.--border-dashed{--border-style:dashed}.--border-dotted{--border-style:dotted}.--border-radius{--border-radius:var(--border-radius-400)}.--border-radius-100{--border-radius:var(--border-radius-100)}.--border-radius-200{--border-radius:var(--border-radius-200)}.--border-radius-300{--border-radius:var(--border-radius-300)}.--border-radius-400{--border-radius:var(--border-radius-400)}.--border-radius-500{--border-radius:var(--border-radius-500)}.--border-radius-600{--border-radius:var(--border-radius-600)}.--border-radius-700{--border-radius:var(--border-radius-700)}.--border-radius-800{--border-radius:var(--border-radius-800)}.--border-radius-0px{--border-radius:var(--border-radius-0px)}.--border-radius-circle{--border-radius:var(--border-radius-circle)}.--border-radius-curved{--border-radius:var(--border-radius-curved)}.--border-default{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--border-state{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--border-state.--active{--border-color:var(--border-color-active)}.--border-state:not(.--active):hover{--border-color:var(--border-color-hover)}.--border-state:not(.--active):active{--border-color:var(--border-color-pressed)}.--border-width,.--border-width-400{--border-width:var(--border-width-400)}.--border-width-500{--border-width:var(--border-width-500)}.--border-width-600{--border-width:var(--border-width-600)}.--border-width-700{--border-width:var(--border-width-700)}.--border-primary{--border-color-active:var(--color-primary-300);--border-color-default:var(--color-primary-400);--border-color-hover:var(--color-primary-300);--border-color-pressed:var(--color-primary-500)}.--border-secondary{--border-color-active:var(--color-secondary-300);--border-color-default:var(--color-secondary-400);--border-color-hover:var(--color-secondary-300);--border-color-pressed:var(--color-secondary-500)}.--border-black{--border-color-active:var(--color-black-300);--border-color-default:var(--color-black-400);--border-color-hover:var(--color-black-300);--border-color-pressed:var(--color-black-500)}.--border-blue{--border-color-active:var(--color-blue-300);--border-color-default:var(--color-blue-400);--border-color-hover:var(--color-blue-300);--border-color-pressed:var(--color-blue-500)}.--border-border{--border-color-active:var(--color-border-300);--border-color-default:var(--color-border-400);--border-color-hover:var(--color-border-300);--border-color-pressed:var(--color-border-500)}.--border-green{--border-color-active:var(--color-green-300);--border-color-default:var(--color-green-400);--border-color-hover:var(--color-green-300);--border-color-pressed:var(--color-green-500)}.--border-grey{--border-color-active:var(--color-grey-300);--border-color-default:var(--color-grey-400);--border-color-hover:var(--color-grey-300);--border-color-pressed:var(--color-grey-500)}.--border-purple{--border-color-active:var(--color-purple-300);--border-color-default:var(--color-purple-400);--border-color-hover:var(--color-purple-300);--border-color-pressed:var(--color-purple-500)}.--border-red{--border-color-active:var(--color-red-300);--border-color-default:var(--color-red-400);--border-color-hover:var(--color-red-300);--border-color-pressed:var(--color-red-500)}.--border-text{--border-color-active:var(--color-text-300);--border-color-default:var(--color-text-400);--border-color-hover:var(--color-text-300);--border-color-pressed:var(--color-text-500)}.--border-white{--border-color-active:var(--color-white-300);--border-color-default:var(--color-white-400);--border-color-hover:var(--color-white-300);--border-color-pressed:var(--color-white-500)}.--border-yellow{--border-color-active:var(--color-yellow-300);--border-color-default:var(--color-yellow-400);--border-color-hover:var(--color-yellow-300);--border-color-pressed:var(--color-yellow-500)}.--border{border:var(--border-width)var(--border-style)var(--border-color)}.--border-bottom{border-bottom:var(--border-width)var(--border-style)var(--border-color)}.--border-left{border-left:var(--border-width)var(--border-style)var(--border-color)}.--border-right{border-right:var(--border-width)var(--border-style)var(--border-color)}.--border-top{border-top:var(--border-width)var(--border-style)var(--border-color)}.--border-offset-bottom{margin-bottom:calc(var(--border-width)*-1)}.--border-offset-left{margin-left:calc(var(--border-width)*-1)}.--border-offset-right{margin-right:calc(var(--border-width)*-1)}.--border-offset-top{margin-top:calc(var(--border-width)*-1)}.--border-radius{border-radius:var(--border-radius)}.--border-radius-circle{aspect-ratio:1}.--color-default{--color:var(--color-default);--color-active:var(--color-default);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--color-inherit{--color:inherit}.--color-state{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--color-state.--active{--color:var(--color-active)}.--color-state:not(.--active):hover{--color:var(--color-hover)}.--color-state:not(.--active):active{--color:var(--color-pressed)}.--color-primary{--color-active:var(--color-primary-300);--color-default:var(--color-primary-400);--color-hover:var(--color-primary-300);--color-pressed:var(--color-primary-500)}.--color-secondary{--color-active:var(--color-secondary-300);--color-default:var(--color-secondary-400);--color-hover:var(--color-secondary-300);--color-pressed:var(--color-secondary-500)}.--color-black{--color-active:var(--color-black-300);--color-default:var(--color-black-400);--color-hover:var(--color-black-300);--color-pressed:var(--color-black-500)}.--color-blue{--color-active:var(--color-blue-300);--color-default:var(--color-blue-400);--color-hover:var(--color-blue-300);--color-pressed:var(--color-blue-500)}.--color-border{--color-active:var(--color-border-300);--color-default:var(--color-border-400);--color-hover:var(--color-border-300);--color-pressed:var(--color-border-500)}.--color-green{--color-active:var(--color-green-300);--color-default:var(--color-green-400);--color-hover:var(--color-green-300);--color-pressed:var(--color-green-500)}.--color-grey{--color-active:var(--color-grey-300);--color-default:var(--color-grey-400);--color-hover:var(--color-grey-300);--color-pressed:var(--color-grey-500)}.--color-purple{--color-active:var(--color-purple-300);--color-default:var(--color-purple-400);--color-hover:var(--color-purple-300);--color-pressed:var(--color-purple-500)}.--color-red{--color-active:var(--color-red-300);--color-default:var(--color-red-400);--color-hover:var(--color-red-300);--color-pressed:var(--color-red-500)}.--color-text{--color-active:var(--color-text-300);--color-default:var(--color-text-400);--color-hover:var(--color-text-300);--color-pressed:var(--color-text-500)}.--color-white{--color-active:var(--color-white-300);--color-default:var(--color-white-400);--color-hover:var(--color-white-300);--color-pressed:var(--color-white-500)}.--color-yellow{--color-active:var(--color-yellow-300);--color-default:var(--color-yellow-400);--color-hover:var(--color-yellow-300);--color-pressed:var(--color-yellow-500)}.--disabled{opacity:.64;pointer-events:none}.--error{animation:error var(--animation-duration)1 linear}@keyframes error{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.--flex-center,.--flex-column,.--flex-end,.--flex-horizontal,.--flex-horizontal-space-between,.--flex-row,.--flex-start,.--flex-vertical,.--flex-vertical-space-between{--gap-horizontal:0px;--gap-vertical:0px}.--flex-center,.--flex-end,.--flex-horizontal,.--flex-start,.--flex-vertical{gap:var(--gap-vertical)var(--gap-horizontal);flex-flow:wrap;display:flex;position:relative}.--flex-center,.--flex-horizontal{justify-content:center}.--flex-center,.--flex-vertical{align-items:center}.--flex-column,.--flex-fill,.--flex-fixed,.--flex-row{display:flex;position:relative}.--flex-column{gap:var(--gap-vertical)0px;flex-flow:column}.--flex-end{justify-content:flex-end}.--flex-fill{flex:1;min-width:0}.--flex-fixed{flex:0 0 var(--width)}.--flex-row{gap:0px var(--gap-horizontal);flex-flow:row}.--flex-start{justify-content:flex-start}.--flicker{--from:0;--to:1;--transition-duration:1s;animation:flicker var(--transition-duration)ease-in-out infinite}@keyframes flicker{0%,to{opacity:var(--from)}50%{opacity:var(--to)}}.--focus-active>*{--opacity:.24}.--focus-active:has(.--active)>:not(.--active){opacity:var(--opacity)}.--gap-border-width,.--gap-horizontal-border-width,.--gap-border-width-400,.--gap-horizontal-border-width-400,.--gap-border-width,.--gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--gap-border-width-500,.--gap-horizontal-border-width-500{--gap-horizontal:var(--border-width-500)}.--gap-border-width-600,.--gap-horizontal-border-width-600{--gap-horizontal:var(--border-width-600)}.--gap-border-width,.--gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--gap-border-width-700,.--gap-horizontal-border-width-700{--gap-horizontal:var(--border-width-700)}.--gap-spacer-100,.--gap-horizontal-spacer-100{--gap-horizontal:var(--spacer-100)}.--gap-spacer-200,.--gap-horizontal-spacer-200{--gap-horizontal:var(--spacer-200)}.--gap-spacer-300,.--gap-horizontal-spacer-300{--gap-horizontal:var(--spacer-300)}.--gap-spacer,.--gap-horizontal-spacer,.--gap-spacer-400,.--gap-horizontal-spacer-400,.--gap-spacer,.--gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--gap-spacer-500,.--gap-horizontal-spacer-500{--gap-horizontal:var(--spacer-500)}.--gap-spacer-600,.--gap-horizontal-spacer-600{--gap-horizontal:var(--spacer-600)}.--gap-spacer,.--gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--gap-spacer-700,.--gap-horizontal-spacer-700{--gap-horizontal:var(--spacer-700)}.--gap-100,.--gap-horizontal-100{--gap-horizontal:var(--size-100)}.--gap-200,.--gap-horizontal-200{--gap-horizontal:var(--size-200)}.--gap-300,.--gap-horizontal-300{--gap-horizontal:var(--size-300)}.--gap-400,.--gap-horizontal-400{--gap-horizontal:var(--size-400)}.--gap-500,.--gap-horizontal-500{--gap-horizontal:var(--size-500)}.--gap-600,.--gap-horizontal-600{--gap-horizontal:var(--size-600)}.--gap-700,.--gap-horizontal-700{--gap-horizontal:var(--size-700)}.--gap-800,.--gap-horizontal-800{--gap-horizontal:var(--size-800)}.--gap-900,.--gap-horizontal-900{--gap-horizontal:var(--size-900)}.--gap-0px,.--gap-horizontal-0px{--gap-horizontal:var(--size-0px)}.--gap-inherit,.--gap-horizontal-inherit{--gap-horizontal:inherit}.--gap-border-width,.--gap-vertical-border-width,.--gap-border-width-400,.--gap-vertical-border-width-400,.--gap-border-width,.--gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--gap-border-width-500,.--gap-vertical-border-width-500{--gap-vertical:var(--border-width-500)}.--gap-border-width-600,.--gap-vertical-border-width-600{--gap-vertical:var(--border-width-600)}.--gap-border-width,.--gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--gap-border-width-700,.--gap-vertical-border-width-700{--gap-vertical:var(--border-width-700)}.--gap-spacer-100,.--gap-vertical-spacer-100{--gap-vertical:var(--spacer-100)}.--gap-spacer-200,.--gap-vertical-spacer-200{--gap-vertical:var(--spacer-200)}.--gap-spacer-300,.--gap-vertical-spacer-300{--gap-vertical:var(--spacer-300)}.--gap-spacer,.--gap-vertical-spacer,.--gap-spacer-400,.--gap-vertical-spacer-400,.--gap-spacer,.--gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--gap-spacer-500,.--gap-vertical-spacer-500{--gap-vertical:var(--spacer-500)}.--gap-spacer-600,.--gap-vertical-spacer-600{--gap-vertical:var(--spacer-600)}.--gap-spacer,.--gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--gap-spacer-700,.--gap-vertical-spacer-700{--gap-vertical:var(--spacer-700)}.--gap-100,.--gap-vertical-100{--gap-vertical:var(--size-100)}.--gap-200,.--gap-vertical-200{--gap-vertical:var(--size-200)}.--gap-300,.--gap-vertical-300{--gap-vertical:var(--size-300)}.--gap-400,.--gap-vertical-400{--gap-vertical:var(--size-400)}.--gap-500,.--gap-vertical-500{--gap-vertical:var(--size-500)}.--gap-600,.--gap-vertical-600{--gap-vertical:var(--size-600)}.--gap-700,.--gap-vertical-700{--gap-vertical:var(--size-700)}.--gap-800,.--gap-vertical-800{--gap-vertical:var(--size-800)}.--gap-900,.--gap-vertical-900{--gap-vertical:var(--size-900)}.--gap-0px,.--gap-vertical-0px{--gap-vertical:var(--size-0px)}.--gap-inherit,.--gap-vertical-inherit{--gap-vertical:inherit}.--gap{gap:var(--gap-vertical)var(--gap-horizontal)}.--gap-horizontal{gap:0px var(--gap-horizontal)}.--gap-vertical{gap:var(--gap-vertical)0px}.--glass{--blur:24px;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}.--hidden,.--hidden-active.--active,.--hidden-inactive:not(.--active){display:none}.--hidden-offcanvas{appearance:none;opacity:0;pointer-events:none;z-index:-1;width:0;height:0;position:absolute;top:0;left:0}.--inline{font-size:inherit;line-height:inherit;margin:0;padding:0;display:inline}.--line-height-100{--line-height:var(--line-height-100)}.--line-height-200{--line-height:var(--line-height-200)}.--line-height-300{--line-height:var(--line-height-300)}.--line-height-400{--line-height:var(--line-height-400)}.--not-allowed{cursor:not-allowed}.--not-allowed *,.--pointer-none{pointer-events:none}.--scroller{--gap-vertical:0px;--margin-vertical:0px;margin-bottom:calc(var(--scrollbar-width)*-1);padding-bottom:var(--scrollbar-width);flex-flow:row;overflow-y:hidden}.--skeleton{--animation-duration:4.8s;animation:var(--animation-duration)linear infinite skeleton;background-image:linear-gradient(270deg,var(--from),var(--to),var(--to),var(--from));color:#0000;pointer-events:none;background-size:400% 100%}.--skeleton *{opacity:0}@keyframes skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.--size{--size:var(--size-400)}.--size-100{--size:var(--size-100)}.--size-200{--size:var(--size-200)}.--size-300{--size:var(--size-300)}.--size-400{--size:var(--size-400)}.--size-500{--size:var(--size-500)}.--size-600{--size:var(--size-600)}.--size-700{--size:var(--size-700)}.--size-800{--size:var(--size-800)}.--size-900{--size:var(--size-900)}.--size-0px{--size:var(--size-0px)}.--text-100{--font-size:var(--font-size-100)}.--text-200{--font-size:var(--font-size-200)}.--text-300{--font-size:var(--font-size-300)}.--text-400{--font-size:var(--font-size-400)}.--text-500{--font-size:var(--font-size-500)}.--text-600{--font-size:var(--font-size-600)}.--text-700{--font-size:var(--font-size-700)}.--text-800{--font-size:var(--font-size-800)}.--text-900{--font-size:var(--font-size-900)}.--text-line-through,.--text-line-through-400{--line-width:var(--border-width-400)}.--text-line-through-500{--line-width:var(--border-width-500)}.--text-line-through-600{--line-width:var(--border-width-600)}.--text-line-through-700{--line-width:var(--border-width-700)}.--text-outline{--color:inherit;--stroke-width:var(--border-width-400)}.--text-outline-400{--stroke-width:var(--border-width-400)}.--text-outline-500{--stroke-width:var(--border-width-500)}.--text-outline-600{--stroke-width:var(--border-width-600)}.--text-outline-700{--stroke-width:var(--border-width-700)}.--text-bold{font-weight:var(--font-weight-500)}.--text-bold-600{font-weight:var(--font-weight-600)}.--text-center{text-align:center}.--text-crop:after,.--text-crop:before,.--text-crop-bottom:after,.--text-crop-top:before{content:"";width:100%;height:0;display:block}.--text-crop:after,.--text-crop-bottom:after{margin-bottom:calc((1 - var(--line-height))*.618em)}.--text-crop:before,.--text-crop-top:before{margin-top:calc((1 - var(--line-height))*.618em)}.--text-italic{font-style:italic}.--text-line-through{text-decoration:line-through;text-decoration-thickness:var(--line-width)}.--text-multiplier{font-size:calc(var(--font-size)*var(--text-multiplier))}.--text-outline{color:var(--color);word-break:break-word;word-wrap:break-word}@supports (-webkit-text-stroke-width:1px){.--text-outline{color:#0000;-webkit-text-fill-color:transparent;-webkit-text-stroke-color:var(--color);-webkit-text-stroke-width:var(--stroke-width)}}.--text-truncate{line-height:var(--size);text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.--text-underline{text-decoration:underline}.--text-underline-dotted{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.--text-uppercase{text-transform:uppercase}.--viewport{height:calc(100svh - var(--margin-vertical,0px)*2);width:calc(100vw - var(--margin-horizontal,0px)*2);overflow:hidden}.--width-full{--width:100%}.--width-half{--width:50%}.--width{width:var(--width)}}
1
+ @layer css-utilities {.--margin-border-width,.--margin-horizontal-border-width,.--margin-border-width-400,.--margin-horizontal-border-width-400,.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal:var(--border-width-400)}.--margin-border-width-500,.--margin-horizontal-border-width-500{--margin-horizontal:var(--border-width-500)}.--margin-border-width-600,.--margin-horizontal-border-width-600{--margin-horizontal:var(--border-width-600)}.--margin-border-width,.--margin-horizontal-border-width{--margin-horizontal:var(--border-width-400)}.--margin-border-width-700,.--margin-horizontal-border-width-700{--margin-horizontal:var(--border-width-700)}.--margin-spacer-100,.--margin-horizontal-spacer-100{--margin-horizontal:var(--spacer-100)}.--margin-spacer-200,.--margin-horizontal-spacer-200{--margin-horizontal:var(--spacer-200)}.--margin-spacer-300,.--margin-horizontal-spacer-300{--margin-horizontal:var(--spacer-300)}.--margin-spacer,.--margin-horizontal-spacer,.--margin-spacer-400,.--margin-horizontal-spacer-400,.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal:var(--spacer-400)}.--margin-spacer-500,.--margin-horizontal-spacer-500{--margin-horizontal:var(--spacer-500)}.--margin-spacer-600,.--margin-horizontal-spacer-600{--margin-horizontal:var(--spacer-600)}.--margin-spacer,.--margin-horizontal-spacer{--margin-horizontal:var(--spacer-400)}.--margin-spacer-700,.--margin-horizontal-spacer-700{--margin-horizontal:var(--spacer-700)}.--margin-100,.--margin-horizontal-100{--margin-horizontal:var(--size-100)}.--margin-200,.--margin-horizontal-200{--margin-horizontal:var(--size-200)}.--margin-300,.--margin-horizontal-300{--margin-horizontal:var(--size-300)}.--margin-400,.--margin-horizontal-400{--margin-horizontal:var(--size-400)}.--margin-500,.--margin-horizontal-500{--margin-horizontal:var(--size-500)}.--margin-600,.--margin-horizontal-600{--margin-horizontal:var(--size-600)}.--margin-700,.--margin-horizontal-700{--margin-horizontal:var(--size-700)}.--margin-800,.--margin-horizontal-800{--margin-horizontal:var(--size-800)}.--margin-900,.--margin-horizontal-900{--margin-horizontal:var(--size-900)}.--margin-0px,.--margin-horizontal-0px{--margin-horizontal:var(--size-0px)}.--margin-inherit,.--margin-horizontal-inherit{--margin-horizontal:inherit}.--margin-border-width,.--margin-vertical-border-width,.--margin-border-width-400,.--margin-vertical-border-width-400,.--margin-border-width,.--margin-vertical-border-width{--margin-vertical:var(--border-width-400)}.--margin-border-width-500,.--margin-vertical-border-width-500{--margin-vertical:var(--border-width-500)}.--margin-border-width-600,.--margin-vertical-border-width-600{--margin-vertical:var(--border-width-600)}.--margin-border-width,.--margin-vertical-border-width{--margin-vertical:var(--border-width-400)}.--margin-border-width-700,.--margin-vertical-border-width-700{--margin-vertical:var(--border-width-700)}.--margin-spacer-100,.--margin-vertical-spacer-100{--margin-vertical:var(--spacer-100)}.--margin-spacer-200,.--margin-vertical-spacer-200{--margin-vertical:var(--spacer-200)}.--margin-spacer-300,.--margin-vertical-spacer-300{--margin-vertical:var(--spacer-300)}.--margin-spacer,.--margin-vertical-spacer,.--margin-spacer-400,.--margin-vertical-spacer-400,.--margin-spacer,.--margin-vertical-spacer{--margin-vertical:var(--spacer-400)}.--margin-spacer-500,.--margin-vertical-spacer-500{--margin-vertical:var(--spacer-500)}.--margin-spacer-600,.--margin-vertical-spacer-600{--margin-vertical:var(--spacer-600)}.--margin-spacer,.--margin-vertical-spacer{--margin-vertical:var(--spacer-400)}.--margin-spacer-700,.--margin-vertical-spacer-700{--margin-vertical:var(--spacer-700)}.--margin-100,.--margin-vertical-100{--margin-vertical:var(--size-100)}.--margin-200,.--margin-vertical-200{--margin-vertical:var(--size-200)}.--margin-300,.--margin-vertical-300{--margin-vertical:var(--size-300)}.--margin-400,.--margin-vertical-400{--margin-vertical:var(--size-400)}.--margin-500,.--margin-vertical-500{--margin-vertical:var(--size-500)}.--margin-600,.--margin-vertical-600{--margin-vertical:var(--size-600)}.--margin-700,.--margin-vertical-700{--margin-vertical:var(--size-700)}.--margin-800,.--margin-vertical-800{--margin-vertical:var(--size-800)}.--margin-900,.--margin-vertical-900{--margin-vertical:var(--size-900)}.--margin-0px,.--margin-vertical-0px{--margin-vertical:var(--size-0px)}.--margin-inherit,.--margin-vertical-inherit{--margin-vertical:inherit}.--padding-border-width,.--padding-horizontal-border-width,.--padding-border-width-400,.--padding-horizontal-border-width-400,.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal:var(--border-width-400)}.--padding-border-width-500,.--padding-horizontal-border-width-500{--padding-horizontal:var(--border-width-500)}.--padding-border-width-600,.--padding-horizontal-border-width-600{--padding-horizontal:var(--border-width-600)}.--padding-border-width,.--padding-horizontal-border-width{--padding-horizontal:var(--border-width-400)}.--padding-border-width-700,.--padding-horizontal-border-width-700{--padding-horizontal:var(--border-width-700)}.--padding-spacer-100,.--padding-horizontal-spacer-100{--padding-horizontal:var(--spacer-100)}.--padding-spacer-200,.--padding-horizontal-spacer-200{--padding-horizontal:var(--spacer-200)}.--padding-spacer-300,.--padding-horizontal-spacer-300{--padding-horizontal:var(--spacer-300)}.--padding-spacer,.--padding-horizontal-spacer,.--padding-spacer-400,.--padding-horizontal-spacer-400,.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal:var(--spacer-400)}.--padding-spacer-500,.--padding-horizontal-spacer-500{--padding-horizontal:var(--spacer-500)}.--padding-spacer-600,.--padding-horizontal-spacer-600{--padding-horizontal:var(--spacer-600)}.--padding-spacer,.--padding-horizontal-spacer{--padding-horizontal:var(--spacer-400)}.--padding-spacer-700,.--padding-horizontal-spacer-700{--padding-horizontal:var(--spacer-700)}.--padding-100,.--padding-horizontal-100{--padding-horizontal:var(--size-100)}.--padding-200,.--padding-horizontal-200{--padding-horizontal:var(--size-200)}.--padding-300,.--padding-horizontal-300{--padding-horizontal:var(--size-300)}.--padding-400,.--padding-horizontal-400{--padding-horizontal:var(--size-400)}.--padding-500,.--padding-horizontal-500{--padding-horizontal:var(--size-500)}.--padding-600,.--padding-horizontal-600{--padding-horizontal:var(--size-600)}.--padding-700,.--padding-horizontal-700{--padding-horizontal:var(--size-700)}.--padding-800,.--padding-horizontal-800{--padding-horizontal:var(--size-800)}.--padding-900,.--padding-horizontal-900{--padding-horizontal:var(--size-900)}.--padding-0px,.--padding-horizontal-0px{--padding-horizontal:var(--size-0px)}.--padding-inherit,.--padding-horizontal-inherit{--padding-horizontal:inherit}.--padding-border-width,.--padding-vertical-border-width,.--padding-border-width-400,.--padding-vertical-border-width-400,.--padding-border-width,.--padding-vertical-border-width{--padding-vertical:var(--border-width-400)}.--padding-border-width-500,.--padding-vertical-border-width-500{--padding-vertical:var(--border-width-500)}.--padding-border-width-600,.--padding-vertical-border-width-600{--padding-vertical:var(--border-width-600)}.--padding-border-width,.--padding-vertical-border-width{--padding-vertical:var(--border-width-400)}.--padding-border-width-700,.--padding-vertical-border-width-700{--padding-vertical:var(--border-width-700)}.--padding-spacer-100,.--padding-vertical-spacer-100{--padding-vertical:var(--spacer-100)}.--padding-spacer-200,.--padding-vertical-spacer-200{--padding-vertical:var(--spacer-200)}.--padding-spacer-300,.--padding-vertical-spacer-300{--padding-vertical:var(--spacer-300)}.--padding-spacer,.--padding-vertical-spacer,.--padding-spacer-400,.--padding-vertical-spacer-400,.--padding-spacer,.--padding-vertical-spacer{--padding-vertical:var(--spacer-400)}.--padding-spacer-500,.--padding-vertical-spacer-500{--padding-vertical:var(--spacer-500)}.--padding-spacer-600,.--padding-vertical-spacer-600{--padding-vertical:var(--spacer-600)}.--padding-spacer,.--padding-vertical-spacer{--padding-vertical:var(--spacer-400)}.--padding-spacer-700,.--padding-vertical-spacer-700{--padding-vertical:var(--spacer-700)}.--padding-100,.--padding-vertical-100{--padding-vertical:var(--size-100)}.--padding-200,.--padding-vertical-200{--padding-vertical:var(--size-200)}.--padding-300,.--padding-vertical-300{--padding-vertical:var(--size-300)}.--padding-400,.--padding-vertical-400{--padding-vertical:var(--size-400)}.--padding-500,.--padding-vertical-500{--padding-vertical:var(--size-500)}.--padding-600,.--padding-vertical-600{--padding-vertical:var(--size-600)}.--padding-700,.--padding-vertical-700{--padding-vertical:var(--size-700)}.--padding-800,.--padding-vertical-800{--padding-vertical:var(--size-800)}.--padding-900,.--padding-vertical-900{--padding-vertical:var(--size-900)}.--padding-0px,.--padding-vertical-0px{--padding-vertical:var(--size-0px)}.--padding-inherit,.--padding-vertical-inherit{--padding-vertical:inherit}.--margin-auto,.--margin-horizontal-auto{--margin-horizontal:auto}.--margin-auto,.--margin-vertical-auto{--margin-vertical:auto}.--margin,.--margin-horizontal{margin-left:var(--margin-horizontal);margin-right:var(--margin-horizontal)}.--margin,.--margin-vertical{margin-bottom:var(--margin-vertical);margin-top:var(--margin-vertical)}.--margin-bottom{margin-bottom:var(--margin-vertical)}.--margin-top{margin-top:var(--margin-vertical)}.--margin-left{margin-left:var(--margin-horizontal)}.--margin-right{margin-right:var(--margin-horizontal)}.--padding,.--padding-horizontal{padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.--padding.--border,.--padding-horizontal.--border{padding-left:calc(var(--padding-horizontal) - var(--border-width));padding-right:calc(var(--padding-horizontal) - var(--border-width))}.--padding,.--padding-vertical{padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical)}.--padding.--border,.--padding-vertical.--border{padding-bottom:calc(var(--padding-vertical) - var(--border-width));padding-top:calc(var(--padding-vertical) - var(--border-width))}.--padding-bottom{padding-bottom:var(--padding-vertical)}.--padding-top{padding-top:var(--padding-vertical)}.--padding-left{padding-left:var(--padding-horizontal)}.--padding-right{padding-right:var(--padding-horizontal)}.--absolute-horizontal-bottom,.--absolute-vertical-bottom{bottom:0}.--absolute-horizontal-top,.--absolute-vertical-top{top:0}.--absolute-horizontal,.--absolute-horizontal-bottom,.--absolute-horizontal-top{position:absolute;right:50%;transform:translate(50%)}.--absolute-vertical,.--absolute-vertical-left,.--absolute-vertical-right{position:absolute;bottom:50%;transform:translateY(50%)}.--absolute-bottom{position:absolute;inset:auto 0 0}.--absolute-center{position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.--absolute-full{position:absolute;inset:0}.--absolute-left{position:absolute;inset:0 auto 0 0}.--absolute-right{position:absolute;inset:0 0 0 auto}.--absolute-top{position:absolute;inset:0 0 auto}.--background-default{--background:var(--background-default);--background-active:var(--background-default);--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--background-state{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--background-state.--active{--background:var(--background-active)}.--background-state:not(.--active):hover{--background:var(--background-hover)}.--background-state:not(.--active):active{--background:var(--background-pressed)}.--background-primary{--background-active:var(--color-primary-300);--background-default:var(--color-primary-400);--background-hover:var(--color-primary-300);--background-pressed:var(--color-primary-500)}.--background-secondary{--background-active:var(--color-secondary-300);--background-default:var(--color-secondary-400);--background-hover:var(--color-secondary-300);--background-pressed:var(--color-secondary-500)}.--background-black{--background-active:var(--color-black-300);--background-default:var(--color-black-400);--background-hover:var(--color-black-300);--background-pressed:var(--color-black-500)}.--background-blue{--background-active:var(--color-blue-300);--background-default:var(--color-blue-400);--background-hover:var(--color-blue-300);--background-pressed:var(--color-blue-500)}.--background-border{--background-active:var(--color-border-300);--background-default:var(--color-border-400);--background-hover:var(--color-border-300);--background-pressed:var(--color-border-500)}.--background-green{--background-active:var(--color-green-300);--background-default:var(--color-green-400);--background-hover:var(--color-green-300);--background-pressed:var(--color-green-500)}.--background-grey{--background-active:var(--color-grey-300);--background-default:var(--color-grey-400);--background-hover:var(--color-grey-300);--background-pressed:var(--color-grey-500)}.--background-purple{--background-active:var(--color-purple-300);--background-default:var(--color-purple-400);--background-hover:var(--color-purple-300);--background-pressed:var(--color-purple-500)}.--background-red{--background-active:var(--color-red-300);--background-default:var(--color-red-400);--background-hover:var(--color-red-300);--background-pressed:var(--color-red-500)}.--background-text{--background-active:var(--color-text-300);--background-default:var(--color-text-400);--background-hover:var(--color-text-300);--background-pressed:var(--color-text-500)}.--background-white{--background-active:var(--color-white-300);--background-default:var(--color-white-400);--background-hover:var(--color-white-300);--background-pressed:var(--color-white-500)}.--background-yellow{--background-active:var(--color-yellow-300);--background-default:var(--color-yellow-400);--background-hover:var(--color-yellow-300);--background-pressed:var(--color-yellow-500)}.--border,.--border-bottom,.--border-left,.--border-right,.--border-top{--border-style:solid;--border-width:var(--border-width-400)}.--border-dashed{--border-style:dashed}.--border-dotted{--border-style:dotted}.--border-radius{--border-radius:var(--border-radius-400)}.--border-radius-100{--border-radius:var(--border-radius-100)}.--border-radius-200{--border-radius:var(--border-radius-200)}.--border-radius-300{--border-radius:var(--border-radius-300)}.--border-radius-400{--border-radius:var(--border-radius-400)}.--border-radius-500{--border-radius:var(--border-radius-500)}.--border-radius-600{--border-radius:var(--border-radius-600)}.--border-radius-700{--border-radius:var(--border-radius-700)}.--border-radius-800{--border-radius:var(--border-radius-800)}.--border-radius-0px{--border-radius:var(--border-radius-0px)}.--border-radius-circle{--border-radius:var(--border-radius-circle)}.--border-radius-curved{--border-radius:var(--border-radius-curved)}.--border-default{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--border-state{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--border-state.--active{--border-color:var(--border-color-active)}.--border-state:not(.--active):hover{--border-color:var(--border-color-hover)}.--border-state:not(.--active):active{--border-color:var(--border-color-pressed)}.--border-width,.--border-width-400{--border-width:var(--border-width-400)}.--border-width-500{--border-width:var(--border-width-500)}.--border-width-600{--border-width:var(--border-width-600)}.--border-width-700{--border-width:var(--border-width-700)}.--border-primary{--border-color-active:var(--color-primary-300);--border-color-default:var(--color-primary-400);--border-color-hover:var(--color-primary-300);--border-color-pressed:var(--color-primary-500)}.--border-secondary{--border-color-active:var(--color-secondary-300);--border-color-default:var(--color-secondary-400);--border-color-hover:var(--color-secondary-300);--border-color-pressed:var(--color-secondary-500)}.--border-black{--border-color-active:var(--color-black-300);--border-color-default:var(--color-black-400);--border-color-hover:var(--color-black-300);--border-color-pressed:var(--color-black-500)}.--border-blue{--border-color-active:var(--color-blue-300);--border-color-default:var(--color-blue-400);--border-color-hover:var(--color-blue-300);--border-color-pressed:var(--color-blue-500)}.--border-border{--border-color-active:var(--color-border-300);--border-color-default:var(--color-border-400);--border-color-hover:var(--color-border-300);--border-color-pressed:var(--color-border-500)}.--border-green{--border-color-active:var(--color-green-300);--border-color-default:var(--color-green-400);--border-color-hover:var(--color-green-300);--border-color-pressed:var(--color-green-500)}.--border-grey{--border-color-active:var(--color-grey-300);--border-color-default:var(--color-grey-400);--border-color-hover:var(--color-grey-300);--border-color-pressed:var(--color-grey-500)}.--border-purple{--border-color-active:var(--color-purple-300);--border-color-default:var(--color-purple-400);--border-color-hover:var(--color-purple-300);--border-color-pressed:var(--color-purple-500)}.--border-red{--border-color-active:var(--color-red-300);--border-color-default:var(--color-red-400);--border-color-hover:var(--color-red-300);--border-color-pressed:var(--color-red-500)}.--border-text{--border-color-active:var(--color-text-300);--border-color-default:var(--color-text-400);--border-color-hover:var(--color-text-300);--border-color-pressed:var(--color-text-500)}.--border-white{--border-color-active:var(--color-white-300);--border-color-default:var(--color-white-400);--border-color-hover:var(--color-white-300);--border-color-pressed:var(--color-white-500)}.--border-yellow{--border-color-active:var(--color-yellow-300);--border-color-default:var(--color-yellow-400);--border-color-hover:var(--color-yellow-300);--border-color-pressed:var(--color-yellow-500)}.--border{border:var(--border-width)var(--border-style)var(--border-color)}.--border-bottom{border-bottom:var(--border-width)var(--border-style)var(--border-color)}.--border-left{border-left:var(--border-width)var(--border-style)var(--border-color)}.--border-right{border-right:var(--border-width)var(--border-style)var(--border-color)}.--border-top{border-top:var(--border-width)var(--border-style)var(--border-color)}.--border-offset-bottom{margin-bottom:calc(var(--border-width)*-1)}.--border-offset-left{margin-left:calc(var(--border-width)*-1)}.--border-offset-right{margin-right:calc(var(--border-width)*-1)}.--border-offset-top{margin-top:calc(var(--border-width)*-1)}.--border-radius{border-radius:var(--border-radius)}.--border-radius-circle{aspect-ratio:1}.--color-default{--color:var(--color-default);--color-active:var(--color-default);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--color-inherit{--color:inherit}.--color-state{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--color-state.--active{--color:var(--color-active)}.--color-state:not(.--active):hover{--color:var(--color-hover)}.--color-state:not(.--active):active{--color:var(--color-pressed)}.--color-primary{--color-active:var(--color-primary-300);--color-default:var(--color-primary-400);--color-hover:var(--color-primary-300);--color-pressed:var(--color-primary-500)}.--color-secondary{--color-active:var(--color-secondary-300);--color-default:var(--color-secondary-400);--color-hover:var(--color-secondary-300);--color-pressed:var(--color-secondary-500)}.--color-black{--color-active:var(--color-black-300);--color-default:var(--color-black-400);--color-hover:var(--color-black-300);--color-pressed:var(--color-black-500)}.--color-blue{--color-active:var(--color-blue-300);--color-default:var(--color-blue-400);--color-hover:var(--color-blue-300);--color-pressed:var(--color-blue-500)}.--color-border{--color-active:var(--color-border-300);--color-default:var(--color-border-400);--color-hover:var(--color-border-300);--color-pressed:var(--color-border-500)}.--color-green{--color-active:var(--color-green-300);--color-default:var(--color-green-400);--color-hover:var(--color-green-300);--color-pressed:var(--color-green-500)}.--color-grey{--color-active:var(--color-grey-300);--color-default:var(--color-grey-400);--color-hover:var(--color-grey-300);--color-pressed:var(--color-grey-500)}.--color-purple{--color-active:var(--color-purple-300);--color-default:var(--color-purple-400);--color-hover:var(--color-purple-300);--color-pressed:var(--color-purple-500)}.--color-red{--color-active:var(--color-red-300);--color-default:var(--color-red-400);--color-hover:var(--color-red-300);--color-pressed:var(--color-red-500)}.--color-text{--color-active:var(--color-text-300);--color-default:var(--color-text-400);--color-hover:var(--color-text-300);--color-pressed:var(--color-text-500)}.--color-white{--color-active:var(--color-white-300);--color-default:var(--color-white-400);--color-hover:var(--color-white-300);--color-pressed:var(--color-white-500)}.--color-yellow{--color-active:var(--color-yellow-300);--color-default:var(--color-yellow-400);--color-hover:var(--color-yellow-300);--color-pressed:var(--color-yellow-500)}.--disabled{opacity:.64;pointer-events:none}.--error{animation:error var(--animation-duration)1 linear}@keyframes error{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.--flex-center,.--flex-column,.--flex-end,.--flex-horizontal,.--flex-horizontal-space-between,.--flex-row,.--flex-start,.--flex-vertical,.--flex-vertical-space-between{--gap-horizontal:0px;--gap-vertical:0px}.--flex-center,.--flex-end,.--flex-horizontal,.--flex-start,.--flex-vertical{gap:var(--gap-vertical)var(--gap-horizontal);flex-flow:wrap;display:flex}.--flex-center,.--flex-horizontal{justify-content:center}.--flex-center,.--flex-vertical{align-items:center}.--flex-column,.--flex-fill,.--flex-fixed,.--flex-row{display:flex;position:relative}.--flex-column{gap:var(--gap-vertical)0px;flex-flow:column}.--flex-end{justify-content:flex-end}.--flex-fill{flex:1;min-width:0}.--flex-fixed{flex:0 0 var(--width)}.--flex-row{gap:0px var(--gap-horizontal);flex-flow:row}.--flex-start{justify-content:flex-start}.--flicker{--from:0;--to:1;--transition-duration:1s;animation:flicker var(--transition-duration)ease-in-out infinite}@keyframes flicker{0%,to{opacity:var(--from)}50%{opacity:var(--to)}}.--focus-active>*{--opacity:.24}.--focus-active:has(.--active)>:not(.--active){opacity:var(--opacity)}.--gap-border-width,.--gap-horizontal-border-width,.--gap-border-width-400,.--gap-horizontal-border-width-400,.--gap-border-width,.--gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--gap-border-width-500,.--gap-horizontal-border-width-500{--gap-horizontal:var(--border-width-500)}.--gap-border-width-600,.--gap-horizontal-border-width-600{--gap-horizontal:var(--border-width-600)}.--gap-border-width,.--gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--gap-border-width-700,.--gap-horizontal-border-width-700{--gap-horizontal:var(--border-width-700)}.--gap-spacer-100,.--gap-horizontal-spacer-100{--gap-horizontal:var(--spacer-100)}.--gap-spacer-200,.--gap-horizontal-spacer-200{--gap-horizontal:var(--spacer-200)}.--gap-spacer-300,.--gap-horizontal-spacer-300{--gap-horizontal:var(--spacer-300)}.--gap-spacer,.--gap-horizontal-spacer,.--gap-spacer-400,.--gap-horizontal-spacer-400,.--gap-spacer,.--gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--gap-spacer-500,.--gap-horizontal-spacer-500{--gap-horizontal:var(--spacer-500)}.--gap-spacer-600,.--gap-horizontal-spacer-600{--gap-horizontal:var(--spacer-600)}.--gap-spacer,.--gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--gap-spacer-700,.--gap-horizontal-spacer-700{--gap-horizontal:var(--spacer-700)}.--gap-100,.--gap-horizontal-100{--gap-horizontal:var(--size-100)}.--gap-200,.--gap-horizontal-200{--gap-horizontal:var(--size-200)}.--gap-300,.--gap-horizontal-300{--gap-horizontal:var(--size-300)}.--gap-400,.--gap-horizontal-400{--gap-horizontal:var(--size-400)}.--gap-500,.--gap-horizontal-500{--gap-horizontal:var(--size-500)}.--gap-600,.--gap-horizontal-600{--gap-horizontal:var(--size-600)}.--gap-700,.--gap-horizontal-700{--gap-horizontal:var(--size-700)}.--gap-800,.--gap-horizontal-800{--gap-horizontal:var(--size-800)}.--gap-900,.--gap-horizontal-900{--gap-horizontal:var(--size-900)}.--gap-0px,.--gap-horizontal-0px{--gap-horizontal:var(--size-0px)}.--gap-inherit,.--gap-horizontal-inherit{--gap-horizontal:inherit}.--gap-border-width,.--gap-vertical-border-width,.--gap-border-width-400,.--gap-vertical-border-width-400,.--gap-border-width,.--gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--gap-border-width-500,.--gap-vertical-border-width-500{--gap-vertical:var(--border-width-500)}.--gap-border-width-600,.--gap-vertical-border-width-600{--gap-vertical:var(--border-width-600)}.--gap-border-width,.--gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--gap-border-width-700,.--gap-vertical-border-width-700{--gap-vertical:var(--border-width-700)}.--gap-spacer-100,.--gap-vertical-spacer-100{--gap-vertical:var(--spacer-100)}.--gap-spacer-200,.--gap-vertical-spacer-200{--gap-vertical:var(--spacer-200)}.--gap-spacer-300,.--gap-vertical-spacer-300{--gap-vertical:var(--spacer-300)}.--gap-spacer,.--gap-vertical-spacer,.--gap-spacer-400,.--gap-vertical-spacer-400,.--gap-spacer,.--gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--gap-spacer-500,.--gap-vertical-spacer-500{--gap-vertical:var(--spacer-500)}.--gap-spacer-600,.--gap-vertical-spacer-600{--gap-vertical:var(--spacer-600)}.--gap-spacer,.--gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--gap-spacer-700,.--gap-vertical-spacer-700{--gap-vertical:var(--spacer-700)}.--gap-100,.--gap-vertical-100{--gap-vertical:var(--size-100)}.--gap-200,.--gap-vertical-200{--gap-vertical:var(--size-200)}.--gap-300,.--gap-vertical-300{--gap-vertical:var(--size-300)}.--gap-400,.--gap-vertical-400{--gap-vertical:var(--size-400)}.--gap-500,.--gap-vertical-500{--gap-vertical:var(--size-500)}.--gap-600,.--gap-vertical-600{--gap-vertical:var(--size-600)}.--gap-700,.--gap-vertical-700{--gap-vertical:var(--size-700)}.--gap-800,.--gap-vertical-800{--gap-vertical:var(--size-800)}.--gap-900,.--gap-vertical-900{--gap-vertical:var(--size-900)}.--gap-0px,.--gap-vertical-0px{--gap-vertical:var(--size-0px)}.--gap-inherit,.--gap-vertical-inherit{--gap-vertical:inherit}.--gap{gap:var(--gap-vertical)var(--gap-horizontal)}.--gap-horizontal{gap:0px var(--gap-horizontal)}.--gap-vertical{gap:var(--gap-vertical)0px}.--glass{--blur:24px;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}.--hidden,.--hidden-active.--active,.--hidden-inactive:not(.--active){display:none}.--hidden-offcanvas{appearance:none;opacity:0;pointer-events:none;z-index:-1;width:0;height:0;position:absolute;top:0;left:0}.--inline{font-size:inherit;line-height:inherit;margin:0;padding:0;display:inline}.--line-height-100{--line-height:var(--line-height-100)}.--line-height-200{--line-height:var(--line-height-200)}.--line-height-300{--line-height:var(--line-height-300)}.--line-height-400{--line-height:var(--line-height-400)}.--not-allowed{cursor:not-allowed}.--not-allowed *,.--pointer-none{pointer-events:none}.--scroller{--gap-vertical:0px;--margin-vertical:0px;margin-bottom:calc(var(--scrollbar-width)*-1);padding-bottom:var(--scrollbar-width);flex-flow:row;overflow-y:hidden}.--skeleton{--animation-duration:4.8s;animation:var(--animation-duration)linear infinite skeleton;background-image:linear-gradient(270deg,var(--from),var(--to),var(--to),var(--from));color:#0000;pointer-events:none;background-size:400% 100%}.--skeleton *{opacity:0}@keyframes skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.--size{--size:var(--size-400)}.--size-100{--size:var(--size-100)}.--size-200{--size:var(--size-200)}.--size-300{--size:var(--size-300)}.--size-400{--size:var(--size-400)}.--size-500{--size:var(--size-500)}.--size-600{--size:var(--size-600)}.--size-700{--size:var(--size-700)}.--size-800{--size:var(--size-800)}.--size-900{--size:var(--size-900)}.--size-0px{--size:var(--size-0px)}.--text-100{--font-size:var(--font-size-100)}.--text-200{--font-size:var(--font-size-200)}.--text-300{--font-size:var(--font-size-300)}.--text-400{--font-size:var(--font-size-400)}.--text-500{--font-size:var(--font-size-500)}.--text-600{--font-size:var(--font-size-600)}.--text-700{--font-size:var(--font-size-700)}.--text-800{--font-size:var(--font-size-800)}.--text-900{--font-size:var(--font-size-900)}.--text-line-through,.--text-line-through-400{--line-width:var(--border-width-400)}.--text-line-through-500{--line-width:var(--border-width-500)}.--text-line-through-600{--line-width:var(--border-width-600)}.--text-line-through-700{--line-width:var(--border-width-700)}.--text-outline{--color:inherit;--stroke-width:var(--border-width-400)}.--text-outline-400{--stroke-width:var(--border-width-400)}.--text-outline-500{--stroke-width:var(--border-width-500)}.--text-outline-600{--stroke-width:var(--border-width-600)}.--text-outline-700{--stroke-width:var(--border-width-700)}.--text-bold{font-weight:var(--font-weight-500)}.--text-bold-600{font-weight:var(--font-weight-600)}.--text-center{text-align:center}.--text-crop:after,.--text-crop:before,.--text-crop-bottom:after,.--text-crop-top:before{content:"";width:100%;height:0;display:block}.--text-crop:after,.--text-crop-bottom:after{margin-bottom:calc((1 - var(--line-height))*.618em)}.--text-crop:before,.--text-crop-top:before{margin-top:calc((1 - var(--line-height))*.618em)}.--text-italic{font-style:italic}.--text-line-through{text-decoration:line-through;text-decoration-thickness:var(--line-width)}.--text-multiplier{font-size:calc(var(--font-size)*var(--text-multiplier))}.--text-outline{color:var(--color);word-break:break-word;word-wrap:break-word}@supports (-webkit-text-stroke-width:1px){.--text-outline{color:#0000;-webkit-text-fill-color:transparent;-webkit-text-stroke-color:var(--color);-webkit-text-stroke-width:var(--stroke-width)}}.--text-truncate{line-height:var(--size);text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.--text-underline{text-decoration:underline}.--text-underline-dotted{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.--text-uppercase{text-transform:uppercase}.--viewport{height:calc(100svh - var(--margin-vertical,0px)*2);width:calc(100vw - var(--margin-horizontal,0px)*2);overflow:hidden}.--width-full{--width:100%}.--width-half{--width:50%}.--width{width:var(--width)}}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -45,7 +45,7 @@
45
45
  "private": false,
46
46
  "sideEffects": false,
47
47
  "type": "module",
48
- "version": "0.42.9",
48
+ "version": "0.42.10",
49
49
  "scripts": {
50
50
  "build": "run-s build:vite build:ts",
51
51
  "build:ts": "tsc && tsc-alias",
package/src/components/alert/index.ts CHANGED
@@ -13,7 +13,7 @@ import './scss/index.scss';
13
13
  type Type = 'error' | 'info' | 'success';
14
14
 
15
15
 
16
- const OMIT = ['close', 'message'];
16
+ const OMIT = ['alert-close', 'alert-messages', 'message'];
17
17
 
18
18
 
19
19
  let modifiers: Record<Type, string> = {
@@ -24,7 +24,7 @@ let modifiers: Record<Type, string> = {
24
24
  timeout = 250;
25
25
 
26
26
 
27
- function activate(key: Type, messages: Renderable<any>, seconds: number, state: { active: boolean, messages: Set<Renderable<any>>, type: Type }) {
27
+ function activate(key: Type, messages: Renderable<any>, seconds: number, state: { active: boolean, messages: Set<Renderable<any>>, rerender: number, type: Type }) {
28
28
  if (!Array.isArray(messages)) {
29
29
  messages = [messages];
30
30
  }
@@ -34,33 +34,29 @@ function activate(key: Type, messages: Renderable<any>, seconds: number, state:
34
34
  }
35
35
 
36
36
  if (state.type !== key) {
37
+ state.active = false;
37
38
  state.messages.clear();
38
39
  }
39
- else {
40
- // @ts-ignore
41
- state.type = '';
42
- }
40
+
41
+ state.type = key;
43
42
 
44
43
  for (let message of messages) {
45
44
  state.messages.add(message);
46
45
  }
47
46
 
48
47
  if (state.active) {
49
- state.active = false;
48
+ state.rerender++;
50
49
 
51
- // Slide in animation needs time
52
- setTimeout(() => {
53
- state.active = true;
54
- state.type = key;
50
+ if (!seconds) {
51
+ return;
52
+ }
55
53
 
56
- if (seconds) {``
57
- setTimeout(deactivate, 500 * seconds);
58
- }
59
- }, timeout);
54
+ setTimeout(deactivate, timeout + (500 * seconds));
60
55
  }
61
56
  else {
62
57
  setTimeout(() => {
63
58
  state.active = true;
59
+ state.rerender++;
64
60
  state.type = key;
65
61
 
66
62
  if (seconds) {
@@ -79,10 +75,11 @@ function deactivate(state: { active: boolean, messages: Set<Renderable<any>>, ty
79
75
  }
80
76
 
81
77
 
82
- export default (attributes: Attributes & { close?: Attributes, message?: Attributes }) => {
78
+ export default (attributes: Attributes & { 'alert-close'?: Attributes, 'alert-messages'?: Attributes, message?: Attributes }) => {
83
79
  let state = reactive({
84
80
  active: false,
85
81
  messages: new Set() as Set<Renderable<any>>,
82
+ rerender: 0,
86
83
  type: '' as Type
87
84
  });
88
85
 
@@ -110,50 +107,53 @@ export default (attributes: Attributes & { close?: Attributes, message?: Attribu
110
107
  return {
111
108
  content: html`
112
109
  <div
113
- class='alert anchor anchor--n ${() => state.active && '--active'}'
110
+ class='alert anchor anchor--n ${() => state.active && '--active'} --flex-row'
114
111
  ${omit(attributes, OMIT)}
115
112
  >
116
- <div class='--flex-row'>
117
- ${() => {
118
- let type = state.type;
119
-
120
- return html`
121
- <div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
122
- ${icon({ class: '--margin-right --margin-600 --size-500' }, type === 'error' ? e : check)}
123
- </div>
124
- `;
125
- }}
113
+ ${() => {
114
+ let type = state.type;
126
115
 
127
- <div class='--flex-fill --flex-column --gap-100 --padding-right --padding-800'>
128
- ${() => {
129
- let message = attributes.message;
116
+ return html`
117
+ <div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
118
+ ${icon({ class: '--size-500' }, type === 'error' ? e : check)}
119
+ </div>
120
+ `;
121
+ }}
130
122
 
131
- return state.type && [...state.messages].map((content) => {
132
- if (typeof content === 'string') {
133
- return html`
134
- <p ${message}>
135
- ${content}
136
- </p>
137
- `;
138
- }
123
+ <div
124
+ class='alert-messages --flex-fill --flex-column --padding-right --padding-800'
125
+ ${attributes['alert-messages']}
126
+ >
127
+ ${() => {
128
+ let message = attributes.message;
139
129
 
130
+ return state.type && [...state.messages].map((content) => {
131
+ if (typeof content === 'string') {
140
132
  return html`
141
- <div class='--flex-start'>
133
+ <p ${message}>
142
134
  ${content}
143
- </div>
135
+ </p>
144
136
  `;
145
- });
146
- }}
147
- </div>
137
+ }
138
+
139
+ return html`
140
+ <div class='--flex-start'>
141
+ ${content}
142
+ </div>
143
+ `;
144
+ });
145
+ }}
148
146
  </div>
149
147
 
150
- <div
151
- class='alert-close button --padding-300'
152
- onclick='${() => deactivate(state)}'
153
- ${attributes.close}
154
- >
155
- <div class="icon" style='--size: 14px;'>
156
- ${svg.sprite(close)}
148
+ <div class="--flex-vertical">
149
+ <div
150
+ class='alert-close button --padding-300'
151
+ onclick='${() => deactivate(state)}'
152
+ ${attributes['alert-close']}
153
+ >
154
+ <div class="icon" style='--size: 14px;'>
155
+ ${svg.sprite(close)}
156
+ </div>
157
157
  </div>
158
158
  </div>
159
159
  </div>
package/src/components/alert/scss/index.scss CHANGED
@@ -24,12 +24,6 @@
24
24
  }
25
25
 
26
26
 
27
- &-close {
28
- @include lib.position(absolute, vertical);
29
- right: var(--size-500);
30
- z-index: 0;
31
- }
32
-
33
27
  &-message {
34
28
  opacity: 0;
35
29
  transition:
package/src/css-utilities/flex/scss/index.scss CHANGED
@@ -9,7 +9,6 @@
9
9
  display: flex;
10
10
  flex-flow: row wrap;
11
11
  gap: var(--gap-vertical) var(--gap-horizontal);
12
- position: relative;
13
12
  }
14
13
 
15
14
  &-center,