@arup-ri/velcro 0.1.0 → 1.1.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.
- package/dist/icons/arrow-clockwise.svg +4 -0
- package/dist/icons/ban.svg +3 -0
- package/dist/icons/check.svg +3 -0
- package/dist/icons/chevron.svg +3 -0
- package/dist/icons/exclamation-triangle.svg +4 -0
- package/dist/icons/exclamation.svg +3 -0
- package/dist/icons/info-circle.svg +4 -0
- package/dist/icons/info.svg +3 -0
- package/dist/icons/pencil-square.svg +4 -0
- package/dist/icons/pencil.svg +3 -0
- package/dist/icons/plus.svg +3 -0
- package/dist/icons/question-circle.svg +4 -0
- package/dist/icons/question.svg +3 -0
- package/dist/icons/search.svg +3 -0
- package/dist/icons/trash.svg +4 -0
- package/dist/icons/upload.svg +4 -0
- package/dist/icons/x.svg +3 -0
- package/dist/velcro.css +1 -1
- package/js/dropdown.js +112 -0
- package/js/icon.js +98 -0
- package/js/tooltip.js +110 -0
- package/package.json +10 -5
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
|
2
|
+
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
|
|
3
|
+
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-ban" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M15 8a6.97 6.97 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
|
|
2
|
+
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
|
|
3
|
+
<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
|
|
3
|
+
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info" viewBox="0 0 16 16">
|
|
2
|
+
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
|
|
3
|
+
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
|
|
3
|
+
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
|
|
3
|
+
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
|
|
3
|
+
<path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z"/>
|
|
4
|
+
</svg>
|
package/dist/icons/x.svg
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
|
|
2
|
+
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
|
|
3
|
+
</svg>
|
package/dist/velcro.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{box-sizing:border-box}body,h1,h2,h3,ol,p,ul{margin:0;padding:0}a{color:var(--blue-80);cursor:pointer;text-decoration:underline}a:hover{color:var(--blue-100)}:root{--black-100:#0f0f0f;--white-100:#fff;--grey-20:#f9fbfc;--grey-50:#eee;--grey-60:#f9fbfc;--grey-80:#d9d9dd;--grey-100:#7a7a7a;--grey-200:#d9d9dd;--red-100:#d50000;--red-80:#f86b6b;--red-60:#fc7a7d;--red-40:#ffb6bf;--red-20:#ffdbe2;--yellow-100:#dca227;--yellow-80:#e3ba5c;--yellow-60:#ebd08b;--yellow-40:#f4e6ba;--yellow-20:#fffbeb;--pink-100:#ff3d84;--pink-80:#ff76a5;--pink-60:#ffa3c4;--pink-40:#ffcbdf;--pink-20:#fff2f7;--blue-100:#1461c8;--blue-80:#6282d6;--blue-60:#93a6e4;--blue-40:#c1cbf2;--blue-20:#eef1ff;--teal-10:#f0fffe;--teal-20:#ebfffd;--teal-40:#bee9e4;--teal-60:#8fd3cc;--teal-80:#5dbdb3;--teal-100:#00a79a;--green-100:#007552;--green-80:#509576;--green-60:#85b59c;--green-40:#b8d6c5;--green-20:#ebf7f0;--purple-100:#53099b;--purple-80:#8b47ae;--purple-60:#b77ec3;--purple-40:#ddb8dc;--purple-20:#fbf6fa;--font-sans:"Roboto",sans-serif;--font-size-xs:11px;--font-size-sm:12px;--font-size-md:14px;--font-size-lg:16px;--font-size-base:12px;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--gap-xs:0.25rem;--gap-sm:0.5rem;--gap-md:0.75rem;--gap-base:1rem;--gap-lg:1.5rem;--gap-xl:2rem;--border-radius-sm:4px;--border-radius-base:6px;--border-radius-md:8px;--border-radius-lg:10px;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:2000;--z-popover:2100;--z-tooltip:2147483647;--shadow-sm:0 2px 8px rgba(0,0,0,.1);--shadow-md:0 4px 12px rgba(0,0,0,.15);--shadow-lg:0 10px 40px rgba(0,0,0,.2);--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px}body{color:var(--black-100);font-family:var(--font-sans);font-size:var(--font-size-base);line-height:auto}h1{font-size:24px}h2{font-size:20px}h3{font-size:16px}p{font-size:12px}.velcro-badge{align-items:center;border-radius:50px;cursor:default;display:inline-flex;font-size:var(--font-size-base);gap:.25rem;justify-content:center;line-height:1;margin:.15em;padding:4px}.velcro-badge.round{aspect-ratio:1;border-radius:50%;min-height:24px;min-width:24px;padding:8px}.breadcrumbs{align-items:center;display:flex;font-size:var(--base-font-size);gap:5px}.breadcrumbs>a{color:var(--grey-100);text-decoration:none}.breadcrumbs>a:hover{color:var(--black-100)}.breadcrumb-separator{align-items:center;color:var(--black-100);display:flex}.breadcrumb-copy{align-items:center;background:none;border:none;color:var(--grey-100);cursor:pointer;display:flex;margin-left:5px;padding:0;transition:color .2s ease}.breadcrumb-copy.copied,.breadcrumb-copy:hover{color:var(--black-100)}button{align-items:center;background-color:var(--black-100);border:0;border:1px solid var(--black-100);border-radius:50%;border-radius:50px;color:var(--white-100);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-size-base);gap:.25rem;justify-content:center;line-height:1;min-width:0;overflow-wrap:break-word;padding:8px;transition:background-color .2s,border-color .2s,color .2s,filter .2s;word-break:break-word}button:hover:not(:disabled){filter:brightness(.8)}button:disabled{background-color:var(--grey-80)!important;border-color:var(--grey-80)!important;color:var(--white-100)!important;cursor:not-allowed}button span{align-items:center;display:flex;justify-content:center;line-height:1}.velcro-card{background:var(--white-100);border:1px solid var(--grey-80);border-radius:10px;cursor:default;display:flex;flex:1 1 0;flex-direction:column;margin:1rem;min-height:0;overflow:hidden}.velcro-card.selectable:hover:not(.selected),.velcro-card.selectable:hover:not(.selected) .velcro-card-body,.velcro-card.selectable:hover:not(.selected) .velcro-card-header{background-color:var(--grey-20)}.velcro-card-header{align-items:center;border-bottom:1px solid var(--grey-80);display:flex;flex-shrink:0;gap:1rem;justify-content:space-between;padding:1rem}.velcro-card-actions{align-items:center;display:flex;gap:.5rem}.velcro-card-actions button{align-items:center;background:none;border:none;color:var(--grey-100);cursor:pointer;display:inline-flex;gap:.25rem;padding:.5rem}.velcro-card-body{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow-y:auto;padding:1rem}.velcro-card--fit{flex:0 0 auto}.velcro-card--fit .velcro-card-body{overflow:visible}.velcro-card--tags{align-self:flex-end;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.velcro-card-body--scroll-demo{max-height:300px;overflow:auto}.velcro-card.selectable{cursor:pointer}.velcro-card.selectable:hover,.velcro-card.selectable:hover .velcro-card-body,.velcro-card.selectable:hover .velcro-card-header{background-color:var(--grey-20)}.velcro-card.selected{background:var(--blue-20);border:1px solid var(--blue-100)}.velcro-card.selected .velcro-card-header{background:var(--blue-20);border-bottom-color:var(--blue-100)}.velcro-card.selected .velcro-card-body{background:var(--blue-20)}.velcro-dropdown{align-items:center;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--blue-100);background-image:url("data:image/svg+xml;utf8,<svg fill='white' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-position:right 8px center;background-repeat:no-repeat;background-size:10px;border:1px solid var(--blue-100);border-radius:50px;color:var(--blue-20);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:var(--font-size-base);font-weight:400;gap:1rem;justify-content:flex-start;line-height:1;padding:8px 24px 8px 8px;text-align:left;transition:all .2s ease;width:-moz-fit-content;width:fit-content}.velcro-dropdown:focus{border-color:var(--blue-100);box-shadow:0 0 0 3px rgba(20,97,200,.2);outline:none}.velcro-dropdown:disabled{background-color:var(--grey-80);border-color:var(--grey-80);color:var(--grey-60);cursor:not-allowed;opacity:.6}.velcro-dropdown--open{background-image:url("data:image/svg+xml;utf8,<svg fill='white' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 14l5 -5 5 5z'/></svg>")}.velcro-fieldset{display:grid;gap:var(--gap,var(--gap-sm));grid-template-columns:repeat(var(--columns,1),1fr)}.velcro-fieldset.column-2,.velcro-fieldset.column-3{grid-template-columns:repeat(2,1fr)}.velcro-fieldset.column-4{grid-template-columns:repeat(4,1fr)}.velcro-field{align-items:center;display:grid;gap:var(--gap-sm);grid-template-columns:auto 1fr}.velcro-field label{color:var(--grey-100);text-decoration:underline;white-space:nowrap}.velcro-field input,.velcro-field select,.velcro-field>span{width:100%}.velcro-field-suffix{align-items:center;display:flex;gap:var(--gap-xs)}.velcro-field-suffix input{width:5ch}.velcro-field-error{color:var(--red-100);font-size:var(--font-size-sm);font-weight:500;margin-top:var(--gap-xs)}.velcro-form{display:grid;font-family:var(--font-sans);gap:1rem;grid-template-columns:1fr}.velcro-form.column-2{grid-template-columns:repeat(2,1fr)}.velcro-form.column-4{grid-template-columns:repeat(4,1fr)}.velcro-form-section{display:flex;flex-direction:column;gap:.25rem}.velcro-form-section label{color:var(--black-100);font-size:var(--font-size-base)}.velcro-form-section input,.velcro-form-section select:not(.velcro-dropdown){appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--white-100);border:1px solid var(--grey-80);border-radius:6px;color:var(--black-100);font-family:var(--font-sans);font-size:var(--font-size-base);padding:.5rem .75rem;transition:border-color .2s,box-shadow .2s,background-color .2s;width:100%}.velcro-form-section select:not(.velcro-dropdown){background-image:url("data:image/svg+xml;utf8,<svg fill='black' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-position:right .75rem center;background-repeat:no-repeat;background-size:.8rem;cursor:pointer;padding-right:2rem}.velcro-form-section-inline{align-items:center;display:grid;gap:.75rem;grid-template-columns:auto 1fr}.velcro-form-section-inline label{white-space:nowrap}.velcro-form label{color:var(--black-100);font-size:var(--font-size-base);margin-bottom:.25rem}.velcro-form input,.velcro-form select:not(.velcro-dropdown){appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--white-100);border:1px solid var(--grey-80);border-radius:6px;color:var(--black-100);font-size:var(--font-size-base);padding:.5rem .75rem;transition:border-color .2s,box-shadow .2s,background-color .2s;width:100%}.velcro-form select:not(.velcro-dropdown){background-image:url("data:image/svg+xml;utf8,<svg fill='black' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-position:right .75rem center;background-repeat:no-repeat;background-size:.8rem;cursor:pointer;padding-right:2rem}.velcro-form--inline-group{display:flex;gap:1rem}.velcro-form--inline-group>div{display:flex;flex:1;flex-direction:column}.velcro-form input.invalid,.velcro-form select:not(.velcro-dropdown).invalid,.velcro-form-section input.invalid,.velcro-form-section select:not(.velcro-dropdown).invalid{border-color:var(--red-100)}.velcro-form-inputs-container{display:flex;flex-direction:column;gap:2rem;padding:2rem}.velcro-form-fields{align-items:center;display:grid;gap:.5rem;grid-template-columns:1fr 1fr auto}.velcro-form-fields-container{display:contents}.velcro-form-container{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem}.velcro-form-field-group{display:flex;flex-direction:column;gap:.25rem}.velcro-form-field-group label{font-weight:700}.velcro-form-field-group input,.velcro-form-field-group select:not(.velcro-dropdown){border:1px solid var(--grey-80);border-radius:4px;padding:.75rem}.velcro-form-field-group select:not(.velcro-dropdown){appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill='black' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-position:right .75rem center;background-repeat:no-repeat;background-size:.8rem;cursor:pointer;padding-right:2rem}.velcro-form-tab-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr}.velcro-form-date-group{display:flex;flex-direction:column;gap:.25rem}.velcro-form-date-group label{font-weight:700}.velcro-form-date-group input{background-color:#f9fbfc;border:1px solid #d9d9dd;border-radius:4px;padding:.75rem}.velcro-form-button-group{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}.velcro-form-button-group button{width:-moz-fit-content;width:fit-content}.velcro-form-tab-box-grid{display:flex;gap:1rem}.velcro-drop-zone{background-color:var(--grey-20);border:2px dashed var(--grey-80);border-radius:8px;cursor:pointer;padding:2rem;text-align:center;transition:all .2s ease}.velcro-drop-zone:hover{background-color:var(--grey-50);border-color:var(--grey-100)}.velcro-drop-zone.dragover{background-color:var(--blue-20);border-color:var(--blue-100)}.velcro-drop-zone p{color:var(--grey-100);margin:0}.velcro-drop-zone input[type=file]{display:none}.velcro-tab-box{align-items:center;display:flex;flex:1;gap:.5rem}.velcro-tab-box input[type=radio]{display:none}.velcro-tab-box label{background-color:var(--white-100);border:1px solid var(--blue-100);border-radius:6px;color:var(--blue-100);cursor:pointer;flex:1;font-weight:400;margin:0;padding:.5rem 1rem;text-align:center;transition:all .2s ease}.velcro-tab-box label:hover{background-color:var(--blue-20)}.velcro-tab-box input[type=radio]:checked+label,.velcro-tab-box.selected label{background-color:var(--blue-100);color:var(--blue-20)}.velcro-nav{background:var(--black-100);color:var(--grey-20);height:100vh;position:relative;width:80px}velcro-nav--items a{background:none;border:none;color:var(--grey-100);cursor:pointer;font-size:var(--font-size-base);padding:0;text-decoration:none}velcro-nav--items a:hover{color:var(--white-100)}velcro-nav--items a:active{color:var(--white-100);text-decoration:underline}.velcro-nav--hamburger{background:none;border:none;color:var(--white-100);cursor:pointer;font-size:32px;left:.5em;position:absolute;top:.5em;z-index:5}.velcro-nav.open .velcro-nav--hamburger{display:none}.velcro-nav--close{background:none;border:none;color:var(--white-100);cursor:pointer;font-size:32px;left:.5em;position:absolute;top:.5em;z-index:20}.velcro-nav:not(.open) .velcro-nav--close{display:none}.velcro-nav--panel{background:var(--black-100);box-sizing:border-box;height:100%;left:0;overflow:hidden;padding:0;position:absolute;top:0;transition:width .35s ease;width:0;z-index:10}.velcro-nav.open .velcro-nav--panel{padding:40px 30px;width:320px}.velcro-nav:not(.open) .velcro-nav--panel-content{opacity:0;pointer-events:none;transition:opacity 0s linear}.velcro-nav.open .velcro-nav--panel-content{opacity:1;transition:opacity .15s ease-in}.velcro-nav--items{list-style:none;margin:0;padding:2em 0 0}.velcro-nav--link{background:none;border:none;cursor:pointer;display:block;font-size:var(--font-size-base);padding:.5rem 0;text-decoration:none;transition:color .2s ease}.velcro-nav--link,.velcro-nav--link:hover{color:var(--white-100)}.velcro-nav--link.active{border-bottom:2px solid var(--white-100);color:var(--white-100)}.velcro-nav--user{bottom:1em;left:1em;position:absolute}.velcro-notification{animation:velcro-slide-down .3s ease-out;left:50%;position:fixed;top:var(--notification-top,2rem);transform:translateX(-50%);z-index:var(--z-modal)}.velcro-notification--hidden{opacity:0;pointer-events:none;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}.velcro-notification-content{align-items:center;background-color:var(--white-100);border:1px solid var(--grey-80);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);display:flex;gap:var(--gap-md);padding:var(--spacing-md) var(--spacing-lg)}.velcro-notification-icon{flex-shrink:0;font-size:var(--font-size-lg);font-weight:700}.velcro-notification-text{color:var(--black-100);font-weight:500}.velcro-notification--success .velcro-notification-content{background-color:var(--green-20);border-color:var(--green-100)}.velcro-notification--success .velcro-notification-icon,.velcro-notification--success .velcro-notification-text{color:var(--green-100)}.velcro-notification--error .velcro-notification-content{background-color:var(--red-20);border-color:var(--red-100)}.velcro-notification--error .velcro-notification-icon,.velcro-notification--error .velcro-notification-text{color:var(--red-100)}.velcro-notification--warning .velcro-notification-content{background-color:var(--yellow-20);border-color:var(--yellow-100)}.velcro-notification--warning .velcro-notification-icon,.velcro-notification--warning .velcro-notification-text{color:var(--yellow-100)}.velcro-notification--info .velcro-notification-content{background-color:var(--blue-20);border-color:var(--blue-100)}.velcro-notification--info .velcro-notification-icon,.velcro-notification--info .velcro-notification-text{color:var(--blue-100)}@keyframes velcro-slide-down{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.velcro-table{border-collapse:collapse;font-family:var(--font-sans);font-size:12px;table-layout:fixed;width:100%}.velcro-table thead th{background:var(--white-100);color:var(--grey-100);font-weight:400;position:sticky;text-align:left;top:0;z-index:1}.velcro-table tbody td,.velcro-table thead th{border-bottom:1px solid var(--grey-80);overflow-wrap:break-word;padding:12px 16px;white-space:normal;word-break:break-word}.velcro-table tbody td{color:var(--black-100);vertical-align:middle}.velcro-table tbody tr:last-child td{border-bottom:none}.velcro-table tbody tr{cursor:default}.velcro-table tbody tr.selectable{cursor:pointer}.velcro-table tbody tr.selectable:hover,.velcro-table tbody tr.selectable:hover:not(.selected){background-color:var(--grey-60)}.velcro-table tbody tr.selected{background-color:var(--blue-20)}.velcro-table td.text-center,.velcro-table th.text-center{text-align:center}.velcro-table td.text-right,.velcro-table th.text-right{text-align:right}.velcro-table .cell-shrink{white-space:nowrap;width:1%}.velcro-table .cell-expand{width:100%}.velcro-table .cell-actions{white-space:nowrap}.velcro-table .cell-actions>*{margin-left:8px}.velcro-table .cell-actions>:first-child{margin-left:0}.velcro-table .cell-icon{color:var(--grey-100);padding-right:8px;width:1%}.velcro-table .cell-icon:hover{color:var(--black-100)}.velcro-table .cell-status{white-space:nowrap;width:1%}.velcro-table-scroll{flex:1;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto}.velcro-table-wrapper{overflow-x:auto;width:100%}.velcro-tooltip{background:var(--black-100);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-md);color:var(--white-100);display:inline-block;font-size:var(--font-size-sm);line-height:1.2;opacity:0;padding:var(--spacing-sm) var(--spacing-md);pointer-events:none;position:fixed;transform:translateX(-50%);transition:opacity .15s ease;white-space:nowrap;width:-moz-max-content;width:max-content;z-index:var(--z-tooltip);--tooltip-gap:2px}.velcro-tooltip--top{transform:translateX(-50%) translateY(calc(-100% - var(--tooltip-gap)))}.velcro-tooltip--bottom{transform:translateX(-50%) translateY(var(--tooltip-gap))}.velcro-tooltip--visible{opacity:1}.velcro-spinner{align-items:center;background-color:var(--white-100);border-radius:50%;display:inline-flex;height:40px;justify-content:center;width:40px}.velcro-spinner:after{animation:velcro-spin 1s linear infinite;border-bottom:3px solid transparent;border-left:3px solid transparent;border-radius:50%;border-right:3px solid transparent;border-right-color:var(--grey-100);border-top:3px solid transparent;border-top-color:var(--grey-100);content:"";height:32px;width:32px}@keyframes velcro-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.velcro-header{align-items:center;border-bottom:1px solid var(--grey-80);display:flex;flex-shrink:0;justify-content:space-between;padding:1rem}.velcro-header-left{align-items:center;display:flex;gap:.5rem}.velcro-header nav{align-items:center;display:flex;gap:1em}.velcro-header nav .link-button,.velcro-header nav a{background:none;border:none;color:var(--grey-100);cursor:pointer;font-size:var(--font-size-lg);padding:0;text-decoration:none}.velcro-header nav .link-button:hover,.velcro-header nav a:hover{color:var(--black-100)}.velcro-header nav .link-button.active,.velcro-header nav a.active{color:var(--black-100);text-decoration:underline}.velcro-grid{display:grid;flex:1;grid-template-columns:1fr 1fr;min-height:0;position:relative;--divider-pos:0.5}.velcro-grid:before{background:var(--grey-80);bottom:0;content:"";left:calc(100%*var(--divider-pos));pointer-events:none;position:absolute;top:0;width:1px}.velcro-grid--50-50{grid-template-columns:1fr 1fr;--divider-pos:0.5}.velcro-grid--40-60{grid-template-columns:.4fr .6fr;--divider-pos:0.4}.velcro-grid--60-40{grid-template-columns:.6fr .4fr;--divider-pos:0.6}.velcro-grid--30-70{grid-template-columns:.3fr .7fr;--divider-pos:0.3}.velcro-column-fit{display:flex;flex-direction:column;min-height:0;overflow:hidden}.velcro-column-fit>.velcro-card{flex:1 1 0;min-height:0}.velcro-column-fit>.velcro-card .velcro-card-body{overflow-y:auto}.velcro-column-fit>.velcro-card:only-child{flex:1 1 0}.velcro-column-scroll{display:flex;flex-direction:column;min-height:0;overflow-y:auto}.velcro-column-scroll>.velcro-card{flex:0 0 auto}.velcro-column-scroll>.velcro-card .velcro-card-body{overflow:visible}.velcro-layout-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}.velcro-layout-header{align-items:center;border-bottom:1px solid var(--grey-80);display:flex;flex-shrink:0;gap:var(--gap-md,.75rem);padding:var(--spacing-md,1rem)}.velcro-grid--25-75{grid-template-columns:.25fr .75fr;--divider-pos:0.25}.velcro-grid--stacked{grid-template-columns:1fr}.velcro-grid--stacked:before{display:none}.velcro-layout-col{min-height:0;min-width:0;overflow-y:auto}.velcro-layout-col--muted{background:var(--grey-60)}.velcro-layout-col--accent{background:var(--blue-20)}.velcro-layout-card-stack>.velcro-card{flex:0 0 auto}.velcro-layout-card-stack>.velcro-card:nth-child(n+2){flex:1 1 0;min-height:200px}.velcro-modal{align-items:center;display:flex;inset:0;justify-content:center;position:fixed;z-index:2000}.velcro-modal-overlay{background-color:rgba(0,0,0,.5);inset:0;position:absolute}.velcro-modal-content{background-color:var(--white-100);border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;max-height:70vh;max-width:70vw;position:relative}.velcro-modal-header{gap:1rem;justify-content:space-between;padding:1.5rem}.velcro-modal-close,.velcro-modal-header{align-items:center;display:flex;flex-shrink:0}.velcro-modal-close{background:none;border:none;border-radius:4px;color:var(--grey-100);cursor:pointer;font-size:1.5rem;height:2rem;justify-content:center;padding:0;transition:background-color .2s ease;width:2rem}.velcro-modal-close:hover{background-color:var(--grey-60)}.velcro-modal-body{flex:1;overflow-y:auto;padding:1.5rem}.velcro-modal-header h2{margin:0}.velcro-modal-footer{display:flex;gap:.5rem;justify-content:flex-end;padding:1.5rem}.velcro-search-pill{align-items:center;background:transparent;border:1px solid var(--grey-80);border-radius:9999px;display:flex;padding:.75rem 1.25rem}.velcro-search-pill input{background:transparent;border:none;color:var(--black-100);flex:1;font-size:var(--base-font-size);outline:none;text-align:left}.velcro-search-pill input::-moz-placeholder{color:var(--grey-100)}.velcro-search-pill input::placeholder{color:var(--grey-100)}.velcro-search-icon{margin-left:auto}.caption,.caption-italic,.velcro-search-icon{color:var(--grey-100)}.caption-italic{font-style:italic}.caption-underline{color:var(--grey-100);text-decoration:underline}.primary{background:var(--black-100)!important;border:1px solid var(--black-100)!important;color:var(--white-100)!important}.secondary{background:var(--grey-80)!important;border:1px solid var(--grey-80)!important}.secondary,.tertiary{color:var(--black-100)!important}.tertiary{background:var(--white-100)!important;border:1px solid var(--black-100)!important}.filled--red4{background:var(--red-100)!important;border:1px solid var(--red-100)!important}.filled--red3,.filled--red4{color:var(--red-20)!important}.filled--red3{background:var(--red-80)!important;border:1px solid var(--red-80)!important}.filled--red2{background:var(--red-40)!important;border:1px solid var(--red-40)!important;color:var(--red-100)!important}.filled--red1{border:1px solid var(--red-20)!important}.filled--red1,.outlined--red{background:var(--red-20)!important;color:var(--red-100)!important}.outlined--red{border:1px solid var(--red-100)!important}.filled--pink4{background:var(--pink-100)!important;border:1px solid var(--pink-100)!important}.filled--pink3,.filled--pink4{color:var(--pink-20)!important}.filled--pink3{background:var(--pink-80)!important;border:1px solid var(--pink-80)!important}.filled--pink2{background:var(--pink-40)!important;border:1px solid var(--pink-40)!important;color:var(--pink-100)!important}.filled--pink1{border:1px solid var(--pink-20)!important}.filled--pink1,.outlined--pink{background:var(--pink-20)!important;color:var(--pink-100)!important}.outlined--pink{border:1px solid var(--pink-100)!important}.filled--yellow4{background:var(--yellow-100)!important;border:1px solid var(--yellow-100)!important;color:var(--yellow-20)!important}.filled--yellow3{background:var(--yellow-80)!important;border:1px solid var(--yellow-80)!important;color:var(--yellow-20)!important}.filled--yellow2{background:var(--yellow-40)!important;border:1px solid var(--yellow-40)!important;color:var(--yellow-100)!important}.filled--yellow1{border:1px solid var(--yellow-20)!important}.filled--yellow1,.outlined--yellow{background:var(--yellow-20)!important;color:var(--yellow-100)!important}.outlined--yellow{border:1px solid var(--yellow-100)!important}.filled--green4{background:var(--green-100)!important;border:1px solid var(--green-100)!important;color:var(--green-20)!important}.filled--green3{background:var(--green-80)!important;border:1px solid var(--green-80)!important;color:var(--green-20)!important}.filled--green2{background:var(--green-40)!important;border:1px solid var(--green-40)!important;color:var(--green-100)!important}.filled--green1{border:1px solid var(--green-20)!important}.filled--green1,.outlined--green{background:var(--green-20)!important;color:var(--green-100)!important}.outlined--green{border:1px solid var(--green-100)!important}.filled--teal4{background:var(--teal-100)!important;border:1px solid var(--teal-100)!important}.filled--teal3,.filled--teal4{color:var(--teal-20)!important}.filled--teal3{background:var(--teal-80)!important;border:1px solid var(--teal-80)!important}.filled--teal2{background:var(--teal-40)!important;border:1px solid var(--teal-40)!important;color:var(--teal-100)!important}.filled--teal1{border:1px solid var(--teal-20)!important}.filled--teal1,.outlined--teal{background:var(--teal-20)!important;color:var(--teal-100)!important}.outlined--teal{border:1px solid var(--teal-100)!important}.filled--blue4{background:var(--blue-100)!important;border:1px solid var(--blue-100)!important}.filled--blue3,.filled--blue4{color:var(--blue-20)!important}.filled--blue3{background:var(--blue-80)!important;border:1px solid var(--blue-80)!important}.filled--blue2{background:var(--blue-40)!important;border:1px solid var(--blue-40)!important;color:var(--blue-100)!important}.filled--blue1{border:1px solid var(--blue-20)!important}.filled--blue1,.outlined--blue{background:var(--blue-20)!important;color:var(--blue-100)!important}.outlined--blue{border:1px solid var(--blue-100)!important}.filled--purple4{background:var(--purple-100)!important;border:1px solid var(--purple-100)!important;color:var(--purple-20)!important}.filled--purple3{background:var(--purple-80)!important;border:1px solid var(--purple-80)!important;color:var(--purple-20)!important}.filled--purple2{background:var(--purple-40)!important;border:1px solid var(--purple-40)!important;color:var(--purple-100)!important}.filled--purple1{border:1px solid var(--purple-20)!important}.filled--purple1,.outlined--purple{background:var(--purple-20)!important;color:var(--purple-100)!important}.outlined--purple{border:1px solid var(--purple-100)!important}.p-xs{padding:var(--spacing-xs)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.px-xs{padding-left:var(--spacing-xs);padding-right:var(--spacing-xs)}.px-sm{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm)}.px-md{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}.px-lg{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.px-xl{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl)}.py-xs{padding-bottom:var(--spacing-xs);padding-top:var(--spacing-xs)}.py-sm{padding-bottom:var(--spacing-sm);padding-top:var(--spacing-sm)}.py-md{padding-bottom:var(--spacing-md);padding-top:var(--spacing-md)}.py-lg{padding-bottom:var(--spacing-lg);padding-top:var(--spacing-lg)}.py-xl{padding-bottom:var(--spacing-xl);padding-top:var(--spacing-xl)}.m-xs{margin:var(--spacing-xs)}.m-sm{margin:var(--spacing-sm)}.m-md{margin:var(--spacing-md)}.m-lg{margin:var(--spacing-lg)}.m-xl{margin:var(--spacing-xl)}.mx-xs{margin-left:var(--spacing-xs);margin-right:var(--spacing-xs)}.mx-sm{margin-left:var(--spacing-sm);margin-right:var(--spacing-sm)}.mx-md{margin-left:var(--spacing-md);margin-right:var(--spacing-md)}.mx-lg{margin-left:var(--spacing-lg);margin-right:var(--spacing-lg)}.mx-xl{margin-left:var(--spacing-xl);margin-right:var(--spacing-xl)}.my-xs{margin-bottom:var(--spacing-xs);margin-top:var(--spacing-xs)}.my-sm{margin-bottom:var(--spacing-sm);margin-top:var(--spacing-sm)}.my-md{margin-bottom:var(--spacing-md);margin-top:var(--spacing-md)}.my-lg{margin-bottom:var(--spacing-lg);margin-top:var(--spacing-lg)}.my-xl{margin-bottom:var(--spacing-xl);margin-top:var(--spacing-xl)}.gap-xs{gap:var(--gap-xs)}.gap-sm{gap:var(--gap-sm)}.gap-md{gap:var(--gap-md)}.gap-base{gap:var(--gap-base)}.gap-lg{gap:var(--gap-lg)}.gap-xl{gap:var(--gap-xl)}.rounded-sm{border-radius:var(--border-radius-sm)}.rounded-base{border-radius:var(--border-radius-base)}.rounded-md{border-radius:var(--border-radius-md)}.rounded-lg{border-radius:var(--border-radius-lg)}.rounded-full{border-radius:9999px}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-none{box-shadow:none}
|
|
1
|
+
*,:after,:before{box-sizing:border-box}body,h1,h2,h3,ol,p,ul{margin:0;padding:0}a{color:var(--blue-80);cursor:pointer;text-decoration:underline}a:hover{color:var(--blue-100)}:root{--black-100:#0f0f0f;--white-100:#fff;--grey-20:#f9fbfc;--grey-50:#eee;--grey-60:#f9fbfc;--grey-80:#d9d9dd;--grey-100:#7a7a7a;--grey-200:#d9d9dd;--red-100:#d50000;--red-80:#f86b6b;--red-60:#fc7a7d;--red-40:#ffb6bf;--red-20:#ffdbe2;--yellow-100:#dca227;--yellow-80:#e3ba5c;--yellow-60:#ebd08b;--yellow-40:#f4e6ba;--yellow-20:#fffbeb;--pink-100:#ff3d84;--pink-80:#ff76a5;--pink-60:#ffa3c4;--pink-40:#ffcbdf;--pink-20:#fff2f7;--blue-100:#1461c8;--blue-80:#6282d6;--blue-60:#93a6e4;--blue-40:#c1cbf2;--blue-20:#eef1ff;--teal-10:#f0fffe;--teal-20:#ebfffd;--teal-40:#bee9e4;--teal-60:#8fd3cc;--teal-80:#5dbdb3;--teal-100:#00a79a;--green-100:#007552;--green-80:#509576;--green-60:#85b59c;--green-40:#b8d6c5;--green-20:#ebf7f0;--purple-100:#53099b;--purple-80:#8b47ae;--purple-60:#b77ec3;--purple-40:#ddb8dc;--purple-20:#fbf6fa;--font-sans:"Roboto",sans-serif;--font-size-xs:11px;--font-size-sm:12px;--font-size-md:14px;--font-size-lg:16px;--font-size-base:12px;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--gap-xs:0.25rem;--gap-sm:0.5rem;--gap-md:0.75rem;--gap-base:1rem;--gap-lg:1.5rem;--gap-xl:2rem;--border-radius-sm:4px;--border-radius-base:6px;--border-radius-md:8px;--border-radius-lg:10px;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:2000;--z-popover:2100;--z-tooltip:2147483647;--shadow-sm:0 2px 8px rgba(0,0,0,.1);--shadow-md:0 4px 12px rgba(0,0,0,.15);--shadow-lg:0 10px 40px rgba(0,0,0,.2);--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px}body{color:var(--black-100);font-family:var(--font-sans);font-size:var(--font-size-base);line-height:auto}h1{font-size:24px}h2{font-size:20px}h3{font-size:16px}p{font-size:12px}.velcro-badge{align-items:center;border-radius:50px;cursor:default;display:inline-flex;font-size:var(--font-size-base);gap:.25rem;justify-content:center;line-height:1;margin:.15em;padding:4px}.velcro-badge.round{border-radius:50%;height:var(--badge-size,24px);min-height:unset;min-width:unset;padding:0;width:var(--badge-size,24px)}.breadcrumbs{align-items:center;display:flex;font-size:var(--base-font-size);gap:5px}.breadcrumbs>a{color:var(--grey-100);text-decoration:none}.breadcrumbs>a:hover{color:var(--black-100)}.breadcrumb-separator{align-items:center;color:var(--black-100);display:flex}.breadcrumb-copy{align-items:center;background:none;border:none;color:var(--grey-100);cursor:pointer;display:flex;margin-left:5px;padding:0;transition:color .2s ease}.breadcrumb-copy.copied,.breadcrumb-copy:hover{color:var(--black-100)}button{align-items:center;background-color:var(--black-100);border:0;border:1px solid var(--black-100);border-radius:50%;border-radius:50px;color:var(--white-100);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:var(--font-size-base);gap:.25rem;justify-content:center;line-height:1;min-width:0;overflow-wrap:break-word;padding:8px;transition:background-color .2s,border-color .2s,color .2s,filter .2s;word-break:break-word}button:hover:not(:disabled){filter:brightness(.8)}button:disabled{background-color:var(--grey-80)!important;border-color:var(--grey-80)!important;color:var(--white-100)!important;cursor:not-allowed}button span{align-items:center;display:flex;justify-content:center;line-height:1}.velcro-card{background:var(--white-100);border:1px solid var(--grey-80);border-radius:10px;cursor:default;display:flex;flex:1 1 0;flex-direction:column;margin:1rem;min-height:0;overflow:hidden}.velcro-card.selectable:hover:not(.selected),.velcro-card.selectable:hover:not(.selected) .velcro-card-body,.velcro-card.selectable:hover:not(.selected) .velcro-card-header{background-color:var(--grey-20)}.velcro-card-header{align-items:center;border-bottom:1px solid var(--grey-80);display:flex;flex-shrink:0;gap:1rem;justify-content:space-between;padding:1rem}.velcro-card-actions{align-items:center;display:flex;gap:.5rem}.velcro-card-actions button{align-items:center;background:none;border:none;color:var(--grey-100);cursor:pointer;display:inline-flex;gap:.25rem;padding:.5rem}.velcro-card-body{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow-y:auto;padding:1rem}.velcro-card--fit{flex:0 0 auto}.velcro-card--fit .velcro-card-body{overflow:visible}.velcro-card--tags{align-self:flex-end;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.velcro-card-body--scroll-demo{max-height:300px;overflow:auto}.velcro-card.selectable{cursor:pointer}.velcro-card.selectable:hover,.velcro-card.selectable:hover .velcro-card-body,.velcro-card.selectable:hover .velcro-card-header{background-color:var(--grey-20)}.velcro-card.selected{background:var(--blue-20);border:1px solid var(--blue-100)}.velcro-card.selected .velcro-card-header{background:var(--blue-20);border-bottom-color:var(--blue-100)}.velcro-card.selected .velcro-card-body{background:var(--blue-20)}.velcro-dropdown{align-items:center;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--blue-100);background-image:url("data:image/svg+xml;utf8,<svg fill='white' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-position:right 8px center;background-repeat:no-repeat;background-size:10px;border:1px solid var(--blue-100);border-radius:50px;color:var(--blue-20);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:var(--font-size-base);font-weight:400;gap:1rem;justify-content:flex-start;line-height:1;padding:8px 24px 8px 8px;text-align:left;transition:all .2s ease;width:-moz-fit-content;width:fit-content}.velcro-dropdown:focus{border-color:var(--blue-100);box-shadow:0 0 0 3px rgba(20,97,200,.2);outline:none}.velcro-dropdown:disabled{background-color:var(--grey-80);border-color:var(--grey-80);color:var(--grey-60);cursor:not-allowed;opacity:.6}.velcro-dropdown--open{background-image:url("data:image/svg+xml;utf8,<svg fill='white' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 14l5 -5 5 5z'/></svg>")}.velcro-fieldset{display:grid;gap:var(--gap,var(--gap-sm));grid-template-columns:repeat(var(--columns,1),1fr)}.velcro-fieldset.column-2,.velcro-fieldset.column-3{grid-template-columns:repeat(2,1fr)}.velcro-fieldset.column-4{grid-template-columns:repeat(4,1fr)}.velcro-field{align-items:center;display:grid;gap:var(--gap-sm);grid-template-columns:auto 1fr}.velcro-field label{color:var(--grey-100);text-decoration:underline;white-space:nowrap}.velcro-field input,.velcro-field select,.velcro-field>span{width:100%}.velcro-field-suffix{align-items:center;display:flex;gap:var(--gap-xs)}.velcro-field-suffix input{width:5ch}.velcro-field-error{color:var(--red-100);font-size:var(--font-size-sm);font-weight:500;margin-top:var(--gap-xs)}.velcro-form{display:grid;font-family:var(--font-sans);gap:1rem;grid-template-columns:1fr}.velcro-form.column-2{grid-template-columns:repeat(2,1fr)}.velcro-form.column-4{grid-template-columns:repeat(4,1fr)}.velcro-form-section{display:flex;flex-direction:column;gap:.25rem}.velcro-form-section label{color:var(--black-100);font-size:var(--font-size-base)}.velcro-form-section input,.velcro-form-section select:not(.velcro-dropdown){appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--white-100);border:1px solid var(--grey-80);border-radius:6px;color:var(--black-100);font-family:var(--font-sans);font-size:var(--font-size-base);padding:.5rem .75rem;transition:border-color .2s,box-shadow .2s,background-color .2s;width:100%}.velcro-form-section select:not(.velcro-dropdown){background-image:url("data:image/svg+xml;utf8,<svg fill='black' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-position:right .75rem center;background-repeat:no-repeat;background-size:.8rem;cursor:pointer;padding-right:2rem}.velcro-form-section-inline{align-items:center;display:grid;gap:.75rem;grid-template-columns:auto 1fr}.velcro-form-section-inline label{white-space:nowrap}.velcro-form label{color:var(--black-100);font-size:var(--font-size-base);margin-bottom:.25rem}.velcro-form input,.velcro-form select:not(.velcro-dropdown){appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--white-100);border:1px solid var(--grey-80);border-radius:6px;color:var(--black-100);font-size:var(--font-size-base);padding:.5rem .75rem;transition:border-color .2s,box-shadow .2s,background-color .2s;width:100%}.velcro-form select:not(.velcro-dropdown){background-image:url("data:image/svg+xml;utf8,<svg fill='black' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-position:right .75rem center;background-repeat:no-repeat;background-size:.8rem;cursor:pointer;padding-right:2rem}.velcro-form--inline-group{display:flex;gap:1rem}.velcro-form--inline-group>div{display:flex;flex:1;flex-direction:column}.velcro-form input.invalid,.velcro-form select:not(.velcro-dropdown).invalid,.velcro-form-section input.invalid,.velcro-form-section select:not(.velcro-dropdown).invalid{border-color:var(--red-100)}.velcro-form-inputs-container{display:flex;flex-direction:column;gap:2rem;padding:2rem}.velcro-form-fields{align-items:center;display:grid;gap:.5rem;grid-template-columns:1fr 1fr auto}.velcro-form-fields-container{display:contents}.velcro-form-container{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem}.velcro-form-field-group{display:flex;flex-direction:column;gap:.25rem}.velcro-form-field-group label{font-weight:700}.velcro-form-field-group input,.velcro-form-field-group select:not(.velcro-dropdown){border:1px solid var(--grey-80);border-radius:4px;padding:.75rem}.velcro-form-field-group select:not(.velcro-dropdown){appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill='black' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-position:right .75rem center;background-repeat:no-repeat;background-size:.8rem;cursor:pointer;padding-right:2rem}.velcro-form-tab-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr}.velcro-form-date-group{display:flex;flex-direction:column;gap:.25rem}.velcro-form-date-group label{font-weight:700}.velcro-form-date-group input{background-color:#f9fbfc;border:1px solid #d9d9dd;border-radius:4px;padding:.75rem}.velcro-form-button-group{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}.velcro-form-button-group button{width:-moz-fit-content;width:fit-content}.velcro-form-tab-box-grid{display:flex;gap:1rem}.velcro-drop-zone{background-color:var(--grey-20);border:2px dashed var(--grey-80);border-radius:8px;cursor:pointer;padding:2rem;text-align:center;transition:all .2s ease}.velcro-drop-zone:hover{background-color:var(--grey-50);border-color:var(--grey-100)}.velcro-drop-zone.dragover{background-color:var(--blue-20);border-color:var(--blue-100)}.velcro-drop-zone p{color:var(--grey-100);margin:0}.velcro-drop-zone input[type=file]{display:none}.velcro-tab-box{align-items:center;display:flex;flex:1;gap:.5rem}.velcro-tab-box input[type=radio]{display:none}.velcro-tab-box label{background-color:var(--white-100);border:1px solid var(--blue-100);border-radius:6px;color:var(--blue-100);cursor:pointer;flex:1;font-weight:400;margin:0;padding:.5rem 1rem;text-align:center;transition:all .2s ease}.velcro-tab-box label:hover{background-color:var(--blue-20)}.velcro-tab-box input[type=radio]:checked+label,.velcro-tab-box.selected label{background-color:var(--blue-100);color:var(--blue-20)}.velcro-nav{background:var(--black-100);color:var(--grey-20);height:100vh;position:relative;width:80px}velcro-nav--items a{background:none;border:none;color:var(--grey-100);cursor:pointer;font-size:var(--font-size-base);padding:0;text-decoration:none}velcro-nav--items a:hover{color:var(--white-100)}velcro-nav--items a:active{color:var(--white-100);text-decoration:underline}.velcro-nav--hamburger{background:none;border:none;color:var(--white-100);cursor:pointer;font-size:32px;left:.5em;position:absolute;top:.5em;z-index:5}.velcro-nav.open .velcro-nav--hamburger{display:none}.velcro-nav--close{background:none;border:none;color:var(--white-100);cursor:pointer;font-size:32px;left:.5em;position:absolute;top:.5em;z-index:20}.velcro-nav:not(.open) .velcro-nav--close{display:none}.velcro-nav--panel{background:var(--black-100);box-sizing:border-box;height:100%;left:0;overflow:hidden;padding:0;position:absolute;top:0;transition:width .35s ease;width:0;z-index:10}.velcro-nav.open .velcro-nav--panel{padding:40px 30px;width:320px}.velcro-nav:not(.open) .velcro-nav--panel-content{opacity:0;pointer-events:none;transition:opacity 0s linear}.velcro-nav.open .velcro-nav--panel-content{opacity:1;transition:opacity .15s ease-in}.velcro-nav--items{list-style:none;margin:0;padding:2em 0 0}.velcro-nav--link{background:none;border:none;cursor:pointer;display:block;font-size:var(--font-size-base);padding:.5rem 0;text-decoration:none;transition:color .2s ease}.velcro-nav--link,.velcro-nav--link:hover{color:var(--white-100)}.velcro-nav--link.active{border-bottom:2px solid var(--white-100);color:var(--white-100)}.velcro-nav--user{bottom:1em;left:1em;position:absolute}.velcro-notification{animation:velcro-slide-down .3s ease-out;left:50%;position:fixed;top:var(--notification-top,2rem);transform:translateX(-50%);z-index:var(--z-modal)}.velcro-notification--hidden{opacity:0;pointer-events:none;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}.velcro-notification-content{align-items:center;background-color:var(--white-100);border:1px solid var(--grey-80);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);display:flex;gap:var(--gap-md);padding:var(--spacing-md) var(--spacing-lg)}.velcro-notification-icon{flex-shrink:0;font-size:var(--font-size-lg);font-weight:700}.velcro-notification-text{color:var(--black-100);font-weight:500}.velcro-notification--success .velcro-notification-content{background-color:var(--green-20);border-color:var(--green-100)}.velcro-notification--success .velcro-notification-icon,.velcro-notification--success .velcro-notification-text{color:var(--green-100)}.velcro-notification--error .velcro-notification-content{background-color:var(--red-20);border-color:var(--red-100)}.velcro-notification--error .velcro-notification-icon,.velcro-notification--error .velcro-notification-text{color:var(--red-100)}.velcro-notification--warning .velcro-notification-content{background-color:var(--yellow-20);border-color:var(--yellow-100)}.velcro-notification--warning .velcro-notification-icon,.velcro-notification--warning .velcro-notification-text{color:var(--yellow-100)}.velcro-notification--info .velcro-notification-content{background-color:var(--blue-20);border-color:var(--blue-100)}.velcro-notification--info .velcro-notification-icon,.velcro-notification--info .velcro-notification-text{color:var(--blue-100)}@keyframes velcro-slide-down{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.velcro-table{border-collapse:collapse;font-family:var(--font-sans);font-size:12px;table-layout:fixed;width:100%}.velcro-table thead th{background:var(--white-100);color:var(--grey-100);font-weight:400;position:sticky;text-align:left;top:0;z-index:1}.velcro-table tbody td,.velcro-table thead th{border-bottom:1px solid var(--grey-80);overflow-wrap:break-word;padding:12px 16px;white-space:normal;word-break:break-word}.velcro-table tbody td{color:var(--black-100);vertical-align:middle}.velcro-table tbody tr:last-child td{border-bottom:none}.velcro-table tbody tr{cursor:default}.velcro-table tbody tr.selectable{cursor:pointer}.velcro-table tbody tr.selectable:hover,.velcro-table tbody tr.selectable:hover:not(.selected){background-color:var(--grey-60)}.velcro-table tbody tr.selected{background-color:var(--blue-20)}.velcro-table td.text-center,.velcro-table th.text-center{text-align:center}.velcro-table td.text-right,.velcro-table th.text-right{text-align:right}.velcro-table .cell-shrink{white-space:nowrap;width:1%}.velcro-table .cell-expand{width:100%}.velcro-table .cell-actions{white-space:nowrap}.velcro-table .cell-actions>*{margin-left:8px}.velcro-table .cell-actions>:first-child{margin-left:0}.velcro-table .cell-icon{color:var(--grey-100);padding-right:8px;width:1%}.velcro-table .cell-icon:hover{color:var(--black-100)}.velcro-table .cell-status{white-space:nowrap;width:1%}.velcro-table-scroll{flex:1;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto}.velcro-table-wrapper{overflow-x:auto;width:100%}.velcro-tooltip{background:var(--black-100);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-md);color:var(--white-100);display:inline-block;font-size:var(--font-size-sm);line-height:1.2;opacity:0;padding:var(--spacing-sm) var(--spacing-md);pointer-events:none;position:fixed;transform:translateX(-50%);transition:opacity .15s ease;white-space:nowrap;width:-moz-max-content;width:max-content;z-index:var(--z-tooltip);--tooltip-gap:2px}.velcro-tooltip--top{transform:translateX(-50%) translateY(calc(-100% - var(--tooltip-gap)))}.velcro-tooltip--bottom{transform:translateX(-50%) translateY(var(--tooltip-gap))}.velcro-tooltip--visible{opacity:1}.velcro-spinner{align-items:center;background-color:var(--white-100);border-radius:50%;display:inline-flex;height:40px;justify-content:center;width:40px}.velcro-spinner:after{animation:velcro-spin 1s linear infinite;border-bottom:3px solid transparent;border-left:3px solid transparent;border-radius:50%;border-right:3px solid transparent;border-right-color:var(--grey-100);border-top:3px solid transparent;border-top-color:var(--grey-100);content:"";height:32px;width:32px}@keyframes velcro-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.velcro-header{align-items:center;border-bottom:1px solid var(--grey-80);display:flex;flex-shrink:0;justify-content:space-between;padding:1rem}.velcro-header-left{align-items:center;display:flex;gap:.5rem}.velcro-header nav{align-items:center;display:flex;gap:1em}.velcro-header nav .link-button,.velcro-header nav a{background:none;border:none;color:var(--grey-100);cursor:pointer;font-size:var(--font-size-lg);padding:0;text-decoration:none}.velcro-header nav .link-button:hover,.velcro-header nav a:hover{color:var(--black-100)}.velcro-header nav .link-button.active,.velcro-header nav a.active{color:var(--black-100);text-decoration:underline}.velcro-grid{display:grid;flex:1;grid-template-columns:1fr 1fr;min-height:0;position:relative;--divider-pos:0.5}.velcro-grid:before{background:var(--grey-80);bottom:0;content:"";left:calc(100%*var(--divider-pos));pointer-events:none;position:absolute;top:0;width:1px}.velcro-grid--50-50{grid-template-columns:1fr 1fr;--divider-pos:0.5}.velcro-grid--40-60{grid-template-columns:.4fr .6fr;--divider-pos:0.4}.velcro-grid--60-40{grid-template-columns:.6fr .4fr;--divider-pos:0.6}.velcro-grid--30-70{grid-template-columns:.3fr .7fr;--divider-pos:0.3}.velcro-column-fit{display:flex;flex-direction:column;min-height:0;overflow:hidden}.velcro-column-fit>.velcro-card{flex:1 1 0;min-height:0}.velcro-column-fit>.velcro-card .velcro-card-body{overflow-y:auto}.velcro-column-fit>.velcro-card:only-child{flex:1 1 0}.velcro-column-scroll{display:flex;flex-direction:column;min-height:0;overflow-y:auto}.velcro-column-scroll>.velcro-card{flex:0 0 auto}.velcro-column-scroll>.velcro-card .velcro-card-body{overflow:visible}.velcro-layout-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}.velcro-layout-header{align-items:center;border-bottom:1px solid var(--grey-80);display:flex;flex-shrink:0;gap:var(--gap-md,.75rem);padding:var(--spacing-md,1rem)}.velcro-grid--25-75{grid-template-columns:.25fr .75fr;--divider-pos:0.25}.velcro-grid--stacked{grid-template-columns:1fr}.velcro-grid--stacked:before{display:none}.velcro-layout-col{min-height:0;min-width:0;overflow-y:auto}.velcro-layout-col--muted{background:var(--grey-60)}.velcro-layout-col--accent{background:var(--blue-20)}.velcro-layout-card-stack>.velcro-card{flex:0 0 auto}.velcro-layout-card-stack>.velcro-card:nth-child(n+2){flex:1 1 0;min-height:200px}.velcro-modal{align-items:center;display:flex;inset:0;justify-content:center;position:fixed;z-index:2000}.velcro-modal-overlay{background-color:rgba(0,0,0,.5);inset:0;position:absolute}.velcro-modal-content{background-color:var(--white-100);border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;max-height:70vh;max-width:70vw;position:relative}.velcro-modal-header{gap:1rem;justify-content:space-between;padding:1.5rem}.velcro-modal-close,.velcro-modal-header{align-items:center;display:flex;flex-shrink:0}.velcro-modal-close{background:none;border:none;border-radius:4px;color:var(--grey-100);cursor:pointer;font-size:1.5rem;height:2rem;justify-content:center;padding:0;transition:background-color .2s ease;width:2rem}.velcro-modal-close:hover{background-color:var(--grey-60)}.velcro-modal-body{flex:1;overflow-y:auto;padding:1.5rem}.velcro-modal-header h2{margin:0}.velcro-modal-footer{display:flex;gap:.5rem;justify-content:flex-end;padding:1.5rem}.velcro-search-pill{align-items:center;background:transparent;border:1px solid var(--grey-80);border-radius:9999px;display:flex;padding:.75rem 1.25rem}.velcro-search-pill input{background:transparent;border:none;color:var(--black-100);flex:1;font-size:var(--base-font-size);outline:none;text-align:left}.velcro-search-pill input::-moz-placeholder{color:var(--grey-100)}.velcro-search-pill input::placeholder{color:var(--grey-100)}.velcro-search-icon{margin-left:auto}.caption,.caption-italic,.velcro-search-icon{color:var(--grey-100)}.caption-italic{font-style:italic}.caption-underline{color:var(--grey-100);text-decoration:underline}.primary{background:var(--black-100)!important;border:1px solid var(--black-100)!important;color:var(--white-100)!important}.secondary{background:var(--grey-80)!important;border:1px solid var(--grey-80)!important}.secondary,.tertiary{color:var(--black-100)!important}.tertiary{background:var(--white-100)!important;border:1px solid var(--black-100)!important}.filled--red4{background:var(--red-100)!important;border:1px solid var(--red-100)!important}.filled--red3,.filled--red4{color:var(--red-20)!important}.filled--red3{background:var(--red-80)!important;border:1px solid var(--red-80)!important}.filled--red2{background:var(--red-40)!important;border:1px solid var(--red-40)!important;color:var(--red-100)!important}.filled--red1{border:1px solid var(--red-20)!important}.filled--red1,.outlined--red{background:var(--red-20)!important;color:var(--red-100)!important}.outlined--red{border:1px solid var(--red-100)!important}.filled--pink4{background:var(--pink-100)!important;border:1px solid var(--pink-100)!important}.filled--pink3,.filled--pink4{color:var(--pink-20)!important}.filled--pink3{background:var(--pink-80)!important;border:1px solid var(--pink-80)!important}.filled--pink2{background:var(--pink-40)!important;border:1px solid var(--pink-40)!important;color:var(--pink-100)!important}.filled--pink1{border:1px solid var(--pink-20)!important}.filled--pink1,.outlined--pink{background:var(--pink-20)!important;color:var(--pink-100)!important}.outlined--pink{border:1px solid var(--pink-100)!important}.filled--yellow4{background:var(--yellow-100)!important;border:1px solid var(--yellow-100)!important;color:var(--yellow-20)!important}.filled--yellow3{background:var(--yellow-80)!important;border:1px solid var(--yellow-80)!important;color:var(--yellow-20)!important}.filled--yellow2{background:var(--yellow-40)!important;border:1px solid var(--yellow-40)!important;color:var(--yellow-100)!important}.filled--yellow1{border:1px solid var(--yellow-20)!important}.filled--yellow1,.outlined--yellow{background:var(--yellow-20)!important;color:var(--yellow-100)!important}.outlined--yellow{border:1px solid var(--yellow-100)!important}.filled--green4{background:var(--green-100)!important;border:1px solid var(--green-100)!important;color:var(--green-20)!important}.filled--green3{background:var(--green-80)!important;border:1px solid var(--green-80)!important;color:var(--green-20)!important}.filled--green2{background:var(--green-40)!important;border:1px solid var(--green-40)!important;color:var(--green-100)!important}.filled--green1{border:1px solid var(--green-20)!important}.filled--green1,.outlined--green{background:var(--green-20)!important;color:var(--green-100)!important}.outlined--green{border:1px solid var(--green-100)!important}.filled--teal4{background:var(--teal-100)!important;border:1px solid var(--teal-100)!important}.filled--teal3,.filled--teal4{color:var(--teal-20)!important}.filled--teal3{background:var(--teal-80)!important;border:1px solid var(--teal-80)!important}.filled--teal2{background:var(--teal-40)!important;border:1px solid var(--teal-40)!important;color:var(--teal-100)!important}.filled--teal1{border:1px solid var(--teal-20)!important}.filled--teal1,.outlined--teal{background:var(--teal-20)!important;color:var(--teal-100)!important}.outlined--teal{border:1px solid var(--teal-100)!important}.filled--blue4{background:var(--blue-100)!important;border:1px solid var(--blue-100)!important}.filled--blue3,.filled--blue4{color:var(--blue-20)!important}.filled--blue3{background:var(--blue-80)!important;border:1px solid var(--blue-80)!important}.filled--blue2{background:var(--blue-40)!important;border:1px solid var(--blue-40)!important;color:var(--blue-100)!important}.filled--blue1{border:1px solid var(--blue-20)!important}.filled--blue1,.outlined--blue{background:var(--blue-20)!important;color:var(--blue-100)!important}.outlined--blue{border:1px solid var(--blue-100)!important}.filled--purple4{background:var(--purple-100)!important;border:1px solid var(--purple-100)!important;color:var(--purple-20)!important}.filled--purple3{background:var(--purple-80)!important;border:1px solid var(--purple-80)!important;color:var(--purple-20)!important}.filled--purple2{background:var(--purple-40)!important;border:1px solid var(--purple-40)!important;color:var(--purple-100)!important}.filled--purple1{border:1px solid var(--purple-20)!important}.filled--purple1,.outlined--purple{background:var(--purple-20)!important;color:var(--purple-100)!important}.outlined--purple{border:1px solid var(--purple-100)!important}.p-xs{padding:var(--spacing-xs)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.px-xs{padding-left:var(--spacing-xs);padding-right:var(--spacing-xs)}.px-sm{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm)}.px-md{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}.px-lg{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.px-xl{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl)}.py-xs{padding-bottom:var(--spacing-xs);padding-top:var(--spacing-xs)}.py-sm{padding-bottom:var(--spacing-sm);padding-top:var(--spacing-sm)}.py-md{padding-bottom:var(--spacing-md);padding-top:var(--spacing-md)}.py-lg{padding-bottom:var(--spacing-lg);padding-top:var(--spacing-lg)}.py-xl{padding-bottom:var(--spacing-xl);padding-top:var(--spacing-xl)}.m-xs{margin:var(--spacing-xs)}.m-sm{margin:var(--spacing-sm)}.m-md{margin:var(--spacing-md)}.m-lg{margin:var(--spacing-lg)}.m-xl{margin:var(--spacing-xl)}.mx-xs{margin-left:var(--spacing-xs);margin-right:var(--spacing-xs)}.mx-sm{margin-left:var(--spacing-sm);margin-right:var(--spacing-sm)}.mx-md{margin-left:var(--spacing-md);margin-right:var(--spacing-md)}.mx-lg{margin-left:var(--spacing-lg);margin-right:var(--spacing-lg)}.mx-xl{margin-left:var(--spacing-xl);margin-right:var(--spacing-xl)}.my-xs{margin-bottom:var(--spacing-xs);margin-top:var(--spacing-xs)}.my-sm{margin-bottom:var(--spacing-sm);margin-top:var(--spacing-sm)}.my-md{margin-bottom:var(--spacing-md);margin-top:var(--spacing-md)}.my-lg{margin-bottom:var(--spacing-lg);margin-top:var(--spacing-lg)}.my-xl{margin-bottom:var(--spacing-xl);margin-top:var(--spacing-xl)}.gap-xs{gap:var(--gap-xs)}.gap-sm{gap:var(--gap-sm)}.gap-md{gap:var(--gap-md)}.gap-base{gap:var(--gap-base)}.gap-lg{gap:var(--gap-lg)}.gap-xl{gap:var(--gap-xl)}.rounded-sm{border-radius:var(--border-radius-sm)}.rounded-base{border-radius:var(--border-radius-base)}.rounded-md{border-radius:var(--border-radius-md)}.rounded-lg{border-radius:var(--border-radius-lg)}.rounded-full{border-radius:9999px}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-none{box-shadow:none}
|
package/js/dropdown.js
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Velcro Dropdown Manager
|
|
3
|
+
*
|
|
4
|
+
* Handles dropdown select element styling and arrow state management.
|
|
5
|
+
* Flips arrow icon when options menu is actually open/showing.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* const dropdown = document.querySelector('.velcro-dropdown');
|
|
9
|
+
* VelcroDropdown.init(dropdown);
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
const VelcroDropdown = {
|
|
13
|
+
/**
|
|
14
|
+
* Initialize a dropdown with state management
|
|
15
|
+
* @param {HTMLSelectElement} dropdown - The select element
|
|
16
|
+
*/
|
|
17
|
+
init(dropdown) {
|
|
18
|
+
if (!dropdown || dropdown.tagName !== 'SELECT') return;
|
|
19
|
+
|
|
20
|
+
let isOpen = false;
|
|
21
|
+
|
|
22
|
+
// Detect when dropdown menu opens
|
|
23
|
+
dropdown.addEventListener('mousedown', (e) => {
|
|
24
|
+
isOpen = true;
|
|
25
|
+
this.updateArrowState(dropdown, isOpen);
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// Detect when dropdown closes (after selection or blur)
|
|
29
|
+
dropdown.addEventListener('change', () => {
|
|
30
|
+
isOpen = false;
|
|
31
|
+
setTimeout(() => {
|
|
32
|
+
this.updateArrowState(dropdown, isOpen);
|
|
33
|
+
}, 0);
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
// Detect blur (click outside or escape key)
|
|
37
|
+
dropdown.addEventListener('blur', () => {
|
|
38
|
+
isOpen = false;
|
|
39
|
+
this.updateArrowState(dropdown, isOpen);
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
// Handle escape key to close dropdown
|
|
43
|
+
dropdown.addEventListener('keydown', (e) => {
|
|
44
|
+
if (e.key === 'Escape') {
|
|
45
|
+
isOpen = false;
|
|
46
|
+
this.updateArrowState(dropdown, isOpen);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
},
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Update arrow state based on whether options menu is open
|
|
53
|
+
* @param {HTMLSelectElement} dropdown - The select element
|
|
54
|
+
* @param {boolean} isOpen - Whether the dropdown menu is open
|
|
55
|
+
*/
|
|
56
|
+
updateArrowState(dropdown, isOpen) {
|
|
57
|
+
if (isOpen) {
|
|
58
|
+
dropdown.classList.add('velcro-dropdown--open');
|
|
59
|
+
// Handle warning variant with black arrow
|
|
60
|
+
if (dropdown.classList.contains('velcro-dropdown--warning')) {
|
|
61
|
+
dropdown.classList.add('velcro-dropdown--warning--open');
|
|
62
|
+
}
|
|
63
|
+
} else {
|
|
64
|
+
dropdown.classList.remove('velcro-dropdown--open');
|
|
65
|
+
dropdown.classList.remove('velcro-dropdown--warning--open');
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Initialize all dropdowns on page
|
|
71
|
+
* @param {string} selector - CSS selector for dropdowns (default: '.velcro-dropdown')
|
|
72
|
+
*/
|
|
73
|
+
initAll(selector = '.velcro-dropdown') {
|
|
74
|
+
document.querySelectorAll(selector).forEach(dropdown => {
|
|
75
|
+
this.init(dropdown);
|
|
76
|
+
});
|
|
77
|
+
},
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Set dropdown value and update state
|
|
81
|
+
* @param {HTMLSelectElement} dropdown - The select element
|
|
82
|
+
* @param {string} value - The value to set
|
|
83
|
+
*/
|
|
84
|
+
setValue(dropdown, value) {
|
|
85
|
+
dropdown.value = value;
|
|
86
|
+
this.updateArrowState(dropdown, false);
|
|
87
|
+
dropdown.dispatchEvent(new Event('change', { bubbles: true }));
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Get current dropdown value
|
|
92
|
+
* @param {HTMLSelectElement} dropdown - The select element
|
|
93
|
+
* @returns {string} - The selected value
|
|
94
|
+
*/
|
|
95
|
+
getValue(dropdown) {
|
|
96
|
+
return dropdown.value;
|
|
97
|
+
},
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
// Auto-initialize on DOM ready
|
|
101
|
+
if (document.readyState === 'loading') {
|
|
102
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
103
|
+
VelcroDropdown.initAll();
|
|
104
|
+
});
|
|
105
|
+
} else {
|
|
106
|
+
VelcroDropdown.initAll();
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// Export for use in modules
|
|
110
|
+
if (typeof module !== 'undefined' && module.exports) {
|
|
111
|
+
module.exports = VelcroDropdown;
|
|
112
|
+
}
|
package/js/icon.js
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
class VelcroIcon extends HTMLElement {
|
|
2
|
+
connectedCallback() {
|
|
3
|
+
this.render();
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
7
|
+
if (oldValue !== newValue) {
|
|
8
|
+
this.render();
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
static get observedAttributes() {
|
|
13
|
+
return ['name', 'size', 'title'];
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
async render() {
|
|
17
|
+
const name = this.getAttribute('name');
|
|
18
|
+
const size = this.getAttribute('size') || 'medium';
|
|
19
|
+
const title = this.getAttribute('title');
|
|
20
|
+
|
|
21
|
+
if (!name) {
|
|
22
|
+
console.warn('velcro-icon: missing required "name" attribute');
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const sizeMap = {
|
|
27
|
+
small: '12',
|
|
28
|
+
medium: '16',
|
|
29
|
+
large: '24',
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const pixelSize = sizeMap[size] || sizeMap.medium;
|
|
33
|
+
|
|
34
|
+
try {
|
|
35
|
+
const svg = await this.fetchIcon(name, pixelSize);
|
|
36
|
+
this.innerHTML = '';
|
|
37
|
+
this.appendChild(svg);
|
|
38
|
+
|
|
39
|
+
if (title) {
|
|
40
|
+
svg.setAttribute('title', title);
|
|
41
|
+
}
|
|
42
|
+
} catch (error) {
|
|
43
|
+
console.warn(`velcro-icon: Failed to load icon "${name}"`, error);
|
|
44
|
+
try {
|
|
45
|
+
const fallbackSvg = await this.fetchIcon('question-circle', pixelSize);
|
|
46
|
+
this.innerHTML = '';
|
|
47
|
+
this.appendChild(fallbackSvg);
|
|
48
|
+
|
|
49
|
+
if (title) {
|
|
50
|
+
fallbackSvg.setAttribute('title', title);
|
|
51
|
+
}
|
|
52
|
+
} catch (fallbackError) {
|
|
53
|
+
console.warn('velcro-icon: Failed to load fallback icon', fallbackError);
|
|
54
|
+
this.innerHTML = '';
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
async fetchIcon(iconName, pixelSize) {
|
|
60
|
+
const iconPath = this.resolveIconPath(iconName);
|
|
61
|
+
|
|
62
|
+
const response = await fetch(iconPath);
|
|
63
|
+
if (!response.ok) {
|
|
64
|
+
throw new Error(`Failed to fetch icon: ${iconName}`);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
const svgText = await response.text();
|
|
68
|
+
const parser = new DOMParser();
|
|
69
|
+
const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
|
|
70
|
+
|
|
71
|
+
if (svgDoc.documentElement.tagName === 'parsererror') {
|
|
72
|
+
throw new Error(`Invalid SVG for icon: ${iconName}`);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
const svg = svgDoc.documentElement;
|
|
76
|
+
svg.setAttribute('width', pixelSize);
|
|
77
|
+
svg.setAttribute('height', pixelSize);
|
|
78
|
+
|
|
79
|
+
return svg;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
resolveIconPath(iconName) {
|
|
83
|
+
const baseUrl = import.meta.url ? new URL('.', import.meta.url).href : '';
|
|
84
|
+
const iconFileName = iconName.endsWith('.svg') ? iconName : `${iconName}.svg`;
|
|
85
|
+
|
|
86
|
+
if (baseUrl.includes('/node_modules/@arup-ri/velcro/')) {
|
|
87
|
+
return `${baseUrl}../dist/icons/${iconFileName}`;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
if (baseUrl.includes('/velcro/js/')) {
|
|
91
|
+
return `${baseUrl}../dist/icons/${iconFileName}`;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return `/dist/icons/${iconFileName}`;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
customElements.define('velcro-icon', VelcroIcon);
|
package/js/tooltip.js
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Velcro Tooltip Manager
|
|
3
|
+
*
|
|
4
|
+
* Handles positioning of tooltips above or below target elements.
|
|
5
|
+
* Automatically hoists tooltips to body to escape stacking contexts.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* const tooltip = VelcroTooltip.create('Tooltip text');
|
|
9
|
+
* element.addEventListener('mouseenter', () => {
|
|
10
|
+
* VelcroTooltip.show(tooltip, element, 'top');
|
|
11
|
+
* });
|
|
12
|
+
* element.addEventListener('mouseleave', () => {
|
|
13
|
+
* VelcroTooltip.hide(tooltip);
|
|
14
|
+
* });
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
const VelcroTooltip = {
|
|
18
|
+
/**
|
|
19
|
+
* Create a new tooltip element
|
|
20
|
+
* @param {string} text - Tooltip text content
|
|
21
|
+
* @returns {HTMLElement} - Tooltip DOM element
|
|
22
|
+
*/
|
|
23
|
+
create(text) {
|
|
24
|
+
const tooltip = document.createElement('div');
|
|
25
|
+
tooltip.className = 'velcro-tooltip';
|
|
26
|
+
tooltip.textContent = text;
|
|
27
|
+
document.body.appendChild(tooltip);
|
|
28
|
+
return tooltip;
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Show tooltip positioned relative to target element
|
|
33
|
+
* @param {HTMLElement} tooltip - Tooltip element
|
|
34
|
+
* @param {HTMLElement} target - Target element to position relative to
|
|
35
|
+
* @param {string} position - 'top' or 'bottom' (default: 'top')
|
|
36
|
+
*/
|
|
37
|
+
show(tooltip, target, position = 'top') {
|
|
38
|
+
const rect = target.getBoundingClientRect();
|
|
39
|
+
const tooltipRect = tooltip.getBoundingClientRect();
|
|
40
|
+
|
|
41
|
+
let top, left;
|
|
42
|
+
|
|
43
|
+
if (position === 'top') {
|
|
44
|
+
top = rect.top + window.scrollY - tooltipRect.height - 8;
|
|
45
|
+
tooltip.classList.add('velcro-tooltip--top');
|
|
46
|
+
tooltip.classList.remove('velcro-tooltip--bottom');
|
|
47
|
+
} else {
|
|
48
|
+
top = rect.bottom + window.scrollY + 8;
|
|
49
|
+
tooltip.classList.add('velcro-tooltip--bottom');
|
|
50
|
+
tooltip.classList.remove('velcro-tooltip--top');
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
left = rect.left + window.scrollX + rect.width / 2;
|
|
54
|
+
|
|
55
|
+
tooltip.style.top = `${top}px`;
|
|
56
|
+
tooltip.style.left = `${left}px`;
|
|
57
|
+
|
|
58
|
+
tooltip.classList.add('velcro-tooltip--visible');
|
|
59
|
+
},
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Hide tooltip
|
|
63
|
+
* @param {HTMLElement} tooltip - Tooltip element
|
|
64
|
+
*/
|
|
65
|
+
hide(tooltip) {
|
|
66
|
+
tooltip.classList.remove('velcro-tooltip--visible');
|
|
67
|
+
},
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Destroy tooltip (remove from DOM)
|
|
71
|
+
* @param {HTMLElement} tooltip - Tooltip element
|
|
72
|
+
*/
|
|
73
|
+
destroy(tooltip) {
|
|
74
|
+
tooltip.remove();
|
|
75
|
+
},
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Attach tooltip to an element with auto show/hide
|
|
79
|
+
* @param {HTMLElement} element - Target element
|
|
80
|
+
* @param {string} text - Tooltip text
|
|
81
|
+
* @param {string} position - 'top' or 'bottom' (default: 'top')
|
|
82
|
+
* @returns {HTMLElement} - Tooltip element
|
|
83
|
+
*/
|
|
84
|
+
attach(element, text, position = 'top') {
|
|
85
|
+
const tooltip = this.create(text);
|
|
86
|
+
|
|
87
|
+
element.addEventListener('mouseenter', () => {
|
|
88
|
+
this.show(tooltip, element, position);
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
element.addEventListener('mouseleave', () => {
|
|
92
|
+
this.hide(tooltip);
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
element.addEventListener('focus', () => {
|
|
96
|
+
this.show(tooltip, element, position);
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
element.addEventListener('blur', () => {
|
|
100
|
+
this.hide(tooltip);
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
return tooltip;
|
|
104
|
+
},
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
// Export for use in modules
|
|
108
|
+
if (typeof module !== 'undefined' && module.exports) {
|
|
109
|
+
module.exports = VelcroTooltip;
|
|
110
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arup-ri/velcro",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -9,10 +9,12 @@
|
|
|
9
9
|
"style": "dist/velcro.css",
|
|
10
10
|
"unpkg": "dist/velcro.css",
|
|
11
11
|
"files": [
|
|
12
|
-
"dist"
|
|
12
|
+
"dist",
|
|
13
|
+
"js"
|
|
13
14
|
],
|
|
14
15
|
"scripts": {
|
|
15
|
-
"build": "npx mkdirp dist && postcss css/index.css -o dist/velcro.css",
|
|
16
|
+
"build": "npm run build:icons && npx mkdirp dist && postcss css/index.css -o dist/velcro.css",
|
|
17
|
+
"build:icons": "node build/copy-icons.js",
|
|
16
18
|
"storybook": "npm run build && storybook dev -p 6006",
|
|
17
19
|
"build-storybook": "npm run build && storybook build"
|
|
18
20
|
},
|
|
@@ -20,14 +22,17 @@
|
|
|
20
22
|
"@storybook/addon-docs": "^9.1.13",
|
|
21
23
|
"@storybook/html-vite": "^9.1.13",
|
|
22
24
|
"autoprefixer": "^10.4.21",
|
|
25
|
+
"bootstrap-icons": "^1.13.1",
|
|
23
26
|
"cssnano": "^7.1.1",
|
|
24
27
|
"postcss": "^8.5.8",
|
|
25
28
|
"postcss-cli": "^11.0.1",
|
|
26
29
|
"postcss-import": "^16.1.1",
|
|
27
30
|
"storybook": "^9.1.13"
|
|
28
31
|
},
|
|
29
|
-
"dependencies": {
|
|
30
|
-
|
|
32
|
+
"dependencies": {},
|
|
33
|
+
"exports": {
|
|
34
|
+
".": "./dist/velcro.css",
|
|
35
|
+
"./icons": "./js/icon.js"
|
|
31
36
|
},
|
|
32
37
|
"overrides": {
|
|
33
38
|
"vite": "^7.3.2"
|