smoothly 1.1.0 → 1.1.1-alpha.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.
@@ -42,7 +42,6 @@
42
42
  align-items: center;
43
43
  justify-content: center;
44
44
  font-weight: var(--smoothly-font-weight);
45
- padding: 0 0.4em;
46
45
  overflow: hidden;
47
46
  background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
48
47
  color: rgb(var(--text-color, var(--smoothly-color-contrast)));
@@ -60,7 +59,7 @@
60
59
  }
61
60
  label {
62
61
  position: absolute;
63
- left: 0;
62
+ left: 0.4em;
64
63
  top: 0.6em;
65
64
  opacity: 0.8;
66
65
  user-select: none;
@@ -72,10 +71,10 @@ label {
72
71
  display: none;
73
72
  }
74
73
  :host:not([show-label]) input {
75
- padding: 0.7em 0.3em 0.7em 0.4em;
74
+ padding: 0.7em 0.7em 0.7em 0.8em;
76
75
  }
77
76
  input {
78
- padding: 1.2em 0.3em 0.2em 0.4em;
77
+ padding: 1.2em 0.7em 0.2em 0.8em;
79
78
  box-sizing: border-box;
80
79
  width: 100%;
81
80
  height: 100%;
@@ -34163,7 +34163,7 @@ const SmoothlyIconDemo$1 = class extends HTMLElement {
34163
34163
  static get style() { return styleCss$X; }
34164
34164
  };
34165
34165
 
34166
- const styleCss$W = ".sc-smoothly-input-h{box-sizing:border-box}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-h[looks=\"grid\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-h{border:none}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within) input.sc-smoothly-input{background:transparent}[looks=\"transparent\"].sc-smoothly-input-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);padding:0 0.4em;overflow:hidden;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));color:rgb(var(--text-color, var(--smoothly-color-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input:nth-child(2){margin-left:0.2em}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0;top:0.6em;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.7em 0.3em 0.7em 0.4em}input.sc-smoothly-input{padding:1.2em 0.3em 0.2em 0.4em;box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.sc-smoothly-input-h:not([readonly]):not(.has-value)[placeholder]>div.sc-smoothly-input>label.sc-smoothly-input,.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):not(.has-value):focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-color-contrast)))}";
34166
+ const styleCss$W = ".sc-smoothly-input-h{box-sizing:border-box}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-h[looks=\"grid\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-h{border:none}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within) input.sc-smoothly-input{background:transparent}[looks=\"transparent\"].sc-smoothly-input-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);overflow:hidden;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));color:rgb(var(--text-color, var(--smoothly-color-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input:nth-child(2){margin-left:0.2em}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.7em 0.7em 0.7em 0.8em}input.sc-smoothly-input{padding:1.2em 0.7em 0.2em 0.8em;box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.sc-smoothly-input-h:not([readonly]):not(.has-value)[placeholder]>div.sc-smoothly-input>label.sc-smoothly-input,.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):not(.has-value):focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-color-contrast)))}";
34167
34167
 
34168
34168
  const SmoothlyInput$1 = class extends HTMLElement {
34169
34169
  constructor() {