voyage-lib 0.0.1 → 0.0.3

package/fesm2022/voyage-lib.mjs

@@ -57,11 +57,11 @@ class SnackbarComponent {
         this.svc.dismiss(item.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnackbarComponent, isStandalone: true, selector: "vl-snackbar", ngImport: i0, template: "<div class=\"vl-snackbar-host\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (item of svc.items(); track item.id) {\n    <div\n      class=\"vl-snackbar-item\"\n      [class]=\"'vl-snackbar-item vl-snackbar-' + item.type\"\n      [class.vl-snackbar-exiting]=\"item.exiting\"\n      role=\"alert\">\n\n      <span class=\"vl-snackbar-accent\" aria-hidden=\"true\"></span>\n\n      <span class=\"vl-snackbar-icon\" aria-hidden=\"true\">\n        @switch (item.type) {\n          @case ('success') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @case ('error') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @case ('warning') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @default {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n        }\n      </span>\n\n      <div class=\"vl-snackbar-body\">\n        @if (item.title) {\n          <p class=\"vl-snackbar-title\">{{ item.title }}</p>\n        }\n        <p class=\"vl-snackbar-message\">{{ item.message }}</p>\n        @if (item.action) {\n          <button class=\"vl-snackbar-action-btn\" (click)=\"handleAction(item)\">\n            {{ item.action.label }}\n          </button>\n        }\n      </div>\n\n      @if (item.dismissible) {\n        <button class=\"vl-snackbar-close\" aria-label=\"Dismiss\" (click)=\"svc.dismiss(item.id)\">\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n            <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z\"/>\n          </svg>\n        </button>\n      }\n\n      @if (item.duration > 0) {\n        <span\n          class=\"vl-snackbar-progress\"\n          [style.animation-duration.ms]=\"item.duration\"\n          aria-hidden=\"true\">\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [".vl-snackbar-host{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:21rem;max-width:calc(100vw - 2rem);pointer-events:none}.vl-snackbar-item{position:relative;display:flex;align-items:flex-start;gap:.625rem;padding:.875rem .875rem 1.125rem 1rem;border-radius:.75rem;overflow:hidden;pointer-events:all;background-color:var(--color-card, #ffffff);border:1px solid var(--color-border, hsl(210 15% 85%));box-shadow:0 1px 3px #0000000f,0 6px 20px #00000017;font-family:var(--font-family-sans, \"Inter\", sans-serif);animation:vl-snackbar-enter .34s cubic-bezier(.34,1.3,.64,1) forwards}.vl-snackbar-success{--vl-sb-color: var(--color-accent, hsl(150 60% 35%));--vl-sb-color-bg: color-mix(in srgb, var(--color-accent, hsl(150 60% 35%)) 8%, transparent)}.vl-snackbar-error{--vl-sb-color: var(--color-destructive, hsl(0 70% 50%));--vl-sb-color-bg: color-mix(in srgb, var(--color-destructive, hsl(0 70% 50%)) 8%, transparent)}.vl-snackbar-warning{--vl-sb-color: var(--color-secondary, hsl(15 90% 55%));--vl-sb-color-bg: color-mix(in srgb, var(--color-secondary, hsl(15 90% 55%)) 8%, transparent)}.vl-snackbar-info{--vl-sb-color: var(--color-primary, hsl(215 80% 25%));--vl-sb-color-bg: color-mix(in srgb, var(--color-primary, hsl(215 80% 25%)) 8%, transparent)}.vl-snackbar-item:before{content:\"\";position:absolute;inset:0;background:var(--vl-sb-color-bg);pointer-events:none}.vl-snackbar-accent{position:absolute;left:0;top:.625rem;bottom:.625rem;width:3px;border-radius:0 2px 2px 0;background-color:var(--vl-sb-color)}.vl-snackbar-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem;color:var(--vl-sb-color);position:relative}.vl-snackbar-icon svg{width:100%;height:100%;display:block}.vl-snackbar-body{flex:1;min-width:0;position:relative}.vl-snackbar-title{margin:0 0 .1875rem;font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-message{margin:0;font-size:.8125rem;line-height:1.5;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-snackbar-action-btn{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--radius, .5rem));color:var(--vl-sb-color);background:color-mix(in srgb,var(--vl-sb-color) 10%,transparent);border:none;cursor:pointer;transition:background .15s ease}.vl-snackbar-action-btn:hover{background:color-mix(in srgb,var(--vl-sb-color) 18%,transparent)}.vl-snackbar-close{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius, .5rem));border:none;background:transparent;color:var(--color-muted-foreground, hsl(210 10% 50%));cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;margin-top:-.0625rem}.vl-snackbar-close svg{width:.8125rem;height:.8125rem;display:block}.vl-snackbar-close:hover{background:var(--color-muted, hsl(210 10% 95%));color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:color-mix(in srgb,var(--vl-sb-color) 45%,transparent);transform-origin:left center;animation:vl-snackbar-progress linear forwards}@keyframes vl-snackbar-enter{0%{opacity:0;transform:translate(calc(100% + 1.25rem))}to{opacity:1;transform:translate(0)}}@keyframes vl-snackbar-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.vl-snackbar-exiting{animation:vl-snackbar-exit .3s ease-in forwards!important}@keyframes vl-snackbar-exit{0%{opacity:1;transform:translate(0);max-height:10rem;margin-bottom:0}to{opacity:0;transform:translate(calc(100% + 1.25rem));max-height:0;margin-bottom:-.5rem}}@media(max-width:480px){.vl-snackbar-host{bottom:.75rem;right:.75rem;left:.75rem;width:auto}}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnackbarComponent, isStandalone: true, selector: "vl-snackbar", ngImport: i0, template: "<div class=\"vl-snackbar-host\" aria-live=\"polite\" aria-atomic=\"false\">\r\n  @for (item of svc.items(); track item.id) {\r\n    <div\r\n      class=\"vl-snackbar-item\"\r\n      [class]=\"'vl-snackbar-item vl-snackbar-' + item.type\"\r\n      [class.vl-snackbar-exiting]=\"item.exiting\"\r\n      role=\"alert\">\r\n\r\n      <span class=\"vl-snackbar-accent\" aria-hidden=\"true\"></span>\r\n\r\n      <span class=\"vl-snackbar-icon\" aria-hidden=\"true\">\r\n        @switch (item.type) {\r\n          @case ('success') {\r\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\r\n            </svg>\r\n          }\r\n          @case ('error') {\r\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\r\n            </svg>\r\n          }\r\n          @case ('warning') {\r\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n              <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\" clip-rule=\"evenodd\" />\r\n            </svg>\r\n          }\r\n          @default {\r\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n              <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9z\" clip-rule=\"evenodd\" />\r\n            </svg>\r\n          }\r\n        }\r\n      </span>\r\n\r\n      <div class=\"vl-snackbar-body\">\r\n        @if (item.title) {\r\n          <p class=\"vl-snackbar-title\">{{ item.title }}</p>\r\n        }\r\n        <p class=\"vl-snackbar-message\">{{ item.message }}</p>\r\n        @if (item.action) {\r\n          <button class=\"vl-snackbar-action-btn\" (click)=\"handleAction(item)\">\r\n            {{ item.action.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      @if (item.dismissible) {\r\n        <button class=\"vl-snackbar-close\" aria-label=\"Dismiss\" (click)=\"svc.dismiss(item.id)\">\r\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\r\n            <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z\"/>\r\n          </svg>\r\n        </button>\r\n      }\r\n\r\n      @if (item.duration > 0) {\r\n        <span\r\n          class=\"vl-snackbar-progress\"\r\n          [style.animation-duration.ms]=\"item.duration\"\r\n          aria-hidden=\"true\">\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".vl-snackbar-host{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:21rem;max-width:calc(100vw - 2rem);pointer-events:none}.vl-snackbar-item{position:relative;display:flex;align-items:flex-start;gap:.625rem;padding:.875rem .875rem 1.125rem 1rem;border-radius:.75rem;overflow:hidden;pointer-events:all;background-color:var(--color-card, #ffffff);border:1px solid var(--color-border, hsl(210 15% 85%));box-shadow:0 1px 3px #0000000f,0 6px 20px #00000017;font-family:var(--font-family-sans, \"Inter\", sans-serif);animation:vl-snackbar-enter .34s cubic-bezier(.34,1.3,.64,1) forwards}.vl-snackbar-success{--vl-sb-color: var(--color-accent, hsl(150 60% 35%));--vl-sb-color-bg: color-mix(in srgb, var(--color-accent, hsl(150 60% 35%)) 8%, transparent)}.vl-snackbar-error{--vl-sb-color: var(--color-destructive, hsl(0 70% 50%));--vl-sb-color-bg: color-mix(in srgb, var(--color-destructive, hsl(0 70% 50%)) 8%, transparent)}.vl-snackbar-warning{--vl-sb-color: var(--color-secondary, hsl(15 90% 55%));--vl-sb-color-bg: color-mix(in srgb, var(--color-secondary, hsl(15 90% 55%)) 8%, transparent)}.vl-snackbar-info{--vl-sb-color: var(--color-primary, hsl(215 80% 25%));--vl-sb-color-bg: color-mix(in srgb, var(--color-primary, hsl(215 80% 25%)) 8%, transparent)}.vl-snackbar-item:before{content:\"\";position:absolute;inset:0;background:var(--vl-sb-color-bg);pointer-events:none}.vl-snackbar-accent{position:absolute;left:0;top:.625rem;bottom:.625rem;width:3px;border-radius:0 2px 2px 0;background-color:var(--vl-sb-color)}.vl-snackbar-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem;color:var(--vl-sb-color);position:relative}.vl-snackbar-icon svg{width:100%;height:100%;display:block}.vl-snackbar-body{flex:1;min-width:0;position:relative}.vl-snackbar-title{margin:0 0 .1875rem;font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-message{margin:0;font-size:.8125rem;line-height:1.5;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-snackbar-action-btn{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--radius, .5rem));color:var(--vl-sb-color);background:color-mix(in srgb,var(--vl-sb-color) 10%,transparent);border:none;cursor:pointer;transition:background .15s ease}.vl-snackbar-action-btn:hover{background:color-mix(in srgb,var(--vl-sb-color) 18%,transparent)}.vl-snackbar-close{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius, .5rem));border:none;background:transparent;color:var(--color-muted-foreground, hsl(210 10% 50%));cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;margin-top:-.0625rem}.vl-snackbar-close svg{width:.8125rem;height:.8125rem;display:block}.vl-snackbar-close:hover{background:var(--color-muted, hsl(210 10% 95%));color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:color-mix(in srgb,var(--vl-sb-color) 45%,transparent);transform-origin:left center;animation:vl-snackbar-progress linear forwards}@keyframes vl-snackbar-enter{0%{opacity:0;transform:translate(calc(100% + 1.25rem))}to{opacity:1;transform:translate(0)}}@keyframes vl-snackbar-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.vl-snackbar-exiting{animation:vl-snackbar-exit .3s ease-in forwards!important}@keyframes vl-snackbar-exit{0%{opacity:1;transform:translate(0);max-height:10rem;margin-bottom:0}to{opacity:0;transform:translate(calc(100% + 1.25rem));max-height:0;margin-bottom:-.5rem}}@media(max-width:480px){.vl-snackbar-host{bottom:.75rem;right:.75rem;left:.75rem;width:auto}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-snackbar', standalone: true, encapsulation: ViewEncapsulation.None, template: "<div class=\"vl-snackbar-host\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (item of svc.items(); track item.id) {\n    <div\n      class=\"vl-snackbar-item\"\n      [class]=\"'vl-snackbar-item vl-snackbar-' + item.type\"\n      [class.vl-snackbar-exiting]=\"item.exiting\"\n      role=\"alert\">\n\n      <span class=\"vl-snackbar-accent\" aria-hidden=\"true\"></span>\n\n      <span class=\"vl-snackbar-icon\" aria-hidden=\"true\">\n        @switch (item.type) {\n          @case ('success') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @case ('error') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @case ('warning') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @default {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n        }\n      </span>\n\n      <div class=\"vl-snackbar-body\">\n        @if (item.title) {\n          <p class=\"vl-snackbar-title\">{{ item.title }}</p>\n        }\n        <p class=\"vl-snackbar-message\">{{ item.message }}</p>\n        @if (item.action) {\n          <button class=\"vl-snackbar-action-btn\" (click)=\"handleAction(item)\">\n            {{ item.action.label }}\n          </button>\n        }\n      </div>\n\n      @if (item.dismissible) {\n        <button class=\"vl-snackbar-close\" aria-label=\"Dismiss\" (click)=\"svc.dismiss(item.id)\">\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n            <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z\"/>\n          </svg>\n        </button>\n      }\n\n      @if (item.duration > 0) {\n        <span\n          class=\"vl-snackbar-progress\"\n          [style.animation-duration.ms]=\"item.duration\"\n          aria-hidden=\"true\">\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [".vl-snackbar-host{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:21rem;max-width:calc(100vw - 2rem);pointer-events:none}.vl-snackbar-item{position:relative;display:flex;align-items:flex-start;gap:.625rem;padding:.875rem .875rem 1.125rem 1rem;border-radius:.75rem;overflow:hidden;pointer-events:all;background-color:var(--color-card, #ffffff);border:1px solid var(--color-border, hsl(210 15% 85%));box-shadow:0 1px 3px #0000000f,0 6px 20px #00000017;font-family:var(--font-family-sans, \"Inter\", sans-serif);animation:vl-snackbar-enter .34s cubic-bezier(.34,1.3,.64,1) forwards}.vl-snackbar-success{--vl-sb-color: var(--color-accent, hsl(150 60% 35%));--vl-sb-color-bg: color-mix(in srgb, var(--color-accent, hsl(150 60% 35%)) 8%, transparent)}.vl-snackbar-error{--vl-sb-color: var(--color-destructive, hsl(0 70% 50%));--vl-sb-color-bg: color-mix(in srgb, var(--color-destructive, hsl(0 70% 50%)) 8%, transparent)}.vl-snackbar-warning{--vl-sb-color: var(--color-secondary, hsl(15 90% 55%));--vl-sb-color-bg: color-mix(in srgb, var(--color-secondary, hsl(15 90% 55%)) 8%, transparent)}.vl-snackbar-info{--vl-sb-color: var(--color-primary, hsl(215 80% 25%));--vl-sb-color-bg: color-mix(in srgb, var(--color-primary, hsl(215 80% 25%)) 8%, transparent)}.vl-snackbar-item:before{content:\"\";position:absolute;inset:0;background:var(--vl-sb-color-bg);pointer-events:none}.vl-snackbar-accent{position:absolute;left:0;top:.625rem;bottom:.625rem;width:3px;border-radius:0 2px 2px 0;background-color:var(--vl-sb-color)}.vl-snackbar-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem;color:var(--vl-sb-color);position:relative}.vl-snackbar-icon svg{width:100%;height:100%;display:block}.vl-snackbar-body{flex:1;min-width:0;position:relative}.vl-snackbar-title{margin:0 0 .1875rem;font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-message{margin:0;font-size:.8125rem;line-height:1.5;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-snackbar-action-btn{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--radius, .5rem));color:var(--vl-sb-color);background:color-mix(in srgb,var(--vl-sb-color) 10%,transparent);border:none;cursor:pointer;transition:background .15s ease}.vl-snackbar-action-btn:hover{background:color-mix(in srgb,var(--vl-sb-color) 18%,transparent)}.vl-snackbar-close{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius, .5rem));border:none;background:transparent;color:var(--color-muted-foreground, hsl(210 10% 50%));cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;margin-top:-.0625rem}.vl-snackbar-close svg{width:.8125rem;height:.8125rem;display:block}.vl-snackbar-close:hover{background:var(--color-muted, hsl(210 10% 95%));color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:color-mix(in srgb,var(--vl-sb-color) 45%,transparent);transform-origin:left center;animation:vl-snackbar-progress linear forwards}@keyframes vl-snackbar-enter{0%{opacity:0;transform:translate(calc(100% + 1.25rem))}to{opacity:1;transform:translate(0)}}@keyframes vl-snackbar-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.vl-snackbar-exiting{animation:vl-snackbar-exit .3s ease-in forwards!important}@keyframes vl-snackbar-exit{0%{opacity:1;transform:translate(0);max-height:10rem;margin-bottom:0}to{opacity:0;transform:translate(calc(100% + 1.25rem));max-height:0;margin-bottom:-.5rem}}@media(max-width:480px){.vl-snackbar-host{bottom:.75rem;right:.75rem;left:.75rem;width:auto}}\n"] }]
+            args: [{ selector: 'vl-snackbar', standalone: true, encapsulation: ViewEncapsulation.None, template: "<div class=\"vl-snackbar-host\" aria-live=\"polite\" aria-atomic=\"false\">\r\n  @for (item of svc.items(); track item.id) {\r\n    <div\r\n      class=\"vl-snackbar-item\"\r\n      [class]=\"'vl-snackbar-item vl-snackbar-' + item.type\"\r\n      [class.vl-snackbar-exiting]=\"item.exiting\"\r\n      role=\"alert\">\r\n\r\n      <span class=\"vl-snackbar-accent\" aria-hidden=\"true\"></span>\r\n\r\n      <span class=\"vl-snackbar-icon\" aria-hidden=\"true\">\r\n        @switch (item.type) {\r\n          @case ('success') {\r\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\r\n            </svg>\r\n          }\r\n          @case ('error') {\r\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\r\n            </svg>\r\n          }\r\n          @case ('warning') {\r\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n              <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\" clip-rule=\"evenodd\" />\r\n            </svg>\r\n          }\r\n          @default {\r\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n              <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9z\" clip-rule=\"evenodd\" />\r\n            </svg>\r\n          }\r\n        }\r\n      </span>\r\n\r\n      <div class=\"vl-snackbar-body\">\r\n        @if (item.title) {\r\n          <p class=\"vl-snackbar-title\">{{ item.title }}</p>\r\n        }\r\n        <p class=\"vl-snackbar-message\">{{ item.message }}</p>\r\n        @if (item.action) {\r\n          <button class=\"vl-snackbar-action-btn\" (click)=\"handleAction(item)\">\r\n            {{ item.action.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      @if (item.dismissible) {\r\n        <button class=\"vl-snackbar-close\" aria-label=\"Dismiss\" (click)=\"svc.dismiss(item.id)\">\r\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\r\n            <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z\"/>\r\n          </svg>\r\n        </button>\r\n      }\r\n\r\n      @if (item.duration > 0) {\r\n        <span\r\n          class=\"vl-snackbar-progress\"\r\n          [style.animation-duration.ms]=\"item.duration\"\r\n          aria-hidden=\"true\">\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".vl-snackbar-host{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:21rem;max-width:calc(100vw - 2rem);pointer-events:none}.vl-snackbar-item{position:relative;display:flex;align-items:flex-start;gap:.625rem;padding:.875rem .875rem 1.125rem 1rem;border-radius:.75rem;overflow:hidden;pointer-events:all;background-color:var(--color-card, #ffffff);border:1px solid var(--color-border, hsl(210 15% 85%));box-shadow:0 1px 3px #0000000f,0 6px 20px #00000017;font-family:var(--font-family-sans, \"Inter\", sans-serif);animation:vl-snackbar-enter .34s cubic-bezier(.34,1.3,.64,1) forwards}.vl-snackbar-success{--vl-sb-color: var(--color-accent, hsl(150 60% 35%));--vl-sb-color-bg: color-mix(in srgb, var(--color-accent, hsl(150 60% 35%)) 8%, transparent)}.vl-snackbar-error{--vl-sb-color: var(--color-destructive, hsl(0 70% 50%));--vl-sb-color-bg: color-mix(in srgb, var(--color-destructive, hsl(0 70% 50%)) 8%, transparent)}.vl-snackbar-warning{--vl-sb-color: var(--color-secondary, hsl(15 90% 55%));--vl-sb-color-bg: color-mix(in srgb, var(--color-secondary, hsl(15 90% 55%)) 8%, transparent)}.vl-snackbar-info{--vl-sb-color: var(--color-primary, hsl(215 80% 25%));--vl-sb-color-bg: color-mix(in srgb, var(--color-primary, hsl(215 80% 25%)) 8%, transparent)}.vl-snackbar-item:before{content:\"\";position:absolute;inset:0;background:var(--vl-sb-color-bg);pointer-events:none}.vl-snackbar-accent{position:absolute;left:0;top:.625rem;bottom:.625rem;width:3px;border-radius:0 2px 2px 0;background-color:var(--vl-sb-color)}.vl-snackbar-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem;color:var(--vl-sb-color);position:relative}.vl-snackbar-icon svg{width:100%;height:100%;display:block}.vl-snackbar-body{flex:1;min-width:0;position:relative}.vl-snackbar-title{margin:0 0 .1875rem;font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-message{margin:0;font-size:.8125rem;line-height:1.5;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-snackbar-action-btn{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--radius, .5rem));color:var(--vl-sb-color);background:color-mix(in srgb,var(--vl-sb-color) 10%,transparent);border:none;cursor:pointer;transition:background .15s ease}.vl-snackbar-action-btn:hover{background:color-mix(in srgb,var(--vl-sb-color) 18%,transparent)}.vl-snackbar-close{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius, .5rem));border:none;background:transparent;color:var(--color-muted-foreground, hsl(210 10% 50%));cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;margin-top:-.0625rem}.vl-snackbar-close svg{width:.8125rem;height:.8125rem;display:block}.vl-snackbar-close:hover{background:var(--color-muted, hsl(210 10% 95%));color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:color-mix(in srgb,var(--vl-sb-color) 45%,transparent);transform-origin:left center;animation:vl-snackbar-progress linear forwards}@keyframes vl-snackbar-enter{0%{opacity:0;transform:translate(calc(100% + 1.25rem))}to{opacity:1;transform:translate(0)}}@keyframes vl-snackbar-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.vl-snackbar-exiting{animation:vl-snackbar-exit .3s ease-in forwards!important}@keyframes vl-snackbar-exit{0%{opacity:1;transform:translate(0);max-height:10rem;margin-bottom:0}to{opacity:0;transform:translate(calc(100% + 1.25rem));max-height:0;margin-bottom:-.5rem}}@media(max-width:480px){.vl-snackbar-host{bottom:.75rem;right:.75rem;left:.75rem;width:auto}}\n"] }]
         }] });
 
 /**
@@ -85,26 +85,26 @@ class AvatarComponent {
         return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
     }, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AvatarComponent, isStandalone: true, selector: "vl-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="vl-avatar" [class]="'vl-avatar-' + size()">
-      @if (src() && !imgError) {
-        <img [src]="src()" [alt]="name()" (error)="imgError = true" />
-      } @else {
-        <span class="vl-avatar-initials">{{ initials() }}</span>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AvatarComponent, isStandalone: true, selector: "vl-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-avatar" [class]="'vl-avatar-' + size()">
+      @if (src() && !imgError) {
+        <img [src]="src()" [alt]="name()" (error)="imgError = true" />
+      } @else {
+        <span class="vl-avatar-initials">{{ initials() }}</span>
+      }
+    </div>
   `, isInline: true, styles: [".vl-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden;background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,var(--color-muted, hsl(210 10% 95%)));border:1px solid color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 20%,transparent);flex-shrink:0}.vl-avatar img{width:100%;height:100%;object-fit:cover}.vl-avatar-initials{font-weight:600;color:var(--color-primary, hsl(215 80% 25%));font-family:var(--font-family-sans, inherit);line-height:1;-webkit-user-select:none;user-select:none}.vl-avatar-xs{width:1.5rem;height:1.5rem}.vl-avatar-xs .vl-avatar-initials{font-size:.5625rem}.vl-avatar-sm{width:2rem;height:2rem}.vl-avatar-sm .vl-avatar-initials{font-size:.6875rem}.vl-avatar-md{width:2.5rem;height:2.5rem}.vl-avatar-md .vl-avatar-initials{font-size:.875rem}.vl-avatar-lg{width:3rem;height:3rem}.vl-avatar-lg .vl-avatar-initials{font-size:1rem}.vl-avatar-xl{width:4rem;height:4rem}.vl-avatar-xl .vl-avatar-initials{font-size:1.25rem}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-avatar', standalone: true, template: `
-    <div class="vl-avatar" [class]="'vl-avatar-' + size()">
-      @if (src() && !imgError) {
-        <img [src]="src()" [alt]="name()" (error)="imgError = true" />
-      } @else {
-        <span class="vl-avatar-initials">{{ initials() }}</span>
-      }
-    </div>
+            args: [{ selector: 'vl-avatar', standalone: true, template: `
+    <div class="vl-avatar" [class]="'vl-avatar-' + size()">
+      @if (src() && !imgError) {
+        <img [src]="src()" [alt]="name()" (error)="imgError = true" />
+      } @else {
+        <span class="vl-avatar-initials">{{ initials() }}</span>
+      }
+    </div>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden;background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,var(--color-muted, hsl(210 10% 95%)));border:1px solid color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 20%,transparent);flex-shrink:0}.vl-avatar img{width:100%;height:100%;object-fit:cover}.vl-avatar-initials{font-weight:600;color:var(--color-primary, hsl(215 80% 25%));font-family:var(--font-family-sans, inherit);line-height:1;-webkit-user-select:none;user-select:none}.vl-avatar-xs{width:1.5rem;height:1.5rem}.vl-avatar-xs .vl-avatar-initials{font-size:.5625rem}.vl-avatar-sm{width:2rem;height:2rem}.vl-avatar-sm .vl-avatar-initials{font-size:.6875rem}.vl-avatar-md{width:2.5rem;height:2.5rem}.vl-avatar-md .vl-avatar-initials{font-size:.875rem}.vl-avatar-lg{width:3rem;height:3rem}.vl-avatar-lg .vl-avatar-initials{font-size:1rem}.vl-avatar-xl{width:4rem;height:4rem}.vl-avatar-xl .vl-avatar-initials{font-size:1.25rem}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
@@ -124,32 +124,32 @@ class BadgeComponent {
     /** Override background color. Takes precedence over variant. */
     bgColor = input('', ...(ngDevMode ? [{ debugName: "bgColor" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BadgeComponent, isStandalone: true, selector: "vl-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <span class="vl-badge" [class]="'vl-badge-' + variant()"
-      [style.color]="color() || null"
-      [style.background-color]="bgColor() || null"
-      [style.border-color]="color() ? color() + '33' : null">
-      @if (dot()) {
-        <span class="vl-badge-dot"
-          [style.background-color]="color() || null"></span>
-      }
-      <ng-content />
-    </span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BadgeComponent, isStandalone: true, selector: "vl-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="vl-badge" [class]="'vl-badge-' + variant()"
+      [style.color]="color() || null"
+      [style.background-color]="bgColor() || null"
+      [style.border-color]="color() ? color() + '33' : null">
+      @if (dot()) {
+        <span class="vl-badge-dot"
+          [style.background-color]="color() || null"></span>
+      }
+      <ng-content />
+    </span>
   `, isInline: true, styles: [".vl-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent;font-family:var(--font-family-sans, inherit)}.vl-badge-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.vl-badge-planning{color:#1458b8;background-color:#1458b81a;border-color:#1458b833}.vl-badge-ongoing{color:#22774d;background-color:#22774d1a;border-color:#22774d33}.vl-badge-completed{color:#5c6670;background-color:#5c66701a;border-color:#5c667033}.vl-badge-success{color:var(--color-accent, hsl(150 60% 35%));background-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 20%,transparent)}.vl-badge-warning{color:var(--color-secondary, hsl(15 90% 50%));background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 20%,transparent)}.vl-badge-danger{color:var(--color-destructive, hsl(0 70% 50%));background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 20%,transparent)}.vl-badge-info{color:var(--color-primary, hsl(215 80% 35%));background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 20%,transparent)}.vl-badge-neutral{color:var(--color-muted-foreground, hsl(210 10% 50%));background-color:var(--color-muted, hsl(210 10% 95%));border-color:var(--color-border, hsl(210 15% 85%))}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-badge', standalone: true, template: `
-    <span class="vl-badge" [class]="'vl-badge-' + variant()"
-      [style.color]="color() || null"
-      [style.background-color]="bgColor() || null"
-      [style.border-color]="color() ? color() + '33' : null">
-      @if (dot()) {
-        <span class="vl-badge-dot"
-          [style.background-color]="color() || null"></span>
-      }
-      <ng-content />
-    </span>
+            args: [{ selector: 'vl-badge', standalone: true, template: `
+    <span class="vl-badge" [class]="'vl-badge-' + variant()"
+      [style.color]="color() || null"
+      [style.background-color]="bgColor() || null"
+      [style.border-color]="color() ? color() + '33' : null">
+      @if (dot()) {
+        <span class="vl-badge-dot"
+          [style.background-color]="color() || null"></span>
+      }
+      <ng-content />
+    </span>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent;font-family:var(--font-family-sans, inherit)}.vl-badge-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.vl-badge-planning{color:#1458b8;background-color:#1458b81a;border-color:#1458b833}.vl-badge-ongoing{color:#22774d;background-color:#22774d1a;border-color:#22774d33}.vl-badge-completed{color:#5c6670;background-color:#5c66701a;border-color:#5c667033}.vl-badge-success{color:var(--color-accent, hsl(150 60% 35%));background-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 20%,transparent)}.vl-badge-warning{color:var(--color-secondary, hsl(15 90% 50%));background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 20%,transparent)}.vl-badge-danger{color:var(--color-destructive, hsl(0 70% 50%));background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 20%,transparent)}.vl-badge-info{color:var(--color-primary, hsl(215 80% 35%));background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 20%,transparent)}.vl-badge-neutral{color:var(--color-muted-foreground, hsl(210 10% 50%));background-color:var(--color-muted, hsl(210 10% 95%));border-color:var(--color-border, hsl(210 15% 85%))}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }] } });
 
@@ -162,52 +162,52 @@ class ButtonComponent {
         return `vl-btn-${this.variant()}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "vl-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <button
-      class="vl-btn"
-      [class]="variantClass()"
-      [class.vl-btn-sm]="size() === 'sm'"
-      [class.vl-btn-md]="size() === 'md'"
-      [class.vl-btn-lg]="size() === 'lg'"
-      [class.vl-btn-loading]="loading()"
-      [disabled]="disabled() || loading()">
-
-      @if (loading()) {
-        <span class="vl-btn-spinner" aria-hidden="true">
-          <svg viewBox="0 0 24 24" fill="none">
-            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.25"/>
-            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
-          </svg>
-        </span>
-      }
-
-      <ng-content />
-    </button>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "vl-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      class="vl-btn"
+      [class]="variantClass()"
+      [class.vl-btn-sm]="size() === 'sm'"
+      [class.vl-btn-md]="size() === 'md'"
+      [class.vl-btn-lg]="size() === 'lg'"
+      [class.vl-btn-loading]="loading()"
+      [disabled]="disabled() || loading()">
+
+      @if (loading()) {
+        <span class="vl-btn-spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+          </svg>
+        </span>
+      }
+
+      <ng-content />
+    </button>
   `, isInline: true, styles: [".vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500;border-radius:var(--radius, .5rem);border:1px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,opacity .15s,box-shadow .15s;white-space:nowrap;font-family:var(--font-family-sans, inherit);line-height:1}.vl-btn-sm{padding:.375rem .75rem;font-size:.8125rem}.vl-btn-md{padding:.5rem 1rem;font-size:.875rem}.vl-btn-lg{padding:.625rem 1.25rem;font-size:1rem}.vl-btn-primary{background-color:var(--color-primary, hsl(215 80% 25%));color:#fff}.vl-btn-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 85%,#000)}.vl-btn-secondary{background-color:var(--color-secondary, hsl(15 90% 55%));color:#fff}.vl-btn-secondary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 55%)) 85%,#000)}.vl-btn-danger{background-color:var(--color-destructive, hsl(0 70% 50%));color:#fff}.vl-btn-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 85%,#000)}.vl-btn-ghost{background-color:transparent;color:var(--color-foreground, #1f2937)}.vl-btn-ghost:hover:not(:disabled){background-color:var(--color-muted, hsl(210 10% 95%))}.vl-btn-outline{background-color:transparent;color:var(--color-primary, hsl(215 80% 25%));border-color:var(--color-primary, hsl(215 80% 25%))}.vl-btn-outline:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 8%,transparent)}.vl-btn:disabled{opacity:.5;cursor:not-allowed}.vl-btn-loading{cursor:wait}.vl-btn-spinner{display:inline-flex;width:1em;height:1em;animation:vl-btn-spin .8s linear infinite}.vl-btn-spinner svg{width:100%;height:100%}@keyframes vl-btn-spin{to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-button', standalone: true, template: `
-    <button
-      class="vl-btn"
-      [class]="variantClass()"
-      [class.vl-btn-sm]="size() === 'sm'"
-      [class.vl-btn-md]="size() === 'md'"
-      [class.vl-btn-lg]="size() === 'lg'"
-      [class.vl-btn-loading]="loading()"
-      [disabled]="disabled() || loading()">
-
-      @if (loading()) {
-        <span class="vl-btn-spinner" aria-hidden="true">
-          <svg viewBox="0 0 24 24" fill="none">
-            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.25"/>
-            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
-          </svg>
-        </span>
-      }
-
-      <ng-content />
-    </button>
+            args: [{ selector: 'vl-button', standalone: true, template: `
+    <button
+      class="vl-btn"
+      [class]="variantClass()"
+      [class.vl-btn-sm]="size() === 'sm'"
+      [class.vl-btn-md]="size() === 'md'"
+      [class.vl-btn-lg]="size() === 'lg'"
+      [class.vl-btn-loading]="loading()"
+      [disabled]="disabled() || loading()">
+
+      @if (loading()) {
+        <span class="vl-btn-spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+          </svg>
+        </span>
+      }
+
+      <ng-content />
+    </button>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500;border-radius:var(--radius, .5rem);border:1px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,opacity .15s,box-shadow .15s;white-space:nowrap;font-family:var(--font-family-sans, inherit);line-height:1}.vl-btn-sm{padding:.375rem .75rem;font-size:.8125rem}.vl-btn-md{padding:.5rem 1rem;font-size:.875rem}.vl-btn-lg{padding:.625rem 1.25rem;font-size:1rem}.vl-btn-primary{background-color:var(--color-primary, hsl(215 80% 25%));color:#fff}.vl-btn-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 85%,#000)}.vl-btn-secondary{background-color:var(--color-secondary, hsl(15 90% 55%));color:#fff}.vl-btn-secondary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 55%)) 85%,#000)}.vl-btn-danger{background-color:var(--color-destructive, hsl(0 70% 50%));color:#fff}.vl-btn-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 85%,#000)}.vl-btn-ghost{background-color:transparent;color:var(--color-foreground, #1f2937)}.vl-btn-ghost:hover:not(:disabled){background-color:var(--color-muted, hsl(210 10% 95%))}.vl-btn-outline{background-color:transparent;color:var(--color-primary, hsl(215 80% 25%));border-color:var(--color-primary, hsl(215 80% 25%))}.vl-btn-outline:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 8%,transparent)}.vl-btn:disabled{opacity:.5;cursor:not-allowed}.vl-btn-loading{cursor:wait}.vl-btn-spinner{display:inline-flex;width:1em;height:1em;animation:vl-btn-spin .8s linear infinite}.vl-btn-spinner svg{width:100%;height:100%}@keyframes vl-btn-spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
@@ -224,42 +224,42 @@ class CardComponent {
     hover = input(false, ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
     sectionTitle = input('', ...(ngDevMode ? [{ debugName: "sectionTitle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CardComponent, isStandalone: true, selector: "vl-card", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, sectionTitle: { classPropertyName: "sectionTitle", publicName: "sectionTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="vl-card"
-      [class.vl-card-hover]="hover()"
-      [class.vl-card-p-none]="padding() === 'none'"
-      [class.vl-card-p-sm]="padding() === 'sm'"
-      [class.vl-card-p-md]="padding() === 'md'"
-      [class.vl-card-p-lg]="padding() === 'lg'">
-
-      @if (sectionTitle()) {
-        <div class="vl-card-section-header">
-          <span>{{ sectionTitle() }}</span>
-        </div>
-      }
-
-      <ng-content />
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CardComponent, isStandalone: true, selector: "vl-card", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, sectionTitle: { classPropertyName: "sectionTitle", publicName: "sectionTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-card"
+      [class.vl-card-hover]="hover()"
+      [class.vl-card-p-none]="padding() === 'none'"
+      [class.vl-card-p-sm]="padding() === 'sm'"
+      [class.vl-card-p-md]="padding() === 'md'"
+      [class.vl-card-p-lg]="padding() === 'lg'">
+
+      @if (sectionTitle()) {
+        <div class="vl-card-section-header">
+          <span>{{ sectionTitle() }}</span>
+        </div>
+      }
+
+      <ng-content />
+    </div>
   `, isInline: true, styles: [".vl-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);overflow:hidden;font-family:var(--font-family-sans, inherit)}.vl-card-hover{transition:box-shadow .2s,border-color .2s}.vl-card-hover:hover{box-shadow:0 1px 4px #0000000f,0 4px 16px #00000012;border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 30%,var(--color-border, hsl(210 15% 85%)))}.vl-card-p-none{padding:0}.vl-card-p-sm{padding:.75rem}.vl-card-p-md{padding:1.25rem}.vl-card-p-lg{padding:1.5rem}.vl-card-section-header{padding:.75rem 1.5rem;border-bottom:1px solid var(--color-border, hsl(210 15% 85%));background-color:color-mix(in srgb,var(--color-muted, hsl(210 10% 95%)) 30%,transparent)}.vl-card-section-header span{font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%))}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-card', standalone: true, template: `
-    <div class="vl-card"
-      [class.vl-card-hover]="hover()"
-      [class.vl-card-p-none]="padding() === 'none'"
-      [class.vl-card-p-sm]="padding() === 'sm'"
-      [class.vl-card-p-md]="padding() === 'md'"
-      [class.vl-card-p-lg]="padding() === 'lg'">
-
-      @if (sectionTitle()) {
-        <div class="vl-card-section-header">
-          <span>{{ sectionTitle() }}</span>
-        </div>
-      }
-
-      <ng-content />
-    </div>
+            args: [{ selector: 'vl-card', standalone: true, template: `
+    <div class="vl-card"
+      [class.vl-card-hover]="hover()"
+      [class.vl-card-p-none]="padding() === 'none'"
+      [class.vl-card-p-sm]="padding() === 'sm'"
+      [class.vl-card-p-md]="padding() === 'md'"
+      [class.vl-card-p-lg]="padding() === 'lg'">
+
+      @if (sectionTitle()) {
+        <div class="vl-card-section-header">
+          <span>{{ sectionTitle() }}</span>
+        </div>
+      }
+
+      <ng-content />
+    </div>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);overflow:hidden;font-family:var(--font-family-sans, inherit)}.vl-card-hover{transition:box-shadow .2s,border-color .2s}.vl-card-hover:hover{box-shadow:0 1px 4px #0000000f,0 4px 16px #00000012;border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 30%,var(--color-border, hsl(210 15% 85%)))}.vl-card-p-none{padding:0}.vl-card-p-sm{padding:.75rem}.vl-card-p-md{padding:1.25rem}.vl-card-p-lg{padding:1.5rem}.vl-card-section-header{padding:.75rem 1.5rem;border-bottom:1px solid var(--color-border, hsl(210 15% 85%));background-color:color-mix(in srgb,var(--color-muted, hsl(210 10% 95%)) 30%,transparent)}.vl-card-section-header span{font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%))}\n"] }]
         }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], sectionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTitle", required: false }] }] } });
 
@@ -269,7 +269,11 @@ class DialogComponent {
     subtitle = input(null, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     hasFooter = input(false, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+    /** When provided, the footer renders these buttons instead of the projected [dialog-footer] content. */
+    footerButtons = input([], ...(ngDevMode ? [{ debugName: "footerButtons" }] : /* istanbul ignore next */ []));
     closed = output();
+    /** Emits the `key` of whichever footerButtons entry was clicked. */
+    footerAction = output();
     renderer = inject(Renderer2);
     constructor() {
         effect(() => {
@@ -286,12 +290,12 @@ class DialogComponent {
             this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DialogComponent, isStandalone: true, selector: "vl-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"vl-dialog-overlay\" role=\"dialog\" aria-modal=\"true\">\n\n    <div class=\"vl-dialog-backdrop\" (click)=\"closed.emit()\"></div>\n\n    <div class=\"vl-dialog-panel\"\n      [class.vl-dialog-panel-sm]=\"size() === 'sm'\"\n      [class.vl-dialog-panel-md]=\"size() === 'md'\"\n      [class.vl-dialog-panel-lg]=\"size() === 'lg'\">\n\n      <div class=\"vl-dialog-header\">\n        <div>\n          <h2>{{ title() }}</h2>\n          @if (subtitle()) {\n            <p>{{ subtitle() }}</p>\n          }\n        </div>\n        <button (click)=\"closed.emit()\" class=\"vl-dialog-close\" aria-label=\"Close\">\n          <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 6L6 18M6 6l12 12\"/>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"vl-dialog-body\">\n        <ng-content />\n      </div>\n\n      @if (hasFooter()) {\n        <div class=\"vl-dialog-footer\">\n          <ng-content select=\"[dialog-footer]\" />\n        </div>\n      }\n\n    </div>\n  </div>\n}\n", styles: [".vl-dialog-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}.vl-dialog-backdrop{position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.vl-dialog-panel{position:relative;z-index:10;width:100%;max-height:92dvh;display:flex;flex-direction:column;background-color:var(--color-background, #fff);border-radius:1rem 1rem 0 0;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--color-border, #d1d5db);overflow:hidden}.vl-dialog-panel-sm{max-width:32rem}.vl-dialog-panel-md{max-width:42rem}.vl-dialog-panel-lg{max-width:48rem}.vl-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border, #d1d5db);flex-shrink:0}.vl-dialog-header h2{font-size:1rem;font-weight:600;color:var(--color-foreground, #1f2937)}.vl-dialog-header p{font-size:.75rem;color:var(--color-muted-foreground, #6b7280);margin-top:.125rem}.vl-dialog-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--color-muted-foreground, #6b7280);background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s}.vl-dialog-close:hover{background-color:var(--color-muted, #f3f4f6);color:var(--color-foreground, #1f2937)}.vl-dialog-body{flex:1;overflow-y:auto}.vl-dialog-footer{flex-shrink:0;border-top:1px solid var(--color-border, #d1d5db);background-color:color-mix(in srgb,var(--color-muted, #f3f4f6) 20%,transparent)}@media(min-width:640px){.vl-dialog-overlay{align-items:center;padding:1rem}.vl-dialog-panel{border-radius:1rem;max-height:88vh}}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DialogComponent, isStandalone: true, selector: "vl-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", footerAction: "footerAction" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (isOpen()) {\r\n  <div class=\"vl-dialog-overlay\" role=\"dialog\" aria-modal=\"true\">\r\n\r\n    <div class=\"vl-dialog-backdrop\" (click)=\"closed.emit()\"></div>\r\n\r\n    <div class=\"vl-dialog-panel\"\r\n      [class.vl-dialog-panel-sm]=\"size() === 'sm'\"\r\n      [class.vl-dialog-panel-md]=\"size() === 'md'\"\r\n      [class.vl-dialog-panel-lg]=\"size() === 'lg'\">\r\n\r\n      <div class=\"vl-dialog-header\">\r\n        <div>\r\n          <h2>{{ title() }}</h2>\r\n          @if (subtitle()) {\r\n            <p>{{ subtitle() }}</p>\r\n          }\r\n        </div>\r\n        <button (click)=\"closed.emit()\" class=\"vl-dialog-close\" aria-label=\"Close\">\r\n          <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"vl-dialog-body\">\r\n        <ng-content />\r\n      </div>\r\n\r\n      @if (hasFooter()) {\r\n        <div class=\"vl-dialog-footer\">\r\n          @if (footerButtons().length) {\r\n            @for (btn of footerButtons(); track btn.key) {\r\n              <vl-button [variant]=\"btn.variant ?? 'primary'\" [disabled]=\"btn.disabled ?? false\"\r\n                [loading]=\"btn.loading ?? false\" (click)=\"footerAction.emit(btn.key)\">\r\n                {{ btn.label }}\r\n              </vl-button>\r\n            }\r\n          } @else {\r\n            <ng-content select=\"[dialog-footer]\" />\r\n          }\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".vl-dialog-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}.vl-dialog-backdrop{position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.vl-dialog-panel{position:relative;z-index:10;width:100%;max-height:92dvh;display:flex;flex-direction:column;background-color:var(--color-background, #fff);border-radius:1rem 1rem 0 0;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--color-border, #d1d5db);overflow:hidden}.vl-dialog-panel-sm{max-width:32rem}.vl-dialog-panel-md{max-width:42rem}.vl-dialog-panel-lg{max-width:48rem}.vl-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border, #d1d5db);flex-shrink:0}.vl-dialog-header h2{font-size:1rem;font-weight:600;color:var(--color-foreground, #1f2937)}.vl-dialog-header p{font-size:.75rem;color:var(--color-muted-foreground, #6b7280);margin-top:.125rem}.vl-dialog-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--color-muted-foreground, #6b7280);background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s}.vl-dialog-close:hover{background-color:var(--color-muted, #f3f4f6);color:var(--color-foreground, #1f2937)}.vl-dialog-body{flex:1;overflow-y:auto}.vl-dialog-footer{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--color-border, #d1d5db);background-color:color-mix(in srgb,var(--color-muted, #f3f4f6) 20%,transparent)}@media(min-width:640px){.vl-dialog-overlay{align-items:center;padding:1rem}.vl-dialog-panel{border-radius:1rem;max-height:88vh}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "vl-button", inputs: ["variant", "size", "loading", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-dialog', standalone: true, encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n  <div class=\"vl-dialog-overlay\" role=\"dialog\" aria-modal=\"true\">\n\n    <div class=\"vl-dialog-backdrop\" (click)=\"closed.emit()\"></div>\n\n    <div class=\"vl-dialog-panel\"\n      [class.vl-dialog-panel-sm]=\"size() === 'sm'\"\n      [class.vl-dialog-panel-md]=\"size() === 'md'\"\n      [class.vl-dialog-panel-lg]=\"size() === 'lg'\">\n\n      <div class=\"vl-dialog-header\">\n        <div>\n          <h2>{{ title() }}</h2>\n          @if (subtitle()) {\n            <p>{{ subtitle() }}</p>\n          }\n        </div>\n        <button (click)=\"closed.emit()\" class=\"vl-dialog-close\" aria-label=\"Close\">\n          <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 6L6 18M6 6l12 12\"/>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"vl-dialog-body\">\n        <ng-content />\n      </div>\n\n      @if (hasFooter()) {\n        <div class=\"vl-dialog-footer\">\n          <ng-content select=\"[dialog-footer]\" />\n        </div>\n      }\n\n    </div>\n  </div>\n}\n", styles: [".vl-dialog-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}.vl-dialog-backdrop{position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.vl-dialog-panel{position:relative;z-index:10;width:100%;max-height:92dvh;display:flex;flex-direction:column;background-color:var(--color-background, #fff);border-radius:1rem 1rem 0 0;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--color-border, #d1d5db);overflow:hidden}.vl-dialog-panel-sm{max-width:32rem}.vl-dialog-panel-md{max-width:42rem}.vl-dialog-panel-lg{max-width:48rem}.vl-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border, #d1d5db);flex-shrink:0}.vl-dialog-header h2{font-size:1rem;font-weight:600;color:var(--color-foreground, #1f2937)}.vl-dialog-header p{font-size:.75rem;color:var(--color-muted-foreground, #6b7280);margin-top:.125rem}.vl-dialog-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--color-muted-foreground, #6b7280);background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s}.vl-dialog-close:hover{background-color:var(--color-muted, #f3f4f6);color:var(--color-foreground, #1f2937)}.vl-dialog-body{flex:1;overflow-y:auto}.vl-dialog-footer{flex-shrink:0;border-top:1px solid var(--color-border, #d1d5db);background-color:color-mix(in srgb,var(--color-muted, #f3f4f6) 20%,transparent)}@media(min-width:640px){.vl-dialog-overlay{align-items:center;padding:1rem}.vl-dialog-panel{border-radius:1rem;max-height:88vh}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], onEscape: [{
+            args: [{ selector: 'vl-dialog', standalone: true, imports: [ButtonComponent], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\r\n  <div class=\"vl-dialog-overlay\" role=\"dialog\" aria-modal=\"true\">\r\n\r\n    <div class=\"vl-dialog-backdrop\" (click)=\"closed.emit()\"></div>\r\n\r\n    <div class=\"vl-dialog-panel\"\r\n      [class.vl-dialog-panel-sm]=\"size() === 'sm'\"\r\n      [class.vl-dialog-panel-md]=\"size() === 'md'\"\r\n      [class.vl-dialog-panel-lg]=\"size() === 'lg'\">\r\n\r\n      <div class=\"vl-dialog-header\">\r\n        <div>\r\n          <h2>{{ title() }}</h2>\r\n          @if (subtitle()) {\r\n            <p>{{ subtitle() }}</p>\r\n          }\r\n        </div>\r\n        <button (click)=\"closed.emit()\" class=\"vl-dialog-close\" aria-label=\"Close\">\r\n          <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"vl-dialog-body\">\r\n        <ng-content />\r\n      </div>\r\n\r\n      @if (hasFooter()) {\r\n        <div class=\"vl-dialog-footer\">\r\n          @if (footerButtons().length) {\r\n            @for (btn of footerButtons(); track btn.key) {\r\n              <vl-button [variant]=\"btn.variant ?? 'primary'\" [disabled]=\"btn.disabled ?? false\"\r\n                [loading]=\"btn.loading ?? false\" (click)=\"footerAction.emit(btn.key)\">\r\n                {{ btn.label }}\r\n              </vl-button>\r\n            }\r\n          } @else {\r\n            <ng-content select=\"[dialog-footer]\" />\r\n          }\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".vl-dialog-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}.vl-dialog-backdrop{position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.vl-dialog-panel{position:relative;z-index:10;width:100%;max-height:92dvh;display:flex;flex-direction:column;background-color:var(--color-background, #fff);border-radius:1rem 1rem 0 0;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--color-border, #d1d5db);overflow:hidden}.vl-dialog-panel-sm{max-width:32rem}.vl-dialog-panel-md{max-width:42rem}.vl-dialog-panel-lg{max-width:48rem}.vl-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border, #d1d5db);flex-shrink:0}.vl-dialog-header h2{font-size:1rem;font-weight:600;color:var(--color-foreground, #1f2937)}.vl-dialog-header p{font-size:.75rem;color:var(--color-muted-foreground, #6b7280);margin-top:.125rem}.vl-dialog-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--color-muted-foreground, #6b7280);background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s}.vl-dialog-close:hover{background-color:var(--color-muted, #f3f4f6);color:var(--color-foreground, #1f2937)}.vl-dialog-body{flex:1;overflow-y:auto}.vl-dialog-footer{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--color-border, #d1d5db);background-color:color-mix(in srgb,var(--color-muted, #f3f4f6) 20%,transparent)}@media(min-width:640px){.vl-dialog-overlay{align-items:center;padding:1rem}.vl-dialog-panel{border-radius:1rem;max-height:88vh}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }], footerButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtons", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], footerAction: [{ type: i0.Output, args: ["footerAction"] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }] } });
@@ -321,58 +325,51 @@ class ConfirmDialogComponent {
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     confirmed = output();
     cancelled = output();
+    footerButtons = computed(() => [
+        { key: 'cancel', label: this.cancelLabel(), variant: 'ghost', disabled: this.loading() },
+        { key: 'confirm', label: this.confirmLabel(), variant: this.confirmVariant(), loading: this.loading() },
+    ], ...(ngDevMode ? [{ debugName: "footerButtons" }] : /* istanbul ignore next */ []));
+    onFooterAction(key) {
+        key === 'confirm' ? this.confirmed.emit() : this.cancelled.emit();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ConfirmDialogComponent, isStandalone: true, selector: "vl-confirm-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: `
-    <vl-dialog
-      [isOpen]="isOpen()"
-      [title]="title()"
-      [subtitle]="subtitle()"
-      size="sm"
-      [hasFooter]="true"
-      (closed)="cancelled.emit()">
-
-      <div class="vl-confirm-body">
-        <p class="vl-confirm-message">{{ message() }}</p>
-        <ng-content />
-      </div>
-
-      <div dialog-footer class="vl-confirm-footer">
-        <vl-button variant="ghost" [disabled]="loading()" (click)="cancelled.emit()">
-          {{ cancelLabel() }}
-        </vl-button>
-        <vl-button [variant]="confirmVariant()" [loading]="loading()" (click)="confirmed.emit()">
-          {{ confirmLabel() }}
-        </vl-button>
-      </div>
-    </vl-dialog>
-  `, isInline: true, styles: [".vl-confirm-body{padding:1.5rem}.vl-confirm-message{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));line-height:1.6;margin:0;font-family:var(--font-family-sans, inherit)}.vl-confirm-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "vl-dialog", inputs: ["isOpen", "title", "subtitle", "size", "hasFooter"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "vl-button", inputs: ["variant", "size", "loading", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ConfirmDialogComponent, isStandalone: true, selector: "vl-confirm-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: `
+    <vl-dialog
+      [isOpen]="isOpen()"
+      [title]="title()"
+      [subtitle]="subtitle()"
+      size="sm"
+      [hasFooter]="true"
+      [footerButtons]="footerButtons()"
+      (footerAction)="onFooterAction($event)"
+      (closed)="cancelled.emit()">
+
+      <div class="vl-confirm-body">
+        <p class="vl-confirm-message">{{ message() }}</p>
+        <ng-content />
+      </div>
+    </vl-dialog>
+  `, isInline: true, styles: [".vl-confirm-body{padding:1.5rem}.vl-confirm-message{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));line-height:1.6;margin:0;font-family:var(--font-family-sans, inherit)}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "vl-dialog", inputs: ["isOpen", "title", "subtitle", "size", "hasFooter", "footerButtons"], outputs: ["closed", "footerAction"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-confirm-dialog', standalone: true, imports: [DialogComponent, ButtonComponent], template: `
-    <vl-dialog
-      [isOpen]="isOpen()"
-      [title]="title()"
-      [subtitle]="subtitle()"
-      size="sm"
-      [hasFooter]="true"
-      (closed)="cancelled.emit()">
-
-      <div class="vl-confirm-body">
-        <p class="vl-confirm-message">{{ message() }}</p>
-        <ng-content />
-      </div>
-
-      <div dialog-footer class="vl-confirm-footer">
-        <vl-button variant="ghost" [disabled]="loading()" (click)="cancelled.emit()">
-          {{ cancelLabel() }}
-        </vl-button>
-        <vl-button [variant]="confirmVariant()" [loading]="loading()" (click)="confirmed.emit()">
-          {{ confirmLabel() }}
-        </vl-button>
-      </div>
-    </vl-dialog>
-  `, encapsulation: ViewEncapsulation.None, styles: [".vl-confirm-body{padding:1.5rem}.vl-confirm-message{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));line-height:1.6;margin:0;font-family:var(--font-family-sans, inherit)}.vl-confirm-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem}\n"] }]
+            args: [{ selector: 'vl-confirm-dialog', standalone: true, imports: [DialogComponent], template: `
+    <vl-dialog
+      [isOpen]="isOpen()"
+      [title]="title()"
+      [subtitle]="subtitle()"
+      size="sm"
+      [hasFooter]="true"
+      [footerButtons]="footerButtons()"
+      (footerAction)="onFooterAction($event)"
+      (closed)="cancelled.emit()">
+
+      <div class="vl-confirm-body">
+        <p class="vl-confirm-message">{{ message() }}</p>
+        <ng-content />
+      </div>
+    </vl-dialog>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-confirm-body{padding:1.5rem}.vl-confirm-message{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));line-height:1.6;margin:0;font-family:var(--font-family-sans, inherit)}\n"] }]
         }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], confirmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmVariant", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
 
 /**
@@ -392,50 +389,50 @@ class EmptyStateComponent {
     title = input('Nothing here yet', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: EmptyStateComponent, isStandalone: true, selector: "vl-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="vl-empty-state">
-      <div class="vl-empty-state-icon">
-        @if (icon()) {
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
-            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-            <path [attr.d]="icon()" />
-          </svg>
-        } @else {
-          <ng-content select="[empty-icon]" />
-        }
-      </div>
-      <h3 class="vl-empty-state-title">{{ title() }}</h3>
-      @if (description()) {
-        <p class="vl-empty-state-description">{{ description() }}</p>
-      }
-      <div class="vl-empty-state-action">
-        <ng-content />
-      </div>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: EmptyStateComponent, isStandalone: true, selector: "vl-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-empty-state">
+      <div class="vl-empty-state-icon">
+        @if (icon()) {
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path [attr.d]="icon()" />
+          </svg>
+        } @else {
+          <ng-content select="[empty-icon]" />
+        }
+      </div>
+      <h3 class="vl-empty-state-title">{{ title() }}</h3>
+      @if (description()) {
+        <p class="vl-empty-state-description">{{ description() }}</p>
+      }
+      <div class="vl-empty-state-action">
+        <ng-content />
+      </div>
+    </div>
   `, isInline: true, styles: [".vl-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 1.5rem;background-color:var(--color-card, #fff);border:1px dashed var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);text-align:center;font-family:var(--font-family-sans, inherit)}.vl-empty-state-icon{width:3rem;height:3rem;border-radius:9999px;background-color:var(--color-muted, hsl(210 10% 95%));display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.vl-empty-state-icon svg{width:1.5rem;height:1.5rem;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-empty-state-title{font-size:.9375rem;font-weight:600;color:var(--color-foreground, #1f2937);margin:0 0 .375rem}.vl-empty-state-description{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0;max-width:20rem;line-height:1.5}.vl-empty-state-action{margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.vl-empty-state-action:empty{display:none}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-empty-state', standalone: true, template: `
-    <div class="vl-empty-state">
-      <div class="vl-empty-state-icon">
-        @if (icon()) {
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
-            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-            <path [attr.d]="icon()" />
-          </svg>
-        } @else {
-          <ng-content select="[empty-icon]" />
-        }
-      </div>
-      <h3 class="vl-empty-state-title">{{ title() }}</h3>
-      @if (description()) {
-        <p class="vl-empty-state-description">{{ description() }}</p>
-      }
-      <div class="vl-empty-state-action">
-        <ng-content />
-      </div>
-    </div>
+            args: [{ selector: 'vl-empty-state', standalone: true, template: `
+    <div class="vl-empty-state">
+      <div class="vl-empty-state-icon">
+        @if (icon()) {
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path [attr.d]="icon()" />
+          </svg>
+        } @else {
+          <ng-content select="[empty-icon]" />
+        }
+      </div>
+      <h3 class="vl-empty-state-title">{{ title() }}</h3>
+      @if (description()) {
+        <p class="vl-empty-state-description">{{ description() }}</p>
+      }
+      <div class="vl-empty-state-action">
+        <ng-content />
+      </div>
+    </div>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 1.5rem;background-color:var(--color-card, #fff);border:1px dashed var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);text-align:center;font-family:var(--font-family-sans, inherit)}.vl-empty-state-icon{width:3rem;height:3rem;border-radius:9999px;background-color:var(--color-muted, hsl(210 10% 95%));display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.vl-empty-state-icon svg{width:1.5rem;height:1.5rem;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-empty-state-title{font-size:.9375rem;font-weight:600;color:var(--color-foreground, #1f2937);margin:0 0 .375rem}.vl-empty-state-description{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0;max-width:20rem;line-height:1.5}.vl-empty-state-action{margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.vl-empty-state-action:empty{display:none}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
 
@@ -455,48 +452,48 @@ class InputComponent {
     prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputComponent, isStandalone: true, selector: "vl-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="vl-input-root">
-      @if (label()) {
-        <label class="vl-input-label" [class.vl-input-label-required]="required()">
-          {{ label() }}
-        </label>
-      }
-      <div class="vl-input-field" [class.vl-input-field-error]="!!error()">
-        @if (prefix()) {
-          <span class="vl-input-prefix">{{ prefix() }}</span>
-        }
-        <ng-content />
-      </div>
-      @if (error()) {
-        <p class="vl-input-error">{{ error() }}</p>
-      } @else if (hint()) {
-        <p class="vl-input-hint">{{ hint() }}</p>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputComponent, isStandalone: true, selector: "vl-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-input-root">
+      @if (label()) {
+        <label class="vl-input-label" [class.vl-input-label-required]="required()">
+          {{ label() }}
+        </label>
+      }
+      <div class="vl-input-field" [class.vl-input-field-error]="!!error()">
+        @if (prefix()) {
+          <span class="vl-input-prefix">{{ prefix() }}</span>
+        }
+        <ng-content />
+      </div>
+      @if (error()) {
+        <p class="vl-input-error">{{ error() }}</p>
+      } @else if (hint()) {
+        <p class="vl-input-hint">{{ hint() }}</p>
+      }
+    </div>
   `, isInline: true, styles: [".vl-input-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-input-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-input-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field{display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-input-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-input-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-input-prefix{padding-left:.875rem;font-size:.875rem;font-weight:600;color:var(--color-muted-foreground, hsl(210 10% 50%));-webkit-user-select:none;user-select:none;flex-shrink:0}.vl-input-field ::slotted(input),.vl-input-field input{width:100%;padding:.625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;font-family:inherit;min-width:0}.vl-input-field input::placeholder{color:color-mix(in srgb,var(--color-muted-foreground, hsl(210 10% 50%)) 60%,transparent)}.vl-input-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-input-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-input', standalone: true, template: `
-    <div class="vl-input-root">
-      @if (label()) {
-        <label class="vl-input-label" [class.vl-input-label-required]="required()">
-          {{ label() }}
-        </label>
-      }
-      <div class="vl-input-field" [class.vl-input-field-error]="!!error()">
-        @if (prefix()) {
-          <span class="vl-input-prefix">{{ prefix() }}</span>
-        }
-        <ng-content />
-      </div>
-      @if (error()) {
-        <p class="vl-input-error">{{ error() }}</p>
-      } @else if (hint()) {
-        <p class="vl-input-hint">{{ hint() }}</p>
-      }
-    </div>
+            args: [{ selector: 'vl-input', standalone: true, template: `
+    <div class="vl-input-root">
+      @if (label()) {
+        <label class="vl-input-label" [class.vl-input-label-required]="required()">
+          {{ label() }}
+        </label>
+      }
+      <div class="vl-input-field" [class.vl-input-field-error]="!!error()">
+        @if (prefix()) {
+          <span class="vl-input-prefix">{{ prefix() }}</span>
+        }
+        <ng-content />
+      </div>
+      @if (error()) {
+        <p class="vl-input-error">{{ error() }}</p>
+      } @else if (hint()) {
+        <p class="vl-input-hint">{{ hint() }}</p>
+      }
+    </div>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-input-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-input-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-input-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field{display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-input-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-input-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-input-prefix{padding-left:.875rem;font-size:.875rem;font-weight:600;color:var(--color-muted-foreground, hsl(210 10% 50%));-webkit-user-select:none;user-select:none;flex-shrink:0}.vl-input-field ::slotted(input),.vl-input-field input{width:100%;padding:.625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;font-family:inherit;min-width:0}.vl-input-field input::placeholder{color:color-mix(in srgb,var(--color-muted-foreground, hsl(210 10% 50%)) 60%,transparent)}.vl-input-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-input-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
 
@@ -504,34 +501,34 @@ class LoaderComponent {
     message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     fullPage = input(false, ...(ngDevMode ? [{ debugName: "fullPage" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: LoaderComponent, isStandalone: true, selector: "vl-loader", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="vl-loader" [class.vl-loader-fullpage]="fullPage()">
-      <div class="vl-loader-spinner">
-        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
-          <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
-        </svg>
-      </div>
-      @if (message()) {
-        <p class="vl-loader-message">{{ message() }}</p>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: LoaderComponent, isStandalone: true, selector: "vl-loader", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-loader" [class.vl-loader-fullpage]="fullPage()">
+      <div class="vl-loader-spinner">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
+          <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
+        </svg>
+      </div>
+      @if (message()) {
+        <p class="vl-loader-message">{{ message() }}</p>
+      }
+    </div>
   `, isInline: true, styles: [".vl-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1.5rem}.vl-loader-fullpage{min-height:16rem}.vl-loader-spinner{width:2rem;height:2rem;color:var(--color-primary, #6366f1);animation:vl-spin .8s linear infinite}.vl-loader-spinner svg{width:100%;height:100%}.vl-loader-message{font-size:.875rem;color:var(--color-muted-foreground, #6b7280);margin:0}@keyframes vl-spin{to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-loader', standalone: true, template: `
-    <div class="vl-loader" [class.vl-loader-fullpage]="fullPage()">
-      <div class="vl-loader-spinner">
-        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
-          <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
-        </svg>
-      </div>
-      @if (message()) {
-        <p class="vl-loader-message">{{ message() }}</p>
-      }
-    </div>
+            args: [{ selector: 'vl-loader', standalone: true, template: `
+    <div class="vl-loader" [class.vl-loader-fullpage]="fullPage()">
+      <div class="vl-loader-spinner">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
+          <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
+        </svg>
+      </div>
+      @if (message()) {
+        <p class="vl-loader-message">{{ message() }}</p>
+      }
+    </div>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1.5rem}.vl-loader-fullpage{min-height:16rem}.vl-loader-spinner{width:2rem;height:2rem;color:var(--color-primary, #6366f1);animation:vl-spin .8s linear infinite}.vl-loader-spinner svg{width:100%;height:100%}.vl-loader-message{font-size:.875rem;color:var(--color-muted-foreground, #6b7280);margin:0}@keyframes vl-spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], fullPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullPage", required: false }] }] } });
 
@@ -545,50 +542,50 @@ class PasswordStrengthComponent {
     strength = input(null, ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
     showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: PasswordStrengthComponent, isStandalone: true, selector: "vl-password-strength", inputs: { strength: { classPropertyName: "strength", publicName: "strength", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="vl-pw-root">
-      <div class="vl-pw-bars">
-        <div class="vl-pw-bar"
-          [class.vl-pw-bar-weak]="strength() === 'weak'"
-          [class.vl-pw-bar-inactive]="!strength()"></div>
-        <div class="vl-pw-bar"
-          [class.vl-pw-bar-medium]="strength() === 'medium'"
-          [class.vl-pw-bar-strong]="strength() === 'strong'"
-          [class.vl-pw-bar-inactive]="strength() !== 'medium' && strength() !== 'strong'"></div>
-        <div class="vl-pw-bar"
-          [class.vl-pw-bar-strong]="strength() === 'strong'"
-          [class.vl-pw-bar-inactive]="strength() !== 'strong'"></div>
-      </div>
-      @if (showLabel() && strength()) {
-        <span class="vl-pw-label" [class]="'vl-pw-label-' + strength()">
-          {{ strength() | titlecase }}
-        </span>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: PasswordStrengthComponent, isStandalone: true, selector: "vl-password-strength", inputs: { strength: { classPropertyName: "strength", publicName: "strength", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-pw-root">
+      <div class="vl-pw-bars">
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-weak]="strength() === 'weak'"
+          [class.vl-pw-bar-inactive]="!strength()"></div>
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-medium]="strength() === 'medium'"
+          [class.vl-pw-bar-strong]="strength() === 'strong'"
+          [class.vl-pw-bar-inactive]="strength() !== 'medium' && strength() !== 'strong'"></div>
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-strong]="strength() === 'strong'"
+          [class.vl-pw-bar-inactive]="strength() !== 'strong'"></div>
+      </div>
+      @if (showLabel() && strength()) {
+        <span class="vl-pw-label" [class]="'vl-pw-label-' + strength()">
+          {{ strength() | titlecase }}
+        </span>
+      }
+    </div>
   `, isInline: true, styles: [".vl-pw-root{display:flex;align-items:center;gap:.625rem;font-family:var(--font-family-sans, inherit)}.vl-pw-bars{display:flex;flex:1;gap:.25rem;height:.375rem}.vl-pw-bar{flex:1;border-radius:9999px;transition:background-color .3s ease;background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-inactive{background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-weak{background-color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-bar-medium{background-color:#f2b90d}.vl-pw-bar-strong{background-color:var(--color-accent, hsl(150 60% 35%))}.vl-pw-label{font-size:.6875rem;font-weight:600;white-space:nowrap}.vl-pw-label-weak{color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-label-medium{color:#c2940a}.vl-pw-label-strong{color:var(--color-accent, hsl(150 60% 35%))}\n"], dependencies: [{ kind: "pipe", type: TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PasswordStrengthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-password-strength', standalone: true, imports: [TitleCasePipe], template: `
-    <div class="vl-pw-root">
-      <div class="vl-pw-bars">
-        <div class="vl-pw-bar"
-          [class.vl-pw-bar-weak]="strength() === 'weak'"
-          [class.vl-pw-bar-inactive]="!strength()"></div>
-        <div class="vl-pw-bar"
-          [class.vl-pw-bar-medium]="strength() === 'medium'"
-          [class.vl-pw-bar-strong]="strength() === 'strong'"
-          [class.vl-pw-bar-inactive]="strength() !== 'medium' && strength() !== 'strong'"></div>
-        <div class="vl-pw-bar"
-          [class.vl-pw-bar-strong]="strength() === 'strong'"
-          [class.vl-pw-bar-inactive]="strength() !== 'strong'"></div>
-      </div>
-      @if (showLabel() && strength()) {
-        <span class="vl-pw-label" [class]="'vl-pw-label-' + strength()">
-          {{ strength() | titlecase }}
-        </span>
-      }
-    </div>
+            args: [{ selector: 'vl-password-strength', standalone: true, imports: [TitleCasePipe], template: `
+    <div class="vl-pw-root">
+      <div class="vl-pw-bars">
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-weak]="strength() === 'weak'"
+          [class.vl-pw-bar-inactive]="!strength()"></div>
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-medium]="strength() === 'medium'"
+          [class.vl-pw-bar-strong]="strength() === 'strong'"
+          [class.vl-pw-bar-inactive]="strength() !== 'medium' && strength() !== 'strong'"></div>
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-strong]="strength() === 'strong'"
+          [class.vl-pw-bar-inactive]="strength() !== 'strong'"></div>
+      </div>
+      @if (showLabel() && strength()) {
+        <span class="vl-pw-label" [class]="'vl-pw-label-' + strength()">
+          {{ strength() | titlecase }}
+        </span>
+      }
+    </div>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-pw-root{display:flex;align-items:center;gap:.625rem;font-family:var(--font-family-sans, inherit)}.vl-pw-bars{display:flex;flex:1;gap:.25rem;height:.375rem}.vl-pw-bar{flex:1;border-radius:9999px;transition:background-color .3s ease;background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-inactive{background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-weak{background-color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-bar-medium{background-color:#f2b90d}.vl-pw-bar-strong{background-color:var(--color-accent, hsl(150 60% 35%))}.vl-pw-label{font-size:.6875rem;font-weight:600;white-space:nowrap}.vl-pw-label-weak{color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-label-medium{color:#c2940a}.vl-pw-label-strong{color:var(--color-accent, hsl(150 60% 35%))}\n"] }]
         }], propDecorators: { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }] } });
 
@@ -616,52 +613,52 @@ class ProgressBarComponent {
         return 'primary';
     }, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ProgressBarComponent, isStandalone: true, selector: "vl-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="vl-progress-root">
-      @if (label()) {
-        <div class="vl-progress-header">
-          <span class="vl-progress-label">{{ label() }}</span>
-          @if (showLabel()) {
-            <span class="vl-progress-pct">{{ clampedValue() }}%</span>
-          }
-        </div>
-      } @else if (showLabel()) {
-        <div class="vl-progress-header vl-progress-header-end">
-          <span class="vl-progress-pct">{{ clampedValue() }}%</span>
-        </div>
-      }
-      <div class="vl-progress-track">
-        <div class="vl-progress-fill"
-          [class]="'vl-progress-fill-' + resolvedVariant()"
-          [style.width.%]="clampedValue()">
-        </div>
-      </div>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ProgressBarComponent, isStandalone: true, selector: "vl-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-progress-root">
+      @if (label()) {
+        <div class="vl-progress-header">
+          <span class="vl-progress-label">{{ label() }}</span>
+          @if (showLabel()) {
+            <span class="vl-progress-pct">{{ clampedValue() }}%</span>
+          }
+        </div>
+      } @else if (showLabel()) {
+        <div class="vl-progress-header vl-progress-header-end">
+          <span class="vl-progress-pct">{{ clampedValue() }}%</span>
+        </div>
+      }
+      <div class="vl-progress-track">
+        <div class="vl-progress-fill"
+          [class]="'vl-progress-fill-' + resolvedVariant()"
+          [style.width.%]="clampedValue()">
+        </div>
+      </div>
+    </div>
   `, isInline: true, styles: [".vl-progress-root{display:flex;flex-direction:column;gap:.375rem}.vl-progress-header{display:flex;align-items:center;justify-content:space-between}.vl-progress-header-end{justify-content:flex-end}.vl-progress-label{font-size:.75rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-pct{font-size:.6875rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-track{height:.375rem;background-color:var(--color-border, hsl(210 15% 85%));border-radius:9999px;overflow:hidden}.vl-progress-fill{height:100%;border-radius:9999px;transition:width .5s ease,background-color .3s ease}.vl-progress-fill-primary{background-color:var(--color-primary, hsl(215 80% 25%))}.vl-progress-fill-warning{background-color:var(--color-secondary, hsl(15 90% 55%))}.vl-progress-fill-danger{background-color:var(--color-destructive, hsl(0 70% 50%))}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-progress-bar', standalone: true, template: `
-    <div class="vl-progress-root">
-      @if (label()) {
-        <div class="vl-progress-header">
-          <span class="vl-progress-label">{{ label() }}</span>
-          @if (showLabel()) {
-            <span class="vl-progress-pct">{{ clampedValue() }}%</span>
-          }
-        </div>
-      } @else if (showLabel()) {
-        <div class="vl-progress-header vl-progress-header-end">
-          <span class="vl-progress-pct">{{ clampedValue() }}%</span>
-        </div>
-      }
-      <div class="vl-progress-track">
-        <div class="vl-progress-fill"
-          [class]="'vl-progress-fill-' + resolvedVariant()"
-          [style.width.%]="clampedValue()">
-        </div>
-      </div>
-    </div>
+            args: [{ selector: 'vl-progress-bar', standalone: true, template: `
+    <div class="vl-progress-root">
+      @if (label()) {
+        <div class="vl-progress-header">
+          <span class="vl-progress-label">{{ label() }}</span>
+          @if (showLabel()) {
+            <span class="vl-progress-pct">{{ clampedValue() }}%</span>
+          }
+        </div>
+      } @else if (showLabel()) {
+        <div class="vl-progress-header vl-progress-header-end">
+          <span class="vl-progress-pct">{{ clampedValue() }}%</span>
+        </div>
+      }
+      <div class="vl-progress-track">
+        <div class="vl-progress-fill"
+          [class]="'vl-progress-fill-' + resolvedVariant()"
+          [style.width.%]="clampedValue()">
+        </div>
+      </div>
+    </div>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-progress-root{display:flex;flex-direction:column;gap:.375rem}.vl-progress-header{display:flex;align-items:center;justify-content:space-between}.vl-progress-header-end{justify-content:flex-end}.vl-progress-label{font-size:.75rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-pct{font-size:.6875rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-track{height:.375rem;background-color:var(--color-border, hsl(210 15% 85%));border-radius:9999px;overflow:hidden}.vl-progress-fill{height:100%;border-radius:9999px;transition:width .5s ease,background-color .3s ease}.vl-progress-fill-primary{background-color:var(--color-primary, hsl(215 80% 25%))}.vl-progress-fill-warning{background-color:var(--color-secondary, hsl(15 90% 55%))}.vl-progress-fill-danger{background-color:var(--color-destructive, hsl(0 70% 50%))}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
@@ -681,52 +678,52 @@ class SelectComponent {
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SelectComponent, isStandalone: true, selector: "vl-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="vl-select-root">
-      @if (label()) {
-        <label class="vl-select-label" [class.vl-select-label-required]="required()">
-          {{ label() }}
-        </label>
-      }
-      <div class="vl-select-field" [class.vl-select-field-error]="!!error()">
-        <ng-content />
-        <span class="vl-select-caret" aria-hidden="true">
-          <svg viewBox="0 0 16 16" fill="currentColor">
-            <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z"/>
-          </svg>
-        </span>
-      </div>
-      @if (error()) {
-        <p class="vl-select-error">{{ error() }}</p>
-      } @else if (hint()) {
-        <p class="vl-select-hint">{{ hint() }}</p>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SelectComponent, isStandalone: true, selector: "vl-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-select-root">
+      @if (label()) {
+        <label class="vl-select-label" [class.vl-select-label-required]="required()">
+          {{ label() }}
+        </label>
+      }
+      <div class="vl-select-field" [class.vl-select-field-error]="!!error()">
+        <ng-content />
+        <span class="vl-select-caret" aria-hidden="true">
+          <svg viewBox="0 0 16 16" fill="currentColor">
+            <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z"/>
+          </svg>
+        </span>
+      </div>
+      @if (error()) {
+        <p class="vl-select-error">{{ error() }}</p>
+      } @else if (hint()) {
+        <p class="vl-select-hint">{{ hint() }}</p>
+      }
+    </div>
   `, isInline: true, styles: [".vl-select-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-select-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-select-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field{position:relative;display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-select-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-select-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-select-field select{width:100%;padding:.625rem 2.25rem .625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit}.vl-select-caret{position:absolute;right:.75rem;pointer-events:none;color:var(--color-muted-foreground, hsl(210 10% 50%));display:flex;align-items:center}.vl-select-caret svg{width:1rem;height:1rem}.vl-select-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-select-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-select', standalone: true, template: `
-    <div class="vl-select-root">
-      @if (label()) {
-        <label class="vl-select-label" [class.vl-select-label-required]="required()">
-          {{ label() }}
-        </label>
-      }
-      <div class="vl-select-field" [class.vl-select-field-error]="!!error()">
-        <ng-content />
-        <span class="vl-select-caret" aria-hidden="true">
-          <svg viewBox="0 0 16 16" fill="currentColor">
-            <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z"/>
-          </svg>
-        </span>
-      </div>
-      @if (error()) {
-        <p class="vl-select-error">{{ error() }}</p>
-      } @else if (hint()) {
-        <p class="vl-select-hint">{{ hint() }}</p>
-      }
-    </div>
+            args: [{ selector: 'vl-select', standalone: true, template: `
+    <div class="vl-select-root">
+      @if (label()) {
+        <label class="vl-select-label" [class.vl-select-label-required]="required()">
+          {{ label() }}
+        </label>
+      }
+      <div class="vl-select-field" [class.vl-select-field-error]="!!error()">
+        <ng-content />
+        <span class="vl-select-caret" aria-hidden="true">
+          <svg viewBox="0 0 16 16" fill="currentColor">
+            <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z"/>
+          </svg>
+        </span>
+      </div>
+      @if (error()) {
+        <p class="vl-select-error">{{ error() }}</p>
+      } @else if (hint()) {
+        <p class="vl-select-hint">{{ hint() }}</p>
+      }
+    </div>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-select-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-select-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-select-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field{position:relative;display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-select-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-select-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-select-field select{width:100%;padding:.625rem 2.25rem .625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit}.vl-select-caret{position:absolute;right:.75rem;pointer-events:none;color:var(--color-muted-foreground, hsl(210 10% 50%));display:flex;align-items:center}.vl-select-caret svg{width:1rem;height:1rem}.vl-select-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-select-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
 
@@ -748,46 +745,46 @@ class SkeletonComponent {
         return Array.from({ length: this.lines() }, (_, i) => i);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SkeletonComponent, isStandalone: true, selector: "vl-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (lines() > 1) {
-      <div class="vl-skeleton-group">
-        @for (i of lineArr(); track i; let last = $last) {
-          <div class="vl-skeleton"
-            [class.vl-skeleton-circle]="shape() === 'circle'"
-            [style.width]="last ? '60%' : '100%'"
-            [style.height]="height()">
-          </div>
-        }
-      </div>
-    } @else {
-      <div class="vl-skeleton"
-        [class.vl-skeleton-circle]="shape() === 'circle'"
-        [style.width]="width()"
-        [style.height]="height()">
-      </div>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SkeletonComponent, isStandalone: true, selector: "vl-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (lines() > 1) {
+      <div class="vl-skeleton-group">
+        @for (i of lineArr(); track i; let last = $last) {
+          <div class="vl-skeleton"
+            [class.vl-skeleton-circle]="shape() === 'circle'"
+            [style.width]="last ? '60%' : '100%'"
+            [style.height]="height()">
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="vl-skeleton"
+        [class.vl-skeleton-circle]="shape() === 'circle'"
+        [style.width]="width()"
+        [style.height]="height()">
+      </div>
+    }
   `, isInline: true, styles: [".vl-skeleton{display:block;background:linear-gradient(90deg,var(--color-muted, hsl(210 10% 93%)) 25%,color-mix(in srgb,var(--color-muted, hsl(210 10% 93%)) 60%,white) 50%,var(--color-muted, hsl(210 10% 93%)) 75%);background-size:200% 100%;border-radius:calc(var(--radius, .5rem) * .5);animation:vl-shimmer 1.5s infinite linear}.vl-skeleton-circle{border-radius:9999px}.vl-skeleton-group{display:flex;flex-direction:column;gap:.5rem}@keyframes vl-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-skeleton', standalone: true, template: `
-    @if (lines() > 1) {
-      <div class="vl-skeleton-group">
-        @for (i of lineArr(); track i; let last = $last) {
-          <div class="vl-skeleton"
-            [class.vl-skeleton-circle]="shape() === 'circle'"
-            [style.width]="last ? '60%' : '100%'"
-            [style.height]="height()">
-          </div>
-        }
-      </div>
-    } @else {
-      <div class="vl-skeleton"
-        [class.vl-skeleton-circle]="shape() === 'circle'"
-        [style.width]="width()"
-        [style.height]="height()">
-      </div>
-    }
+            args: [{ selector: 'vl-skeleton', standalone: true, template: `
+    @if (lines() > 1) {
+      <div class="vl-skeleton-group">
+        @for (i of lineArr(); track i; let last = $last) {
+          <div class="vl-skeleton"
+            [class.vl-skeleton-circle]="shape() === 'circle'"
+            [style.width]="last ? '60%' : '100%'"
+            [style.height]="height()">
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="vl-skeleton"
+        [class.vl-skeleton-circle]="shape() === 'circle'"
+        [style.width]="width()"
+        [style.height]="height()">
+      </div>
+    }
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-skeleton{display:block;background:linear-gradient(90deg,var(--color-muted, hsl(210 10% 93%)) 25%,color-mix(in srgb,var(--color-muted, hsl(210 10% 93%)) 60%,white) 50%,var(--color-muted, hsl(210 10% 93%)) 75%);background-size:200% 100%;border-radius:calc(var(--radius, .5rem) * .5);animation:vl-shimmer 1.5s infinite linear}.vl-skeleton-circle{border-radius:9999px}.vl-skeleton-group{display:flex;flex-direction:column;gap:.5rem}@keyframes vl-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
         }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
 
@@ -804,26 +801,26 @@ class StatCardComponent {
     subtext = input('', ...(ngDevMode ? [{ debugName: "subtext" }] : /* istanbul ignore next */ []));
     valueVariant = input('default', ...(ngDevMode ? [{ debugName: "valueVariant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StatCardComponent, isStandalone: true, selector: "vl-stat-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, valueVariant: { classPropertyName: "valueVariant", publicName: "valueVariant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="vl-stat-card">
-      <p class="vl-stat-label">{{ label() }}</p>
-      <p class="vl-stat-value" [class]="'vl-stat-value-' + valueVariant()">{{ value() }}</p>
-      @if (subtext()) {
-        <p class="vl-stat-subtext">{{ subtext() }}</p>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StatCardComponent, isStandalone: true, selector: "vl-stat-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, valueVariant: { classPropertyName: "valueVariant", publicName: "valueVariant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-stat-card">
+      <p class="vl-stat-label">{{ label() }}</p>
+      <p class="vl-stat-value" [class]="'vl-stat-value-' + valueVariant()">{{ value() }}</p>
+      @if (subtext()) {
+        <p class="vl-stat-subtext">{{ subtext() }}</p>
+      }
+    </div>
   `, isInline: true, styles: [".vl-stat-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);padding:1.25rem;text-align:center;font-family:var(--font-family-sans, inherit)}.vl-stat-label{font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0 0 .5rem}.vl-stat-value{font-size:1.5rem;font-weight:700;margin:0;line-height:1.2}.vl-stat-value-default{color:var(--color-foreground, #1f2937)}.vl-stat-value-primary{color:var(--color-primary, hsl(215 80% 25%))}.vl-stat-value-secondary{color:var(--color-secondary, hsl(15 90% 55%))}.vl-stat-value-accent{color:var(--color-accent, hsl(150 60% 35%))}.vl-stat-value-destructive{color:var(--color-destructive, hsl(0 70% 50%))}.vl-stat-subtext{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:.375rem 0 0}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StatCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vl-stat-card', standalone: true, template: `
-    <div class="vl-stat-card">
-      <p class="vl-stat-label">{{ label() }}</p>
-      <p class="vl-stat-value" [class]="'vl-stat-value-' + valueVariant()">{{ value() }}</p>
-      @if (subtext()) {
-        <p class="vl-stat-subtext">{{ subtext() }}</p>
-      }
-    </div>
+            args: [{ selector: 'vl-stat-card', standalone: true, template: `
+    <div class="vl-stat-card">
+      <p class="vl-stat-label">{{ label() }}</p>
+      <p class="vl-stat-value" [class]="'vl-stat-value-' + valueVariant()">{{ value() }}</p>
+      @if (subtext()) {
+        <p class="vl-stat-subtext">{{ subtext() }}</p>
+      }
+    </div>
   `, encapsulation: ViewEncapsulation.None, styles: [".vl-stat-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);padding:1.25rem;text-align:center;font-family:var(--font-family-sans, inherit)}.vl-stat-label{font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0 0 .5rem}.vl-stat-value{font-size:1.5rem;font-weight:700;margin:0;line-height:1.2}.vl-stat-value-default{color:var(--color-foreground, #1f2937)}.vl-stat-value-primary{color:var(--color-primary, hsl(215 80% 25%))}.vl-stat-value-secondary{color:var(--color-secondary, hsl(15 90% 55%))}.vl-stat-value-accent{color:var(--color-accent, hsl(150 60% 35%))}.vl-stat-value-destructive{color:var(--color-destructive, hsl(0 70% 50%))}.vl-stat-subtext{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:.375rem 0 0}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], valueVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueVariant", required: false }] }] } });
 
@@ -924,31 +921,31 @@ class TooltipDirective {
             return;
         const style = document.createElement('style');
         style.id = STYLE_ID;
-        style.textContent = `
-      .vl-tooltip {
-        position: absolute;
-        z-index: 10000;
-        padding: 0.3125rem 0.625rem;
-        background-color: var(--color-foreground, #1f2937);
-        color: var(--color-background, #fff);
-        font-size: 0.75rem;
-        font-family: var(--font-family-sans, inherit);
-        line-height: 1.4;
-        border-radius: calc(var(--radius, 0.5rem) * 0.75);
-        white-space: nowrap;
-        pointer-events: none;
-        max-width: 16rem;
-        white-space: normal;
-        text-align: center;
-        opacity: 0;
-        transform: scale(0.95);
-        transition: opacity 0.15s ease, transform 0.15s ease;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-      }
-      .vl-tooltip-visible {
-        opacity: 1;
-        transform: scale(1);
-      }
+        style.textContent = `
+      .vl-tooltip {
+        position: absolute;
+        z-index: 10000;
+        padding: 0.3125rem 0.625rem;
+        background-color: var(--color-foreground, #1f2937);
+        color: var(--color-background, #fff);
+        font-size: 0.75rem;
+        font-family: var(--font-family-sans, inherit);
+        line-height: 1.4;
+        border-radius: calc(var(--radius, 0.5rem) * 0.75);
+        white-space: nowrap;
+        pointer-events: none;
+        max-width: 16rem;
+        white-space: normal;
+        text-align: center;
+        opacity: 0;
+        transform: scale(0.95);
+        transition: opacity 0.15s ease, transform 0.15s ease;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      }
+      .vl-tooltip-visible {
+        opacity: 1;
+        transform: scale(1);
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1114,6 +1111,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             args: [{ name: 'vlTripDuration', standalone: true, pure: true }]
         }] });
 
+const TRIP_STATUS_COLORS = {
+    planning: { color: '#ff6347', background: 'rgba(255, 99, 71, 0.12)' },
+    ongoing: { color: '#228b22', background: 'rgba(34, 139, 34, 0.12)' },
+    completed: { color: '#6b7280', background: 'rgba(107, 114, 128, 0.12)' },
+};
+
+/**
+ * Maps a trip status to its display colors.
+ *
+ * Usage:
+ *   @let statusStyle = trip.status | vlTripStatusStyle;
+ *   [style.color]="statusStyle.color"
+ *   [style.background-color]="statusStyle.background"
+ */
+class TripStatusStylePipe {
+    transform(status) {
+        return TRIP_STATUS_COLORS[status];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TripStatusStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: TripStatusStylePipe, isStandalone: true, name: "vlTripStatusStyle" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TripStatusStylePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'vlTripStatusStyle', standalone: true, pure: true }]
+        }] });
+
 const CATEGORY_ICONS = {
     food: '🍔',
     accommodation: '🏨',
@@ -1286,5 +1309,5 @@ function formatCurrency(amount, currencyCode = 'USD') {
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, BadgeComponent, ButtonComponent, CATEGORY_COLORS, CATEGORY_ICONS, CURRENCIES, CardComponent, ConfirmDialogComponent, CurrencyFormatPipe, DateFormatPipe, DialogComponent, EmptyStateComponent, EnvironmentToken, ExpenseService, InputComponent, LoaderComponent, PasswordStrengthComponent, ProgressBarComponent, SelectComponent, SharedHttpService, SkeletonComponent, SnackbarComponent, SnackbarService, StatCardComponent, TooltipDirective, TripDurationPipe, TripService, formatCurrency, getCurrency };
+export { AvatarComponent, BadgeComponent, ButtonComponent, CATEGORY_COLORS, CATEGORY_ICONS, CURRENCIES, CardComponent, ConfirmDialogComponent, CurrencyFormatPipe, DateFormatPipe, DialogComponent, EmptyStateComponent, EnvironmentToken, ExpenseService, InputComponent, LoaderComponent, PasswordStrengthComponent, ProgressBarComponent, SelectComponent, SharedHttpService, SkeletonComponent, SnackbarComponent, SnackbarService, StatCardComponent, TRIP_STATUS_COLORS, TooltipDirective, TripDurationPipe, TripService, TripStatusStylePipe, formatCurrency, getCurrency };
 //# sourceMappingURL=voyage-lib.mjs.map