ada-ui 0.0.0-beta-v5-20240723120941 → 0.0.0-beta-v5-20240723124551

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # ada-ui
2
2
 
3
- ## 0.0.0-beta-v5-20240723120941
3
+ ## 0.0.0-beta-v5-20240723124551
4
4
 
5
5
  ### Major Changes
6
6
 
package/css/ada.css CHANGED
@@ -1 +1 @@
1
- *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--gap-sm: 4px;--gap: 6px;--spacing: 0.8rem;--border-width-sm: 0.08rem;--border-width: 0.15rem;--focus-border-width: 0.15rem}@media screen and (min-width: 768px){:root{--font-size: 14px}}html{font-family:var(--font-family);font-weight:400}html,body{font-size:var(--font-size);height:100%;min-height:100%}body{padding:var(--spacing);background:var(--bg-body);color:var(--fg100)}h1,h2,h3,h4,h5,h6,.panel>header{font-weight:300;text-shadow:0 0 4px var(--bg700);color:var(--fg100)}h1{font-size:3rem;margin:1rem 0 2rem 0}h1.m-0{margin:0}h2{font-size:2rem;margin:1rem 0 1.5rem 0}h2.m-0{margin:0}h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}h3.m-0{margin:0}h4{font-size:1.2rem;margin:.5rem 0 .5rem 0}h4.m-0{margin:0}.command{overflow:hidden;outline:none;color:var(--fg100);font-family:inherit;cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;background-color:var(--bg900);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;font-size:1.1rem;border-style:solid;border-color:transparent;border-width:0 0 0 var(--focus-border-width);padding:.25rem .6rem;min-height:3rem;min-width:3rem;border-radius:.3rem}.command:disabled{opacity:.6;filter:saturate(0.2);cursor:default;pointer-events:none}.command.flash{animation:flash-background 1s ease-in-out infinite}.command.outline{background-color:transparent;border-color:var(--bg800);border-width:var(--border-width)}.command.outline.flash{animation-name:flash-border}.command:focus{border-left-color:var(--bg600)}.command:active{border-color:var(--bg600);background-color:var(--bg600);animation-play-state:paused}.compound-command{display:inline-grid;grid-auto-flow:column;gap:var(--gap)}.compound-command>.spacer{background-color:var(--bg900);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-command>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--bg800)}.compound-command>.text{font-size:2rem;line-height:2rem;align-self:center;padding:.25rem}.compound-command>button:first-child,.compound-command .spacer:first-child{border-radius:.3rem 0 0 .3rem}.compound-command>button:not(:first-child):not(:last-child),.compound-command .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-command>button:last-child,.compound-command .spacer:last-child{border-radius:0 .3rem .3rem 0}.compound-command.vertical{grid-auto-flow:row}.compound-command.vertical>.text{justify-self:center}.compound-command.vertical>button:first-child,.compound-command.vertical .spacer:first-child{border-radius:.3rem .3rem 0 0}.compound-command.vertical>button:last-child,.compound-command.vertical .spacer:last-child{border-radius:0 0 .3rem .3rem}@keyframes flash-background{50%{background-color:var(--bg700)}}@keyframes flash-border{50%{border-color:var(--bg600)}}.input{border-radius:.3rem;box-shadow:var(--box-shadow);outline:none;border:var(--border-width-sm) solid var(--bg700);color:var(--fg100);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem;font-size:1.1rem}.input:focus{border:var(--border-width-sm) solid var(--bg600)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto;margin:.5rem}.panel>header{position:relative;font-size:1.5rem;padding:.4rem .6rem}.panel>header:before{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:var(--corner-border-width) 0 0 var(--corner-border-width);border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:var(--corner-border-width) var(--corner-border-width) 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar{width:var(--border-width);background:transparent}.panel>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--border-width);background:var(--bg800);box-sizing:border-box;background-clip:border-box}.panel>footer{position:relative;color:var(--fg200);padding:.4rem .6rem;font-size:.75rem;text-align:right}.panel>footer:before{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:0 0 var(--corner-border-width) var(--corner-border-width);border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:0 var(--corner-border-width) var(--corner-border-width) 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.spinner{display:inline-grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--bg800) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px #000a,0px -12px 10px -12px #000a}.spinner:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--bg600);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px #000a,-12px 0px 10px -12px #000a}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}
1
+ *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--gap-sm: 4px;--gap: 6px;--spacing: 0.8rem;--border-width-sm: 0.08rem;--border-width: 0.15rem;--focus-border-width: 0.15rem}@media screen and (min-width: 768px){:root{--font-size: 14px}}html{font-family:var(--font-family);font-weight:400}html,body{font-size:var(--font-size);height:100%;min-height:100%}body{padding:var(--spacing);background:var(--bg-body);color:var(--fg100)}h1,h2,h3,h4,h5,h6,.panel>header{font-weight:300;text-shadow:0 0 4px var(--bg700);color:var(--fg100)}h1{font-size:3rem;margin:1rem 0 2rem 0}h1.m-0{margin:0}h2{font-size:2rem;margin:1rem 0 1.5rem 0}h2.m-0{margin:0}h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}h3.m-0{margin:0}h4{font-size:1.2rem;margin:.5rem 0 .5rem 0}h4.m-0{margin:0}.command{overflow:hidden;outline:none;color:var(--fg100);font-family:inherit;cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;background-color:var(--bg900);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;font-size:1.1rem;border-style:solid;border-color:transparent;border-width:0 0 0 var(--focus-border-width);padding:.25rem .6rem;min-height:3rem;min-width:3rem;border-radius:.3rem}.command:disabled{opacity:.6;filter:saturate(0.2);cursor:default;pointer-events:none}.command.flash{animation:flash-background 1s ease-in-out infinite}.command.outline{background-color:transparent;border-color:var(--bg800);border-width:var(--border-width)}.command.outline.flash{animation-name:flash-border}.command:focus{border-left-color:var(--bg600)}.command:active{border-color:var(--bg600);background-color:var(--bg600);animation-play-state:paused}.compound-commands{display:inline-grid;grid-auto-flow:column;gap:var(--gap)}.compound-commands>.spacer{background-color:var(--bg900);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--bg800)}.compound-commands>.text{font-size:2rem;line-height:2rem;align-self:center;padding:.25rem}.compound-commands>button:first-child,.compound-commands .spacer:first-child{border-radius:.3rem 0 0 .3rem}.compound-commands>button:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-commands>button:last-child,.compound-commands .spacer:last-child{border-radius:0 .3rem .3rem 0}.compound-commands.vertical{grid-auto-flow:row}.compound-commands.vertical>.text{justify-self:center}.compound-commands.vertical>button:first-child,.compound-commands.vertical .spacer:first-child{border-radius:.3rem .3rem 0 0}.compound-commands.vertical>button:last-child,.compound-commands.vertical .spacer:last-child{border-radius:0 0 .3rem .3rem}@keyframes flash-background{50%{background-color:var(--bg700)}}@keyframes flash-border{50%{border-color:var(--bg600)}}.input{border-radius:.3rem;box-shadow:var(--box-shadow);outline:none;border:var(--border-width-sm) solid var(--bg700);color:var(--fg100);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem;font-size:1.1rem}.input:focus{border:var(--border-width-sm) solid var(--bg600)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header{position:relative;font-size:1.5rem;padding:.4rem .6rem}.panel>header:before{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:var(--corner-border-width) 0 0 var(--corner-border-width);border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:var(--corner-border-width) var(--corner-border-width) 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar{width:var(--border-width);background:transparent}.panel>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--border-width);background:var(--bg800);box-sizing:border-box;background-clip:border-box}.panel>footer{position:relative;color:var(--fg200);padding:.4rem .6rem;font-size:.75rem;text-align:right}.panel>footer:before{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:0 0 var(--corner-border-width) var(--corner-border-width);border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:0 var(--corner-border-width) var(--corner-border-width) 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.spinner{display:inline-grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--bg800) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px #000a,0px -12px 10px -12px #000a}.spinner:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--bg600);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px #000a,-12px 0px 10px -12px #000a}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}
package/index.html CHANGED
@@ -68,7 +68,7 @@
68
68
  "
69
69
  >
70
70
  <div
71
- class="compound-command vertical"
71
+ class="compound-commands vertical"
72
72
  style="grid-template-rows: auto auto 1fr auto auto; min-width: 10rem"
73
73
  >
74
74
  <button class="command">Command</button>
@@ -217,18 +217,18 @@
217
217
  <button disabled class="command outline accent">Command</button>
218
218
  <button disabled class="command outline warn">Command</button>
219
219
  <h4 style="grid-column: span 5">Compound</h4>
220
- <div style="grid-column: span 5" class="compound-command">
220
+ <div style="grid-column: span 5" class="compound-commands">
221
221
  <button class="command outline">Any command</button>
222
222
  <button class="command primary-alt outline"></button>
223
223
  <div class="spacer outline"></div>
224
224
  </div>
225
- <div style="grid-column: span 5" class="compound-command">
225
+ <div style="grid-column: span 5" class="compound-commands">
226
226
  <button class="command">Command</button>
227
227
  <div class="text">47</div>
228
228
  <div class="spacer"></div>
229
229
  </div>
230
230
  <h4 style="grid-column: span 5">Compound Vertical</h4>
231
- <div class="compound-command vertical">
231
+ <div class="compound-commands vertical">
232
232
  <button class="command">Command</button>
233
233
  <div class="text">47</div>
234
234
  <div class="spacer"></div>
@@ -273,7 +273,7 @@
273
273
  <footer>Ada Version 5.0.0</footer>
274
274
  </div>
275
275
  <div
276
- class="compound-command"
276
+ class="compound-commands"
277
277
  style="
278
278
  grid-template-columns: auto auto 12rem auto auto 1fr auto auto;
279
279
  grid-column: span 2;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ada-ui",
3
- "version": "0.0.0-beta-v5-20240723120941",
3
+ "version": "0.0.0-beta-v5-20240723124551",
4
4
  "scripts": {
5
5
  "dev": "concurrently -n scss,serve 'sass scss:css --watch' 'alive-server .'",
6
6
  "build": "rm -rf css && sass scss:css -s compressed --no-source-map",
@@ -8,7 +8,7 @@
8
8
  "snapshot": "f(){ if [ -z \"$1\" ]; then echo \"Error: No tag name specified, exiting.\"; exit 1; fi; npm run build && changeset version --snapshot $1 && changeset publish --no-git-tag --tag $1; }; f",
9
9
  "remove-snapshot": "f(){ if [ -z \"$1\" ]; then echo \"Error: No tag name specified, exiting.\"; exit 1; fi; npm dist-tag rm ada-ui $1; }; f",
10
10
  "version": "npm run build && changeset version",
11
- "publish": "changeset publish"
11
+ "publish-package": "changeset publish"
12
12
  },
13
13
  "license": "MIT",
14
14
  "exports": {
@@ -58,7 +58,7 @@
58
58
  }
59
59
  }
60
60
 
61
- .compound-command {
61
+ .compound-commands {
62
62
  display: inline-grid;
63
63
  grid-auto-flow: column;
64
64
  gap: var(--gap);
package/scss/_panel.scss CHANGED
@@ -7,10 +7,6 @@
7
7
  display: grid;
8
8
  grid-template-rows: auto 1fr auto;
9
9
  overflow: auto;
10
- // This margin is ok here and necessary bc of the box shadow of the panel
11
- // without a margin, the box shadow could be cut off if there is no space between panels
12
- // so it is the responsibility of the panel to ensure this
13
- margin: 0.5rem;
14
10
 
15
11
  > header {
16
12
  position: relative;