nightshade 1.0.0-2 → 1.0.0-3

package/dist/nightshade.css

@@ -1 +1 @@
-:root{--sp: 8px;--sp0-5: calc(.5 * var(--sp));--sp1: var(--sp);--sp1-5: calc(1.5 * var(--sp));--sp2: calc(2 * var(--sp));--sp2-5: calc(2.5 * var(--sp));--sp3: calc(3 * var(--sp));--sp4: calc(4 * var(--sp));--sp5: calc(5 * var(--sp));--sp6: calc(6 * var(--sp));--sp7: calc(7 * var(--sp));--sp8: calc(8 * var(--sp));--sp9: calc(9 * var(--sp));--sp10: calc(10 * var(--sp));--sp12: calc(12 * var(--sp));--sp16: calc(16 * var(--sp));--sp24: calc(24 * var(--sp));--sp32: calc(32 * var(--sp))}:root{--font-main: sans-serif;--font-monospace: monospace;--font-size: 16px;--font-size-small: 14px;--font-size-smaller: 12px;--font-size-large: 18px;--font-size-larger: 20px;--font-weight: 400;--font-weight-bold: 500;--line-height: 1.5em}:root{--color-base-0: hsl(280deg, 10%, 100%);--color-base-1: hsl(280deg, 10%, 96%);--color-base-2: hsl(280deg, 10%, 92%);--color-base-3: hsl(280deg, 10%, 88%);--color-base-4: hsl(280deg, 10%, 80%);--color-text-0: hsl(280deg, 10%, 20%);--color-text-1: hsl(280deg, 10%, 48%);--color-text-2: hsl(280deg, 10%, 64%);--color-text-3: hsl(280deg, 10%, 72%);--color-text-4: hsl(280deg, 10%, 78%);--color-default: var(--color-text-0);--color-default-0: var(--color-base-0);--color-default-1: var(--color-base-1);--color-default-2: var(--color-base-2);--color-default-3: var(--color-base-3);--color-default-4: var(--color-base-4);--color-default-text: var(--color-text-0);--color-default-surface-top: var(--color-default-1);--color-default-surface-bottom: var(--color-default-3);--color-default-focus: var(--color-primary-focus);--color-default-outline: var(--color-default-2);--color-default-shadow: var(--color-default-4);--color-primary: var(--color-primary-2);--color-primary-0: hsl(310deg, 64%, 75%);--color-primary-1: hsl(310deg, 64%, 64%);--color-primary-2: hsl(310deg, 64%, 50%);--color-primary-3: hsl(310deg, 64%, 44%);--color-primary-4: hsl(310deg, 64%, 36%);--color-primary-text: #fff;--color-primary-surface-top: var(--color-primary-1);--color-primary-surface-bottom: var(--color-primary-3);--color-primary-focus: var(--color-primary-0);--color-primary-outline: var(--color-primary-2);--color-primary-shadow: var(--color-primary-4);--color-secondary: var(--color-secondary-2);--color-secondary-0: hsl(290deg, 50%, 75%);--color-secondary-1: hsl(290deg, 50%, 64%);--color-secondary-2: hsl(290deg, 50%, 50%);--color-secondary-3: hsl(290deg, 50%, 44%);--color-secondary-4: hsl(290deg, 50%, 36%);--color-secondary-text: #fff;--color-secondary-surface-top: var(--color-secondary-1);--color-secondary-surface-bottom: var(--color-secondary-3);--color-secondary-focus: var(--color-secondary-0);--color-secondary-outline: var(--color-secondary-2);--color-secondary-shadow: var(--color-secondary-4);--color-tertiary: var(--color-tertiary-2);--color-tertiary-0: hsl(176deg, 50%, 78%);--color-tertiary-1: hsl(176deg, 50%, 72%);--color-tertiary-2: hsl(176deg, 50%, 50%);--color-tertiary-3: hsl(176deg, 50%, 44%);--color-tertiary-4: hsl(176deg, 50%, 36%);--color-tertiary-text: #fff;--color-tertiary-surface-top: var(--color-tertiary-1);--color-tertiary-surface-bottom: var(--color-tertiary-3);--color-tertiary-focus: var(--color-tertiary-0);--color-tertiary-outline: var(--color-tertiary-2);--color-tertiary-shadow: var(--color-tertiary-4);--color-success: var(--color-success-2);--color-success-0: hsl(96deg, 60%, 76%);--color-success-1: hsl(96deg, 60%, 68%);--color-success-2: hsl(96deg, 60%, 50%);--color-success-3: hsl(96deg, 60%, 44%);--color-success-4: hsl(96deg, 60%, 36%);--color-success-text: #fff;--color-success-surface-top: var(--color-success-1);--color-success-surface-bottom: var(--color-success-3);--color-success-focus: var(--color-success-0);--color-success-outline: var(--color-success-2);--color-success-shadow: var(--color-success-4);--color-warning: var(--color-warning-3);--color-warning-0: hsl(48deg, 88%, 85%);--color-warning-1: hsl(48deg, 88%, 80%);--color-warning-2: hsl(48deg, 88%, 60%);--color-warning-3: hsl(48deg, 88%, 48%);--color-warning-4: hsl(48deg, 88%, 40%);--color-warning-text: #000;--color-warning-surface-top: var(--color-warning-1);--color-warning-surface-bottom: var(--color-warning-3);--color-warning-focus: var(--color-warning-0);--color-warning-outline: var(--color-warning-2);--color-warning-shadow: var(--color-warning-4);--color-danger: var(--color-danger-2);--color-danger-0: hsl(350deg, 88%, 75%);--color-danger-1: hsl(350deg, 88%, 64%);--color-danger-2: hsl(350deg, 88%, 50%);--color-danger-3: hsl(350deg, 88%, 44%);--color-danger-4: hsl(350deg, 88%, 32%);--color-danger-text: #fff;--color-danger-surface-top: var(--color-danger-1);--color-danger-surface-bottom: var(--color-danger-3);--color-danger-focus: var(--color-danger-0);--color-danger-outline: var(--color-danger-2);--color-danger-shadow: var(--color-danger-4)}.Theme-dark{--color-base-0: hsl(280deg, 5%, 16%);--color-base-1: hsl(280deg, 5%, 20%);--color-base-2: hsl(280deg, 5%, 24%);--color-base-3: hsl(280deg, 5%, 27%);--color-base-4: hsl(280deg, 5%, 32%);--color-text-0: hsl(280deg, 10%, 96%);--color-text-1: hsl(280deg, 10%, 72%);--color-text-2: hsl(280deg, 10%, 50%);--color-text-3: hsl(280deg, 10%, 44%);--color-text-4: hsl(280deg, 10%, 40%);--color-default-0: var(--color-base-4);--color-default-1: var(--color-base-3);--color-default-2: var(--color-base-2);--color-default-3: var(--color-base-1);--color-default-4: var(--color-base-0)}:root{--background-color: var(--color-base-0);--text-color: var(--color-text-0);--link-color: var(--color-primary-2);--link-color-hover: var(--color-primary-1);--code-color: var(--color-secondary);--color-subtle: var(--color-text-1);--color-sublime: var(--color-text-2);--border-radius: var(--sp2);--border-radius-small: var(--sp);--border-radius-large: var(--sp4);--input-size: var(--sp4);--input-size-small: var(--sp3);--input-size-smaller: var(--sp2);--input-size-large: var(--sp5);--input-size-larger: var(--sp6);--color-overlay-backdrop: rgba(0,0,0,.08);--color-overlay-shadow: rgba(0,0,0,.15)}.Theme-dark{--color-overlay-backdrop: rgba(255,255,255,.04)}*{box-sizing:border-box}html,body,img,form{margin:0;padding:0;border:0}html{font-size:var(--font-size);font-family:var(--font-main);font-weight:var(--font-weight);line-height:var(--line-height);color:var(--text-color);background:var(--background-color);text-rendering:optimizeLegibility}a{color:currentColor;text-decoration:none;cursor:pointer}button,input,textarea{font-family:inherit;font-size:inherit}input[type=checkbox]{cursor:pointer}h1{font-weight:var(--font-weight-bold);font-size:32px;line-height:32px;margin:var(--sp3) 0}h2{font-weight:var(--font-weight);font-size:28px;line-height:28px;margin:var(--sp2) 0}h3{font-size:24px;line-height:24px;font-weight:var(--font-weight-bold);margin:var(--sp2) 0}h4{font-size:var(--font-size-large);font-weight:var(--font-weight-bold);line-height:var(--sp2);margin:var(--sp) 0}h5,h6{font-size:var(--font-size-small);font-weight:var(--font-weight);color:var(--color-text-1);text-transform:uppercase;margin:var(--sp) 0}strong{font-weight:var(--font-weight-bold)}kbd{position:relative;display:inline-block;text-align:center;border:1px solid var(--color-base-2);border-bottom-width:2px;border-bottom-color:var(--color-base-3);height:1.5em;min-width:1.5em;padding:0 .25em;margin:0 2px;border-radius:4px;font:inherit;background:var(--color-base-0);background:radial-gradient(100% 100% at 100% 0%,var(--color-base-0) 0%,var(--color-base-1) 100%)}kbd:after{content:"";position:absolute;z-index:-1;top:2px;bottom:-4px;left:-3px;right:-3px;border-radius:4px;border:1px solid var(--color-base-4)}article a{color:var(--link-color)}article a:hover{color:var(--link-color-hover)}article code{font:12px/1.4 var(--font-monospace)}article :not(pre)>code{color:var(--code-color);white-space:nowrap}article pre{line-height:1.2em;white-space:pre-wrap}.color-primary{color:var(--color-primary)}.color-secondary{color:var(--color-secondary)}.color-tertiary{color:var(--color-tertiary)}.color-success{color:var(--color-success)}.color-warning{color:var(--color-warning)}.color-danger{color:var(--color-danger)}.color-subtle{color:var(--color-subtle)}.color-sublime{color:var(--color-sublime)}.pad-0{padding:0}.pad-1{padding:var(--sp1)}.pad-2{padding:var(--sp2)}.pad-3{padding:var(--sp3)}.pad-4{padding:var(--sp4)}.pad-5{padding:var(--sp5)}.pad-6{padding:var(--sp6)}.pad-x0{padding-left:0;padding-right:0}.pad-x1{padding-left:var(--sp1);padding-right:var(--sp1)}.pad-x2{padding-left:var(--sp2);padding-right:var(--sp2)}.pad-x3{padding-left:var(--sp3);padding-right:var(--sp3)}.pad-x4{padding-left:var(--sp4);padding-right:var(--sp4)}.pad-x5{padding-left:var(--sp5);padding-right:var(--sp5)}.pad-x6{padding-left:var(--sp6);padding-right:var(--sp6)}.pad-y0{padding-top:0;padding-bottom:0}.pad-y1{padding-top:var(--sp1);padding-bottom:var(--sp1)}.pad-y2{padding-top:var(--sp2);padding-bottom:var(--sp2)}.pad-y3{padding-top:var(--sp3);padding-bottom:var(--sp3)}.pad-y4{padding-top:var(--sp4);padding-bottom:var(--sp4)}.pad-y5{padding-top:var(--sp5);padding-bottom:var(--sp5)}.pad-y6{padding-top:var(--sp6);padding-bottom:var(--sp6)}.pad-l0{padding-left:0}.pad-l1{padding-left:var(--sp1)}.pad-l2{padding-left:var(--sp2)}.pad-l3{padding-left:var(--sp3)}.pad-l4{padding-left:var(--sp4)}.pad-l5{padding-left:var(--sp5)}.pad-l6{padding-left:var(--sp6)}.pad-r0{padding-right:0}.pad-r1{padding-right:var(--sp1)}.pad-r2{padding-right:var(--sp2)}.pad-r3{padding-right:var(--sp3)}.pad-r4{padding-right:var(--sp4)}.pad-r5{padding-right:var(--sp5)}.pad-r6{padding-right:var(--sp6)}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.flex-5{flex:5}.flex-6{flex:6}.flex-7{flex:7}.flex-8{flex:8}.flex-9{flex:9}.flex-10{flex:10}.flex-11{flex:11}.flex-12{flex:12}.input-clear{display:block;width:100%;border:0;outline:0;background:none}.input-mono{font:12px/1.4 var(--font-monospace)}.text-small{font-size:var(--font-size-small)}.text-large{font-size:var(--font-size-large)}.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter-from,.fade-leave-to{opacity:0}.fade-scale-enter-active,.fade-scale-leave-active{transition:opacity .5s,transform .5s}.fade-scale-enter-from{transform:scale(.75);opacity:0}.fade-scale-leave-to{transform:scale(1.25);opacity:0}.fade-squash-enter-active,.fade-squash-leave-active{transition:opacity .25s,transform .25s}.fade-squash-enter-from,.fade-squash-leave-to{transform:scale(10,.1);opacity:0}.fade-swipe-enter-active,.fade-swipe-leave-active{transition:opacity .25s,transform .25s}.fade-swipe-enter-from{transform:translate(-96px,-32px);opacity:0}.fade-swipe-leave-to{transform:translate(96px,-32px);opacity:0}.fade-shove-enter-active,.fade-shove-leave-active{transition:opacity .3s,transform .3s}.fade-shove-enter-from{opacity:0}.fade-shove-leave-to{transform:translate(16px,-16px) scale(.95);opacity:0}.fade-left-enter-active,.fade-left-leave-active,.fade-right-enter-active,.fade-right-leave-active,.fade-top-enter-active,.fade-top-leave-active,.fade-bottom-enter-active,.fade-bottom-leave-active{transition:opacity .25s,transform .25s}.fade-left-enter-from,.fade-left-leave-to,.fade-right-enter-from,.fade-right-leave-to,.fade-top-enter-from,.fade-top-leave-to,.fade-bottom-enter-from,.fade-bottom-leave-to{opacity:0}.fade-left-enter-from,.fade-left-leave-to{transform:translate(16px)}.fade-right-enter-from,.fade-right-leave-to{transform:translate(-16px)}.fade-top-enter-from,.fade-top-leave-to{transform:translateY(16px)}.fade-bottom-enter-from,.fade-bottom-leave-to{transform:translateY(-16px)}.Btn[data-v-85f04b1c]{--Btn-padding: var(--sp1-5);--Btn-size: var(--input-size);--Btn-text-color: inherit;--Btn-outline-color: transparent;--Btn-outline-color-effective: transparent;--Btn-outline-color-focus: var(--color-primary);--Btn-surface-top: transparent;--Btn-surface-bottom: transparent;--Btn-shadow-color: transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;z-index:1;margin:0;padding:0 var(--Btn-padding);height:var(--Btn-size);line-height:var(--Btn-size);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:var(--sp);border:0;border-radius:var(--border-radius-small);cursor:pointer;font:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;color:var(--Btn-text-color);outline:2px solid var(--Btn-outline-color-effective);background:radial-gradient(120% 150% at 80% 0%,var(--Btn-surface-top),var(--Btn-surface-bottom));background-clip:padding-box;box-shadow:0 1px 1px var(--Btn-shadow-color);transition:color .3s,outline .3s,filter .3s,border-radius .3s}.Btn[data-v-85f04b1c]:focus,.Btn[data-v-85f04b1c]:active,.Btn[data-v-85f04b1c]:hover{transition:none}.Btn[data-v-85f04b1c]:not(:disabled):hover,.Btn.Btn-pseudo-hover[data-v-85f04b1c]{filter:brightness(1.07)}.Btn[data-v-85f04b1c]:not(:disabled):focus,.Btn.Btn-pseudo-focus[data-v-85f04b1c]{z-index:10;--Btn-outline-color-effective: var(--Btn-outline-color-focus)}.Btn[data-v-85f04b1c]:not(:disabled):active,.Btn.Btn-pseudo-active[data-v-85f04b1c]{padding-top:1px;box-shadow:0 6px 12px #00000014 inset,0 1px 2px #0000001f inset}.Label[data-v-85f04b1c]{line-height:var(--Btn-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Icon[data-v-85f04b1c]{width:var(--sp2);display:flex;align-items:center;justify-content:center}.Btn-square[data-v-85f04b1c]{padding-left:0;padding-right:0;width:var(--Btn-size);justify-content:center}.Btn-round[data-v-85f04b1c]{border-radius:var(--border-radius-large)}.Btn-disabled[data-v-85f04b1c]{opacity:.64;filter:saturate(40%);cursor:not-allowed}.Btn-block[data-v-85f04b1c]{flex:1 1 auto;display:flex;justify-content:center}.Btn-outline[data-v-85f04b1c]{--Btn-outline-color-effective: var(--Btn-outline-color)}.Btn-large[data-v-85f04b1c]{--Btn-size: var(--input-size-large);--Btn-padding: var(--sp2);font-size:var(--font-size-large)}.Btn-small[data-v-85f04b1c]{--Btn-size: var(--input-size-small);--Btn-padding: var(--sp);font-size:var(--font-size-small)}.Btn-small .Icon[data-v-85f04b1c]{font-size:var(--font-size-small)}.Btn-iconPos-right .Icon[data-v-85f04b1c]{order:100}.Btn-default[data-v-85f04b1c]{--Btn-text-color: var(--color-default-text);--Btn-surface-top: var(--color-default-surface-top);--Btn-surface-bottom: var(--color-default-surface-bottom);--Btn-surface-top-hover: var(--color-default-surface-top-hover);--Btn-surface-bottom-hover: var(--color-default-surface-bottom-hover);--Btn-outline-color: var(--color-default-outline);--Btn-outline-color-focus: var(--color-default-focus);--Btn-shadow-color: var(--color-default-shadow)}.Btn-primary[data-v-85f04b1c]{--Btn-text-color: var(--color-primary-text);--Btn-surface-top: var(--color-primary-surface-top);--Btn-surface-bottom: var(--color-primary-surface-bottom);--Btn-surface-top-hover: var(--color-primary-surface-top-hover);--Btn-surface-bottom-hover: var(--color-primary-surface-bottom-hover);--Btn-outline-color: var(--color-primary-outline);--Btn-outline-color-focus: var(--color-primary-focus);--Btn-shadow-color: var(--color-primary-shadow)}.Btn-secondary[data-v-85f04b1c]{--Btn-text-color: var(--color-secondary-text);--Btn-surface-top: var(--color-secondary-surface-top);--Btn-surface-bottom: var(--color-secondary-surface-bottom);--Btn-surface-top-hover: var(--color-secondary-surface-top-hover);--Btn-surface-bottom-hover: var(--color-secondary-surface-bottom-hover);--Btn-outline-color: var(--color-secondary-outline);--Btn-outline-color-focus: var(--color-secondary-focus);--Btn-shadow-color: var(--color-secondary-shadow)}.Btn-tertiary[data-v-85f04b1c]{--Btn-text-color: var(--color-tertiary-text);--Btn-surface-top: var(--color-tertiary-surface-top);--Btn-surface-bottom: var(--color-tertiary-surface-bottom);--Btn-surface-top-hover: var(--color-tertiary-surface-top-hover);--Btn-surface-bottom-hover: var(--color-tertiary-surface-bottom-hover);--Btn-outline-color: var(--color-tertiary-outline);--Btn-outline-color-focus: var(--color-tertiary-focus);--Btn-shadow-color: var(--color-tertiary-shadow)}.Btn-success[data-v-85f04b1c]{--Btn-text-color: var(--color-success-text);--Btn-surface-top: var(--color-success-surface-top);--Btn-surface-bottom: var(--color-success-surface-bottom);--Btn-surface-top-hover: var(--color-success-surface-top-hover);--Btn-surface-bottom-hover: var(--color-success-surface-bottom-hover);--Btn-outline-color: var(--color-success-outline);--Btn-outline-color-focus: var(--color-success-focus);--Btn-shadow-color: var(--color-success-shadow)}.Btn-warning[data-v-85f04b1c]{--Btn-text-color: var(--color-warning-text);--Btn-surface-top: var(--color-warning-surface-top);--Btn-surface-bottom: var(--color-warning-surface-bottom);--Btn-outline-color: var(--color-warning-outline);--Btn-outline-color-focus: var(--color-warning-focus);--Btn-shadow-color: var(--color-warning-shadow)}.Btn-danger[data-v-85f04b1c]{--Btn-text-color: var(--color-danger-text);--Btn-surface-top: var(--color-danger-surface-top);--Btn-surface-bottom: var(--color-danger-surface-bottom);--Btn-outline-color: var(--color-danger-outline);--Btn-outline-color-focus: var(--color-danger-focus);--Btn-shadow-color: var(--color-danger-shadow)}.Btn-link-default[data-v-85f04b1c]{--Btn-text-color: var(--color-default);--Btn-outline-color: var(--color-default-outline);--Btn-outline-color-focus: var(--color-default-focus)}.Btn-link-primary[data-v-85f04b1c]{--Btn-text-color: var(--color-primary);--Btn-outline-color: var(--color-primary-outline);--Btn-outline-color-focus: var(--color-primary-focus)}.Btn-link-secondary[data-v-85f04b1c]{--Btn-text-color: var(--color-secondary);--Btn-outline-color: var(--color-secondary-outline);--Btn-outline-color-focus: var(--color-secondary-focus)}.Btn-link-tertiary[data-v-85f04b1c]{--Btn-text-color: var(--color-tertiary);--Btn-outline-color: var(--color-tertiary-outline);--Btn-outline-color-focus: var(--color-tertiary-focus)}.Btn-link-success[data-v-85f04b1c]{--Btn-text-color: var(--color-success);--Btn-outline-color: var(--color-success-outline);--Btn-outline-color-focus: var(--color-success-focus)}.Btn-link-warning[data-v-85f04b1c]{--Btn-text-color: var(--color-warning);--Btn-outline-color: var(--color-warning-outline);--Btn-outline-color-focus: var(--color-warning-focus)}.Btn-link-danger[data-v-85f04b1c]{--Btn-text-color: var(--color-danger);--Btn-outline-color: var(--color-danger-outline);--Btn-outline-color-focus: var(--color-danger-focus)}.Circle[data-v-48fdb4ac]{--CircleSize: var(--sp2);width:var(--CircleSize);height:var(--CircleSize);border-radius:var(--CircleSize);box-shadow:0 1px 3px #00000040}.Circle-normal[data-v-48fdb4ac]{--CircleSize: var(--sp2) }.Circle-large[data-v-48fdb4ac]{--CircleSize: var(--sp4) }.Circle-larger[data-v-48fdb4ac]{--CircleSize: var(--sp6) }.HGroup[data-v-0129c1cb]{display:flex;flex-flow:row nowrap}.HGroup-align-stretch[data-v-0129c1cb]{align-items:stretch}.HGroup-align-baseline[data-v-0129c1cb]{align-items:baseline}.HGroup-align-center[data-v-0129c1cb]{align-items:center}.HGroup-align-start[data-v-0129c1cb]{align-items:flex-start}.HGroup-align-end[data-v-0129c1cb]{align-items:flex-end}.HGroup-justify-center[data-v-0129c1cb]{justify-content:center}.HGroup-justify-start[data-v-0129c1cb]{justify-content:flex-start}.HGroup-justify-end[data-v-0129c1cb]{justify-content:flex-end}.HGroup-justify-space-around[data-v-0129c1cb]{justify-content:space-around}.HGroup-justify-space-between[data-v-0129c1cb]{justify-content:space-between}.HGroup-gap-0[data-v-0129c1cb]{gap:0}.HGroup-gap-1[data-v-0129c1cb]{gap:var(--sp)}.HGroup-gap-2[data-v-0129c1cb]{gap:var(--sp2)}.HGroup-gap-3[data-v-0129c1cb]{gap:var(--sp3)}.HStack[data-v-48a370d0]{display:flex;align-items:stretch}.HStack[data-v-48a370d0]>*:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.HStack[data-v-48a370d0]>*:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.Sizer[data-v-2f099547]{flex:1;min-width:0;min-height:0}.VGroup[data-v-dac034b8]{display:flex;flex-flow:column nowrap}.VGroup-align-stretch[data-v-dac034b8]{align-items:stretch}.VGroup-align-baseline[data-v-dac034b8]{align-items:baseline}.VGroup-align-center[data-v-dac034b8]{align-items:center}.VGroup-align-start[data-v-dac034b8]{align-items:flex-start}.VGroup-align-end[data-v-dac034b8]{align-items:flex-end}.VGroup-justify-center[data-v-dac034b8]{justify-content:center}.VGroup-justify-start[data-v-dac034b8]{justify-content:flex-start}.VGroup-justify-end[data-v-dac034b8]{justify-content:flex-end}.VGroup-justify-space-around[data-v-dac034b8]{justify-content:space-around}.VGroup-justify-space-between[data-v-dac034b8]{justify-content:space-between}.VGroup-gap-0[data-v-dac034b8]{gap:0}.VGroup-gap-1[data-v-dac034b8]{gap:var(--sp)}.VGroup-gap-2[data-v-dac034b8]{gap:var(--sp2)}.VGroup-gap-3[data-v-dac034b8]{gap:var(--sp3)}.VGroup-gap-4[data-v-dac034b8]{gap:var(--sp4)}
+.Btn[data-v-32fc4413]{--Btn-padding: var(--sp1-5);--Btn-size: var(--input-size);--Btn-font-size: var(--font-size);--Btn-text-color: inherit;--Btn-outline-color: transparent;--Btn-outline-color-effective: transparent;--Btn-outline-color-focus: var(--color-primary);--Btn-surface-top: transparent;--Btn-surface-bottom: transparent;--Btn-shadow-color: transparent;--Btn-border-radius: var(--border-radius);-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;z-index:1;margin:0;padding:0 var(--Btn-padding);height:var(--Btn-size);line-height:var(--Btn-size);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:var(--sp);border:0;border-radius:var(--Btn-border-radius);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;font-family:inherit;font-size:var(--Btn-font-size);color:var(--Btn-text-color);outline:2px solid var(--Btn-outline-color-effective);background:radial-gradient(120% 150% at 80% 0%,var(--Btn-surface-top),var(--Btn-surface-bottom));background-clip:padding-box;box-shadow:0 1px 1px var(--Btn-shadow-color);transition:color .3s,outline .3s,filter .3s,border-radius .3s}.Btn[data-v-32fc4413]:focus,.Btn[data-v-32fc4413]:active,.Btn[data-v-32fc4413]:hover{transition:none}.Btn[data-v-32fc4413]:not(:disabled):hover,.Btn.Btn-pseudo-hover[data-v-32fc4413]{filter:brightness(1.07)}.Btn[data-v-32fc4413]:not(:disabled):focus,.Btn.Btn-pseudo-focus[data-v-32fc4413]{z-index:10;--Btn-outline-color-effective: var(--Btn-outline-color-focus)}.Btn[data-v-32fc4413]:not(:disabled):active,.Btn.Btn-pseudo-active[data-v-32fc4413]{padding-top:1px;box-shadow:0 6px 12px #00000014 inset,0 1px 2px #0000001f inset}.Label[data-v-32fc4413]{line-height:var(--Btn-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Icon[data-v-32fc4413]{width:var(--sp2);display:flex;align-items:center;justify-content:center;font-size:var(--Btn-font-size)}.Btn-square[data-v-32fc4413]{padding-left:0;padding-right:0;width:var(--Btn-size);justify-content:center}.Btn-round[data-v-32fc4413]{--Btn-border-radius: var(--border-radius-round)}.Btn-disabled[data-v-32fc4413]{opacity:.64;filter:saturate(40%);cursor:not-allowed}.Btn-block[data-v-32fc4413]{flex:1 1 auto;display:flex;justify-content:center}.Btn-outline[data-v-32fc4413]{--Btn-outline-color-effective: var(--Btn-outline-color)}.Btn-large[data-v-32fc4413]{--Btn-size: var(--input-size-large);--Btn-font-size: var(--font-size-large);--Btn-padding: var(--sp2)}.Btn-small[data-v-32fc4413]{--Btn-size: var(--input-size-small);--Btn-font-size: var(--font-size-small);--Btn-padding: var(--sp)}.Btn-iconPos-right .Icon[data-v-32fc4413]{order:100}.Btn-default[data-v-32fc4413]{--Btn-text-color: var(--color-default-text);--Btn-surface-top: var(--color-default-surface-top);--Btn-surface-bottom: var(--color-default-surface-bottom);--Btn-surface-top-hover: var(--color-default-surface-top-hover);--Btn-surface-bottom-hover: var(--color-default-surface-bottom-hover);--Btn-outline-color: var(--color-default-outline);--Btn-outline-color-focus: var(--color-default-focus);--Btn-shadow-color: var(--color-default-shadow)}.Btn-primary[data-v-32fc4413]{--Btn-text-color: var(--color-primary-text);--Btn-surface-top: var(--color-primary-surface-top);--Btn-surface-bottom: var(--color-primary-surface-bottom);--Btn-surface-top-hover: var(--color-primary-surface-top-hover);--Btn-surface-bottom-hover: var(--color-primary-surface-bottom-hover);--Btn-outline-color: var(--color-primary-outline);--Btn-outline-color-focus: var(--color-primary-focus);--Btn-shadow-color: var(--color-primary-shadow)}.Btn-secondary[data-v-32fc4413]{--Btn-text-color: var(--color-secondary-text);--Btn-surface-top: var(--color-secondary-surface-top);--Btn-surface-bottom: var(--color-secondary-surface-bottom);--Btn-surface-top-hover: var(--color-secondary-surface-top-hover);--Btn-surface-bottom-hover: var(--color-secondary-surface-bottom-hover);--Btn-outline-color: var(--color-secondary-outline);--Btn-outline-color-focus: var(--color-secondary-focus);--Btn-shadow-color: var(--color-secondary-shadow)}.Btn-tertiary[data-v-32fc4413]{--Btn-text-color: var(--color-tertiary-text);--Btn-surface-top: var(--color-tertiary-surface-top);--Btn-surface-bottom: var(--color-tertiary-surface-bottom);--Btn-surface-top-hover: var(--color-tertiary-surface-top-hover);--Btn-surface-bottom-hover: var(--color-tertiary-surface-bottom-hover);--Btn-outline-color: var(--color-tertiary-outline);--Btn-outline-color-focus: var(--color-tertiary-focus);--Btn-shadow-color: var(--color-tertiary-shadow)}.Btn-success[data-v-32fc4413]{--Btn-text-color: var(--color-success-text);--Btn-surface-top: var(--color-success-surface-top);--Btn-surface-bottom: var(--color-success-surface-bottom);--Btn-surface-top-hover: var(--color-success-surface-top-hover);--Btn-surface-bottom-hover: var(--color-success-surface-bottom-hover);--Btn-outline-color: var(--color-success-outline);--Btn-outline-color-focus: var(--color-success-focus);--Btn-shadow-color: var(--color-success-shadow)}.Btn-warning[data-v-32fc4413]{--Btn-text-color: var(--color-warning-text);--Btn-surface-top: var(--color-warning-surface-top);--Btn-surface-bottom: var(--color-warning-surface-bottom);--Btn-outline-color: var(--color-warning-outline);--Btn-outline-color-focus: var(--color-warning-focus);--Btn-shadow-color: var(--color-warning-shadow)}.Btn-danger[data-v-32fc4413]{--Btn-text-color: var(--color-danger-text);--Btn-surface-top: var(--color-danger-surface-top);--Btn-surface-bottom: var(--color-danger-surface-bottom);--Btn-outline-color: var(--color-danger-outline);--Btn-outline-color-focus: var(--color-danger-focus);--Btn-shadow-color: var(--color-danger-shadow)}.Btn-link-default[data-v-32fc4413]{--Btn-text-color: var(--color-default);--Btn-outline-color: var(--color-default-outline);--Btn-outline-color-focus: var(--color-default-focus)}.Btn-link-primary[data-v-32fc4413]{--Btn-text-color: var(--color-primary);--Btn-outline-color: var(--color-primary-outline);--Btn-outline-color-focus: var(--color-primary-focus)}.Btn-link-secondary[data-v-32fc4413]{--Btn-text-color: var(--color-secondary);--Btn-outline-color: var(--color-secondary-outline);--Btn-outline-color-focus: var(--color-secondary-focus)}.Btn-link-tertiary[data-v-32fc4413]{--Btn-text-color: var(--color-tertiary);--Btn-outline-color: var(--color-tertiary-outline);--Btn-outline-color-focus: var(--color-tertiary-focus)}.Btn-link-success[data-v-32fc4413]{--Btn-text-color: var(--color-success);--Btn-outline-color: var(--color-success-outline);--Btn-outline-color-focus: var(--color-success-focus)}.Btn-link-warning[data-v-32fc4413]{--Btn-text-color: var(--color-warning);--Btn-outline-color: var(--color-warning-outline);--Btn-outline-color-focus: var(--color-warning-focus)}.Btn-link-danger[data-v-32fc4413]{--Btn-text-color: var(--color-danger);--Btn-outline-color: var(--color-danger-outline);--Btn-outline-color-focus: var(--color-danger-focus)}.Circle[data-v-48fdb4ac]{--CircleSize: var(--sp2);width:var(--CircleSize);height:var(--CircleSize);border-radius:var(--CircleSize);box-shadow:0 1px 3px #00000040}.Circle-normal[data-v-48fdb4ac]{--CircleSize: var(--sp2) }.Circle-large[data-v-48fdb4ac]{--CircleSize: var(--sp4) }.Circle-larger[data-v-48fdb4ac]{--CircleSize: var(--sp6) }.HGroup[data-v-0abfef17]{display:flex;flex-flow:row nowrap}.HGroup-align-stretch[data-v-0abfef17]{align-items:stretch}.HGroup-align-baseline[data-v-0abfef17]{align-items:baseline}.HGroup-align-center[data-v-0abfef17]{align-items:center}.HGroup-align-start[data-v-0abfef17]{align-items:flex-start}.HGroup-align-end[data-v-0abfef17]{align-items:flex-end}.HGroup-justify-center[data-v-0abfef17]{justify-content:center}.HGroup-justify-start[data-v-0abfef17]{justify-content:flex-start}.HGroup-justify-end[data-v-0abfef17]{justify-content:flex-end}.HGroup-justify-space-around[data-v-0abfef17]{justify-content:space-around}.HGroup-justify-space-between[data-v-0abfef17]{justify-content:space-between}.HGroup-gap-0[data-v-0abfef17]{gap:0}.HGroup-gap-1[data-v-0abfef17]{gap:var(--sp)}.HGroup-gap-2[data-v-0abfef17]{gap:var(--sp2)}.HGroup-gap-3[data-v-0abfef17]{gap:var(--sp3)}.HGroup-wrap[data-v-0abfef17]{flex-wrap:wrap}.HStack[data-v-48a370d0]{display:flex;align-items:stretch}.HStack[data-v-48a370d0]>*:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.HStack[data-v-48a370d0]>*:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.InputLabel[data-v-8a823fd2]{--InputLabel-size: calc(.75 * var(--InputBase-size));position:relative;z-index:10;display:flex;margin:0 var(--sp2);max-width:75%;height:var(--InputLabel-size);line-height:var(--InputLabel-size);font-size:var(--InputBase-font-size)}.Corner[data-v-8a823fd2]{flex:0 0 var(--InputBase-size);stroke:transparent;fill:var(--InputBase-label-surface)}.Label[data-v-8a823fd2]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--InputBase-label-surface);color:var(--InputBase-label-color)}.InputBase[data-v-dfd6217d]{--InputBase-size: var(--input-size);--InputBase-padding: var(--sp1-5);--InputBase-font-size: var(--font-size);--InputBase-text-color: var(--color-text-0);--InputBase-surface: var(--color-base-0);--InputBase-outline-color: transparent;--InputBase-outline-color-focus: var(--color-tertiary-focus);--InputBase-outline-color-invalid: var(--color-danger-focus);--InputBase-border-color: var(--color-base-3);--InputBase-border-color-focus: var(--color-tertiary);--InputBase-border-color-invalid: var(--color-danger);--InputBase-label-color: var(--color-text-0);--InputBase-label-color-focus: var(--color-text-0);--InputBase-label-color-invalid: var(--color-text-0);--InputBase-label-surface: var(--color-base-1);--InputBase-label-surface-focus: var(--InputBase-outline-color-focus);--InputBase-label-surface-invalid: var(--InputBase-outline-color-invalid);--InputBase-border-radius: var(--border-radius);position:relative;display:flex;flex-flow:column nowrap}.Container[data-v-dfd6217d]{position:relative;z-index:1;display:inline-flex;align-items:center;border-radius:var(--border-radius-small);box-sizing:border-box;padding:var(--InputBase-padding);gap:var(--sp);width:100%;min-height:var(--InputBase-size);color:var(--InputBase-text-color);background:var(--InputBase-surface);outline:2px solid var(--InputBase-outline-color);border:1px solid var(--InputBase-border-color);border-radius:var(--InputBase-border-radius);font-size:var(--InputBase-font-size);transition:color .3s,outline .3s,border-radius .3s,filter .3s}.InputBase-fixed-height .Container[data-v-dfd6217d]{height:var(--InputBase-size)}.InputBase[data-v-dfd6217d]:not(.InputBase-disabled):focus-within,.InputBase.InputBase-pseudo-focus[data-v-dfd6217d]{z-index:10;--InputBase-outline-color: var(--InputBase-outline-color-focus);--InputBase-border-color: var(--InputBase-border-color-focus);--InputBase-label-color: var(--InputBase-label-color-focus);--InputBase-label-surface: var(--InputBase-label-surface-focus)}.InputBase-invalid[data-v-dfd6217d]{--InputBase-outline-color: var(--InputBase-outline-color-invalid);--InputBase-border-color: var(--InputBase-border-color-invalid);--InputBase-label-color: var(--InputBase-label-color-invalid);--InputBase-label-surface: var(--InputBase-label-surface-invalid)}.InputBase-round[data-v-dfd6217d]{--InputBase-border-radius: var(--border-radius-round)}.InputBase-block[data-v-dfd6217d]{flex:1 1 auto;display:flex}.InputBase-disabled .Container[data-v-dfd6217d]{--InputBase-surface: var(--color-base-1);opacity:.64;filter:saturate(40%);cursor:not-allowed}.InputBase-small[data-v-dfd6217d]{--InputBase-size: var(--input-size-small);--InputBase-font-size: var(--font-size-small);--InputBase-padding: var(--sp)}.InputBase-large[data-v-dfd6217d]{--InputBase-size: var(--input-size-large);--InputBase-font-size: var(--font-size-large);--InputBase-padding: var(--sp2)}.InputText[data-v-44e9da96]{--InputBase-padding: var(--sp1-5)}input[data-v-44e9da96],textarea[data-v-44e9da96]{-webkit-appearance:none;box-sizing:border-box;flex:1;padding:0;border:0;width:100%;min-width:0;outline:0;-webkit-user-select:text;user-select:text;background:transparent;color:inherit;font:inherit}.Sizer[data-v-2f099547]{flex:1;min-width:0;min-height:0}.VGroup[data-v-dac034b8]{display:flex;flex-flow:column nowrap}.VGroup-align-stretch[data-v-dac034b8]{align-items:stretch}.VGroup-align-baseline[data-v-dac034b8]{align-items:baseline}.VGroup-align-center[data-v-dac034b8]{align-items:center}.VGroup-align-start[data-v-dac034b8]{align-items:flex-start}.VGroup-align-end[data-v-dac034b8]{align-items:flex-end}.VGroup-justify-center[data-v-dac034b8]{justify-content:center}.VGroup-justify-start[data-v-dac034b8]{justify-content:flex-start}.VGroup-justify-end[data-v-dac034b8]{justify-content:flex-end}.VGroup-justify-space-around[data-v-dac034b8]{justify-content:space-around}.VGroup-justify-space-between[data-v-dac034b8]{justify-content:space-between}.VGroup-gap-0[data-v-dac034b8]{gap:0}.VGroup-gap-1[data-v-dac034b8]{gap:var(--sp)}.VGroup-gap-2[data-v-dac034b8]{gap:var(--sp2)}.VGroup-gap-3[data-v-dac034b8]{gap:var(--sp3)}.VGroup-gap-4[data-v-dac034b8]{gap:var(--sp4)}

package/dist/nightshade.js

@@ -1,12 +1,12 @@
-var v = Object.defineProperty;
-var a = (t, n) => v(t, "name", { value: n, configurable: !0 });
-import { openBlock as s, createBlock as p, resolveDynamicComponent as g, normalizeClass as r, withCtx as y, renderSlot as d, createElementBlock as u, createCommentVNode as _, toDisplayString as b } from "vue";
-const c = /* @__PURE__ */ a((t, n) => {
+var S = Object.defineProperty;
+var l = (t, n) => S(t, "name", { value: n, configurable: !0 });
+import { openBlock as a, createBlock as y, resolveDynamicComponent as v, normalizeClass as p, withCtx as m, renderSlot as d, createElementBlock as r, createCommentVNode as b, toDisplayString as g, createElementVNode as f, resolveComponent as B, mergeProps as k } from "vue";
+const i = /* @__PURE__ */ l((t, n) => {
   const e = t.__vccOpts || t;
-  for (const [i, o] of n)
-    e[i] = o;
+  for (const [u, o] of n)
+    e[u] = o;
   return e;
-}, "_export_sfc"), h = {
+}, "_export_sfc"), $ = {
   props: {
     label: { type: String },
     title: { type: String },
@@ -49,16 +49,16 @@ const c = /* @__PURE__ */ a((t, n) => {
       }, this.debounce));
     }
   }
-}, m = {
+}, H = {
   key: 0,
   class: "Label"
 };
-function B(t, n, e, i, o, l) {
-  return s(), p(g(l.tagName), {
+function C(t, n, e, u, o, s) {
+  return a(), y(v(s.tagName), {
     ref: "button",
-    class: r(["Btn button", [
+    class: p(["Btn button", [
       `Btn-${e.size}`,
-      `Btn-${l.actualKind}`,
+      `Btn-${s.actualKind}`,
       `Btn-iconPos-${e.iconPos}`,
       {
         "Btn-disabled": e.disabled || o.blocked,
@@ -74,21 +74,21 @@ function B(t, n, e, i, o, l) {
     disabled: e.disabled || o.blocked,
     title: e.title ?? e.label,
     href: e.href,
-    onUiactivate: n[0] || (n[0] = (f) => l.onUiActivate(f)),
-    onMouseenter: n[1] || (n[1] = (f) => o.hover = !0),
-    onMouseleave: n[2] || (n[2] = (f) => o.hover = !1)
+    onUiactivate: n[0] || (n[0] = (c) => s.onUiActivate(c)),
+    onMouseenter: n[1] || (n[1] = (c) => o.hover = !0),
+    onMouseleave: n[2] || (n[2] = (c) => o.hover = !1)
   }, {
-    default: y(() => [
+    default: m(() => [
       d(t.$slots, "icon", {
         hover: o.hover,
         blocked: o.blocked
       }, () => [
-        e.icon ? (s(), u("i", {
+        e.icon ? (a(), r("i", {
           key: 0,
-          class: r([e.icon, "Icon"])
-        }, null, 2)) : _("", !0)
+          class: p([e.icon, "Icon"])
+        }, null, 2)) : b("", !0)
       ], !0),
-      e.label ? (s(), u("span", m, b(e.label), 1)) : _("", !0),
+      e.label ? (a(), r("span", H, g(e.label), 1)) : b("", !0),
       d(t.$slots, "default", {
         hover: o.hover,
         blocked: o.blocked
@@ -97,67 +97,202 @@ function B(t, n, e, i, o, l) {
     _: 3
   }, 40, ["class", "disabled", "title", "href"]);
 }
-a(B, "_sfc_render$5");
-const k = /* @__PURE__ */ c(h, [["render", B], ["__scopeId", "data-v-85f04b1c"]]), S = {
+l(C, "_sfc_render$8");
+const z = /* @__PURE__ */ i($, [["render", C], ["__scopeId", "data-v-32fc4413"]]), G = {
   props: {
     size: { type: String, default: "normal" }
   }
 };
-function $(t, n, e, i, o, l) {
-  return s(), u("div", {
-    class: r(["Circle", [
+function N(t, n, e, u, o, s) {
+  return a(), r("div", {
+    class: p(["Circle", [
       `Circle-${e.size}`
     ]])
   }, [
     d(t.$slots, "default", {}, void 0, !0)
   ], 2);
 }
-a($, "_sfc_render$4");
-const G = /* @__PURE__ */ c(S, [["render", $], ["__scopeId", "data-v-48fdb4ac"]]), H = {
+l(N, "_sfc_render$7");
+const V = /* @__PURE__ */ i(G, [["render", N], ["__scopeId", "data-v-48fdb4ac"]]), x = {
   props: {
     tagName: { type: String, default: "div" },
     align: { type: String, default: "center" },
     justify: { type: String },
-    gap: { type: String, default: "1" }
+    gap: { type: String, default: "1" },
+    wrap: { type: Boolean, default: !1 }
   }
 };
-function z(t, n, e, i, o, l) {
-  return s(), p(g(e.tagName), {
-    class: r(["HGroup", [
+function L(t, n, e, u, o, s) {
+  return a(), y(v(e.tagName), {
+    class: p(["HGroup", [
       `HGroup-align-${e.align}`,
       `HGroup-justify-${e.justify}`,
-      `HGroup-gap-${e.gap}`
+      `HGroup-gap-${e.gap}`,
+      {
+        "HGroup-wrap": e.wrap
+      }
     ]])
   }, {
-    default: y(() => [
+    default: m(() => [
       d(t.$slots, "default", {}, void 0, !0)
     ]),
     _: 3
   }, 8, ["class"]);
 }
-a(z, "_sfc_render$3");
-const C = /* @__PURE__ */ c(H, [["render", z], ["__scopeId", "data-v-0129c1cb"]]), I = {}, j = { class: "HStack" };
-function N(t, n, e, i, o, l) {
-  return s(), u("div", j, [
+l(L, "_sfc_render$6");
+const F = /* @__PURE__ */ i(x, [["render", L], ["__scopeId", "data-v-0abfef17"]]), j = {}, w = { class: "HStack" };
+function A(t, n, e, u, o, s) {
+  return a(), r("div", w, [
     d(t.$slots, "default", {}, void 0, !0)
   ]);
 }
-a(N, "_sfc_render$2");
-const V = /* @__PURE__ */ c(I, [["render", N], ["__scopeId", "data-v-48a370d0"]]), A = {}, K = { class: "Sizer" };
-function q(t, n) {
-  return s(), u("div", K);
+l(A, "_sfc_render$5");
+const T = /* @__PURE__ */ i(j, [["render", A], ["__scopeId", "data-v-48a370d0"]]), K = {
+  props: {
+    label: { type: String }
+  }
+}, M = ["title"], P = { class: "Label" };
+function q(t, n, e, u, o, s) {
+  return a(), r("div", {
+    class: "InputLabel",
+    title: e.label
+  }, [
+    n[0] || (n[0] = f("svg", {
+      class: "Corner",
+      viewBox: "0 0 32 32",
+      preserveAspectRatio: "none"
+    }, [
+      f("path", { d: "M0 32 C 16 32 16 0 32 0 L 32 32 z" })
+    ], -1)),
+    f("div", P, g(e.label), 1),
+    n[1] || (n[1] = f("svg", {
+      class: "Corner",
+      viewBox: "0 0 32 32",
+      preserveAspectRatio: "none"
+    }, [
+      f("path", {
+        d: "M0 32 C 16 32 16 0 32 0 L 32 32 z",
+        transform: "scale(-1, 1)",
+        "transform-origin": "50% 50%"
+      })
+    ], -1))
+  ], 8, M);
+}
+l(q, "_sfc_render$4");
+const h = /* @__PURE__ */ i(K, [["render", q], ["__scopeId", "data-v-8a823fd2"]]), U = {
+  components: {
+    InputLabel: h
+  },
+  props: {
+    label: { type: String },
+    size: { type: String, default: "normal" },
+    fixedHeight: { type: Boolean, default: !0 },
+    round: { type: Boolean, default: !1 },
+    block: { type: Boolean },
+    disabled: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    pseudoFocus: { type: Boolean, default: !1 },
+    pseudoHover: { type: Boolean, default: !1 }
+  }
+}, D = { class: "Container" };
+function E(t, n, e, u, o, s) {
+  const c = B("InputLabel");
+  return a(), r("div", {
+    class: p(["InputBase", [
+      `InputBase-${e.size}`,
+      {
+        "InputBase-block": e.block,
+        "InputBase-round": e.round,
+        "InputBase-disabled": e.disabled,
+        "InputBase-invalid": e.invalid,
+        "InputBase-fixed-height": e.fixedHeight,
+        "InputBase-pseudo-focus": e.pseudoFocus,
+        "InputBase-pseudo-hover": e.pseudoHover
+      }
+    ]])
+  }, [
+    e.label ? (a(), y(c, {
+      key: 0,
+      label: e.label
+    }, null, 8, ["label"])) : b("", !0),
+    f("div", D, [
+      d(t.$slots, "default", {}, void 0, !0)
+    ])
+  ], 2);
+}
+l(E, "_sfc_render$3");
+const I = /* @__PURE__ */ i(U, [["render", E], ["__scopeId", "data-v-dfd6217d"]]), R = {
+  props: {
+    ...I.props,
+    modelValue: { type: [String, Number] },
+    type: { type: String },
+    placeholder: { type: String },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number },
+    autoFocus: { type: Boolean },
+    readonly: { type: Boolean }
+  },
+  emits: [
+    "focus",
+    "blur",
+    "input",
+    "update:modelValue"
+  ],
+  mounted() {
+    var t;
+    this.autoFocus && ((t = this.$refs.input) == null || t.focus());
+  },
+  methods: {
+    onInput(t) {
+      this.$emit("update:modelValue", t.target.value);
+    }
+  }
+}, O = ["value", "type", "placeholder", "readonly", "disabled", "min", "max", "step"];
+function J(t, n, e, u, o, s) {
+  const c = B("InputBase");
+  return a(), y(c, k({ class: "InputText" }, {
+    ...t.$attrs,
+    ...t.$props
+  }), {
+    default: m(() => [
+      d(t.$slots, "before", {}, void 0, !0),
+      f("input", {
+        ref: "input",
+        value: e.modelValue,
+        type: e.type,
+        placeholder: e.placeholder,
+        readonly: e.readonly,
+        disabled: t.disabled,
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        autocomplete: "off",
+        onInput: n[0] || (n[0] = (_) => s.onInput(_)),
+        onFocus: n[1] || (n[1] = (_) => t.$emit("focus", _)),
+        onBlur: n[2] || (n[2] = (_) => t.$emit("blur", _))
+      }, null, 40, O),
+      d(t.$slots, "after", {}, void 0, !0)
+    ]),
+    _: 3
+  }, 16);
+}
+l(J, "_sfc_render$2");
+const Q = /* @__PURE__ */ i(R, [["render", J], ["__scopeId", "data-v-44e9da96"]]), W = {}, X = { class: "Sizer" };
+function Y(t, n) {
+  return a(), r("div", X);
 }
-a(q, "_sfc_render$1");
-const x = /* @__PURE__ */ c(A, [["render", q], ["__scopeId", "data-v-2f099547"]]), P = {
+l(Y, "_sfc_render$1");
+const Z = /* @__PURE__ */ i(W, [["render", Y], ["__scopeId", "data-v-2f099547"]]), ee = {
   props: {
     align: { type: String, default: "stretch" },
     justify: { type: String },
     gap: { type: String, default: "1" }
   }
 };
-function T(t, n, e, i, o, l) {
-  return s(), u("div", {
-    class: r(["VGroup", [
+function te(t, n, e, u, o, s) {
+  return a(), r("div", {
+    class: p(["VGroup", [
       `VGroup-align-${e.align}`,
       `VGroup-justify-${e.justify}`,
       `VGroup-gap-${e.gap}`
@@ -166,21 +301,27 @@ function T(t, n, e, i, o, l) {
     d(t.$slots, "default", {}, void 0, !0)
   ], 2);
 }
-a(T, "_sfc_render");
-const U = /* @__PURE__ */ c(P, [["render", T], ["__scopeId", "data-v-dac034b8"]]), M = {
-  Btn: k,
-  Circle: G,
-  HGroup: C,
-  HStack: V,
-  Sizer: x,
-  VGroup: U
+l(te, "_sfc_render");
+const ne = /* @__PURE__ */ i(ee, [["render", te], ["__scopeId", "data-v-dac034b8"]]), se = {
+  Btn: z,
+  Circle: V,
+  HGroup: F,
+  HStack: T,
+  InputBase: I,
+  InputLabel: h,
+  InputText: Q,
+  Sizer: Z,
+  VGroup: ne
 };
 export {
-  k as Btn,
-  G as Circle,
-  C as HGroup,
-  V as HStack,
-  x as Sizer,
-  U as VGroup,
-  M as components
+  z as Btn,
+  V as Circle,
+  F as HGroup,
+  T as HStack,
+  I as InputBase,
+  h as InputLabel,
+  Q as InputText,
+  Z as Sizer,
+  ne as VGroup,
+  se as components
 };

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "nightshade",
-    "version": "1.0.0-2",
+    "version": "1.0.0-3",
     "description": "Vue UI library & design system",
     "type": "module",
     "exports": {
         ".": "./dist/nightshade.js",
-        "./stylesheets.css": "./dist/nightshade.css",
+        "./stylesheets/components.css": "./dist/nightshade.css",
         "./stylesheets/*": "./stylesheets/*"
     },
     "files": [
@@ -24,6 +24,7 @@
         "vue": "^3.5.13"
     },
     "devDependencies": {
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "@nodescript/eslint-config": "^2.0.3",
         "@types/node": "^22.10.5",
         "@vitejs/plugin-vue": "^5.2.1",

package/stylesheets/baseline.css

@@ -0,0 +1,50 @@
+* {
+    box-sizing: border-box;
+}
+
+html,
+body,
+img,
+form {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+html {
+    font-size: var(--font-size);
+    font-family: var(--font-main);
+    font-weight: var(--font-weight);
+    line-height: var(--line-height);
+
+    color: var(--text-color);
+    background: var(--background-color);
+
+    text-rendering: optimizeLegibility;
+}
+
+a {
+    color: currentColor;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+button,
+input,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+input[type="checkbox"],
+input[type="radio"],
+input[type="range"],
+input[type="button"],
+input[type="submit"],
+button {
+    cursor: pointer;
+}
+
+b, strong {
+    font-weight: var(--font-weight-bold);
+}

package/stylesheets/full.css

@@ -0,0 +1,8 @@
+@import './variables.css';
+@import './baseline.css';
+
+@import './modules/article.css';
+@import './modules/headings.css';
+@import './modules/kbd.css';
+@import './modules/transitions.css';
+@import './modules/utils.css';

package/stylesheets/modules/article.css

@@ -0,0 +1,37 @@
+article {
+
+    a {
+        color: var(--link-color);
+    }
+
+    a:hover {
+        color: var(--link-color-hover);
+    }
+
+    code {
+        font: 12px/1.4 var(--font-monospace)
+    }
+
+    :not(pre) > code {
+        color: var(--code-color);
+        white-space: nowrap;
+    }
+
+    pre {
+        line-height: 1.2em;
+        white-space: pre-wrap;
+    }
+
+    p, ul, ol, dl {
+        margin: 1em 0;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin: 1.5em 0 .5em;
+    }
+
+    li {
+        margin: .5em 0;
+    }
+
+}

package/stylesheets/modules/headings.css

@@ -0,0 +1,68 @@
+:root {
+
+    --h1-font-size: 32px;
+    --h1-font-weight: var(--font-weight-bold);
+    --h1-color: var(--color-text-0);
+
+    --h2-font-size: 28px;
+    --h2-font-weight: var(--font-weight);
+    --h2-color: var(--color-text-0);
+
+    --h3-font-size: 24px;
+    --h3-font-weight: var(--font-weight-bold);
+    --h3-color: var(--color-text-0);
+
+    --h4-font-size: 20px;
+    --h4-font-weight: var(--font-weight-bold);
+    --h4-color: var(--color-text-0);
+
+    --h5-font-size: 16px;
+    --h5-font-weight: var(--font-weight-bold);
+    --h5-color: var(--color-text-1);
+
+    --h6-font-size: 16px;
+    --h6-font-weight: var(--font-weight);
+    --h6-color: var(--color-text-2);
+
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: var(--sp2) 0;
+    line-height: 1em;
+}
+
+h1 {
+    font-weight: var(--h1-font-weight);
+    font-size: var(--h1-font-size);
+    color: var(--h1-color);
+}
+
+h2 {
+    font-weight: var(--h2-font-weight);
+    font-size: var(--h2-font-size);
+    color: var(--h2-color);
+}
+
+h3 {
+    font-weight: var(--h3-font-weight);
+    font-size: var(--h3-font-size);
+    color: var(--h3-color);
+}
+
+h4 {
+    font-weight: var(--h4-font-weight);
+    font-size: var(--h4-font-size);
+    color: var(--h4-color);
+}
+
+h5 {
+    font-weight: var(--h5-font-weight);
+    font-size: var(--h5-font-size);
+    color: var(--h5-color);
+}
+
+h6 {
+    font-weight: var(--h6-font-weight);
+    font-size: var(--h6-font-size);
+    color: var(--h6-color);
+}

package/stylesheets/modules/kbd.css

@@ -0,0 +1,34 @@
+kbd {
+    position: relative;
+
+    display: inline-block;
+    text-align: center;
+
+    border: 1px solid var(--color-base-2);
+    border-bottom-width: 2px;
+    border-bottom-color: var(--color-base-3);
+    height: 1.5em;
+    min-width: 1.5em;
+    padding: 0 .25em;
+    margin: 0 2px;
+    border-radius: 4px;
+
+    font: inherit;
+    background: var(--color-base-0);
+    background: radial-gradient(
+        100% 100% at 100% 0%,
+        var(--color-base-0) 0%,
+        var(--color-base-1) 100%);
+}
+
+kbd::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 2px;
+    bottom: -4px;
+    left: -3px;
+    right: -3px;
+    border-radius: 4px;
+    border: 1px solid var(--color-base-4);
+}

package/stylesheets/{vars → variables}/color-tokens.css

@@ -91,11 +91,11 @@
     --color-warning-shadow: var(--color-warning-4);
 
     --color-danger: var(--color-danger-2);
-    --color-danger-0: hsl(350deg, 88%, 75%);
-    --color-danger-1: hsl(350deg, 88%, 64%);
-    --color-danger-2: hsl(350deg, 88%, 50%);
-    --color-danger-3: hsl(350deg, 88%, 44%);
-    --color-danger-4: hsl(350deg, 88%, 32%);
+    --color-danger-0: hsl(350deg, 88%, 88%);
+    --color-danger-1: hsl(350deg, 88%, 68%);
+    --color-danger-2: hsl(350deg, 88%, 60%);
+    --color-danger-3: hsl(350deg, 88%, 52%);
+    --color-danger-4: hsl(350deg, 88%, 30%);
     --color-danger-text: #fff;
     --color-danger-surface-top: var(--color-danger-1);
     --color-danger-surface-bottom: var(--color-danger-3);

package/stylesheets/{vars → variables}/commons.css

@@ -4,25 +4,22 @@
 
     --link-color: var(--color-primary-2);
     --link-color-hover: var(--color-primary-1);
+
     --code-color: var(--color-secondary);
 
     --color-subtle: var(--color-text-1);
     --color-sublime: var(--color-text-2);
 
-    --border-radius: var(--sp2);
-    --border-radius-small: var(--sp);
-    --border-radius-large: var(--sp4);
+    --border-radius: var(--sp);
+    --border-radius-round: var(--sp2);
 
     --input-size: var(--sp4);
     --input-size-small: var(--sp3);
     --input-size-smaller: var(--sp2);
     --input-size-large: var(--sp5);
     --input-size-larger: var(--sp6);
-
-    --color-overlay-backdrop: rgba(0,0,0,.08);
-    --color-overlay-shadow: rgba(0,0,0,.15);
 }
 
 .Theme-dark {
-    --color-overlay-backdrop: rgba(255,255,255,.04);
+
 }

package/stylesheets/variables.css

@@ -0,0 +1,4 @@
+@import './variables/spacing.css';
+@import './variables/typography.css';
+@import './variables/color-tokens.css';
+@import './variables/commons.css';

package/stylesheets/article.css

@@ -1,21 +0,0 @@
-article a {
-    color: var(--link-color);
-}
-
-article a:hover {
-    color: var(--link-color-hover);
-}
-
-article  code {
-    font: 12px/1.4 var(--font-monospace)
-}
-
-article :not(pre) > code {
-    color: var(--code-color);
-    white-space: nowrap;
-}
-
-article pre {
-    line-height: 1.2em;
-    white-space: pre-wrap;
-}

package/stylesheets/base.css

@@ -1,124 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-html,
-body,
-img,
-form {
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
-
-html {
-    font-size: var(--font-size);
-    font-family: var(--font-main);
-    font-weight: var(--font-weight);
-    line-height: var(--line-height);
-
-    color: var(--text-color);
-    background: var(--background-color);
-
-    text-rendering: optimizeLegibility;
-}
-
-a {
-    color: currentColor;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-button,
-input,
-textarea {
-    font-family: inherit;
-    font-size: inherit;
-}
-
-input[type="checkbox"] {
-    cursor: pointer;
-}
-
-h1 {
-    font-weight: var(--font-weight-bold);
-    font-size: 32px;
-    line-height: 32px;
-    margin: var(--sp3) 0;
-}
-
-h2 {
-    font-weight: var(--font-weight);
-    font-size: 28px;
-    line-height: 28px;
-    margin: var(--sp2) 0;
-}
-
-h3 {
-    font-size: 24px;
-    line-height: 24px;
-    font-weight: var(--font-weight-bold);
-    margin: var(--sp2) 0;
-}
-
-h4 {
-    font-size: var(--font-size-large);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--sp2);
-    margin: var(--sp) 0;
-}
-
-h5 {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight);
-    color: var(--color-text-1);
-    text-transform: uppercase;
-    margin: var(--sp) 0;
-}
-
-h6 {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight);
-    color: var(--color-text-1);
-    text-transform: uppercase;
-    margin: var(--sp) 0;
-}
-
-strong {
-    font-weight: var(--font-weight-bold);
-}
-
-kbd {
-    position: relative;
-
-    display: inline-block;
-    text-align: center;
-
-    border: 1px solid var(--color-base-2);
-    border-bottom-width: 2px;
-    border-bottom-color: var(--color-base-3);
-    height: 1.5em;
-    min-width: 1.5em;
-    padding: 0 .25em;
-    margin: 0 2px;
-    border-radius: 4px;
-
-    font: inherit;
-    background: var(--color-base-0);
-    background: radial-gradient(
-        100% 100% at 100% 0%,
-        var(--color-base-0) 0%,
-        var(--color-base-1) 100%);
-}
-
-kbd::after {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    top: 2px;
-    bottom: -4px;
-    left: -3px;
-    right: -3px;
-    border-radius: 4px;
-    border: 1px solid var(--color-base-4);
-}

package/stylesheets/index.css

@@ -1,9 +0,0 @@
-@import './vars/spacing.css';
-@import './vars/typography.css';
-@import './vars/color-tokens.css';
-@import './vars/commons.css';
-
-@import './base.css';
-@import './article.css';
-@import './util.css';
-@import './transitions.css';