@blukavantui/community 1.0.1 → 1.2.0

package/dist/styles.css

@@ -2410,6 +2410,14 @@ The base shape remains visible when the animated overlay is removed. */
   -servicestudio-height: 20px;
 }
 
+/* The opt-in native motion adapter owns the shimmer. Avoid a second legacy
+wave, including when the adapter is Reduced or Off. Removing the adapter
+restores the existing IsAnimated behavior without changing its contract. */
+.blu-skeleton[data-blu-native-motion="loading-skeleton"]::after {
+  animation: none !important;
+  display: none !important;
+}
+
 /* Font loading is headless; the scope supplies shared body and heading tokens. */
 .blu-font-provider-block .blu-component-preview {display:none;}
 [data-blu-font-scope] :is(h1,h2,h3,h4,h5,h6) {font-family:var(--blu-font-heading-family,var(--blu-font-family,inherit));}
@@ -4523,7 +4531,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker [hidden],.blu-picker__dialog [hidden] {display:none!important;}
 .blu-picker__fields {display:flex;flex-wrap:wrap;gap:12px;}
 .blu-picker__field {flex:1 1 180px;min-width:0;}
-.blu-picker__field label,.blu-picker__select-field>span {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
+.blu-picker__field label,.blu-picker__select-caption {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
 .blu-picker__input {display:block;width:100%;min-width:0;min-height:42px;padding:9px 11px;border:1px solid var(--bluui-control-border,#69788d);border-radius:9px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:inherit;line-height:1.4;}
 .blu-picker__field-control {position:relative;}
 .blu-picker__field-control>.blu-picker__input {padding-right:38px;}
@@ -4546,7 +4554,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker__dialog::backdrop {background:transparent;pointer-events:none;}
 .blu-picker__dialog-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
 .blu-picker__dialog-head h2 {font-size:16px;line-height:1.4;font-family:var(--blu-font-heading-family,inherit);margin:0;overflow-wrap:anywhere;}
-.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 72px 32px;align-items:end;gap:6px;margin-top:0;}
+.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 88px 32px;align-items:end;gap:6px;margin-top:0;}
 .blu-picker__calendar-nav>.blu-picker__button {height:36px;padding:2px;font-size:22px;}
 .blu-picker__select-field {min-width:0;}
 .blu-picker__caption {font-size:15px;text-align:center;margin:16px 0 8px;}
@@ -4571,8 +4579,8 @@ Keep bulk commands together in a wrapping row between the panels. */
 /* Compact popup controls; editable text stays at 16px to avoid iOS focus zoom. */
 .blu-picker__dialog .blu-picker__input {min-height:36px;padding:5px 7px;font-size:16px;line-height:1.2;}
 .blu-picker__dialog .blu-picker__button {min-height:34px;min-width:32px;padding:5px 9px;font-size:13px;line-height:1.25;}
-.blu-picker__dialog .blu-picker__select-field>span {font-size:11px;margin-bottom:2px;}
-.blu-picker__calendar-nav .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
+.blu-picker__dialog .blu-picker__select-caption {font-size:11px;margin-bottom:2px;}
+.blu-picker__calendar-nav .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog .blu-picker__error {margin-top:4px;font-size:12px;line-height:1.3;}
 @media(pointer:coarse){
  .blu-picker__field-control>.blu-picker__input {font-size:16px;min-height:44px;}
@@ -4589,7 +4597,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker__dialog[data-compact=true] .blu-picker__calendar td {height:24px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__day {min-height:24px;padding:3px 0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__time-area {margin:4px 0;gap:6px;}
-.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 .blu-picker__dialog[data-compact=true] .blu-picker__selection {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__popup-actions {margin-top:4px;gap:4px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__presets {margin-bottom:4px;gap:4px;}
@@ -4602,7 +4610,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker [hidden],.blu-picker__dialog [hidden] {display:none!important;}
 .blu-picker__fields {display:flex;flex-wrap:wrap;gap:12px;}
 .blu-picker__field {flex:1 1 180px;min-width:0;}
-.blu-picker__field label,.blu-picker__select-field>span {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
+.blu-picker__field label,.blu-picker__select-caption {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
 .blu-picker__input {display:block;width:100%;min-width:0;min-height:42px;padding:9px 11px;border:1px solid var(--bluui-control-border,#69788d);border-radius:9px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:inherit;line-height:1.4;}
 .blu-picker__field-control {position:relative;}
 .blu-picker__field-control>.blu-picker__input {padding-right:38px;}
@@ -4625,7 +4633,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker__dialog::backdrop {background:transparent;pointer-events:none;}
 .blu-picker__dialog-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
 .blu-picker__dialog-head h2 {font-size:16px;line-height:1.4;font-family:var(--blu-font-heading-family,inherit);margin:0;overflow-wrap:anywhere;}
-.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 72px 32px;align-items:end;gap:6px;margin-top:0;}
+.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 88px 32px;align-items:end;gap:6px;margin-top:0;}
 .blu-picker__calendar-nav>.blu-picker__button {height:36px;padding:2px;font-size:22px;}
 .blu-picker__select-field {min-width:0;}
 .blu-picker__caption {font-size:15px;text-align:center;margin:16px 0 8px;}
@@ -4650,8 +4658,8 @@ Keep bulk commands together in a wrapping row between the panels. */
 /* Compact popup controls; editable text stays at 16px to avoid iOS focus zoom. */
 .blu-picker__dialog .blu-picker__input {min-height:36px;padding:5px 7px;font-size:16px;line-height:1.2;}
 .blu-picker__dialog .blu-picker__button {min-height:34px;min-width:32px;padding:5px 9px;font-size:13px;line-height:1.25;}
-.blu-picker__dialog .blu-picker__select-field>span {font-size:11px;margin-bottom:2px;}
-.blu-picker__calendar-nav .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
+.blu-picker__dialog .blu-picker__select-caption {font-size:11px;margin-bottom:2px;}
+.blu-picker__calendar-nav .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog .blu-picker__error {margin-top:4px;font-size:12px;line-height:1.3;}
 @media(pointer:coarse){
  .blu-picker__field-control>.blu-picker__input {font-size:16px;min-height:44px;}
@@ -4668,7 +4676,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker__dialog[data-compact=true] .blu-picker__calendar td {height:24px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__day {min-height:24px;padding:3px 0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__time-area {margin:4px 0;gap:6px;}
-.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 .blu-picker__dialog[data-compact=true] .blu-picker__selection {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__popup-actions {margin-top:4px;gap:4px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__presets {margin-bottom:4px;gap:4px;}
@@ -4681,7 +4689,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker [hidden],.blu-picker__dialog [hidden] {display:none!important;}
 .blu-picker__fields {display:flex;flex-wrap:wrap;gap:12px;}
 .blu-picker__field {flex:1 1 180px;min-width:0;}
-.blu-picker__field label,.blu-picker__select-field>span {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
+.blu-picker__field label,.blu-picker__select-caption {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
 .blu-picker__input {display:block;width:100%;min-width:0;min-height:42px;padding:9px 11px;border:1px solid var(--bluui-control-border,#69788d);border-radius:9px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:inherit;line-height:1.4;}
 .blu-picker__field-control {position:relative;}
 .blu-picker__field-control>.blu-picker__input {padding-right:38px;}
@@ -4704,7 +4712,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker__dialog::backdrop {background:transparent;pointer-events:none;}
 .blu-picker__dialog-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
 .blu-picker__dialog-head h2 {font-size:16px;line-height:1.4;font-family:var(--blu-font-heading-family,inherit);margin:0;overflow-wrap:anywhere;}
-.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 72px 32px;align-items:end;gap:6px;margin-top:0;}
+.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 88px 32px;align-items:end;gap:6px;margin-top:0;}
 .blu-picker__calendar-nav>.blu-picker__button {height:36px;padding:2px;font-size:22px;}
 .blu-picker__select-field {min-width:0;}
 .blu-picker__caption {font-size:15px;text-align:center;margin:16px 0 8px;}
@@ -4729,8 +4737,8 @@ Keep bulk commands together in a wrapping row between the panels. */
 /* Compact popup controls; editable text stays at 16px to avoid iOS focus zoom. */
 .blu-picker__dialog .blu-picker__input {min-height:36px;padding:5px 7px;font-size:16px;line-height:1.2;}
 .blu-picker__dialog .blu-picker__button {min-height:34px;min-width:32px;padding:5px 9px;font-size:13px;line-height:1.25;}
-.blu-picker__dialog .blu-picker__select-field>span {font-size:11px;margin-bottom:2px;}
-.blu-picker__calendar-nav .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
+.blu-picker__dialog .blu-picker__select-caption {font-size:11px;margin-bottom:2px;}
+.blu-picker__calendar-nav .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog .blu-picker__error {margin-top:4px;font-size:12px;line-height:1.3;}
 @media(pointer:coarse){
  .blu-picker__field-control>.blu-picker__input {font-size:16px;min-height:44px;}
@@ -4747,7 +4755,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker__dialog[data-compact=true] .blu-picker__calendar td {height:24px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__day {min-height:24px;padding:3px 0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__time-area {margin:4px 0;gap:6px;}
-.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 .blu-picker__dialog[data-compact=true] .blu-picker__selection {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__popup-actions {margin-top:4px;gap:4px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__presets {margin-bottom:4px;gap:4px;}
@@ -4760,7 +4768,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker [hidden],.blu-picker__dialog [hidden] {display:none!important;}
 .blu-picker__fields {display:flex;flex-wrap:wrap;gap:12px;}
 .blu-picker__field {flex:1 1 180px;min-width:0;}
-.blu-picker__field label,.blu-picker__select-field>span {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
+.blu-picker__field label,.blu-picker__select-caption {display:block;margin-bottom:5px;color:var(--bluui-text,#182230);font-weight:600;}
 .blu-picker__input {display:block;width:100%;min-width:0;min-height:42px;padding:9px 11px;border:1px solid var(--bluui-control-border,#69788d);border-radius:9px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:inherit;line-height:1.4;}
 .blu-picker__field-control {position:relative;}
 .blu-picker__field-control>.blu-picker__input {padding-right:38px;}
@@ -4783,7 +4791,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker__dialog::backdrop {background:transparent;pointer-events:none;}
 .blu-picker__dialog-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
 .blu-picker__dialog-head h2 {font-size:16px;line-height:1.4;font-family:var(--blu-font-heading-family,inherit);margin:0;overflow-wrap:anywhere;}
-.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 72px 32px;align-items:end;gap:6px;margin-top:0;}
+.blu-picker__calendar-nav {display:grid;grid-template-columns:32px minmax(0,1fr) 88px 32px;align-items:end;gap:6px;margin-top:0;}
 .blu-picker__calendar-nav>.blu-picker__button {height:36px;padding:2px;font-size:22px;}
 .blu-picker__select-field {min-width:0;}
 .blu-picker__caption {font-size:15px;text-align:center;margin:16px 0 8px;}
@@ -4808,8 +4816,8 @@ Keep bulk commands together in a wrapping row between the panels. */
 /* Compact popup controls; editable text stays at 16px to avoid iOS focus zoom. */
 .blu-picker__dialog .blu-picker__input {min-height:36px;padding:5px 7px;font-size:16px;line-height:1.2;}
 .blu-picker__dialog .blu-picker__button {min-height:34px;min-width:32px;padding:5px 9px;font-size:13px;line-height:1.25;}
-.blu-picker__dialog .blu-picker__select-field>span {font-size:11px;margin-bottom:2px;}
-.blu-picker__calendar-nav .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
+.blu-picker__dialog .blu-picker__select-caption {font-size:11px;margin-bottom:2px;}
+.blu-picker__calendar-nav .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog .blu-picker__error {margin-top:4px;font-size:12px;line-height:1.3;}
 @media(pointer:coarse){
  .blu-picker__field-control>.blu-picker__input {font-size:16px;min-height:44px;}
@@ -4826,7 +4834,7 @@ Keep bulk commands together in a wrapping row between the panels. */
 .blu-picker__dialog[data-compact=true] .blu-picker__calendar td {height:24px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__day {min-height:24px;padding:3px 0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__time-area {margin:4px 0;gap:6px;}
-.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-field>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker__dialog[data-compact=true] .blu-picker__time-area .blu-picker__select-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
 .blu-picker__dialog[data-compact=true] .blu-picker__selection {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;}
 .blu-picker__dialog[data-compact=true] .blu-picker__popup-actions {margin-top:4px;gap:4px;}
 .blu-picker__dialog[data-compact=true] .blu-picker__presets {margin-bottom:4px;gap:4px;}
@@ -8880,3 +8888,1188 @@ beside the live host/List, never inside a JavaScript-owned host. */
 
 /* Service Studio caption is hidden once the owned grid has initialized. */
 .blu-community-block:has([data-blu-community-ready]) > .blu-community-preview { display: none; }
+
+/* Community Form & Layout Essentials — local draft; no OutSystems UI selectors. */
+.blu-field,.blu-columns,.blu-table{box-sizing:border-box;min-width:0;color:var(--bluui-text,#182230);font-family:var(--blu-font-family,Inter,system-ui,sans-serif);font-size:14px}
+.blu-field *,.blu-columns *,.blu-table *{box-sizing:border-box}
+.blu-field [hidden],.blu-table [hidden]{display:none!important}
+.blu-field{--blu-field-height:42px;--blu-field-padding:12px;display:flex;flex-direction:column;gap:7px;border:0;padding:0;margin:0;min-inline-size:0}
+.blu-field--small{--blu-field-height:34px;--blu-field-padding:9px;font-size:13px}.blu-field--large{--blu-field-height:50px;--blu-field-padding:15px;font-size:16px}
+.blu-field__label{font-weight:600;line-height:1.5;padding:0;margin:0 0 2px}.blu-field__body{min-width:0}
+.blu-field__help,.blu-choice__description,.blu-field__count{font-size:12px;color:var(--bluui-text-muted,#5c6b80);line-height:1.5}.blu-field__error{color:var(--bluui-color-error-text,#b42318);font-size:12px;line-height:1.5}.blu-field__count{text-align:end;margin-top:5px;font-variant-numeric:tabular-nums}
+.blu-text,.blu-textarea,.blu-select__trigger{border:1px solid var(--bluui-control-border,#7b8799);border-radius:var(--blu-radius-md,8px);background:var(--bluui-surface,#fff);color:inherit;transition:border-color .12s,box-shadow .12s}
+.blu-text{display:flex;align-items:center;gap:8px;min-height:var(--blu-field-height);padding:0 var(--blu-field-padding)}
+.blu-text__input{width:100%;min-width:0;border:0!important;box-shadow:none!important;outline:none!important;background:transparent!important;color:inherit;padding:9px 0!important;font:inherit;line-height:1.5;height:auto}
+.blu-text__input::placeholder,.blu-textarea::placeholder{color:var(--bluui-text-muted,#5c6b80);opacity:1}
+.blu-text:focus-within,.blu-textarea:focus-visible,.blu-select__trigger:focus-visible{border-color:var(--bluui-primary,#4f46e5);outline:2px solid var(--bluui-primary,#4f46e5);outline-offset:2px}
+.blu-text__adornment{display:inline-flex;flex:none;gap:6px;align-items:center;color:var(--bluui-text-muted,#5c6b80);white-space:nowrap}.blu-text__adornment img{width:24px;height:24px;object-fit:contain;border-radius:4px}
+.blu-text__action{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:4px;background:transparent;color:var(--bluui-primary,#4f46e5);font:inherit;font-size:12px;font-weight:600;min-width:26px;min-height:30px;cursor:pointer;white-space:nowrap;padding:3px}
+.blu-text__action:hover{background:var(--bluui-hover,#f0f2f7)}
+.blu-field button:focus-visible,.blu-table button:focus-visible,.blu-table__scroll:focus-visible{outline:2px solid var(--bluui-primary,#4f46e5);outline-offset:3px}
+.blu-textarea{display:block;width:100%;min-height:var(--blu-field-height);padding:10px var(--blu-field-padding);font:inherit;line-height:1.6}
+.blu-field[data-invalid=true] .blu-text,.blu-field[data-invalid=true] .blu-textarea,.blu-field[data-invalid=true] .blu-select__trigger{border-color:var(--bluui-color-error-text,#b42318)}
+.blu-field[data-disabled=true]{opacity:.6}.blu-field input:disabled,.blu-field textarea:disabled,.blu-field button:disabled{cursor:not-allowed}
+.blu-field input[readonly],.blu-field textarea[readonly]{cursor:default}
+.blu-choice{display:flex;align-items:center;position:relative;gap:10px;min-height:32px;cursor:pointer;line-height:1.5}.blu-choice__input{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;opacity:0}
+.blu-choice__mark{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:19px;height:19px;border:1.5px solid var(--bluui-control-border,#7b8799);border-radius:5px;background:var(--bluui-surface,#fff);color:var(--bluui-on-primary,#fff)}
+.blu-choice__input:checked+.blu-choice__mark,.blu-choice__input:indeterminate+.blu-choice__mark{background:var(--bluui-primary,#4f46e5);border-color:var(--bluui-primary,#4f46e5)}
+.blu-choice--checkbox .blu-choice__input:checked+.blu-choice__mark:after{content:'';width:5px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
+.blu-choice__input:indeterminate+.blu-choice__mark:after{content:'';width:9px;height:2px;background:currentColor;transform:none;border:0}
+.blu-choice__input:focus-visible+.blu-choice__mark{outline:2px solid var(--bluui-primary,#4f46e5);outline-offset:3px}
+.blu-choice:has(input:disabled){opacity:.6;cursor:not-allowed}.blu-field[data-disabled=true] .blu-choice:has(input:disabled){opacity:1}
+.blu-choice--radio .blu-choice__mark{border-radius:50%}.blu-choice--radio .blu-choice__input:checked+.blu-choice__mark:after{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
+.blu-choice--switch .blu-choice__mark{width:38px;height:22px;border-radius:20px;background:var(--bluui-control-border,#7b8799);padding:2px;justify-content:flex-start}
+.blu-choice--switch .blu-choice__mark:after{content:'';height:16px;width:16px;background:#fff;border-radius:50%;transition:transform .15s}
+.blu-choice--switch .blu-choice__input:checked+.blu-choice__mark:after{transform:translateX(14px)}.blu-choice--switch .blu-choice__input:checked+.blu-choice__mark{background:var(--bluui-primary,#4f46e5)}
+.blu-choice__state{margin-inline-start:auto;font-size:12px;color:var(--bluui-text-muted,#5c6b80)}.blu-choice__description{display:block}
+.blu-radio-group{display:flex;flex-direction:column;gap:10px}.blu-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:12px 24px}
+.blu-select{position:relative;display:flex;gap:5px}.blu-select__native{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%);pointer-events:none}
+.blu-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:var(--blu-field-height);width:100%;padding:9px var(--blu-field-padding);font:inherit;text-align:start;cursor:pointer}
+.blu-select__trigger:after{content:'';width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);flex-shrink:0}.blu-select__trigger[data-placeholder=true]{color:var(--bluui-text-muted,#5c6b80)}
+.blu-select__popup{box-sizing:border-box;position:absolute;inset:calc(100% + 6px) 0 auto;z-index:1000;max-height:320px;overflow:auto;margin:0;padding:6px;border:1px solid var(--bluui-border-strong,#b8c4d4);border-radius:10px;background:var(--bluui-surface,#fff);box-shadow:var(--bluui-menu-shadow,0 10px 30px #17203326);color:var(--bluui-text,#182230);font:inherit}
+.blu-select__search{width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--bluui-control-border,#7b8799);border-radius:6px;background:var(--bluui-surface,#fff);color:inherit;font:inherit;margin-bottom:5px;outline-offset:2px}
+.blu-select__option{padding:9px 10px;border-radius:5px;cursor:pointer;line-height:1.5}.blu-select__option[aria-selected=true]{font-weight:600;color:var(--bluui-primary,#4f46e5)}.blu-select__option[data-active=true]{background:var(--bluui-selected,#e9e6ff)}.blu-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}
+.blu-columns{display:grid;grid-template-columns:var(--blu-columns-tracks,1fr 1fr);gap:var(--blu-columns-gap,24px)}.blu-columns__column{min-width:0;display:flex;flex-direction:column;gap:20px}
+@media(max-width:479px){.blu-columns--stack-small{grid-template-columns:minmax(0,1fr)}}
+@media(max-width:767px){.blu-columns--stack-medium{grid-template-columns:minmax(0,1fr)}}
+@media(max-width:1023px){.blu-columns--stack-large{grid-template-columns:minmax(0,1fr)}}
+.blu-table{border:1px solid var(--bluui-border,#e2e8f0);border-radius:12px;background:var(--bluui-surface,#fff);overflow:hidden}
+.blu-table__scroll{overflow:auto}.blu-table table{width:100%;border-collapse:collapse;font:inherit;text-align:start}.blu-table caption{text-align:start;padding:18px;font-weight:600;font-size:15px}
+.blu-table th{font-size:12px;color:var(--bluui-text-muted,#5c6b80);background:var(--bluui-surface-muted,#f7f8fb);font-weight:600;white-space:nowrap}
+.blu-table th,.blu-table td{padding:14px 18px;border-top:1px solid var(--bluui-border,#e2e8f0);line-height:1.5}
+.blu-table[data-density=Compact] th,.blu-table[data-density=Compact] td{padding:8px 12px}
+.blu-table[data-striped=true] tbody tr:nth-child(even){background:var(--bluui-surface-muted,#f7f8fb)}
+.blu-table__sort{font:inherit;font-weight:600;color:inherit;background:transparent;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:12px}
+.blu-table__empty{text-align:center!important;height:140px;color:var(--bluui-text-muted,#5c6b80)}
+.blu-table__footer{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--bluui-border,#e2e8f0);font-size:12px;flex-wrap:wrap}.blu-table__footer>span{margin-inline-end:auto;color:var(--bluui-text-muted,#5c6b80)}
+.blu-table-button{border:1px solid var(--bluui-border-strong,#b8c4d4);border-radius:6px;padding:6px 10px;background:var(--bluui-surface,#fff);font:inherit;font-size:12px;color:var(--bluui-text,#182230);cursor:pointer;min-height:30px;white-space:nowrap}.blu-table-button:hover{background:var(--bluui-hover,#f0f2f7)}.blu-table-button:disabled{opacity:.5;cursor:not-allowed}.blu-table__actions{display:flex;gap:6px}
+@media(prefers-reduced-motion:reduce){.blu-field *{transition:none!important}}
+@media(forced-colors:active){.blu-choice__mark{forced-color-adjust:none;border-color:ButtonText;background:Canvas;color:HighlightText}.blu-choice__input:checked+.blu-choice__mark,.blu-choice__input:indeterminate+.blu-choice__mark{background:Highlight;border-color:Highlight}.blu-select__option[data-active=true]{outline:2px solid Highlight}.blu-choice--switch .blu-choice__mark:after{background:ButtonText}.blu-choice--switch .blu-choice__input:checked+.blu-choice__mark:after{background:HighlightText}}
+
+/* Equal height is row-scoped; stacked columns retain their content height. */
+.blu-columns.blu-columns--equal-height{align-items:stretch}
+.blu-columns--equal-height > .blu-columns__column > :only-child{flex:1 1 auto}
+.blu-columns--equal-height > .blu-columns__column > [data-placeholder]{display:flex;flex-direction:column}
+.blu-columns--equal-height > .blu-columns__column > [data-placeholder] > :only-child{flex:1 1 auto}
+
+/* styles/motion-presets.css */
+.blu-motion-enter-fade,
+.blu-motion-fade-in {
+  animation: blu-motion-enter-fade var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.blu-motion-exit-fade,
+.blu-motion-fade-out {
+  animation: blu-motion-exit-fade var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-fade {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.blu-motion-enter-slide-up,
+.blu-motion-slide-up {
+  animation: blu-motion-enter-slide-up var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--blu-motion-distance));
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.blu-motion-exit-slide-up {
+  animation: blu-motion-exit-slide-up var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-slide-up {
+  0% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--blu-motion-distance)));
+  }
+}
+.blu-motion-enter-slide-down {
+  animation: blu-motion-enter-slide-down var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--blu-motion-distance)));
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.blu-motion-exit-slide-down {
+  animation: blu-motion-exit-slide-down var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-slide-down {
+  0% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(var(--blu-motion-distance));
+  }
+}
+.blu-motion-enter-slide-left {
+  animation: blu-motion-enter-slide-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-slide-left {
+  0% {
+    opacity: 0;
+    transform: translateX(var(--blu-motion-distance));
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.blu-motion-exit-slide-left {
+  animation: blu-motion-exit-slide-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-slide-left {
+  0% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(calc(-1 * var(--blu-motion-distance)));
+  }
+}
+.blu-motion-enter-slide-right {
+  animation: blu-motion-enter-slide-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-slide-right {
+  0% {
+    opacity: 0;
+    transform: translateX(calc(-1 * var(--blu-motion-distance)));
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.blu-motion-exit-slide-right {
+  animation: blu-motion-exit-slide-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-slide-right {
+  0% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(var(--blu-motion-distance));
+  }
+}
+.blu-motion-enter-zoom-in,
+.blu-motion-scale-in {
+  animation: blu-motion-enter-zoom-in var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(.92);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.blu-motion-exit-zoom-in {
+  animation: blu-motion-exit-zoom-in var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-zoom-in {
+  0% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.08);
+  }
+}
+.blu-motion-enter-zoom-out {
+  animation: blu-motion-enter-zoom-out var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-zoom-out {
+  0% {
+    opacity: 0;
+    transform: scale(1.08);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.blu-motion-exit-zoom-out {
+  animation: blu-motion-exit-zoom-out var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-zoom-out {
+  0% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(.92);
+  }
+}
+.blu-motion-enter-rotate-left {
+  animation: blu-motion-enter-rotate-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-rotate-left {
+  0% {
+    opacity: 0;
+    transform: rotate(8deg) scale(.97);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.blu-motion-exit-rotate-left {
+  animation: blu-motion-exit-rotate-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-rotate-left {
+  0% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(-8deg) scale(.97);
+  }
+}
+.blu-motion-enter-rotate-right {
+  animation: blu-motion-enter-rotate-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-rotate-right {
+  0% {
+    opacity: 0;
+    transform: rotate(-8deg) scale(.97);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.blu-motion-exit-rotate-right {
+  animation: blu-motion-exit-rotate-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-rotate-right {
+  0% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(8deg) scale(.97);
+  }
+}
+.blu-motion-enter-flip-x {
+  animation: blu-motion-enter-flip-x var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-flip-x {
+  0% {
+    opacity: 0;
+    transform: perspective(600px) rotateX(30deg);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.blu-motion-exit-flip-x {
+  animation: blu-motion-exit-flip-x var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-flip-x {
+  0% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: perspective(600px) rotateX(-30deg);
+  }
+}
+.blu-motion-enter-flip-y {
+  animation: blu-motion-enter-flip-y var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-flip-y {
+  0% {
+    opacity: 0;
+    transform: perspective(600px) rotateY(30deg);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.blu-motion-exit-flip-y {
+  animation: blu-motion-exit-flip-y var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-flip-y {
+  0% {
+    opacity: 1;
+    transform: none;
+  }
+  100% {
+    opacity: 0;
+    transform: perspective(600px) rotateY(-30deg);
+  }
+}
+.blu-motion-enter-pop {
+  animation: blu-motion-enter-pop var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-pop {
+  0% {
+    opacity: 0;
+    transform: scale(.9);
+  }
+  72% {
+    opacity: 1;
+    transform: scale(1.025);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.blu-motion-exit-pop {
+  animation: blu-motion-exit-pop var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-pop {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  25% {
+    opacity: 1;
+    transform: scale(1.025);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(.9);
+  }
+}
+.blu-motion-enter-bounce {
+  animation: blu-motion-enter-bounce var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-bounce {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--blu-motion-distance));
+  }
+  72% {
+    opacity: 1;
+    transform: translateY(-3px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.blu-motion-exit-bounce {
+  animation: blu-motion-exit-bounce var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-bounce {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  25% {
+    opacity: 1;
+    transform: translateY(-3px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(var(--blu-motion-distance));
+  }
+}
+.blu-motion-enter-wipe-up {
+  animation: blu-motion-enter-wipe-up var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-wipe-up {
+  0% {
+    opacity: 0;
+    clip-path: inset(100% 0 0 0);
+  }
+  100% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+}
+.blu-motion-exit-wipe-up {
+  animation: blu-motion-exit-wipe-up var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-wipe-up {
+  0% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+  100% {
+    opacity: 0;
+    clip-path: inset(0 0 100% 0);
+  }
+}
+.blu-motion-enter-wipe-down {
+  animation: blu-motion-enter-wipe-down var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-wipe-down {
+  0% {
+    opacity: 0;
+    clip-path: inset(0 0 100% 0);
+  }
+  100% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+}
+.blu-motion-exit-wipe-down {
+  animation: blu-motion-exit-wipe-down var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-wipe-down {
+  0% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+  100% {
+    opacity: 0;
+    clip-path: inset(100% 0 0 0);
+  }
+}
+.blu-motion-enter-wipe-left {
+  animation: blu-motion-enter-wipe-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-wipe-left {
+  0% {
+    opacity: 0;
+    clip-path: inset(0 0 0 100%);
+  }
+  100% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+}
+.blu-motion-exit-wipe-left {
+  animation: blu-motion-exit-wipe-left var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-wipe-left {
+  0% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+  100% {
+    opacity: 0;
+    clip-path: inset(0 100% 0 0);
+  }
+}
+.blu-motion-enter-wipe-right {
+  animation: blu-motion-enter-wipe-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-wipe-right {
+  0% {
+    opacity: 0;
+    clip-path: inset(0 100% 0 0);
+  }
+  100% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+}
+.blu-motion-exit-wipe-right {
+  animation: blu-motion-exit-wipe-right var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-wipe-right {
+  0% {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+  100% {
+    opacity: 0;
+    clip-path: inset(0 0 0 100%);
+  }
+}
+.blu-motion-enter-circle-reveal {
+  animation: blu-motion-enter-circle-reveal var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-circle-reveal {
+  0% {
+    opacity: 0;
+    clip-path: circle(0% at 50% 50%);
+  }
+  100% {
+    opacity: 1;
+    clip-path: circle(72% at 50% 50%);
+  }
+}
+.blu-motion-exit-circle-reveal {
+  animation: blu-motion-exit-circle-reveal var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-circle-reveal {
+  0% {
+    opacity: 1;
+    clip-path: circle(72% at 50% 50%);
+  }
+  100% {
+    opacity: 0;
+    clip-path: circle(0% at 50% 50%);
+  }
+}
+.blu-motion-enter-blur-clear {
+  animation: blu-motion-enter-blur-clear var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-enter-blur-clear {
+  0% {
+    opacity: 0;
+    filter: blur(6px);
+  }
+  100% {
+    opacity: 1;
+    filter: blur(0px);
+  }
+}
+.blu-motion-exit-blur-clear {
+  animation: blu-motion-exit-blur-clear var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both;
+}
+@keyframes blu-motion-exit-blur-clear {
+  0% {
+    opacity: 1;
+    filter: blur(0px);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(6px);
+  }
+}
+.blu-motion-ease-standard {
+  --blu-motion-ease: cubic-bezier(.2,.8,.2,1);
+}
+.blu-motion-ease-in {
+  --blu-motion-ease: cubic-bezier(.42,0,1,1);
+}
+.blu-motion-ease-out {
+  --blu-motion-ease: cubic-bezier(0,0,.58,1);
+}
+.blu-motion-ease-in-out {
+  --blu-motion-ease: cubic-bezier(.42,0,.58,1);
+}
+.blu-motion-ease-linear {
+  --blu-motion-ease: linear;
+}
+.blu-motion-ease-spring {
+  --blu-motion-ease: cubic-bezier(.34,1.25,.64,1);
+}
+.blu-motion-origin-center {
+  transform-origin: 50% 50%;
+}
+.blu-motion-origin-top {
+  transform-origin: 50% 0%;
+}
+.blu-motion-origin-bottom {
+  transform-origin: 50% 100%;
+}
+.blu-motion-origin-left {
+  transform-origin: 0% 50%;
+}
+.blu-motion-origin-right {
+  transform-origin: 100% 50%;
+}
+.blu-motion-origin-top-left {
+  transform-origin: 0% 0%;
+}
+.blu-motion-origin-top-right {
+  transform-origin: 100% 0%;
+}
+.blu-motion-origin-bottom-left {
+  transform-origin: 0% 100%;
+}
+.blu-motion-origin-bottom-right {
+  transform-origin: 100% 100%;
+}
+
+/* styles/motion-tokens.css */
+:root {
+  --blu-motion-fast: 280ms;
+  --blu-motion-normal: 450ms;
+  --blu-motion-slow: 750ms;
+}
+
+/* styles/motion-optional.css */
+.blu-motion-ripple,
+.blu-motion-shimmer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none !important;
+}
+.blu-motion-ripple__wave {
+  position: absolute;
+  border-radius: 50%;
+  background: var(--blu-ripple-color,currentColor);
+  pointer-events: none !important;
+  opacity: 0;
+}
+.blu-motion-choice-ripple {
+  inset: -10px;
+  border-radius: 999px;
+  --blu-ripple-color:var(--bluui-primary,#4f46e5);
+}
+.blu-motion-shimmer__beam {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      100deg,
+      transparent 20%,
+      var(--blu-shimmer-color,#ffffffb8) 50%,
+      transparent 80%);
+  animation: blu-motion-shimmer var(--blu-shimmer-duration,1800ms) ease-in-out infinite;
+}
+@keyframes blu-motion-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+.blu-motion-shimmer[data-paused=true] .blu-motion-shimmer__beam {
+  animation-play-state: paused;
+}
+.blu-motion-icon {
+  display: block;
+  width: 24px;
+  height: 24px;
+  overflow: visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+.blu-motion-emphasis {
+  position: absolute;
+  pointer-events: none !important;
+  color: var(--blu-emphasis-color,currentColor);
+}
+.blu-motion-emphasis--underline {
+  inset: auto 0 0;
+  height: 2px;
+  background: currentColor;
+  transform-origin: left center;
+  border-radius: 2px;
+}
+.blu-motion-emphasis--border {
+  inset: 0;
+  border-radius: inherit;
+}
+.blu-motion-emphasis--border svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2px;
+}
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) :is(.blu-motion-shimmer__beam, .blu-motion-ripple__wave) {
+  display: none;
+  animation: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .blu-motion-shimmer__beam,
+  .blu-motion-ripple__wave {
+    display: none;
+    animation: none !important;
+  }
+}
+@media (forced-colors: active) {
+  .blu-motion-shimmer__beam,
+  .blu-motion-ripple__wave {
+    display: none;
+  }
+  .blu-motion-emphasis {
+    color: Highlight;
+  }
+}
+
+/* styles/motion.css */
+:root {
+  --blu-motion-duration: var(--blu-motion-normal);
+  --blu-motion-delay: 0ms;
+  --blu-motion-distance: 12px;
+  --blu-motion-ease: cubic-bezier(.2, .8, .2, 1);
+}
+.blu-motion-fast {
+  --blu-motion-duration: var(--blu-motion-fast);
+}
+.blu-motion-slow {
+  --blu-motion-duration: var(--blu-motion-slow);
+}
+.blu-motion-delay-1 {
+  --blu-motion-delay: 60ms;
+}
+.blu-motion-delay-2 {
+  --blu-motion-delay: 120ms;
+}
+.blu-motion-delay-3 {
+  --blu-motion-delay: 180ms;
+}
+.blu-motion-spin {
+  animation: blu-motion-spin 800ms linear infinite;
+}
+.blu-motion-pulse {
+  animation: blu-motion-pulse 900ms ease-in-out 3;
+}
+.blu-motion-hover-lift {
+  transition: transform var(--blu-motion-duration) var(--blu-motion-ease), box-shadow var(--blu-motion-duration) var(--blu-motion-ease);
+}
+@media (hover: hover) {
+  .blu-motion-hover-lift:hover {
+    transform: translateY(calc(-1 * var(--blu-motion-lift-distance, 4px)));
+    box-shadow: 0 8px 20px #28334b12;
+  }
+}
+.blu-motion-hover-lift:is(:focus-visible, [data-blu-lifted=true]) {
+  transform: translateY(calc(-1 * var(--blu-motion-lift-distance, 4px)));
+  box-shadow: 0 8px 20px #28334b12;
+}
+.blu-motion-expand {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--blu-motion-duration) var(--blu-motion-ease);
+}
+.blu-motion-expand[data-open=true] {
+  grid-template-rows: 1fr;
+}
+.blu-motion-expand > * {
+  min-height: 0;
+  overflow: hidden;
+}
+@keyframes blu-motion-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes blu-motion-pulse {
+  50% {
+    opacity: .45;
+  }
+}
+.blu-motion-button.blu-button {
+  display: inline-grid;
+  gap: 0;
+  transition-duration: var(--blu-motion-duration);
+}
+.blu-motion-button__face,
+.blu-motion-button__reserve {
+  grid-area: 1 / 1;
+  padding-inline: 24px;
+}
+.blu-motion-button__face {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.blu-motion-button__reserve {
+  visibility: hidden;
+  pointer-events: none;
+}
+.blu-motion-button .blu-button__spinner {
+  position: absolute;
+  inset-inline-start: 0;
+}
+.blu-motion-button[data-spinner-position=Trailing] .blu-button__spinner {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
+.blu-motion-button .blu-button__spinner[hidden] {
+  display: none;
+}
+.blu-motion-button.blu-button--loading {
+  pointer-events: auto;
+}
+.blu-motion-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.blu-loading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font: inherit;
+  color: inherit;
+}
+.blu-loading [hidden] {
+  display: none !important;
+}
+.blu-loading__visual {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.blu-loading[data-variant=Spinner] .blu-loading__visual {
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: blu-motion-spin 800ms linear infinite;
+}
+.blu-loading[data-variant=Spinner] i {
+  display: none;
+}
+.blu-loading[data-variant=Dots] .blu-loading__visual {
+  display: flex;
+  align-items: center;
+  width: 32px;
+  gap: 3px;
+}
+.blu-loading[data-variant=Dots] i {
+  width: 7px;
+  height: 7px;
+  background: currentColor;
+  border-radius: 50%;
+  animation: blu-motion-pulse 900ms ease-in-out infinite;
+}
+.blu-loading[data-variant=Dots] i:nth-child(2) {
+  animation-delay: 150ms;
+}
+.blu-loading[data-variant=Dots] i:nth-child(3) {
+  animation-delay: 300ms;
+}
+.blu-loading progress {
+  width: 100%;
+  height: 8px;
+  accent-color: var(--bluui-primary, #5145e5);
+  border: 0;
+  border-radius: 8px;
+  background: #e7e8f1;
+  overflow: hidden;
+}
+.blu-loading progress::-webkit-progress-bar {
+  background: #e7e8f1;
+  border-radius: 8px;
+}
+.blu-loading progress::-webkit-progress-value {
+  background: var(--bluui-primary, #5145e5);
+  border-radius: 8px;
+}
+.blu-loading progress::-moz-progress-bar {
+  background: var(--bluui-primary, #5145e5);
+}
+.blu-loading[data-variant=Bar] {
+  flex-direction: column;
+  align-items: stretch;
+}
+.blu-loading__bar {
+  height: 8px;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #e7e8f1;
+}
+.blu-loading__bar::after {
+  content: "";
+  display: block;
+  width: 35%;
+  height: 100%;
+  background: var(--bluui-primary, #5145e5);
+  border-radius: inherit;
+  animation: blu-motion-progress 1.2s ease-in-out infinite alternate;
+}
+@keyframes blu-motion-progress {
+  to {
+    transform: translateX(185%);
+  }
+}
+:is([data-blu-motion=off], [data-blu-motion=reduced], .blu-motion-off),
+:is([data-blu-motion=off], [data-blu-motion=reduced], .blu-motion-off) * {
+  --blu-motion-duration: 0ms;
+  --blu-motion-delay: 0ms;
+}
+:is([data-blu-motion=off], [data-blu-motion=reduced], .blu-motion-off) :is([class*=blu-motion-], .blu-button__spinner, .blu-loading__visual, .blu-loading i),
+:is([data-blu-motion=off], [data-blu-motion=reduced], .blu-motion-off)[class*=blu-motion-],
+.blu-motion-off {
+  animation: none !important;
+  transition: none !important;
+}
+:is([data-blu-motion=off], [data-blu-motion=reduced], .blu-motion-off) .blu-loading__bar::after {
+  animation: none !important;
+}
+:is([data-blu-motion=off], [data-blu-motion=reduced], .blu-motion-off) .blu-motion-hover-lift:is(:hover, :focus-visible, [data-blu-lifted=true]) {
+  transform: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  [class*=blu-motion-],
+  .blu-button__spinner,
+  .blu-loading__visual,
+  .blu-loading i,
+  .blu-loading__bar::after {
+    animation: none !important;
+    transition: none !important;
+  }
+  .blu-motion-hover-lift:is(:hover, :focus-visible, [data-blu-lifted=true]) {
+    transform: none;
+  }
+}
+.blu-motion-press[data-blu-pressed=true] {
+  transform: scale(.97);
+}
+.blu-motion-highlight {
+  animation: blu-motion-highlight 1400ms ease-in-out 1;
+}
+.blu-motion-nudge {
+  animation: blu-motion-nudge 280ms var(--blu-motion-ease) 1;
+}
+@keyframes blu-motion-highlight {
+  45% {
+    box-shadow: 0 0 0 4px var(--blu-motion-highlight, #7770ed40);
+  }
+}
+@keyframes blu-motion-nudge {
+  25% {
+    transform: translateX(-3px);
+  }
+  60% {
+    transform: translateX(3px);
+  }
+}
+:is([data-blu-motion=off], [data-blu-motion=reduced], .blu-motion-off) .blu-motion-press[data-blu-pressed=true],
+.blu-motion-press.blu-motion-off[data-blu-pressed=true] {
+  transform: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .blu-motion-press[data-blu-pressed=true] {
+    transform: none;
+  }
+}
+.blu-motion-photo-frame {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+.blu-motion-photo-frame > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.blu-motion-border-glow {
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  pointer-events: none !important;
+  z-index: 1;
+  filter: drop-shadow(0 0 4px var(--blu-glow-halo,#9b85ee80));
+}
+.blu-motion-border-glow__rim {
+  position: absolute;
+  inset: 0;
+  padding: var(--blu-glow-width,2px);
+  border-radius: inherit;
+  overflow: hidden;
+  pointer-events: none !important;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+.blu-motion-border-glow__beam {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--blu-glow-size,1800px);
+  height: var(--blu-glow-size,1800px);
+  background:
+    conic-gradient(
+      transparent 0deg,
+      transparent 240deg,
+      var(--blu-glow-tail,#b5a4ef60) 265deg,
+      var(--blu-glow-color,#8060dd) 295deg,
+      var(--blu-glow-tip,#d7c6ff) 315deg,
+      transparent 340deg);
+  transform: translate(-50%, -50%) rotate(0turn);
+  animation: blu-border-orbit var(--blu-glow-duration,12s) linear infinite;
+}
+.blu-motion-border-glow[data-paused=true] .blu-motion-border-glow__beam {
+  animation-play-state: paused;
+}
+@keyframes blu-border-orbit {
+  from {
+    transform: translate(-50%, -50%) rotate(0turn);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) .blu-motion-border-glow {
+  filter: none;
+}
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) .blu-motion-border-glow__rim {
+  background: var(--blu-glow-static,#b5a4ef80);
+}
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) .blu-motion-border-glow__beam {
+  animation: none !important;
+  display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .blu-motion-border-glow {
+    filter: none;
+  }
+  .blu-motion-border-glow__rim {
+    background: var(--blu-glow-static,#b5a4ef80);
+  }
+  .blu-motion-border-glow__beam {
+    animation: none !important;
+    display: none;
+  }
+}
+@media (forced-colors: active) {
+  .blu-motion-border-glow {
+    display: none;
+  }
+}
+[data-blu-content-motion] .blu-profile-card {
+  transition: translate var(--blu-component-motion-duration,450ms) var(--blu-component-motion-ease,ease-in-out);
+}
+[data-blu-content-motion] .blu-profile-card:is(:hover, :focus-within) {
+  translate: 0 -4px;
+}
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) [data-blu-content-motion] .blu-profile-card,
+[data-blu-content-motion]:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) .blu-profile-card {
+  translate: none;
+  transition: none;
+}
+[data-blu-content-motion] :is(.blu-tree-select__check, .blu-video-player__heatmap) {
+  transition-duration: var(--blu-component-motion-duration,450ms);
+  transition-timing-function: var(--blu-component-motion-ease,ease-in-out);
+}
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) [data-blu-content-motion] :is(.blu-tree-select__check, .blu-video-player__heatmap) {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-blu-content-motion] .blu-profile-card {
+    translate: none;
+    transition: none;
+  }
+}
+[data-blu-content-motion=chip] .blu-chip__select {
+  border-radius: inherit;
+}
+[data-blu-content-motion=skeleton] .blu-skeleton--animated::after {
+  animation-duration: 1800ms;
+  animation-iteration-count: 2;
+}
+[data-blu-component-motion=statistic] .blu-statistic__loading {
+  animation-duration: 1800ms;
+  animation-iteration-count: 2;
+}
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) [data-blu-content-motion=skeleton] .blu-skeleton--animated::after {
+  animation: none !important;
+  display: none;
+}
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) [data-blu-component-motion=statistic] .blu-statistic__loading {
+  animation: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-blu-content-motion=skeleton] .blu-skeleton--animated::after {
+    animation: none !important;
+    display: none;
+  }
+  [data-blu-component-motion=statistic] .blu-statistic__loading {
+    animation: none !important;
+  }
+}
+[data-blu-content-motion=media-image] img {
+  transition-duration: var(--blu-component-motion-duration,650ms);
+  transition-timing-function: var(--blu-component-motion-ease,ease-in-out);
+}
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) [data-blu-content-motion=media-image] img {
+  transition: none !important;
+  transform: none !important;
+}
+[data-blu-content-motion] .blu-button {
+  transition-duration: var(--blu-component-motion-duration,280ms);
+}
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) [data-blu-content-motion] *,
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) [data-blu-content-motion] *::before,
+:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) [data-blu-content-motion] *::after,
+[data-blu-content-motion]:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) *,
+[data-blu-content-motion]:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) *::before,
+[data-blu-content-motion]:is([data-blu-motion=reduced], [data-blu-motion=off], .blu-motion-off) *::after {
+  transition: none !important;
+  animation: none !important;
+}
+
+/* Opt-in web motion. Existing components remain unchanged without the integration. */
+[data-blu-component-motion=field] :is(.blu-text,.blu-textarea,.blu-select__trigger,.blu-choice__mark,.blu-text__action){transition:background-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),border-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),box-shadow var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease)}
+[data-blu-component-motion=field] .blu-choice--switch .blu-choice__mark::after{transition:transform var(--blu-component-motion-duration,320ms) var(--blu-component-motion-ease,cubic-bezier(.2,.8,.2,1))}
+[data-blu-component-motion=field] .blu-choice--radio .blu-choice__mark::after{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease-out)}
+[data-blu-component-motion=field] .blu-choice--radio input:checked+.blu-choice__mark::after{transform:scale(1)}
+[data-blu-component-motion=field] .blu-select__trigger::after{transition:transform var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease-out)}
+[data-blu-component-motion=field] .blu-select__trigger[aria-expanded=true]::after{transform:translateY(2px) rotate(225deg)}
+[data-blu-exit-visual] :disabled{opacity:1!important}
+/* Focus rings and validation semantics stay immediate; only decorative feedback moves. */
+:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-component-motion=field] *,
+:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-component-motion=field] *::after{transition:none!important;animation:none!important}
+@media(prefers-reduced-motion:reduce){[data-blu-component-motion=field] *,[data-blu-component-motion=field] *::after{transition:none!important;animation:none!important}}
+[data-blu-surface-motion] :is(.blu-select__option,.blu-command__option,.blu-control){transition:background-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),border-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease)}
+:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-surface-motion] *{transition:none!important}
+@media(prefers-reduced-motion:reduce){[data-blu-surface-motion] *{transition:none!important}}
+/* Side drawers meet both viewport edges; the content scrolls between fixed header/footer. */
+[data-blu-surface-motion=drawer].blu-overlay:is([data-placement=left],[data-placement=right]){padding:0;align-items:stretch}
+[data-blu-surface-motion=drawer].blu-overlay:is([data-placement=left],[data-placement=right])>.blu-overlay__panel{margin:0;height:100dvh;max-height:100dvh;min-height:0;border-radius:0}
+[data-blu-surface-motion=drawer] :is(.blu-overlay__header,.blu-overlay__footer){flex-shrink:0}
+/* Existing notification keyframes are replaced by the scoped controller. */
+[data-blu-component-motion=notifications] .blu-notification{animation:none}
+[data-blu-component-motion=tree] .blu-tree__row{transition:background-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease)}
+[data-blu-surface-motion=picker] :is(.blu-picker__button,.blu-picker__input,.blu-picker__day){transition:background-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),border-color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease),color var(--blu-component-motion-duration,280ms) var(--blu-component-motion-ease,ease)}
+:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-component-motion=tree] *{transition:none!important}
+@media(prefers-reduced-motion:reduce){[data-blu-component-motion=tree] *{transition:none!important}}
+/* Web-only active-location markers: existing links retain focus and behavior. */
+.blu-motion-navigation-marker{position:absolute;display:block;border-radius:3px;background:var(--bluui-primary,#5144ed);pointer-events:none;transform-origin:top left;z-index:1}
+.blu-motion-navigation-marker[hidden]{display:none}
+.blu-motion-navigation-marker[data-kind=pagination]{box-sizing:border-box;border:2px solid var(--bluui-primary,#5144ed);border-radius:8px;background:transparent}
+[data-blu-navigation-motion] .blu-navigation-menu .blu-navigation-menu__link--active{color:var(--bluui-primary,#5144ed);background:var(--bluui-color-primary-soft,#efedff)}
+@media(forced-colors:active){.blu-motion-navigation-marker{background:Highlight}}
+@media(forced-colors:active){.blu-motion-navigation-marker[data-kind=pagination]{background:transparent;border-color:Highlight}}
+
+/* Shared finite transition settings; continuous loading keeps its own cadence. */
+.blu-motion-button.blu-button{transition-duration:var(--blu-component-motion-duration,var(--blu-motion-duration));transition-timing-function:var(--blu-component-motion-ease,var(--blu-motion-ease))}
+/* A preference may sit on the component root itself, not only its parent. */
+:is([data-blu-component-motion],[data-blu-surface-motion],[data-blu-navigation-motion]):is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) *,
+:is([data-blu-component-motion],[data-blu-surface-motion],[data-blu-navigation-motion]):is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) *::before,
+:is([data-blu-component-motion],[data-blu-surface-motion],[data-blu-navigation-motion]):is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) *::after{transition:none!important;animation:none!important}
+
+.blu-data-motion-exits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; border-radius: inherit; }
+.blu-data-motion-exit { position: absolute; display: grid; background: var(--bluui-surface, #fff); color: var(--bluui-text-muted, #68758b); font-size: 13px; align-items: center; border-bottom: 1px solid var(--bluui-border, #dce3ed); pointer-events: none; }
+.blu-data-motion-exit > span { padding: 10px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+@media (forced-colors: active) { .blu-data-motion-exits { display: none; } }