@forgeroute/ui 0.4.19 → 0.4.20

package/fesm2022/forgeroute-ui.mjs

@@ -4742,6 +4742,7 @@ var TextInputComponent = class TextInputComponent {
 	constructor() {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.inputTestId = input("", ...ngDevMode ? [{ debugName: "inputTestId" }] : /* istanbul ignore next */ []);
 		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 		this.prefix = input("", ...ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []);
 		this.revealable = input(false, ...ngDevMode ? [{ debugName: "revealable" }] : /* istanbul ignore next */ []);
@@ -4973,6 +4974,13 @@ var TextInputComponent = class TextInputComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				inputTestId: {
+					classPropertyName: "inputTestId",
+					publicName: "inputTestId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				placeholder: {
 					classPropertyName: "placeholder",
 					publicName: "placeholder",
@@ -5163,16 +5171,20 @@ var TextInputComponent = class TextInputComponent {
     <div class="ti-field" [class.ti-error]="_activeError()" [class.ti-disabled]="disabled()"
          [class.ti-prefixed]="!!prefix() || _revealable()" [style.--ti-input-row]="(prefix() || _revealable()) ? (label() ? 2 : 1) : null">
       @if (label()) {
-        <label class="ti-label" [for]="_inputId">
-          {{ label() }}
-          @if (required()) { <span class="ti-required" aria-hidden="true">*</span> }
-        </label>
+        <div class="ti-label-row">
+          <label class="ti-label" [for]="_inputId">
+            {{ label() }}
+            @if (required()) { <span class="ti-required" aria-hidden="true">*</span> }
+          </label>
+          <ng-content select="[uiLabelEnd]" />
+        </div>
       }
       <input
         class="ti-input"
         [style.padding-left]="_prefixPadding()"
         [style.padding-right]="_revealable() ? '44px' : null"
         [id]="_inputId"
+        [attr.data-testid]="inputTestId() || null"
         [type]="_inputType()"
         [attr.inputmode]="inputmode() || (type() === 'tel' ? 'tel' : integer() ? 'numeric' : null)"
         [placeholder]="placeholder()"
@@ -5214,7 +5226,7 @@ var TextInputComponent = class TextInputComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#dc2626;margin-left:2px}.ti-prefixed{display:grid;grid-template-columns:minmax(0,1fr)}.ti-prefixed .ti-input{grid-row:var(--ti-input-row);grid-column:1}.ti-prefix{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;font-size:.875rem;line-height:1;color:#64748b;pointer-events:none}@media(max-width:480px){.ti-prefix{font-size:1rem}}.ti-disabled .ti-prefix{opacity:.5}.ti-reveal{grid-row:var(--ti-input-row);grid-column:1;justify-self:end;align-self:center;margin-right:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:#64748b;cursor:pointer}.ti-reveal:hover:not(:disabled){color:#1e293b;background:#f1f5f9}.ti-reveal:focus-visible{outline:2px solid #3b82f6;outline-offset:0}.ti-reveal:disabled{opacity:.5;cursor:not-allowed}@media(pointer:coarse),(max-width:480px){.ti-reveal{width:44px;height:44px;margin-right:0}}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#94a3b8}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#dc2626}@media(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"],
+			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.ti-label-row>[uiLabelEnd]{margin-left:auto}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#dc2626;margin-left:2px}.ti-prefixed{display:grid;grid-template-columns:minmax(0,1fr)}.ti-prefixed .ti-input{grid-row:var(--ti-input-row);grid-column:1}.ti-prefix{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;font-size:.875rem;line-height:1;color:#64748b;pointer-events:none}@media(max-width:480px){.ti-prefix{font-size:1rem}}.ti-disabled .ti-prefix{opacity:.5}.ti-reveal{grid-row:var(--ti-input-row);grid-column:1;justify-self:end;align-self:center;margin-right:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:#64748b;cursor:pointer}.ti-reveal:hover:not(:disabled){color:#1e293b;background:#f1f5f9}.ti-reveal:focus-visible{outline:2px solid #3b82f6;outline-offset:0}.ti-reveal:disabled{opacity:.5;cursor:not-allowed}@media(pointer:coarse),(max-width:480px){.ti-reveal{width:44px;height:44px;margin-right:0}}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#94a3b8}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#dc2626}@media(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: PasswordRequirementsComponent,
@@ -5261,16 +5273,20 @@ i0.ɵɵngDeclareClassMetadata({
     <div class="ti-field" [class.ti-error]="_activeError()" [class.ti-disabled]="disabled()"
          [class.ti-prefixed]="!!prefix() || _revealable()" [style.--ti-input-row]="(prefix() || _revealable()) ? (label() ? 2 : 1) : null">
       @if (label()) {
-        <label class="ti-label" [for]="_inputId">
-          {{ label() }}
-          @if (required()) { <span class="ti-required" aria-hidden="true">*</span> }
-        </label>
+        <div class="ti-label-row">
+          <label class="ti-label" [for]="_inputId">
+            {{ label() }}
+            @if (required()) { <span class="ti-required" aria-hidden="true">*</span> }
+          </label>
+          <ng-content select="[uiLabelEnd]" />
+        </div>
       }
       <input
         class="ti-input"
         [style.padding-left]="_prefixPadding()"
         [style.padding-right]="_revealable() ? '44px' : null"
         [id]="_inputId"
+        [attr.data-testid]="inputTestId() || null"
         [type]="_inputType()"
         [attr.inputmode]="inputmode() || (type() === 'tel' ? 'tel' : integer() ? 'numeric' : null)"
         [placeholder]="placeholder()"
@@ -5311,7 +5327,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#dc2626;margin-left:2px}.ti-prefixed{display:grid;grid-template-columns:minmax(0,1fr)}.ti-prefixed .ti-input{grid-row:var(--ti-input-row);grid-column:1}.ti-prefix{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;font-size:.875rem;line-height:1;color:#64748b;pointer-events:none}@media(max-width:480px){.ti-prefix{font-size:1rem}}.ti-disabled .ti-prefix{opacity:.5}.ti-reveal{grid-row:var(--ti-input-row);grid-column:1;justify-self:end;align-self:center;margin-right:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:#64748b;cursor:pointer}.ti-reveal:hover:not(:disabled){color:#1e293b;background:#f1f5f9}.ti-reveal:focus-visible{outline:2px solid #3b82f6;outline-offset:0}.ti-reveal:disabled{opacity:.5;cursor:not-allowed}@media(pointer:coarse),(max-width:480px){.ti-reveal{width:44px;height:44px;margin-right:0}}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#94a3b8}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#dc2626}@media(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"]
+			styles: [":host{display:block}.ti-field{display:flex;flex-direction:column;gap:6px}.ti-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.ti-label-row>[uiLabelEnd]{margin-left:auto}.ti-label{font-size:.8125rem;font-weight:600;color:#374151;line-height:1}.ti-required{color:#dc2626;margin-left:2px}.ti-prefixed{display:grid;grid-template-columns:minmax(0,1fr)}.ti-prefixed .ti-input{grid-row:var(--ti-input-row);grid-column:1}.ti-prefix{grid-row:var(--ti-input-row);grid-column:1;justify-self:start;align-self:center;margin-left:12px;font-size:.875rem;line-height:1;color:#64748b;pointer-events:none}@media(max-width:480px){.ti-prefix{font-size:1rem}}.ti-disabled .ti-prefix{opacity:.5}.ti-reveal{grid-row:var(--ti-input-row);grid-column:1;justify-self:end;align-self:center;margin-right:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:#64748b;cursor:pointer}.ti-reveal:hover:not(:disabled){color:#1e293b;background:#f1f5f9}.ti-reveal:focus-visible{outline:2px solid #3b82f6;outline-offset:0}.ti-reveal:disabled{opacity:.5;cursor:not-allowed}@media(pointer:coarse),(max-width:480px){.ti-reveal{width:44px;height:44px;margin-right:0}}.ti-input{width:100%;box-sizing:border-box;padding:9px 12px;font-size:.875rem;font-family:inherit;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}.ti-input::placeholder{color:#94a3b8}.ti-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.ti-input:read-only{background:#f8fafc;cursor:default}.ti-error .ti-input{border-color:#ef4444}.ti-error .ti-input:focus{box-shadow:0 0 0 3px #ef44441f}.ti-disabled .ti-input{opacity:.5;cursor:not-allowed}.ti-desc{margin:0;font-size:.75rem;line-height:1.4;color:#64748b}.ti-desc-error{color:#dc2626}@media(max-width:480px){.ti-input{font-size:1rem}}@media(pointer:coarse),(max-width:480px){.ti-input{min-height:44px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -5332,6 +5348,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		inputTestId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputTestId",
+				required: false
+			}]
+		}],
 		placeholder: [{
 			type: i0.Input,
 			args: [{
@@ -5987,6 +6011,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"inputTestId",
 						"placeholder",
 						"prefix",
 						"revealable",
@@ -17205,6 +17230,7 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"inputTestId",
 						"placeholder",
 						"prefix",
 						"revealable",
@@ -19349,6 +19375,7 @@ var BulkMessagePanelComponent = class BulkMessagePanelComponent {
 					inputs: [
 						"label",
 						"ariaLabel",
+						"inputTestId",
 						"placeholder",
 						"prefix",
 						"revealable",
@@ -24562,7 +24589,7 @@ var ListItemComponent = class ListItemComponent {
     </div>
   `,
 			isInline: true,
-			styles: ["ui-list-item{display:block}ui-list-item(.li-bordered){border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;background:var(--surface, #fff);margin-bottom:8px;&:last-child{margin-bottom:0}}.li-row{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s;ui-list-item(.li-bordered) &{border-bottom:none}}.li-row:last-child{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-body.li-body--static{cursor:default}.li-row [list-item-action],.li-row [li-action]{flex-shrink:0;align-self:center}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px}.li-icon--slate{background:#f1f5f9;color:#475569}.li-icon--amber{background:#fef3c7;color:#b45309}.li-icon--orange{background:#ffedd5;color:#c2410c}.li-icon--red{background:#fee2e2;color:#b91c1c}.li-icon--blue{background:#dbeafe;color:#1d4ed8}.li-icon--green{background:#dcfce7;color:#15803d}.li-icon--purple{background:#f3e8ff;color:#7e22ce}.li-icon--teal{background:#ccfbf1;color:#0f766e}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:4px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--text-primary, #0f172a)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-direction:column;gap:2px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary, #64748b)}.li-detail{display:flex;align-items:center;gap:6px;min-width:0}.li-detail-icon{flex:0 0 auto;color:#94a3b8}.li-detail--warning,.li-detail--warning .li-detail-icon{color:#b45309}.li-detail--danger,.li-detail--danger .li-detail-icon{color:#b91c1c}.li-row--wrap .li-detail-text{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"],
+			styles: ["ui-list-item{display:block}ui-list-item.li-bordered{border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;background:var(--surface, #fff);box-shadow:0 1px 2px #0f172a0a;margin-bottom:8px;transition:border-color .15s ease,box-shadow .15s ease}ui-list-item.li-bordered:last-child{margin-bottom:0}ui-list-item.li-bordered:hover{border-color:#cbd5e1;box-shadow:0 2px 6px #0f172a12}@media(prefers-reduced-motion:reduce){ui-list-item.li-bordered{transition:none}}.li-row{display:flex;align-items:flex-start;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s}.li-row:last-child{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}ui-list-item.li-bordered .li-row{border-bottom:none;padding:14px 16px}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-body.li-body--static{cursor:default}.li-row [list-item-action],.li-row [li-action]{flex-shrink:0;align-self:center}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px}.li-icon--slate{background:#f1f5f9;color:#475569}.li-icon--amber{background:#fef3c7;color:#b45309}.li-icon--orange{background:#ffedd5;color:#c2410c}.li-icon--red{background:#fee2e2;color:#b91c1c}.li-icon--blue{background:#dbeafe;color:#1d4ed8}.li-icon--green{background:#dcfce7;color:#15803d}.li-icon--purple{background:#f3e8ff;color:#7e22ce}.li-icon--teal{background:#ccfbf1;color:#0f766e}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:6px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.9375rem;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--text-primary, #0f172a)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-direction:column;gap:3px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary, #64748b)}.li-detail{display:flex;align-items:center;gap:6px;min-width:0}.li-detail-icon{flex:0 0 auto;color:#94a3b8}.li-detail--warning,.li-detail--warning .li-detail-icon{color:#b45309}.li-detail--danger,.li-detail--danger .li-detail-icon{color:#b91c1c}.li-row--wrap .li-detail-text{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"],
 			dependencies: [{
 				kind: "component",
 				type: BadgeComponent,
@@ -24662,7 +24689,7 @@ i0.ɵɵngDeclareClassMetadata({
 
     </div>
   `,
-			styles: ["ui-list-item{display:block}ui-list-item(.li-bordered){border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;background:var(--surface, #fff);margin-bottom:8px;&:last-child{margin-bottom:0}}.li-row{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s;ui-list-item(.li-bordered) &{border-bottom:none}}.li-row:last-child{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-body.li-body--static{cursor:default}.li-row [list-item-action],.li-row [li-action]{flex-shrink:0;align-self:center}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px}.li-icon--slate{background:#f1f5f9;color:#475569}.li-icon--amber{background:#fef3c7;color:#b45309}.li-icon--orange{background:#ffedd5;color:#c2410c}.li-icon--red{background:#fee2e2;color:#b91c1c}.li-icon--blue{background:#dbeafe;color:#1d4ed8}.li-icon--green{background:#dcfce7;color:#15803d}.li-icon--purple{background:#f3e8ff;color:#7e22ce}.li-icon--teal{background:#ccfbf1;color:#0f766e}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:4px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--text-primary, #0f172a)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-direction:column;gap:2px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary, #64748b)}.li-detail{display:flex;align-items:center;gap:6px;min-width:0}.li-detail-icon{flex:0 0 auto;color:#94a3b8}.li-detail--warning,.li-detail--warning .li-detail-icon{color:#b45309}.li-detail--danger,.li-detail--danger .li-detail-icon{color:#b91c1c}.li-row--wrap .li-detail-text{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"]
+			styles: ["ui-list-item{display:block}ui-list-item.li-bordered{border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;background:var(--surface, #fff);box-shadow:0 1px 2px #0f172a0a;margin-bottom:8px;transition:border-color .15s ease,box-shadow .15s ease}ui-list-item.li-bordered:last-child{margin-bottom:0}ui-list-item.li-bordered:hover{border-color:#cbd5e1;box-shadow:0 2px 6px #0f172a12}@media(prefers-reduced-motion:reduce){ui-list-item.li-bordered{transition:none}}.li-row{display:flex;align-items:flex-start;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border, #e2e8f0);transition:background .12s}.li-row:last-child{border-bottom:none}.li-row:hover{background:var(--surface-hover, #f8fafc)}ui-list-item.li-bordered .li-row{border-bottom:none;padding:14px 16px}.li-row.li-row--highlighted{background:#f0fdf4}.li-row.li-row--highlighted:hover{background:#dcfce7}.li-row.li-row--static:hover{background:transparent}.li-row.li-row--static.li-row--highlighted,.li-row.li-row--static.li-row--highlighted:hover{background:#f0fdf4}.li-body.li-body--static{cursor:default}.li-row [list-item-action],.li-row [li-action]{flex-shrink:0;align-self:center}.li-input{margin-top:3px;flex-shrink:0;accent-color:#16a34a;width:1rem;height:1rem;cursor:pointer}.li-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px}.li-icon--slate{background:#f1f5f9;color:#475569}.li-icon--amber{background:#fef3c7;color:#b45309}.li-icon--orange{background:#ffedd5;color:#c2410c}.li-icon--red{background:#fee2e2;color:#b91c1c}.li-icon--blue{background:#dbeafe;color:#1d4ed8}.li-icon--green{background:#dcfce7;color:#15803d}.li-icon--purple{background:#f3e8ff;color:#7e22ce}.li-icon--teal{background:#ccfbf1;color:#0f766e}.li-body{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:6px}.li-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.li-title{font-size:.9375rem;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--text-primary, #0f172a)}.li-row--wrap .li-title{min-width:0;word-break:break-word;overflow-wrap:anywhere}.li-details{display:flex;flex-direction:column;gap:3px;font-size:.8125rem;line-height:1.4;color:var(--text-secondary, #64748b)}.li-detail{display:flex;align-items:center;gap:6px;min-width:0}.li-detail-icon{flex:0 0 auto;color:#94a3b8}.li-detail--warning,.li-detail--warning .li-detail-icon{color:#b45309}.li-detail--danger,.li-detail--danger .li-detail-icon{color:#b91c1c}.li-row--wrap .li-detail-text{min-width:0;word-break:break-word;overflow-wrap:anywhere}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -25346,7 +25373,7 @@ var ListComponent = class ListComponent {
     }
   `,
 			isInline: true,
-			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav>.ul-row{padding-inline-end:16px}.ul-item--nav:hover .ul-chevron{color:#0f172a}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none}}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
+			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav:hover:has(>.ul-row>.ul-content>ui-list-item.li-bordered){background:transparent}.ul-item--nav>.ul-row{padding-inline-end:8px}.ul-item--nav:hover .ul-chevron{color:#0f172a;transform:translate(2px)}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease,transform .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none;transform:none!important}}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -25474,7 +25501,7 @@ i0.ɵɵngDeclareClassMetadata({
       <div class="ul-sr" role="status" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
     }
   `,
-			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav>.ul-row{padding-inline-end:16px}.ul-item--nav:hover .ul-chevron{color:#0f172a}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none}}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav:hover:has(>.ul-row>.ul-content>ui-list-item.li-bordered){background:transparent}.ul-item--nav>.ul-row{padding-inline-end:8px}.ul-item--nav:hover .ul-chevron{color:#0f172a;transform:translate(2px)}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease,transform .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none;transform:none!important}}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -33509,7 +33536,7 @@ var DetailCardComponent = class DetailCardComponent {
 			},
 			ngImport: i0,
 			template: `
-    <div class="dc" [class.dc-fill]="fill()" [class.dc-has-text-color]="!!textColor()" [class.dc-selectable]="selectable()" [class.dc-selected]="selectable() && selected()"
+    <div class="dc" [class.dc-fill]="fill()" [class.dc-has-text-color]="!!textColor()" [class.dc-has-bg]="!!((selectable() && selected() && selectedBackground()) || background())" [class.dc-selectable]="selectable()" [class.dc-selected]="selectable() && selected()"
          [style.outline-color]="selectable() && selected() ? selectedColor() : null"
          [style.background]="(selectable() && selected() && selectedBackground()) || background() || null" (click)="onCardClick($event)"
          [style.color]="textColor() || null" [style.--dc-text]="textColor() || null">
@@ -33554,7 +33581,7 @@ var DetailCardComponent = class DetailCardComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-has-bg .dc-header.open{border-bottom-color:#94a3b859}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ButtonComponent,
@@ -33609,7 +33636,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.aria-label]": "groupLabel()"
 			},
 			template: `
-    <div class="dc" [class.dc-fill]="fill()" [class.dc-has-text-color]="!!textColor()" [class.dc-selectable]="selectable()" [class.dc-selected]="selectable() && selected()"
+    <div class="dc" [class.dc-fill]="fill()" [class.dc-has-text-color]="!!textColor()" [class.dc-has-bg]="!!((selectable() && selected() && selectedBackground()) || background())" [class.dc-selectable]="selectable()" [class.dc-selected]="selectable() && selected()"
          [style.outline-color]="selectable() && selected() ? selectedColor() : null"
          [style.background]="(selectable() && selected() && selectedBackground()) || background() || null" (click)="onCardClick($event)"
          [style.color]="textColor() || null" [style.--dc-text]="textColor() || null">
@@ -33653,7 +33680,7 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     </div>
   `,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-has-bg .dc-header.open{border-bottom-color:#94a3b859}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -33951,6 +33978,697 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var BoardCardDirective = class BoardCardDirective {
+	constructor() {
+		this.template = inject(TemplateRef);
+	}
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BoardCardDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: BoardCardDirective,
+			isStandalone: true,
+			selector: "ng-template[uiBoardCard]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BoardCardDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[uiBoardCard]",
+			standalone: true
+		}]
+	}]
+});
+const DOT_COLORS = {
+	blue: "#3b82f6",
+	cyan: "#06b6d4",
+	green: "#22c55e",
+	teal: "#14b8a6",
+	amber: "#f59e0b",
+	orange: "#f97316",
+	red: "#ef4444",
+	pink: "#ec4899",
+	slate: "#64748b",
+	gray: "#6b7280"
+};
+var BoardComponent = class BoardComponent {
+	constructor() {
+		this.columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+		this.itemKey = input.required(...ngDevMode ? [{ debugName: "itemKey" }] : /* istanbul ignore next */ []);
+		this.itemLabel = input.required(...ngDevMode ? [{ debugName: "itemLabel" }] : /* istanbul ignore next */ []);
+		this.cardActions = input([], ...ngDevMode ? [{ debugName: "cardActions" }] : /* istanbul ignore next */ []);
+		this.loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.error = input(null, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.readOnly = input(false, ...ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []);
+		this.moveDisabled = input(false, ...ngDevMode ? [{ debugName: "moveDisabled" }] : /* istanbul ignore next */ []);
+		this.canMove = input(null, ...ngDevMode ? [{ debugName: "canMove" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("Board", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.emptyMessage = input("Nothing to show.", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+		this.emptyColumnText = input("Nothing here yet", ...ngDevMode ? [{ debugName: "emptyColumnText" }] : /* istanbul ignore next */ []);
+		this.itemNoun = input("item", ...ngDevMode ? [{ debugName: "itemNoun" }] : /* istanbul ignore next */ []);
+		this.itemNounPlural = input("items", ...ngDevMode ? [{ debugName: "itemNounPlural" }] : /* istanbul ignore next */ []);
+		this.retryLabel = input("Retry", ...ngDevMode ? [{ debugName: "retryLabel" }] : /* istanbul ignore next */ []);
+		this.cardClick = output();
+		this.cardAction = output();
+		this.itemMove = output();
+		this.retry = output();
+		this.card = contentChild(BoardCardDirective, ...ngDevMode ? [{ debugName: "card" }] : /* istanbul ignore next */ []);
+		this.cols = linkedSignal(() => this.columns(), ...ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []);
+		this.overKey = signal(null, ...ngDevMode ? [{ debugName: "overKey" }] : /* istanbul ignore next */ []);
+		this.draggingKey = signal(null, ...ngDevMode ? [{ debugName: "draggingKey" }] : /* istanbul ignore next */ []);
+		this.announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
+		this.host = inject(ElementRef);
+		this.drag = null;
+		this.skeletonColumns = computed(() => Array.from({ length: Math.max(this.columns().length, 4) }, (_, i) => i), ...ngDevMode ? [{ debugName: "skeletonColumns" }] : /* istanbul ignore next */ []);
+		this.canDrag = computed(() => !this.readOnly() && !this.moveDisabled(), ...ngDevMode ? [{ debugName: "canDrag" }] : /* istanbul ignore next */ []);
+		this.canMoveAny = this.canDrag;
+	}
+	dot(color) {
+		return color && DOT_COLORS[color] || color || "#3b82f6";
+	}
+	onDragStart(event, item, col) {
+		if (!this.canDrag()) {
+			event.preventDefault();
+			return;
+		}
+		this.drag = {
+			item,
+			from: col.key
+		};
+		this.draggingKey.set(this.itemKey()(item));
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = "move";
+			event.dataTransfer.setData("text/plain", this.itemKey()(item));
+		}
+	}
+	onDragEnd() {
+		this.drag = null;
+		this.draggingKey.set(null);
+		this.overKey.set(null);
+	}
+	onDragOver(event, col) {
+		if (!this.drag || !this.accepts(this.drag.item, this.drag.from, col)) {
+			if (event.dataTransfer) event.dataTransfer.dropEffect = "none";
+			return;
+		}
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+		if (this.overKey() !== col.key) this.overKey.set(col.key);
+	}
+	onDragLeave(event, col) {
+		const related = event.relatedTarget;
+		if ((!related || !event.currentTarget.contains(related)) && this.overKey() === col.key) this.overKey.set(null);
+	}
+	onDrop(event, col) {
+		event.preventDefault();
+		const drag = this.drag;
+		this.onDragEnd();
+		if (drag && this.accepts(drag.item, drag.from, col)) this.move(drag.item, drag.from, col.key);
+	}
+	onCardKey(event, item, col) {
+		if (event.target !== event.currentTarget) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.cardClick.emit(item);
+			return;
+		}
+		if (!event.shiftKey || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		event.preventDefault();
+		if (!this.canDrag()) return;
+		const cols = this.cols();
+		const step = event.key === "ArrowRight" ? 1 : -1;
+		for (let i = cols.findIndex((c) => c.key === col.key) + step; i >= 0 && i < cols.length; i += step) if (this.accepts(item, col.key, cols[i])) {
+			this.move(item, col.key, cols[i].key);
+			this.announcement.set(`${this.itemLabel()(item)} moved to ${cols[i].label}`);
+			const key = this.itemKey()(item);
+			setTimeout(() => {
+				const cards = this.host.nativeElement.querySelectorAll(".ub-card");
+				Array.from(cards).find((c) => c.dataset["boardKey"] === key)?.focus();
+			});
+			return;
+		}
+	}
+	accepts(item, from, to) {
+		if (from === to.key || to.dropDisabled || this.moveDisabled() || this.readOnly()) return false;
+		const rule = this.canMove();
+		return !rule || rule(item, from, to.key);
+	}
+	move(item, from, to) {
+		const before = this.cols();
+		const key = this.itemKey()(item);
+		this.cols.set(before.map((c) => {
+			if (c.key === from) return {
+				...c,
+				items: c.items.filter((i) => this.itemKey()(i) !== key)
+			};
+			if (c.key === to) return {
+				...c,
+				items: [item, ...c.items]
+			};
+			return c;
+		}));
+		this.itemMove.emit({
+			item,
+			from,
+			to,
+			revert: () => this.cols.set(before)
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BoardComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: BoardComponent,
+			isStandalone: true,
+			selector: "ui-board",
+			inputs: {
+				columns: {
+					classPropertyName: "columns",
+					publicName: "columns",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				itemKey: {
+					classPropertyName: "itemKey",
+					publicName: "itemKey",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				itemLabel: {
+					classPropertyName: "itemLabel",
+					publicName: "itemLabel",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				cardActions: {
+					classPropertyName: "cardActions",
+					publicName: "cardActions",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				error: {
+					classPropertyName: "error",
+					publicName: "error",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				readOnly: {
+					classPropertyName: "readOnly",
+					publicName: "readOnly",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				moveDisabled: {
+					classPropertyName: "moveDisabled",
+					publicName: "moveDisabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				canMove: {
+					classPropertyName: "canMove",
+					publicName: "canMove",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyMessage: {
+					classPropertyName: "emptyMessage",
+					publicName: "emptyMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyColumnText: {
+					classPropertyName: "emptyColumnText",
+					publicName: "emptyColumnText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				itemNoun: {
+					classPropertyName: "itemNoun",
+					publicName: "itemNoun",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				itemNounPlural: {
+					classPropertyName: "itemNounPlural",
+					publicName: "itemNounPlural",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				retryLabel: {
+					classPropertyName: "retryLabel",
+					publicName: "retryLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				cardClick: "cardClick",
+				cardAction: "cardAction",
+				itemMove: "itemMove",
+				retry: "retry"
+			},
+			queries: [{
+				propertyName: "card",
+				first: true,
+				predicate: BoardCardDirective,
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    <!-- The card's "⋮" menu. Place it in the card's top row: <ng-container [ngTemplateOutlet]="menu" [ngTemplateOutletContext]="{ $implicit: item }" /> -->
+    <ng-template #menuTpl let-item>
+      @if (cardActions().length) {
+        <div class="ub-card__top-right" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
+          <ui-more-menu [actions]="cardActions()" [ariaLabel]="'Actions for ' + itemLabel()(item)"
+                        (actionClick)="cardAction.emit({ type: $event, item })" />
+        </div>
+      }
+    </ng-template>
+    <div class="ub-wrap">
+      @if (loading()) {
+        <div class="ub-skeleton" role="status" [attr.aria-label]="'Loading ' + ariaLabel()">
+          @for (n of skeletonColumns(); track n) {
+            <div class="ub-col-skeleton" aria-hidden="true">
+              <div class="ub-col-skeleton__header"></div>
+              @for (c of [1, 2, 3]; track c) { <div class="ub-col-skeleton__card"></div> }
+            </div>
+          }
+        </div>
+      } @else if (error()) {
+        <div class="ub-message" role="alert">
+          <p>{{ error() }}</p>
+          <ui-button variant="secondary" size="sm" (click)="retry.emit()">{{ retryLabel() }}</ui-button>
+        </div>
+      } @else if (cols().length === 0) {
+        <div class="ub-message" role="status"><p>{{ emptyMessage() }}</p></div>
+      } @else {
+        <div class="ub-board" role="region" [attr.aria-label]="ariaLabel()">
+          @for (col of cols(); track col.key) {
+            <div class="ub-col"
+                 [class.ub-col--over]="overKey() === col.key"
+                 [class.ub-col--success]="col.tone === 'success'"
+                 role="group"
+                 [attr.aria-label]="col.label + ' — ' + col.items.length + ' ' + (col.items.length === 1 ? itemNoun() : itemNounPlural())"
+                 (dragover)="onDragOver($event, col)"
+                 (dragleave)="onDragLeave($event, col)"
+                 (drop)="onDrop($event, col)">
+              <div class="ub-col__header">
+                <div class="ub-col__title">
+                  <span class="ub-col__dot" [style.background]="dot(col.color)" aria-hidden="true"></span>
+                  <span class="ub-col__label">{{ col.label }}</span>
+                  <span class="ub-col__count" aria-hidden="true">{{ col.items.length }}</span>
+                </div>
+                @if (col.summary) {
+                  <div class="ub-col__summary" [attr.aria-label]="col.summaryLabel || col.summary">{{ col.summary }}</div>
+                }
+              </div>
+              <div class="ub-col__cards" role="list">
+                @for (item of col.items; track itemKey()(item)) {
+                  <div class="ub-card"
+                       [class.ub-card--success]="col.tone === 'success'"
+                       [class.ub-card--dragging]="draggingKey() === itemKey()(item)"
+                       role="listitem"
+                       tabindex="0"
+                       [attr.data-board-key]="itemKey()(item)"
+                       [attr.aria-label]="itemLabel()(item)"
+                       [attr.aria-keyshortcuts]="canMoveAny() ? 'Shift+ArrowLeft Shift+ArrowRight' : null"
+                       [attr.draggable]="canDrag() ? 'true' : null"
+                       (dragstart)="onDragStart($event, item, col)"
+                       (dragend)="onDragEnd()"
+                       (click)="cardClick.emit(item)"
+                       (keydown)="onCardKey($event, item, col)">
+                    @if (card(); as tpl) {
+                      <ng-container [ngTemplateOutlet]="tpl.template" [ngTemplateOutletContext]="{ $implicit: item, column: col, menu: menuTpl }" />
+                    }
+                  </div>
+                }
+                @if (col.items.length === 0) {
+                  <div class="ub-col__empty" role="status">{{ col.emptyText || emptyColumnText() }}</div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+        <div class="ub-sr-only" role="status" aria-live="polite">{{ announcement() }}</div>
+      }
+    </div>
+  `,
+			isInline: true,
+			styles: ["ui-board{display:flex;flex-direction:column;flex:1;min-height:0}.ub-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.ub-board{display:flex;gap:12px;padding:0 0 16px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:flex-start}.ub-board::-webkit-scrollbar{height:6px}.ub-board::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.ub-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ub-col{flex:0 0 280px;min-width:280px;max-width:280px;display:flex;flex-direction:column;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;max-height:calc(100vh - 200px);transition:border-color .15s,background .15s}.ub-col--over{border-color:#3b82f6;background:#eff6ff}.ub-col--success{background:#f0fdf4;border-color:#bbf7d0}.ub-col--success.ub-col--over{border-color:#22c55e;background:#dcfce7}.ub-col__header{padding:12px 14px 10px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.ub-col__title{display:flex;align-items:center;gap:7px;margin-bottom:2px}.ub-col__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.ub-col__label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-col__count{font-size:11px;font-weight:600;color:#fff;background:#94a3b8;border-radius:10px;padding:1px 7px;flex-shrink:0}.ub-col__summary{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.ub-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}.ub-col__cards::-webkit-scrollbar{width:4px}.ub-col__cards::-webkit-scrollbar-track{background:transparent}.ub-col__cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.ub-col__empty{text-align:center;padding:24px 12px;color:#94a3b8;font-size:12px;border:1.5px dashed #e2e8f0;border-radius:8px;margin:4px 0}.ub-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .12s,border-color .12s,opacity .12s,transform .12s}.ub-card[draggable=true]{cursor:grab}.ub-card[draggable=true]:active{cursor:grabbing}.ub-card:hover{border-color:#94a3b8;box-shadow:0 2px 8px #00000012}.ub-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-card--dragging{opacity:.4;transform:scale(.98);box-shadow:none}.ub-card--success{border-left:3px solid #22c55e}.ub-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.ub-card__title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;flex:1;min-width:0;word-break:break-word}.ub-card:hover .ub-card__title{color:#2563eb}.ub-card__top-right{flex-shrink:0;margin-top:-2px}.ub-card__status-row{margin-bottom:5px}.ub-card__contact{font-size:12px;color:#475569;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__property{font-size:11px;color:#94a3b8;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__next-step{display:flex;align-items:flex-start;gap:4px;font-size:11px;color:#64748b;margin-bottom:6px;line-height:1.4}.ub-card__next-step svg{flex-shrink:0;margin-top:1px;color:#94a3b8}.ub-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9}.ub-card__value{font-size:12px;font-weight:700;color:#0f172a}.ub-card__activity{font-size:11px;color:#94a3b8}.ub-card__activity--stale{color:#d97706;font-weight:600}.ub-skeleton{display:flex;gap:12px;padding-bottom:16px}.ub-col-skeleton{flex:0 0 280px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.ub-col-skeleton__header,.ub-col-skeleton__card{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:ub-shimmer 1.4s infinite}.ub-col-skeleton__header{height:32px;border-radius:6px}.ub-col-skeleton__card{height:90px;border-radius:8px}@keyframes ub-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ub-col-skeleton__header,.ub-col-skeleton__card{animation:none}}.ub-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px;color:#64748b;font-size:14px;text-align:center}.ub-message p{margin:0}.ub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.ub-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;align-items:stretch}.ub-col{flex:none;min-width:0;max-width:100%;width:100%;max-height:none}.ub-skeleton{flex-direction:column}.ub-col-skeleton{flex:none;width:100%}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"variant",
+						"routerLink",
+						"queryParams",
+						"fragment",
+						"state",
+						"href",
+						"target",
+						"rel",
+						"shortLabel",
+						"shortBelow",
+						"color",
+						"active",
+						"size",
+						"type",
+						"disabled",
+						"loading",
+						"fullWidth",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaPressed",
+						"ariaDescribedBy",
+						"modal-footer-left",
+						"modal-footer-right"
+					]
+				},
+				{
+					kind: "component",
+					type: MoreMenuComponent,
+					selector: "ui-more-menu",
+					inputs: ["ariaLabel", "actions"],
+					outputs: ["actionClick"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BoardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-board",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				ButtonComponent,
+				MoreMenuComponent
+			],
+			template: `
+    <!-- The card's "⋮" menu. Place it in the card's top row: <ng-container [ngTemplateOutlet]="menu" [ngTemplateOutletContext]="{ $implicit: item }" /> -->
+    <ng-template #menuTpl let-item>
+      @if (cardActions().length) {
+        <div class="ub-card__top-right" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
+          <ui-more-menu [actions]="cardActions()" [ariaLabel]="'Actions for ' + itemLabel()(item)"
+                        (actionClick)="cardAction.emit({ type: $event, item })" />
+        </div>
+      }
+    </ng-template>
+    <div class="ub-wrap">
+      @if (loading()) {
+        <div class="ub-skeleton" role="status" [attr.aria-label]="'Loading ' + ariaLabel()">
+          @for (n of skeletonColumns(); track n) {
+            <div class="ub-col-skeleton" aria-hidden="true">
+              <div class="ub-col-skeleton__header"></div>
+              @for (c of [1, 2, 3]; track c) { <div class="ub-col-skeleton__card"></div> }
+            </div>
+          }
+        </div>
+      } @else if (error()) {
+        <div class="ub-message" role="alert">
+          <p>{{ error() }}</p>
+          <ui-button variant="secondary" size="sm" (click)="retry.emit()">{{ retryLabel() }}</ui-button>
+        </div>
+      } @else if (cols().length === 0) {
+        <div class="ub-message" role="status"><p>{{ emptyMessage() }}</p></div>
+      } @else {
+        <div class="ub-board" role="region" [attr.aria-label]="ariaLabel()">
+          @for (col of cols(); track col.key) {
+            <div class="ub-col"
+                 [class.ub-col--over]="overKey() === col.key"
+                 [class.ub-col--success]="col.tone === 'success'"
+                 role="group"
+                 [attr.aria-label]="col.label + ' — ' + col.items.length + ' ' + (col.items.length === 1 ? itemNoun() : itemNounPlural())"
+                 (dragover)="onDragOver($event, col)"
+                 (dragleave)="onDragLeave($event, col)"
+                 (drop)="onDrop($event, col)">
+              <div class="ub-col__header">
+                <div class="ub-col__title">
+                  <span class="ub-col__dot" [style.background]="dot(col.color)" aria-hidden="true"></span>
+                  <span class="ub-col__label">{{ col.label }}</span>
+                  <span class="ub-col__count" aria-hidden="true">{{ col.items.length }}</span>
+                </div>
+                @if (col.summary) {
+                  <div class="ub-col__summary" [attr.aria-label]="col.summaryLabel || col.summary">{{ col.summary }}</div>
+                }
+              </div>
+              <div class="ub-col__cards" role="list">
+                @for (item of col.items; track itemKey()(item)) {
+                  <div class="ub-card"
+                       [class.ub-card--success]="col.tone === 'success'"
+                       [class.ub-card--dragging]="draggingKey() === itemKey()(item)"
+                       role="listitem"
+                       tabindex="0"
+                       [attr.data-board-key]="itemKey()(item)"
+                       [attr.aria-label]="itemLabel()(item)"
+                       [attr.aria-keyshortcuts]="canMoveAny() ? 'Shift+ArrowLeft Shift+ArrowRight' : null"
+                       [attr.draggable]="canDrag() ? 'true' : null"
+                       (dragstart)="onDragStart($event, item, col)"
+                       (dragend)="onDragEnd()"
+                       (click)="cardClick.emit(item)"
+                       (keydown)="onCardKey($event, item, col)">
+                    @if (card(); as tpl) {
+                      <ng-container [ngTemplateOutlet]="tpl.template" [ngTemplateOutletContext]="{ $implicit: item, column: col, menu: menuTpl }" />
+                    }
+                  </div>
+                }
+                @if (col.items.length === 0) {
+                  <div class="ub-col__empty" role="status">{{ col.emptyText || emptyColumnText() }}</div>
+                }
+              </div>
+            </div>
+          }
+        </div>
+        <div class="ub-sr-only" role="status" aria-live="polite">{{ announcement() }}</div>
+      }
+    </div>
+  `,
+			styles: ["ui-board{display:flex;flex-direction:column;flex:1;min-height:0}.ub-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.ub-board{display:flex;gap:12px;padding:0 0 16px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:flex-start}.ub-board::-webkit-scrollbar{height:6px}.ub-board::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.ub-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ub-col{flex:0 0 280px;min-width:280px;max-width:280px;display:flex;flex-direction:column;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;max-height:calc(100vh - 200px);transition:border-color .15s,background .15s}.ub-col--over{border-color:#3b82f6;background:#eff6ff}.ub-col--success{background:#f0fdf4;border-color:#bbf7d0}.ub-col--success.ub-col--over{border-color:#22c55e;background:#dcfce7}.ub-col__header{padding:12px 14px 10px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.ub-col__title{display:flex;align-items:center;gap:7px;margin-bottom:2px}.ub-col__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.ub-col__label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-col__count{font-size:11px;font-weight:600;color:#fff;background:#94a3b8;border-radius:10px;padding:1px 7px;flex-shrink:0}.ub-col__summary{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.ub-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}.ub-col__cards::-webkit-scrollbar{width:4px}.ub-col__cards::-webkit-scrollbar-track{background:transparent}.ub-col__cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.ub-col__empty{text-align:center;padding:24px 12px;color:#94a3b8;font-size:12px;border:1.5px dashed #e2e8f0;border-radius:8px;margin:4px 0}.ub-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .12s,border-color .12s,opacity .12s,transform .12s}.ub-card[draggable=true]{cursor:grab}.ub-card[draggable=true]:active{cursor:grabbing}.ub-card:hover{border-color:#94a3b8;box-shadow:0 2px 8px #00000012}.ub-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-card--dragging{opacity:.4;transform:scale(.98);box-shadow:none}.ub-card--success{border-left:3px solid #22c55e}.ub-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.ub-card__title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;flex:1;min-width:0;word-break:break-word}.ub-card:hover .ub-card__title{color:#2563eb}.ub-card__top-right{flex-shrink:0;margin-top:-2px}.ub-card__status-row{margin-bottom:5px}.ub-card__contact{font-size:12px;color:#475569;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__property{font-size:11px;color:#94a3b8;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__next-step{display:flex;align-items:flex-start;gap:4px;font-size:11px;color:#64748b;margin-bottom:6px;line-height:1.4}.ub-card__next-step svg{flex-shrink:0;margin-top:1px;color:#94a3b8}.ub-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9}.ub-card__value{font-size:12px;font-weight:700;color:#0f172a}.ub-card__activity{font-size:11px;color:#94a3b8}.ub-card__activity--stale{color:#d97706;font-weight:600}.ub-skeleton{display:flex;gap:12px;padding-bottom:16px}.ub-col-skeleton{flex:0 0 280px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.ub-col-skeleton__header,.ub-col-skeleton__card{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:ub-shimmer 1.4s infinite}.ub-col-skeleton__header{height:32px;border-radius:6px}.ub-col-skeleton__card{height:90px;border-radius:8px}@keyframes ub-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ub-col-skeleton__header,.ub-col-skeleton__card{animation:none}}.ub-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px;color:#64748b;font-size:14px;text-align:center}.ub-message p{margin:0}.ub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.ub-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;align-items:stretch}.ub-col{flex:none;min-width:0;max-width:100%;width:100%;max-height:none}.ub-skeleton{flex-direction:column}.ub-col-skeleton{flex:none;width:100%}}\n"]
+		}]
+	}],
+	propDecorators: {
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: true
+			}]
+		}],
+		itemKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemKey",
+				required: true
+			}]
+		}],
+		itemLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemLabel",
+				required: true
+			}]
+		}],
+		cardActions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cardActions",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		readOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readOnly",
+				required: false
+			}]
+		}],
+		moveDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveDisabled",
+				required: false
+			}]
+		}],
+		canMove: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canMove",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		emptyColumnText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyColumnText",
+				required: false
+			}]
+		}],
+		itemNoun: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemNoun",
+				required: false
+			}]
+		}],
+		itemNounPlural: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemNounPlural",
+				required: false
+			}]
+		}],
+		retryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "retryLabel",
+				required: false
+			}]
+		}],
+		cardClick: [{
+			type: i0.Output,
+			args: ["cardClick"]
+		}],
+		cardAction: [{
+			type: i0.Output,
+			args: ["cardAction"]
+		}],
+		itemMove: [{
+			type: i0.Output,
+			args: ["itemMove"]
+		}],
+		retry: [{
+			type: i0.Output,
+			args: ["retry"]
+		}],
+		card: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => BoardCardDirective), { isSignal: true }]
+		}]
+	}
+});
 let nextId = 0;
 var ReadonlyFieldsetComponent = class ReadonlyFieldsetComponent {
 	constructor() {
@@ -37781,6 +38499,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_PASSWORD_RULES, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SectionHeaderComponent, SelectComponent, ShowComponent, SidePanelComponent, SignaturePadComponent, SkeletonComponent, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, buildDefaultSchedule, builtInActionIcon, businessTimeOptions, createFieldReveal, decodeFilterValues, digitsOnly, downloadBlob, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatAddress, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, normalizeHexColor, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours };
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_PASSWORD_RULES, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SectionHeaderComponent, SelectComponent, ShowComponent, SidePanelComponent, SignaturePadComponent, SkeletonComponent, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, buildDefaultSchedule, builtInActionIcon, businessTimeOptions, createFieldReveal, decodeFilterValues, digitsOnly, downloadBlob, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatAddress, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, normalizeHexColor, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map