@blukavantui/community 0.0.0-stage → 1.0.1

package/dist/inputs.css

@@ -0,0 +1,1524 @@
+/* BluUI_Core → TreeSelect — owning Block stylesheet. */
+/* Shared control primitives, scoped to this component's runtime host. */
+.blu-tree-select { --blu-widget-primary: var(--bluui-color-primary-solid, #4f46e5); color: var(--bluui-text, #182230); font: 14px/1.5 var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif); min-width: 0; width: 100%; }
+.blu-tree-select *, .blu-tree-select *::before, .blu-tree-select *::after { box-sizing: border-box; }
+.blu-tree-select [hidden] { display: none !important; }
+.blu-tree-select .blu-control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--bluui-border, #dce3ed); border-radius: 8px; background: var(--bluui-surface, #fff); color: var(--bluui-text, #344054); font: inherit; font-weight: 500; line-height: 1.25; cursor: pointer; white-space: nowrap; }
+.blu-tree-select .blu-control:hover:not(:disabled) { background: var(--bluui-surface-muted, #f4f5fb); border-color: var(--bluui-primary-border, #a5a1f8); }
+.blu-tree-select .blu-control--primary { background: var(--blu-widget-primary); border-color: var(--blu-widget-primary); color: var(--bluui-on-primary, white); }
+.blu-tree-select .blu-control--primary:hover:not(:disabled) { background: var(--bluui-color-primary-solid, #4338ca); color: var(--bluui-on-primary, white); }
+.blu-tree-select .blu-control--quiet { border-color: transparent; background: transparent; }
+.blu-tree-select .blu-control--icon { flex: 0 0 32px; min-width: 32px; min-height: 32px; padding: 3px; font-size: 18px; }
+.blu-tree-select .blu-control:disabled { opacity: .5; cursor: default; }
+.blu-tree-select .blu-input { min-width: 0; width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--bluui-control-border, #d5deea); border-radius: 7px; background: var(--bluui-surface, white); color: var(--bluui-text, #182230); font: inherit; }
+.blu-tree-select :is(.blu-control, .blu-input):focus-visible { outline: 2px solid var(--blu-widget-primary); outline-offset: 2px; }
+.blu-tree-select .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
+.blu-tree-select .blu-interactive__empty { padding: 24px 12px; color: var(--bluui-text-muted, #667085); text-align: center; }
+/* Native design canvas stand-in; runtime content stays in the empty host. */
+.blu-tree-select-block > .blu-component-preview { display: none; -servicestudio-display: block; -servicestudio-padding: 18px; -servicestudio-border: 1px dashed var(--bluui-control-border, #c7d0e0); -servicestudio-border-radius: 10px; }
+
+/* Anchored popup stays with its Block and has a bounded scrollable tree. */
+.blu-tree-select { position: relative; }
+.blu-tree-select .blu-tree-select__trigger { width: 100%; justify-content: space-between; min-height: 42px; font-weight: 400; }
+.blu-tree-select__trigger::after { content: "⌄"; color: var(--bluui-text-muted, #667085); }
+.blu-tree-select__tokens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.blu-tree-select__token { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--bluui-border, #dddafa); border-radius: 18px; padding: 1px 4px 1px 10px; font-size: 12px; background: var(--bluui-primary-soft, #f2f0ff); color: var(--bluui-primary-text, #4338ca); }
+.blu-tree-select__token .blu-control { min-height: 24px; flex-basis: 24px; border: 0; border-radius: 50%; background: transparent; }
+.blu-tree-select__popup { position: absolute; top: 46px; left: 0; right: 0; z-index: 30; padding: 10px; min-width: 220px; border: 1px solid var(--bluui-border, #dce3ed); border-radius: 10px; background: var(--bluui-surface, white); box-shadow: 0 12px 36px #14213d20; }
+.blu-tree-select__tree, .blu-tree-select__branch { list-style: none; margin: 0; padding: 0; }
+.blu-tree-select__tree { margin-top: 8px; max-height: 300px; overflow: auto; }
+.blu-tree-select__branch { padding-inline-start: 20px; }
+.blu-tree-select__item { outline: none; }
+.blu-tree-select__row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px; border-radius: 6px; cursor: pointer; }
+.blu-tree-select__chevron { flex: 0 0 16px; color: var(--bluui-text-muted, #667085); }
+.blu-tree-select__row:hover { background: var(--bluui-surface-muted, #f3f5f9); }
+.blu-tree-select__item[aria-checked="true"] > .blu-tree-select__row, .blu-tree-select__item[aria-selected="true"] > .blu-tree-select__row { color: var(--bluui-primary-text, #4338ca); background: var(--bluui-primary-soft, #f0edff); }
+.blu-tree-select__item:focus-visible > .blu-tree-select__row { outline: 2px solid var(--blu-widget-primary); outline-offset: -2px; }
+.blu-tree-select__item[aria-disabled="true"] > .blu-tree-select__row { opacity: .45; cursor: default; }
+
+/* Runtime validation messages sit beside the interactive root. */
+.blu-tree-select-block .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
+
+/* BEGIN GENERATED SHARED CHECKBOX — scripts/build-checkbox-styles.mjs */
+/* One checkbox design, emitted into each owning Block. Keep native input/tree/grid semantics. */
+.blu-tree-select .blu-tree-select__item > .blu-tree-select__row .blu-tree-select__check {
+  -webkit-appearance:none;
+  appearance:none;
+  box-sizing:border-box;
+  position:relative;
+  display:inline-block;
+  flex:0 0 22px;
+  width:22px;
+  height:22px;
+  min-width:22px;
+  min-height:22px;
+  margin:0;
+  padding:0;
+  border:1.5px solid var(--bluui-control-border,#7b8799);
+  border-radius:6px;
+  background-color:var(--bluui-surface,#fff);
+  background-image:none;
+  box-shadow:0 1px 2px rgb(15 23 42 / 6%);
+  vertical-align:middle;
+  cursor:pointer;
+  opacity:1;
+  filter:none;
+  transition:background-color 120ms ease,border-color 120ms ease,box-shadow 120ms ease;
+}
+.blu-tree-select .blu-tree-select__item > .blu-tree-select__row .blu-tree-select__check::after { content:none; }
+.blu-tree-select .blu-tree-select__item[aria-checked="true"] > .blu-tree-select__row .blu-tree-select__check,
+.blu-tree-select .blu-tree-select__item[aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check {
+  border-color:var(--bluui-color-primary-solid,#4f46e5);
+  background-color:var(--bluui-color-primary-solid,#4f46e5);
+}
+.blu-tree-select .blu-tree-select__item[aria-checked="true"] > .blu-tree-select__row .blu-tree-select__check::after,
+.blu-tree-select .blu-tree-select__item[aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check::after {
+  content:"";
+  box-sizing:content-box;
+  position:absolute;
+  inset:auto;
+  width:10px;
+  height:6px;
+  left:4px;
+  top:5px;
+  border:solid var(--bluui-color-primary-contrast,#fff);
+  border-width:0 0 2px 2px;
+  border-radius:0;
+  background:none;
+  -webkit-mask:none;
+  mask:none;
+  transform:rotate(-45deg);
+  pointer-events:none;
+}
+.blu-tree-select .blu-tree-select__item[aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check::after {
+  height:0;
+  top:8px;
+  border-width:0 0 2px;
+  transform:none;
+}
+.blu-tree-select .blu-tree-select__item:not([aria-disabled="true"]) > .blu-tree-select__row:hover .blu-tree-select__check {
+  border-color:var(--bluui-color-primary-solid,#4f46e5);
+  box-shadow:0 0 0 3px var(--bluui-color-primary-soft,#eef2ff);
+}
+.blu-tree-select .blu-tree-select__item:focus-visible > .blu-tree-select__row .blu-tree-select__check {
+  outline:2px solid var(--bluui-color-primary-solid,#4f46e5);
+  outline-offset:3px;
+}
+.blu-tree-select .blu-tree-select__item[aria-disabled="true"] > .blu-tree-select__row .blu-tree-select__check {
+  border-color:var(--bluui-border-strong,#b8c4d4);
+  background-color:var(--bluui-surface-muted,#f7f8fb);
+  box-shadow:none;
+  cursor:not-allowed;
+}
+.blu-tree-select .blu-tree-select__item[aria-disabled="true"][aria-checked="true"] > .blu-tree-select__row .blu-tree-select__check,
+.blu-tree-select .blu-tree-select__item[aria-disabled="true"][aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check {
+  border-color:var(--bluui-text-muted,#5c6b80);
+  background-color:var(--bluui-text-muted,#5c6b80);
+}
+@media (prefers-reduced-motion:reduce) {
+  .blu-tree-select .blu-tree-select__item > .blu-tree-select__row .blu-tree-select__check { transition:none; }
+}
+@media (forced-colors:active) {
+  .blu-tree-select .blu-tree-select__item > .blu-tree-select__row .blu-tree-select__check,
+  .blu-tree-select .blu-tree-select__item[aria-checked="true"] > .blu-tree-select__row .blu-tree-select__check,
+  .blu-tree-select .blu-tree-select__item[aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check,
+  .blu-tree-select .blu-tree-select__item[aria-disabled="true"] > .blu-tree-select__row .blu-tree-select__check,
+  .blu-tree-select .blu-tree-select__item[aria-disabled="true"][aria-checked="true"] > .blu-tree-select__row .blu-tree-select__check,
+  .blu-tree-select .blu-tree-select__item[aria-disabled="true"][aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check { forced-color-adjust:none; background:Canvas; border-color:CanvasText; box-shadow:none; }
+  .blu-tree-select .blu-tree-select__item[aria-checked="true"] > .blu-tree-select__row .blu-tree-select__check, .blu-tree-select .blu-tree-select__item[aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check { background:Highlight; border-color:Highlight; }
+  .blu-tree-select .blu-tree-select__item[aria-checked="true"] > .blu-tree-select__row .blu-tree-select__check::after, .blu-tree-select .blu-tree-select__item[aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check::after { border-color:HighlightText; }
+  .blu-tree-select .blu-tree-select__item[aria-disabled="true"] > .blu-tree-select__row .blu-tree-select__check, .blu-tree-select .blu-tree-select__item[aria-disabled="true"][aria-checked="true"] > .blu-tree-select__row .blu-tree-select__check, .blu-tree-select .blu-tree-select__item[aria-disabled="true"][aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check { border-color:GrayText; background:Canvas; }
+  .blu-tree-select .blu-tree-select__item[aria-disabled="true"][aria-checked="true"] > .blu-tree-select__row .blu-tree-select__check::after, .blu-tree-select .blu-tree-select__item[aria-disabled="true"][aria-checked="mixed"] > .blu-tree-select__row .blu-tree-select__check::after { border-color:GrayText; }
+  .blu-tree-select .blu-tree-select__item:focus-visible > .blu-tree-select__row .blu-tree-select__check { outline-color:Highlight; }
+}
+.blu-tree-select .blu-tree-select__check { font-size:0; }
+/* END GENERATED SHARED CHECKBOX */
+
+/* BluUI_Core → UploadManager — owning Block stylesheet. */
+/* Shared control primitives, scoped to this component's runtime host. */
+.blu-upload { --blu-widget-primary: var(--bluui-color-primary-solid, #4f46e5); color: var(--bluui-text, #182230); font: 14px/1.5 var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif); min-width: 0; width: 100%; }
+.blu-upload *, .blu-upload *::before, .blu-upload *::after { box-sizing: border-box; }
+.blu-upload [hidden] { display: none !important; }
+.blu-upload .blu-control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--bluui-border, #dce3ed); border-radius: 8px; background: var(--bluui-surface, #fff); color: var(--bluui-text, #344054); font: inherit; font-weight: 500; line-height: 1.25; cursor: pointer; white-space: nowrap; }
+.blu-upload .blu-control:hover:not(:disabled) { background: var(--bluui-surface-muted, #f4f5fb); border-color: var(--bluui-primary-border, #a5a1f8); }
+.blu-upload .blu-control--primary { background: var(--blu-widget-primary); border-color: var(--blu-widget-primary); color: var(--bluui-on-primary, white); }
+.blu-upload .blu-control--primary:hover:not(:disabled) { background: var(--bluui-color-primary-solid, #4338ca); color: var(--bluui-on-primary, white); }
+.blu-upload .blu-control--quiet { border-color: transparent; background: transparent; }
+.blu-upload .blu-control--icon { flex: 0 0 32px; min-width: 32px; min-height: 32px; padding: 3px; font-size: 18px; }
+.blu-upload .blu-control:disabled { opacity: .5; cursor: default; }
+.blu-upload .blu-input { min-width: 0; width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--bluui-control-border, #d5deea); border-radius: 7px; background: var(--bluui-surface, white); color: var(--bluui-text, #182230); font: inherit; }
+.blu-upload :is(.blu-control, .blu-input):focus-visible { outline: 2px solid var(--blu-widget-primary); outline-offset: 2px; }
+.blu-upload .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
+.blu-upload .blu-interactive__empty { padding: 24px 12px; color: var(--bluui-text-muted, #667085); text-align: center; }
+/* Native design canvas stand-in; runtime content stays in the empty host. */
+.blu-upload-block > .blu-component-preview { display: none; -servicestudio-display: block; -servicestudio-padding: 18px; -servicestudio-border: 1px dashed var(--bluui-control-border, #c7d0e0); -servicestudio-border-radius: 10px; }
+
+/* Drop target, queue rows, and genuine network progress. */
+.blu-upload__drop { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px dashed var(--bluui-control-border, #bac5d7); border-radius: 12px; padding: 26px 18px; background: var(--bluui-surface-muted, #fafbfe); transition: background .15s, border-color .15s; }
+.blu-upload__drop.is-dragging { border-color: var(--blu-widget-primary); background: var(--bluui-primary-soft, #f0edff); }
+.blu-upload__drop[aria-disabled="true"] { opacity: .5; }
+.blu-upload__symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--bluui-primary-soft, #efedff); color: var(--bluui-primary-text, #4f46e5); font-size: 24px; margin-bottom: 10px; }
+.blu-upload__hint { color: var(--bluui-text-muted, #667085); font-size: 12px; margin: 6px 0 16px; }
+.blu-upload__list { list-style: none; padding: 0; margin: 16px 0; }
+.blu-upload__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bluui-border, #edf0f5); }
+.blu-upload__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.blu-upload__copy strong { overflow-wrap: anywhere; font-size: 13px; }
+.blu-upload__copy small { color: var(--bluui-text-muted, #667085); font-size: 12px; }
+.blu-upload__preview, .blu-upload__file-icon { width: 42px; height: 42px; flex: 0 0 42px; object-fit: cover; border-radius: 8px; background: var(--bluui-primary-soft, #f0edff); }
+.blu-upload__file-icon { display: grid; place-items: center; color: var(--bluui-primary-text, #4f46e5); font-size: 22px; }
+.blu-upload__progress { width: 100%; height: 6px; margin: 8px 0 0; accent-color: var(--blu-widget-primary); }
+.blu-upload__commands, .blu-upload__footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+.blu-upload__footer { padding-top: 12px; }
+.blu-upload__footer > span { margin-right: auto; color: var(--bluui-text-muted, #667085); font-size: 12px; }
+@media (max-width: 480px) { .blu-upload__row { flex-wrap: wrap; } .blu-upload__commands { margin-left: 54px; } }
+
+/* Runtime validation messages sit beside the interactive root. */
+.blu-upload-block .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
+
+/* BluUI_Core → Button → Style Sheet.
+   Extracted from the published BluUITheme on 2026-10-09.
+   Size selectors are strengthened for later OutSystems phone/tablet Theme rules;
+   Default and Secondary use neutral surfaces matching Chip's palette.
+   Keep the shared --blu-* DESIGN TOKENS in BluUITheme.
+   Includes existing variants, sizes, loading spinner, focus, and preview. */
+
+/* ============================================================
+   BUTTON — BASE
+   ============================================================ */
+
+.blu-button.blu-button {
+    appearance: none;
+    -webkit-appearance: none;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--blu-space-2);
+
+    box-sizing: border-box;
+
+    margin: 0;
+    padding: 0;
+
+    border: 1px solid transparent;
+    border-radius: var(--blu-radius-md);
+
+    font-family: var(--blu-font-family);
+    font-weight: var(--blu-font-weight-semibold);
+    line-height: 1;
+
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+
+    cursor: pointer;
+    user-select: none;
+
+    box-shadow: none;
+
+    transition:
+        background-color var(--blu-transition-fast),
+        border-color var(--blu-transition-fast),
+        color var(--blu-transition-fast),
+        box-shadow var(--blu-transition-fast),
+        transform var(--blu-transition-fast);
+}
+
+
+/* ============================================================
+   BUTTON — COLORS
+   These only define variables.
+   Variant rules below decide how they're displayed.
+   ============================================================ */
+
+
+/* Shared palette. Existing Button variants remain Filled, Outlined, Ghost.
+   Named presets have a soft filled surface; status buttons have solid fills.
+   Default and Secondary keep their neutral button appearance. */
+.blu-button.blu-button--default {
+    --blu-button-color: var(--bluui-color-default-text);
+    --blu-button-hover: var(--bluui-color-default-text);
+    --blu-button-active: var(--bluui-color-default-text);
+    --blu-button-soft: var(--bluui-color-default-soft);
+    --blu-button-soft-active: var(--bluui-color-default-border);
+    --blu-button-fill: var(--bluui-color-default-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-default-text);
+}
+
+.blu-button.blu-button--primary {
+    --blu-button-color: var(--bluui-color-primary-text);
+    --blu-button-hover: var(--bluui-color-primary-text);
+    --blu-button-active: var(--bluui-color-primary-text);
+    --blu-button-soft: var(--bluui-color-primary-soft);
+    --blu-button-soft-active: var(--bluui-color-primary-border);
+    --blu-button-fill: var(--bluui-color-primary-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-primary-contrast);
+}
+
+.blu-button.blu-button--secondary {
+    --blu-button-color: var(--bluui-color-secondary-text);
+    --blu-button-hover: var(--bluui-color-secondary-text);
+    --blu-button-active: var(--bluui-color-secondary-text);
+    --blu-button-soft: var(--bluui-color-secondary-soft);
+    --blu-button-soft-active: var(--bluui-color-secondary-border);
+    --blu-button-fill: var(--bluui-color-secondary-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-secondary-text);
+}
+
+.blu-button.blu-button--success {
+    --blu-button-color: var(--bluui-color-success-text);
+    --blu-button-hover: var(--bluui-color-success-text);
+    --blu-button-active: var(--bluui-color-success-text);
+    --blu-button-soft: var(--bluui-color-success-soft);
+    --blu-button-soft-active: var(--bluui-color-success-border);
+    --blu-button-fill: var(--bluui-color-success-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-success-contrast);
+}
+
+.blu-button.blu-button--processing {
+    --blu-button-color: var(--bluui-color-processing-text);
+    --blu-button-hover: var(--bluui-color-processing-text);
+    --blu-button-active: var(--bluui-color-processing-text);
+    --blu-button-soft: var(--bluui-color-processing-soft);
+    --blu-button-soft-active: var(--bluui-color-processing-border);
+    --blu-button-fill: var(--bluui-color-processing-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-processing-contrast);
+}
+
+.blu-button.blu-button--warning {
+    --blu-button-color: var(--bluui-color-warning-text);
+    --blu-button-hover: var(--bluui-color-warning-text);
+    --blu-button-active: var(--bluui-color-warning-text);
+    --blu-button-soft: var(--bluui-color-warning-soft);
+    --blu-button-soft-active: var(--bluui-color-warning-border);
+    --blu-button-fill: var(--bluui-color-warning-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-warning-contrast);
+}
+
+.blu-button.blu-button--error {
+    --blu-button-color: var(--bluui-color-error-text);
+    --blu-button-hover: var(--bluui-color-error-text);
+    --blu-button-active: var(--bluui-color-error-text);
+    --blu-button-soft: var(--bluui-color-error-soft);
+    --blu-button-soft-active: var(--bluui-color-error-border);
+    --blu-button-fill: var(--bluui-color-error-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-error-contrast);
+}
+
+.blu-button.blu-button--danger {
+    --blu-button-color: var(--bluui-color-danger-text);
+    --blu-button-hover: var(--bluui-color-danger-text);
+    --blu-button-active: var(--bluui-color-danger-text);
+    --blu-button-soft: var(--bluui-color-danger-soft);
+    --blu-button-soft-active: var(--bluui-color-danger-border);
+    --blu-button-fill: var(--bluui-color-danger-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-danger-contrast);
+}
+
+.blu-button.blu-button--magenta {
+    --blu-button-color: var(--bluui-color-magenta-text);
+    --blu-button-hover: var(--bluui-color-magenta-text);
+    --blu-button-active: var(--bluui-color-magenta-text);
+    --blu-button-soft: var(--bluui-color-magenta-soft);
+    --blu-button-soft-active: var(--bluui-color-magenta-border);
+    --blu-button-fill: var(--bluui-color-magenta-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-magenta-text);
+}
+
+.blu-button.blu-button--red {
+    --blu-button-color: var(--bluui-color-red-text);
+    --blu-button-hover: var(--bluui-color-red-text);
+    --blu-button-active: var(--bluui-color-red-text);
+    --blu-button-soft: var(--bluui-color-red-soft);
+    --blu-button-soft-active: var(--bluui-color-red-border);
+    --blu-button-fill: var(--bluui-color-red-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-red-text);
+}
+
+.blu-button.blu-button--volcano {
+    --blu-button-color: var(--bluui-color-volcano-text);
+    --blu-button-hover: var(--bluui-color-volcano-text);
+    --blu-button-active: var(--bluui-color-volcano-text);
+    --blu-button-soft: var(--bluui-color-volcano-soft);
+    --blu-button-soft-active: var(--bluui-color-volcano-border);
+    --blu-button-fill: var(--bluui-color-volcano-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-volcano-text);
+}
+
+.blu-button.blu-button--orange {
+    --blu-button-color: var(--bluui-color-orange-text);
+    --blu-button-hover: var(--bluui-color-orange-text);
+    --blu-button-active: var(--bluui-color-orange-text);
+    --blu-button-soft: var(--bluui-color-orange-soft);
+    --blu-button-soft-active: var(--bluui-color-orange-border);
+    --blu-button-fill: var(--bluui-color-orange-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-orange-text);
+}
+
+.blu-button.blu-button--gold {
+    --blu-button-color: var(--bluui-color-gold-text);
+    --blu-button-hover: var(--bluui-color-gold-text);
+    --blu-button-active: var(--bluui-color-gold-text);
+    --blu-button-soft: var(--bluui-color-gold-soft);
+    --blu-button-soft-active: var(--bluui-color-gold-border);
+    --blu-button-fill: var(--bluui-color-gold-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-gold-text);
+}
+
+.blu-button.blu-button--lime {
+    --blu-button-color: var(--bluui-color-lime-text);
+    --blu-button-hover: var(--bluui-color-lime-text);
+    --blu-button-active: var(--bluui-color-lime-text);
+    --blu-button-soft: var(--bluui-color-lime-soft);
+    --blu-button-soft-active: var(--bluui-color-lime-border);
+    --blu-button-fill: var(--bluui-color-lime-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-lime-text);
+}
+
+.blu-button.blu-button--green {
+    --blu-button-color: var(--bluui-color-green-text);
+    --blu-button-hover: var(--bluui-color-green-text);
+    --blu-button-active: var(--bluui-color-green-text);
+    --blu-button-soft: var(--bluui-color-green-soft);
+    --blu-button-soft-active: var(--bluui-color-green-border);
+    --blu-button-fill: var(--bluui-color-green-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-green-text);
+}
+
+.blu-button.blu-button--cyan {
+    --blu-button-color: var(--bluui-color-cyan-text);
+    --blu-button-hover: var(--bluui-color-cyan-text);
+    --blu-button-active: var(--bluui-color-cyan-text);
+    --blu-button-soft: var(--bluui-color-cyan-soft);
+    --blu-button-soft-active: var(--bluui-color-cyan-border);
+    --blu-button-fill: var(--bluui-color-cyan-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-cyan-text);
+}
+
+.blu-button.blu-button--blue {
+    --blu-button-color: var(--bluui-color-blue-text);
+    --blu-button-hover: var(--bluui-color-blue-text);
+    --blu-button-active: var(--bluui-color-blue-text);
+    --blu-button-soft: var(--bluui-color-blue-soft);
+    --blu-button-soft-active: var(--bluui-color-blue-border);
+    --blu-button-fill: var(--bluui-color-blue-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-blue-text);
+}
+
+.blu-button.blu-button--geekblue {
+    --blu-button-color: var(--bluui-color-geekblue-text);
+    --blu-button-hover: var(--bluui-color-geekblue-text);
+    --blu-button-active: var(--bluui-color-geekblue-text);
+    --blu-button-soft: var(--bluui-color-geekblue-soft);
+    --blu-button-soft-active: var(--bluui-color-geekblue-border);
+    --blu-button-fill: var(--bluui-color-geekblue-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-geekblue-text);
+}
+
+.blu-button.blu-button--purple {
+    --blu-button-color: var(--bluui-color-purple-text);
+    --blu-button-hover: var(--bluui-color-purple-text);
+    --blu-button-active: var(--bluui-color-purple-text);
+    --blu-button-soft: var(--bluui-color-purple-soft);
+    --blu-button-soft-active: var(--bluui-color-purple-border);
+    --blu-button-fill: var(--bluui-color-purple-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-purple-text);
+}
+
+/* ============================================================
+   BUTTON — FILLED
+   Default/Secondary supply neutral fills. Other colors use their original
+   solid color, hover, and pressed values through the fallbacks below.
+   ============================================================ */
+
+.blu-button.blu-button--filled {
+    background-color: var(--blu-button-fill, var(--blu-button-color));
+    border-color: var(--blu-button-fill-border, var(--blu-button-color));
+    color: var(--blu-button-contrast);
+
+    box-shadow: var(--blu-shadow-xs);
+}
+
+.blu-button.blu-button--filled:hover {
+    background-color: var(--blu-button-fill-hover, var(--blu-button-hover));
+    border-color: var(--blu-button-fill-border-hover, var(--blu-button-hover));
+    color: var(--blu-button-contrast);
+}
+
+.blu-button.blu-button--filled:active {
+    background-color: var(--blu-button-fill-active, var(--blu-button-active));
+    border-color: var(--blu-button-fill-border-active, var(--blu-button-active));
+    color: var(--blu-button-contrast);
+
+    transform: translateY(1px);
+}
+
+
+/* ============================================================
+   BUTTON — OUTLINED
+   ============================================================ */
+
+.blu-button.blu-button--outlined {
+    background-color: transparent;
+    border-color: var(--blu-button-color);
+    color: var(--blu-button-color);
+
+    box-shadow: none;
+}
+
+.blu-button.blu-button--outlined:hover {
+    background-color: var(--blu-button-soft);
+    border-color: var(--blu-button-hover);
+    color: var(--blu-button-hover);
+}
+
+.blu-button.blu-button--outlined:active {
+    background-color: var(--blu-button-soft-active);
+    border-color: var(--blu-button-active);
+    color: var(--blu-button-active);
+
+    transform: translateY(1px);
+}
+
+
+/* ============================================================
+   BUTTON — GHOST
+   ============================================================ */
+
+.blu-button.blu-button--ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--blu-button-color);
+
+    box-shadow: none;
+}
+
+.blu-button.blu-button--ghost:hover {
+    background-color: var(--blu-button-soft);
+    border-color: transparent;
+    color: var(--blu-button-hover);
+}
+
+.blu-button.blu-button--ghost:active {
+    background-color: var(--blu-button-soft-active);
+    border-color: transparent;
+    color: var(--blu-button-active);
+
+    transform: translateY(1px);
+}
+
+
+/* ============================================================
+   BUTTON — SIZES (specificity preserves sizes before Theme CSS)
+   ============================================================ */
+
+.blu-button.blu-button.blu-button--small {
+    min-height: 32px;
+
+    padding: 0 12px;
+
+    font-size: var(--blu-font-size-sm);
+}
+
+.blu-button.blu-button.blu-button--medium {
+    min-height: 40px;
+
+    padding: 0 16px;
+
+    font-size: var(--blu-font-size-md);
+}
+
+.blu-button.blu-button.blu-button--large {
+    min-height: 48px;
+
+    padding: 0 20px;
+
+    font-size: var(--blu-font-size-lg);
+}
+
+
+/* ============================================================
+   BUTTON — FULL WIDTH
+   ============================================================ */
+
+.blu-button.blu-button--full {
+    width: 100%;
+}
+
+
+/* ============================================================
+   BUTTON — FOCUS
+   ============================================================ */
+
+.blu-button.blu-button:focus {
+    outline: none;
+}
+
+.blu-button.blu-button:focus-visible {
+    outline: 2px solid var(--bluui-primary, #4f46e5);
+    outline-offset: 3px;
+
+    box-shadow: var(--blu-focus-ring);
+}
+
+
+/* ============================================================
+   BUTTON — DISABLED
+   ============================================================ */
+
+.blu-button.blu-button:disabled,
+.blu-button.blu-button--disabled {
+    opacity: 0.48;
+
+    cursor: not-allowed;
+    pointer-events: none;
+
+    box-shadow: none;
+    transform: none;
+}
+
+
+/* ============================================================
+   BUTTON — LOADING
+   ============================================================ */
+
+.blu-button.blu-button--loading {
+    cursor: wait;
+    pointer-events: none;
+}
+
+/*
+   OutSystems may render the native button as disabled while loading.
+   Don't fade the loading state.
+*/
+
+.blu-button.blu-button--loading:disabled {
+    opacity: 1;
+}
+
+
+/* ============================================================
+   BUTTON — SPINNER
+   ============================================================ */
+
+.blu-button__spinner {
+    display: inline-block;
+
+    width: 16px;
+    height: 16px;
+
+    box-sizing: border-box;
+
+    flex: 0 0 16px;
+
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+
+    opacity: 0.85;
+
+    animation: blu-spin 0.65s linear infinite;
+}
+
+.blu-button--small .blu-button__spinner {
+    width: 14px;
+    height: 14px;
+
+    flex-basis: 14px;
+}
+
+.blu-button--large .blu-button__spinner {
+    width: 18px;
+    height: 18px;
+
+    flex-basis: 18px;
+}
+
+@keyframes blu-spin {
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+
+/* ============================================================
+   BUTTON — CONTENT
+   ============================================================ */
+
+.blu-button__content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 0;
+}
+
+
+/* ============================================================
+   BUTTON — ICON
+   ============================================================ */
+
+.blu-button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    flex: 0 0 auto;
+
+    font-size: 1.1em;
+    line-height: 1;
+}
+
+/* ============================================================
+   BUTTON — PREVIEW
+   ============================================================ */
+
+.blu-preview-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-height: 40px;
+    min-width: 90px;
+
+    padding: 0 16px;
+
+    border-radius: 8px;
+
+    background-color: var(--bluui-color-primary-solid, #4f46e5);
+    color: var(--bluui-on-primary, #ffffff);
+
+    font-family:
+        Inter,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+
+    font-size: 14px;
+    font-weight: 600;
+}
+
+/* Respect motion preferences while preserving a static loading indicator. */
+@media (prefers-reduced-motion: reduce) {
+  .blu-button { transition: none !important; }
+  .blu-button .blu-button-spinner, .blu-button .blu-button__spinner { animation: none !important; }
+}
+
+/* BluUI_Core → TransferList — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-transfer {
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* TransferList — native OutSystems panels and checkable rows
+Desktop order: Available, bulk commands, Selected. The consumer owns the
+selected keys; CSS does not decide whether an item can be moved. */
+.blu-transfer {
+  width: 100%;
+  color: var(--bluui-text, #182230);
+}
+
+.blu-transfer__layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: stretch;
+  gap: 14px;
+}
+
+.blu-transfer__pane {
+  min-width: 0;
+  border: 1px solid var(--bluui-border, #e2e8f0);
+  border-radius: 10px;
+  background: var(--bluui-surface, #fff);
+  overflow: hidden;
+}
+
+.blu-transfer__heading {
+  display: block;
+  padding: 14px 14px 8px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.blu-transfer__search {
+  padding: 0 12px 12px;
+}
+
+/* Constrain only search inputs within this component, leaving global form styles intact. */
+.blu-transfer__search input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Scroll bounded lists within a panel. This is a height limit, not virtualization. */
+.blu-transfer__list {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.blu-transfer .blu-transfer__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 14px;
+  border-top: 1px solid var(--bluui-border, #e2e8f0);
+  min-width: 0;
+}
+
+/* Keep locked item descriptions readable; the checkbox conveys unavailable state. */
+.blu-transfer__row--disabled {
+  background: var(--bluui-surface-muted, #f7f8fb);
+}
+
+.blu-transfer .blu-transfer__copy {
+  width: auto;
+  min-width: 0;
+  flex: 1;
+}
+
+.blu-transfer__label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+
+.blu-transfer__description {
+  display: block;
+  margin-top: 3px;
+  font-size: 12px;
+  color: var(--bluui-text-muted, #64748b);
+  overflow-wrap: anywhere;
+}
+
+/* Layout for existing BluUI Button Block instances. Their appearance continues
+to come from the Button Block stylesheet. */
+.blu-transfer .blu-transfer__commands {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  width: auto;
+}
+
+/* Keep the generated Button Block wrapper from filling an entire command column. */
+.blu-transfer .blu-transfer__commands > [data-block] {
+  width: auto;
+}
+
+/* Consumer-facing selection count and explanation of temporary checked states.
+The guide assigns role=status to the corresponding native Expression. */
+.blu-transfer__status {
+  display: block;
+  margin-top: 10px;
+  font-size: 12px;
+  color: var(--bluui-text-muted, #64748b);
+}
+
+/* Shared empty-state text for TreeView and the two TransferList panels. */
+.blu-transfer__empty {
+  padding: 12px;
+  color: var(--bluui-text-muted, #64748b);
+  font-size: 13px;
+}
+
+/* Shared error message — the native Expression receives role=alert in the guide. */
+.blu-transfer .blu-component-error {
+  display: block;
+  margin-top: 8px;
+  color: var(--bluui-danger-text, #b42318);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+/* Service Studio canvas previews
+Ordinary browsers hide these static stand-ins. The -servicestudio-*
+declarations expose them only in the design canvas. Put preview Containers
+beside the live host/List, never inside a JavaScript-owned host. */
+.blu-transfer .blu-component-preview {
+  display: none;
+  -servicestudio-display: block;
+  -servicestudio-padding: 12px;
+  -servicestudio-border: 1px dashed var(--bluui-control-border, #cbd5e1);
+  -servicestudio-border-radius: 8px;
+}
+
+.blu-transfer .blu-component-preview-line {
+  display: block;
+  padding: 5px;
+  color: var(--bluui-text-muted, #64748b);
+  font-size: 13px;
+}
+
+/* Responsive layout — stack both panels in DOM order on narrow viewports.
+Keep bulk commands together in a wrapping row between the panels. */
+@media (max-width: 640px) {
+  .blu-transfer__layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .blu-transfer .blu-transfer__commands {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+/* BEGIN GENERATED SHARED CHECKBOX — scripts/build-checkbox-styles.mjs */
+/* One checkbox design, emitted into each owning Block. Keep native input/tree/grid semantics. */
+.blu-transfer input[type="checkbox"] {
+  -webkit-appearance:none;
+  appearance:none;
+  box-sizing:border-box;
+  position:relative;
+  display:inline-block;
+  flex:0 0 22px;
+  width:22px;
+  height:22px;
+  min-width:22px;
+  min-height:22px;
+  margin:0;
+  padding:0;
+  border:1.5px solid var(--bluui-control-border,#7b8799);
+  border-radius:6px;
+  background-color:var(--bluui-surface,#fff);
+  background-image:none;
+  box-shadow:0 1px 2px rgb(15 23 42 / 6%);
+  vertical-align:middle;
+  cursor:pointer;
+  opacity:1;
+  filter:none;
+  transition:background-color 120ms ease,border-color 120ms ease,box-shadow 120ms ease;
+}
+.blu-transfer input[type="checkbox"]::after { content:none; }
+.blu-transfer input[type="checkbox"]:checked,
+.blu-transfer input[type="checkbox"]:indeterminate {
+  border-color:var(--bluui-color-primary-solid,#4f46e5);
+  background-color:var(--bluui-color-primary-solid,#4f46e5);
+}
+.blu-transfer input[type="checkbox"]:checked::after,
+.blu-transfer input[type="checkbox"]:indeterminate::after {
+  content:"";
+  box-sizing:content-box;
+  position:absolute;
+  inset:auto;
+  width:10px;
+  height:6px;
+  left:4px;
+  top:5px;
+  border:solid var(--bluui-color-primary-contrast,#fff);
+  border-width:0 0 2px 2px;
+  border-radius:0;
+  background:none;
+  -webkit-mask:none;
+  mask:none;
+  transform:rotate(-45deg);
+  pointer-events:none;
+}
+.blu-transfer input[type="checkbox"]:indeterminate::after {
+  height:0;
+  top:8px;
+  border-width:0 0 2px;
+  transform:none;
+}
+.blu-transfer input[type="checkbox"]:hover:not(:disabled) {
+  border-color:var(--bluui-color-primary-solid,#4f46e5);
+  box-shadow:0 0 0 3px var(--bluui-color-primary-soft,#eef2ff);
+}
+.blu-transfer input[type="checkbox"]:focus-visible {
+  outline:2px solid var(--bluui-color-primary-solid,#4f46e5);
+  outline-offset:3px;
+}
+.blu-transfer input[type="checkbox"]:disabled {
+  border-color:var(--bluui-border-strong,#b8c4d4);
+  background-color:var(--bluui-surface-muted,#f7f8fb);
+  box-shadow:none;
+  cursor:not-allowed;
+}
+.blu-transfer input[type="checkbox"]:disabled:checked,
+.blu-transfer input[type="checkbox"]:disabled:indeterminate {
+  border-color:var(--bluui-text-muted,#5c6b80);
+  background-color:var(--bluui-text-muted,#5c6b80);
+}
+@media (prefers-reduced-motion:reduce) {
+  .blu-transfer input[type="checkbox"] { transition:none; }
+}
+.blu-transfer input[type="checkbox"]::before { content:none; }
+@media (forced-colors:active) {
+  .blu-transfer input[type="checkbox"],
+  .blu-transfer input[type="checkbox"]:checked,
+  .blu-transfer input[type="checkbox"]:indeterminate,
+  .blu-transfer input[type="checkbox"]:disabled,
+  .blu-transfer input[type="checkbox"]:disabled:checked,
+  .blu-transfer input[type="checkbox"]:disabled:indeterminate { -webkit-appearance:checkbox; appearance:auto; background:revert; border:revert; box-shadow:none; forced-color-adjust:auto; }
+  .blu-transfer input[type="checkbox"]:checked::after, .blu-transfer input[type="checkbox"]:indeterminate::after { content:none; }
+}
+/* END GENERATED SHARED CHECKBOX */
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Horizontal hierarchy columns with independent vertical scrolling. */
+.blu-cascader{
+  position:relative;
+  width:100%;
+  min-width:200px;
+  color:var(--bluui-text)
+}
+.blu-cascader__trigger{
+  width:100%;
+  justify-content:flex-start;
+  padding-right:48px;
+  min-height:42px;
+  font-weight:400;
+  white-space:normal;
+  text-align:left
+}
+.blu-cascader__trigger:after{
+  content:"⌄";
+  position:absolute;
+  right:14px;
+  font-size:17px
+}
+.blu-cascader>button:nth-child(2){
+  position:absolute;
+  right:34px;
+  top:4px;
+  min-height:32px;
+  min-width:32px;
+  padding:2px 7px;
+  border:0;
+  background:transparent
+}
+.blu-cascader>button[hidden]{
+  display:none
+}
+.blu-cascader__popup{
+  position:absolute;
+  z-index:60;
+  top:calc(100% + 8px);
+  left:0;
+  background:var(--bluui-surface);
+  border:1px solid var(--bluui-border);
+  border-radius:12px;
+  box-shadow:0 16px 42px #0002;
+  max-width:min(760px,calc(100vw - 48px));
+  overflow:hidden
+}
+.blu-cascader__popup[hidden]{
+  display:none
+}
+.blu-cascader__columns{
+  display:flex;
+  max-width:100%;
+  overflow-x:auto
+}
+.blu-cascader__column{
+  flex:0 0 190px;
+  max-height:300px;
+  overflow-y:auto;
+  padding:6px
+}
+.blu-cascader__column+.blu-cascader__column{
+  border-left:1px solid var(--bluui-border)
+}
+.blu-cascader__row{
+  display:flex;
+  gap:2px
+}
+.blu-cascader__row>button:first-child{
+  flex:1;
+  min-width:0;
+  text-align:left;
+  justify-content:flex-start;
+  white-space:normal
+}
+.blu-cascader__row>button{
+  border:0;
+  font-weight:400;
+  background:transparent
+}
+.blu-cascader__row [aria-expanded=true],.blu-cascader__row [aria-pressed=true]{
+  background:var(--bluui-color-primary-soft);
+  color:var(--bluui-color-primary-text);
+  font-weight:600
+}
+@media(max-width:600px){.blu-cascader__column{
+  flex-basis:170px
+}
+.blu-cascader__popup{
+  max-width:calc(100vw - 40px)
+}}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-cascader-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+.blu-date-picker-block .blu-component-preview,.blu-time-picker-block .blu-component-preview,.blu-date-time-picker-block .blu-component-preview,.blu-date-range-picker-block .blu-component-preview {display:none;}
+/* Shared by the four pickers. Each native Block includes its own complete copy. */
+.blu-advanced-sr {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker,.blu-picker *,.blu-picker__dialog,.blu-picker__dialog * {box-sizing:border-box;}
+.blu-picker {max-width:100%;min-width:0;color:var(--bluui-text,#182230);font:14px/1.5 var(--blu-font-family,var(--bluui-font,system-ui,sans-serif));}
+.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__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;}
+.blu-picker__field-icon {position:absolute;right:11px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--bluui-text-muted,#526174);pointer-events:none;}
+.blu-picker__field-icon svg {display:block;width:100%;height:100%;}
+.blu-picker__input::placeholder {color:var(--bluui-text-muted,#526174);opacity:1;}
+.blu-picker__input:disabled {opacity:.65;cursor:not-allowed;}
+.blu-picker__input[readonly] {background:var(--bluui-surface-muted,#f1f3f7);}
+.blu-picker__input[aria-invalid=true] {border-color:var(--bluui-color-error-solid,#b42318);}
+.blu-picker__hint,.blu-picker__help {color:var(--bluui-text-muted,#526174);font-size:12px;margin:8px 0;overflow-wrap:anywhere;}
+.blu-picker__actions,.blu-picker__presets {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
+.blu-picker__button {appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;max-width:100%;padding:8px 13px;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;white-space:normal;cursor:pointer;}
+.blu-picker__button:hover:not(:disabled),.blu-picker__day:hover:not([aria-disabled=true]) {background:var(--bluui-surface-muted,#edf0f7);}
+.blu-picker__button--primary {background:var(--bluui-color-primary-solid,#4f46e5);border-color:var(--bluui-color-primary-solid,#4f46e5);color:var(--bluui-color-primary-contrast,#fff);}
+.blu-picker__button--primary:hover:not(:disabled) {background:var(--bluui-color-primary-solid,#4f46e5);filter:brightness(.94);}
+.blu-picker__button:disabled {opacity:.55;cursor:not-allowed;}
+.blu-picker__input:focus-visible,.blu-picker__button:focus-visible,.blu-picker__day:focus-visible {outline:3px solid var(--bluui-focus,#6156df);outline-offset:3px;}
+.blu-picker__error {color:var(--bluui-color-error-text,#a32218);font-size:13px;line-height:1.5;overflow-wrap:anywhere;margin-top:8px;}
+.blu-picker__dialog {position:fixed;inset:auto;width:344px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;margin:0;padding:10px;border:1px solid var(--bluui-border,#dce2eb);border-radius:12px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:13px/1.35 var(--blu-font-family,var(--bluui-font,system-ui,sans-serif));box-shadow:0 12px 32px #10162726,0 2px 6px #10162714;scroll-padding:12px;z-index:1000;}
+.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>.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;}
+.blu-picker__calendar {width:100%;table-layout:fixed;border-collapse:separate;border-spacing:2px;}
+.blu-picker__calendar th {height:20px;text-align:center;font-size:11px;font-weight:500;color:var(--bluui-text-muted,#526174);padding:0;}
+.blu-picker__calendar td {padding:0;text-align:center;height:32px;border:0;}
+.blu-picker__day {appearance:none;display:block;width:100%;min-width:24px;min-height:32px;padding:4px 0;border:1px solid transparent;border-radius:7px;background:transparent;color:inherit;font:inherit;cursor:pointer;}
+.blu-picker__day[aria-current=date] {border-color:var(--bluui-control-border,#69788d);font-weight:700;}
+.blu-picker__day[data-between=true] {background:var(--bluui-color-primary-soft,#eef2ff);color:var(--bluui-color-primary-text,#3730a3);border-radius:0;}
+.blu-picker__day[data-selected=true] {background:var(--bluui-color-primary-solid,#4f46e5)!important;color:var(--bluui-color-primary-contrast,#fff);font-weight:700;}
+.blu-picker__day[aria-disabled=true] {color:var(--bluui-text-muted,#526174);text-decoration:line-through;cursor:not-allowed;}
+.blu-picker__time-area {display:flex;flex-wrap:wrap;gap:8px;margin:6px 0;}
+.blu-picker__time-area>.blu-picker__select-field {flex:1 1 70px;}
+.blu-picker__selection {font-size:12px;min-height:1.35em;margin:4px 0;overflow-wrap:anywhere;}
+@media(forced-colors:active){.blu-picker__day[data-selected=true]{background:Highlight!important;color:HighlightText;border:2px solid Highlight}.blu-picker__day[data-between=true]{border-bottom:2px solid Highlight}.blu-picker__input,.blu-picker__button{border:1px solid ButtonText}.blu-picker__dialog{border:2px solid CanvasText}}
+
+.blu-picker__popup-actions {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:6px;}
+.blu-picker__selection:empty,.blu-picker__error:empty {display:none;}
+.blu-picker__presets:empty {display:none;}
+.blu-picker__presets {margin:0 0 6px;}
+
+/* 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__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;}
+ .blu-picker__day {min-height:36px;}
+ .blu-picker__dialog .blu-picker__button {min-height:36px;}
+}
+/* Keep six calendar weeks and the footer visible in short phone viewports. */
+.blu-picker__dialog[data-compact=true] {padding:6px;font-size:12px;line-height:1.2;}
+.blu-picker__dialog[data-compact=true] .blu-picker__input {min-height:32px;padding:4px 5px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__button {min-height:30px;padding:4px 7px;font-size:12px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar-nav>.blu-picker__button {height:32px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar {border-spacing:0;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar th {height:18px;font-size:10px;}
+.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__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;}
+
+.blu-date-picker-block .blu-component-preview,.blu-time-picker-block .blu-component-preview,.blu-date-time-picker-block .blu-component-preview,.blu-date-range-picker-block .blu-component-preview {display:none;}
+/* Shared by the four pickers. Each native Block includes its own complete copy. */
+.blu-advanced-sr {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker,.blu-picker *,.blu-picker__dialog,.blu-picker__dialog * {box-sizing:border-box;}
+.blu-picker {max-width:100%;min-width:0;color:var(--bluui-text,#182230);font:14px/1.5 var(--blu-font-family,var(--bluui-font,system-ui,sans-serif));}
+.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__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;}
+.blu-picker__field-icon {position:absolute;right:11px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--bluui-text-muted,#526174);pointer-events:none;}
+.blu-picker__field-icon svg {display:block;width:100%;height:100%;}
+.blu-picker__input::placeholder {color:var(--bluui-text-muted,#526174);opacity:1;}
+.blu-picker__input:disabled {opacity:.65;cursor:not-allowed;}
+.blu-picker__input[readonly] {background:var(--bluui-surface-muted,#f1f3f7);}
+.blu-picker__input[aria-invalid=true] {border-color:var(--bluui-color-error-solid,#b42318);}
+.blu-picker__hint,.blu-picker__help {color:var(--bluui-text-muted,#526174);font-size:12px;margin:8px 0;overflow-wrap:anywhere;}
+.blu-picker__actions,.blu-picker__presets {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
+.blu-picker__button {appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;max-width:100%;padding:8px 13px;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;white-space:normal;cursor:pointer;}
+.blu-picker__button:hover:not(:disabled),.blu-picker__day:hover:not([aria-disabled=true]) {background:var(--bluui-surface-muted,#edf0f7);}
+.blu-picker__button--primary {background:var(--bluui-color-primary-solid,#4f46e5);border-color:var(--bluui-color-primary-solid,#4f46e5);color:var(--bluui-color-primary-contrast,#fff);}
+.blu-picker__button--primary:hover:not(:disabled) {background:var(--bluui-color-primary-solid,#4f46e5);filter:brightness(.94);}
+.blu-picker__button:disabled {opacity:.55;cursor:not-allowed;}
+.blu-picker__input:focus-visible,.blu-picker__button:focus-visible,.blu-picker__day:focus-visible {outline:3px solid var(--bluui-focus,#6156df);outline-offset:3px;}
+.blu-picker__error {color:var(--bluui-color-error-text,#a32218);font-size:13px;line-height:1.5;overflow-wrap:anywhere;margin-top:8px;}
+.blu-picker__dialog {position:fixed;inset:auto;width:344px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;margin:0;padding:10px;border:1px solid var(--bluui-border,#dce2eb);border-radius:12px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:13px/1.35 var(--blu-font-family,var(--bluui-font,system-ui,sans-serif));box-shadow:0 12px 32px #10162726,0 2px 6px #10162714;scroll-padding:12px;z-index:1000;}
+.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>.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;}
+.blu-picker__calendar {width:100%;table-layout:fixed;border-collapse:separate;border-spacing:2px;}
+.blu-picker__calendar th {height:20px;text-align:center;font-size:11px;font-weight:500;color:var(--bluui-text-muted,#526174);padding:0;}
+.blu-picker__calendar td {padding:0;text-align:center;height:32px;border:0;}
+.blu-picker__day {appearance:none;display:block;width:100%;min-width:24px;min-height:32px;padding:4px 0;border:1px solid transparent;border-radius:7px;background:transparent;color:inherit;font:inherit;cursor:pointer;}
+.blu-picker__day[aria-current=date] {border-color:var(--bluui-control-border,#69788d);font-weight:700;}
+.blu-picker__day[data-between=true] {background:var(--bluui-color-primary-soft,#eef2ff);color:var(--bluui-color-primary-text,#3730a3);border-radius:0;}
+.blu-picker__day[data-selected=true] {background:var(--bluui-color-primary-solid,#4f46e5)!important;color:var(--bluui-color-primary-contrast,#fff);font-weight:700;}
+.blu-picker__day[aria-disabled=true] {color:var(--bluui-text-muted,#526174);text-decoration:line-through;cursor:not-allowed;}
+.blu-picker__time-area {display:flex;flex-wrap:wrap;gap:8px;margin:6px 0;}
+.blu-picker__time-area>.blu-picker__select-field {flex:1 1 70px;}
+.blu-picker__selection {font-size:12px;min-height:1.35em;margin:4px 0;overflow-wrap:anywhere;}
+@media(forced-colors:active){.blu-picker__day[data-selected=true]{background:Highlight!important;color:HighlightText;border:2px solid Highlight}.blu-picker__day[data-between=true]{border-bottom:2px solid Highlight}.blu-picker__input,.blu-picker__button{border:1px solid ButtonText}.blu-picker__dialog{border:2px solid CanvasText}}
+
+.blu-picker__popup-actions {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:6px;}
+.blu-picker__selection:empty,.blu-picker__error:empty {display:none;}
+.blu-picker__presets:empty {display:none;}
+.blu-picker__presets {margin:0 0 6px;}
+
+/* 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__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;}
+ .blu-picker__day {min-height:36px;}
+ .blu-picker__dialog .blu-picker__button {min-height:36px;}
+}
+/* Keep six calendar weeks and the footer visible in short phone viewports. */
+.blu-picker__dialog[data-compact=true] {padding:6px;font-size:12px;line-height:1.2;}
+.blu-picker__dialog[data-compact=true] .blu-picker__input {min-height:32px;padding:4px 5px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__button {min-height:30px;padding:4px 7px;font-size:12px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar-nav>.blu-picker__button {height:32px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar {border-spacing:0;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar th {height:18px;font-size:10px;}
+.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__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;}
+
+.blu-date-picker-block .blu-component-preview,.blu-time-picker-block .blu-component-preview,.blu-date-time-picker-block .blu-component-preview,.blu-date-range-picker-block .blu-component-preview {display:none;}
+/* Shared by the four pickers. Each native Block includes its own complete copy. */
+.blu-advanced-sr {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker,.blu-picker *,.blu-picker__dialog,.blu-picker__dialog * {box-sizing:border-box;}
+.blu-picker {max-width:100%;min-width:0;color:var(--bluui-text,#182230);font:14px/1.5 var(--blu-font-family,var(--bluui-font,system-ui,sans-serif));}
+.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__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;}
+.blu-picker__field-icon {position:absolute;right:11px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--bluui-text-muted,#526174);pointer-events:none;}
+.blu-picker__field-icon svg {display:block;width:100%;height:100%;}
+.blu-picker__input::placeholder {color:var(--bluui-text-muted,#526174);opacity:1;}
+.blu-picker__input:disabled {opacity:.65;cursor:not-allowed;}
+.blu-picker__input[readonly] {background:var(--bluui-surface-muted,#f1f3f7);}
+.blu-picker__input[aria-invalid=true] {border-color:var(--bluui-color-error-solid,#b42318);}
+.blu-picker__hint,.blu-picker__help {color:var(--bluui-text-muted,#526174);font-size:12px;margin:8px 0;overflow-wrap:anywhere;}
+.blu-picker__actions,.blu-picker__presets {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
+.blu-picker__button {appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;max-width:100%;padding:8px 13px;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;white-space:normal;cursor:pointer;}
+.blu-picker__button:hover:not(:disabled),.blu-picker__day:hover:not([aria-disabled=true]) {background:var(--bluui-surface-muted,#edf0f7);}
+.blu-picker__button--primary {background:var(--bluui-color-primary-solid,#4f46e5);border-color:var(--bluui-color-primary-solid,#4f46e5);color:var(--bluui-color-primary-contrast,#fff);}
+.blu-picker__button--primary:hover:not(:disabled) {background:var(--bluui-color-primary-solid,#4f46e5);filter:brightness(.94);}
+.blu-picker__button:disabled {opacity:.55;cursor:not-allowed;}
+.blu-picker__input:focus-visible,.blu-picker__button:focus-visible,.blu-picker__day:focus-visible {outline:3px solid var(--bluui-focus,#6156df);outline-offset:3px;}
+.blu-picker__error {color:var(--bluui-color-error-text,#a32218);font-size:13px;line-height:1.5;overflow-wrap:anywhere;margin-top:8px;}
+.blu-picker__dialog {position:fixed;inset:auto;width:344px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;margin:0;padding:10px;border:1px solid var(--bluui-border,#dce2eb);border-radius:12px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:13px/1.35 var(--blu-font-family,var(--bluui-font,system-ui,sans-serif));box-shadow:0 12px 32px #10162726,0 2px 6px #10162714;scroll-padding:12px;z-index:1000;}
+.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>.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;}
+.blu-picker__calendar {width:100%;table-layout:fixed;border-collapse:separate;border-spacing:2px;}
+.blu-picker__calendar th {height:20px;text-align:center;font-size:11px;font-weight:500;color:var(--bluui-text-muted,#526174);padding:0;}
+.blu-picker__calendar td {padding:0;text-align:center;height:32px;border:0;}
+.blu-picker__day {appearance:none;display:block;width:100%;min-width:24px;min-height:32px;padding:4px 0;border:1px solid transparent;border-radius:7px;background:transparent;color:inherit;font:inherit;cursor:pointer;}
+.blu-picker__day[aria-current=date] {border-color:var(--bluui-control-border,#69788d);font-weight:700;}
+.blu-picker__day[data-between=true] {background:var(--bluui-color-primary-soft,#eef2ff);color:var(--bluui-color-primary-text,#3730a3);border-radius:0;}
+.blu-picker__day[data-selected=true] {background:var(--bluui-color-primary-solid,#4f46e5)!important;color:var(--bluui-color-primary-contrast,#fff);font-weight:700;}
+.blu-picker__day[aria-disabled=true] {color:var(--bluui-text-muted,#526174);text-decoration:line-through;cursor:not-allowed;}
+.blu-picker__time-area {display:flex;flex-wrap:wrap;gap:8px;margin:6px 0;}
+.blu-picker__time-area>.blu-picker__select-field {flex:1 1 70px;}
+.blu-picker__selection {font-size:12px;min-height:1.35em;margin:4px 0;overflow-wrap:anywhere;}
+@media(forced-colors:active){.blu-picker__day[data-selected=true]{background:Highlight!important;color:HighlightText;border:2px solid Highlight}.blu-picker__day[data-between=true]{border-bottom:2px solid Highlight}.blu-picker__input,.blu-picker__button{border:1px solid ButtonText}.blu-picker__dialog{border:2px solid CanvasText}}
+
+.blu-picker__popup-actions {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:6px;}
+.blu-picker__selection:empty,.blu-picker__error:empty {display:none;}
+.blu-picker__presets:empty {display:none;}
+.blu-picker__presets {margin:0 0 6px;}
+
+/* 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__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;}
+ .blu-picker__day {min-height:36px;}
+ .blu-picker__dialog .blu-picker__button {min-height:36px;}
+}
+/* Keep six calendar weeks and the footer visible in short phone viewports. */
+.blu-picker__dialog[data-compact=true] {padding:6px;font-size:12px;line-height:1.2;}
+.blu-picker__dialog[data-compact=true] .blu-picker__input {min-height:32px;padding:4px 5px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__button {min-height:30px;padding:4px 7px;font-size:12px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar-nav>.blu-picker__button {height:32px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar {border-spacing:0;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar th {height:18px;font-size:10px;}
+.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__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;}
+
+.blu-date-picker-block .blu-component-preview,.blu-time-picker-block .blu-component-preview,.blu-date-time-picker-block .blu-component-preview,.blu-date-range-picker-block .blu-component-preview {display:none;}
+/* Shared by the four pickers. Each native Block includes its own complete copy. */
+.blu-advanced-sr {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.blu-picker,.blu-picker *,.blu-picker__dialog,.blu-picker__dialog * {box-sizing:border-box;}
+.blu-picker {max-width:100%;min-width:0;color:var(--bluui-text,#182230);font:14px/1.5 var(--blu-font-family,var(--bluui-font,system-ui,sans-serif));}
+.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__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;}
+.blu-picker__field-icon {position:absolute;right:11px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--bluui-text-muted,#526174);pointer-events:none;}
+.blu-picker__field-icon svg {display:block;width:100%;height:100%;}
+.blu-picker__input::placeholder {color:var(--bluui-text-muted,#526174);opacity:1;}
+.blu-picker__input:disabled {opacity:.65;cursor:not-allowed;}
+.blu-picker__input[readonly] {background:var(--bluui-surface-muted,#f1f3f7);}
+.blu-picker__input[aria-invalid=true] {border-color:var(--bluui-color-error-solid,#b42318);}
+.blu-picker__hint,.blu-picker__help {color:var(--bluui-text-muted,#526174);font-size:12px;margin:8px 0;overflow-wrap:anywhere;}
+.blu-picker__actions,.blu-picker__presets {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
+.blu-picker__button {appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;max-width:100%;padding:8px 13px;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;white-space:normal;cursor:pointer;}
+.blu-picker__button:hover:not(:disabled),.blu-picker__day:hover:not([aria-disabled=true]) {background:var(--bluui-surface-muted,#edf0f7);}
+.blu-picker__button--primary {background:var(--bluui-color-primary-solid,#4f46e5);border-color:var(--bluui-color-primary-solid,#4f46e5);color:var(--bluui-color-primary-contrast,#fff);}
+.blu-picker__button--primary:hover:not(:disabled) {background:var(--bluui-color-primary-solid,#4f46e5);filter:brightness(.94);}
+.blu-picker__button:disabled {opacity:.55;cursor:not-allowed;}
+.blu-picker__input:focus-visible,.blu-picker__button:focus-visible,.blu-picker__day:focus-visible {outline:3px solid var(--bluui-focus,#6156df);outline-offset:3px;}
+.blu-picker__error {color:var(--bluui-color-error-text,#a32218);font-size:13px;line-height:1.5;overflow-wrap:anywhere;margin-top:8px;}
+.blu-picker__dialog {position:fixed;inset:auto;width:344px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;margin:0;padding:10px;border:1px solid var(--bluui-border,#dce2eb);border-radius:12px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#182230);font:13px/1.35 var(--blu-font-family,var(--bluui-font,system-ui,sans-serif));box-shadow:0 12px 32px #10162726,0 2px 6px #10162714;scroll-padding:12px;z-index:1000;}
+.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>.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;}
+.blu-picker__calendar {width:100%;table-layout:fixed;border-collapse:separate;border-spacing:2px;}
+.blu-picker__calendar th {height:20px;text-align:center;font-size:11px;font-weight:500;color:var(--bluui-text-muted,#526174);padding:0;}
+.blu-picker__calendar td {padding:0;text-align:center;height:32px;border:0;}
+.blu-picker__day {appearance:none;display:block;width:100%;min-width:24px;min-height:32px;padding:4px 0;border:1px solid transparent;border-radius:7px;background:transparent;color:inherit;font:inherit;cursor:pointer;}
+.blu-picker__day[aria-current=date] {border-color:var(--bluui-control-border,#69788d);font-weight:700;}
+.blu-picker__day[data-between=true] {background:var(--bluui-color-primary-soft,#eef2ff);color:var(--bluui-color-primary-text,#3730a3);border-radius:0;}
+.blu-picker__day[data-selected=true] {background:var(--bluui-color-primary-solid,#4f46e5)!important;color:var(--bluui-color-primary-contrast,#fff);font-weight:700;}
+.blu-picker__day[aria-disabled=true] {color:var(--bluui-text-muted,#526174);text-decoration:line-through;cursor:not-allowed;}
+.blu-picker__time-area {display:flex;flex-wrap:wrap;gap:8px;margin:6px 0;}
+.blu-picker__time-area>.blu-picker__select-field {flex:1 1 70px;}
+.blu-picker__selection {font-size:12px;min-height:1.35em;margin:4px 0;overflow-wrap:anywhere;}
+@media(forced-colors:active){.blu-picker__day[data-selected=true]{background:Highlight!important;color:HighlightText;border:2px solid Highlight}.blu-picker__day[data-between=true]{border-bottom:2px solid Highlight}.blu-picker__input,.blu-picker__button{border:1px solid ButtonText}.blu-picker__dialog{border:2px solid CanvasText}}
+
+.blu-picker__popup-actions {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:6px;}
+.blu-picker__selection:empty,.blu-picker__error:empty {display:none;}
+.blu-picker__presets:empty {display:none;}
+.blu-picker__presets {margin:0 0 6px;}
+
+/* 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__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;}
+ .blu-picker__day {min-height:36px;}
+ .blu-picker__dialog .blu-picker__button {min-height:36px;}
+}
+/* Keep six calendar weeks and the footer visible in short phone viewports. */
+.blu-picker__dialog[data-compact=true] {padding:6px;font-size:12px;line-height:1.2;}
+.blu-picker__dialog[data-compact=true] .blu-picker__input {min-height:32px;padding:4px 5px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__button {min-height:30px;padding:4px 7px;font-size:12px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar-nav>.blu-picker__button {height:32px;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar {border-spacing:0;}
+.blu-picker__dialog[data-compact=true] .blu-picker__calendar th {height:18px;font-size:10px;}
+.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__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;}