@blukavantui/community 0.0.0-stage → 1.1.0

package/styles/chip.css

@@ -0,0 +1,191 @@
+/* BluKavantUi_Community_Core → Chip — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-chip {
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* Chip — root and default color
+The root wraps two sibling controls: selectable label and optional remove.
+The default appearance is neutral; the modifier classes below map the
+shared ComponentColor records to theme tokens. */
+.blu-chip {
+  --chip-bg: var(--bluui-secondary-soft, #f1f5f9);
+  --chip-fg: var(--bluui-secondary-text, #334155);
+  --chip-border: var(--bluui-border, #cbd5e1);
+  display: inline-flex;
+  align-items: stretch;
+  width: auto;
+  max-width: 100%;
+  border: 1px solid var(--chip-border);
+  border-radius: 999px;
+  background: var(--chip-bg);
+  color: var(--chip-fg);
+  vertical-align: middle;
+}
+
+/* Shared ComponentColor palette. Presets use Ant Design filled colors;
+   statuses use solid colors. Primary/Secondary retain their existing roles. */
+.blu-chip.blu-chip--default {
+  --chip-bg: var(--bluui-color-default-solid);
+  --chip-fg: var(--bluui-color-default-contrast);
+  --chip-border: var(--bluui-color-default-solid);
+}
+.blu-chip.blu-chip--primary {
+  --chip-bg: var(--bluui-color-primary-solid);
+  --chip-fg: var(--bluui-color-primary-contrast);
+  --chip-border: var(--bluui-color-primary-solid);
+}
+.blu-chip.blu-chip--secondary {
+  --chip-bg: var(--bluui-color-secondary-soft);
+  --chip-fg: var(--bluui-color-secondary-text);
+  --chip-border: var(--bluui-color-secondary-soft);
+}
+.blu-chip.blu-chip--success {
+  --chip-bg: var(--bluui-color-success-solid);
+  --chip-fg: var(--bluui-color-success-contrast);
+  --chip-border: var(--bluui-color-success-solid);
+}
+.blu-chip.blu-chip--processing {
+  --chip-bg: var(--bluui-color-processing-solid);
+  --chip-fg: var(--bluui-color-processing-contrast);
+  --chip-border: var(--bluui-color-processing-solid);
+}
+.blu-chip.blu-chip--warning {
+  --chip-bg: var(--bluui-color-warning-solid);
+  --chip-fg: var(--bluui-color-warning-contrast);
+  --chip-border: var(--bluui-color-warning-solid);
+}
+.blu-chip.blu-chip--error {
+  --chip-bg: var(--bluui-color-error-solid);
+  --chip-fg: var(--bluui-color-error-contrast);
+  --chip-border: var(--bluui-color-error-solid);
+}
+.blu-chip.blu-chip--danger {
+  --chip-bg: var(--bluui-color-danger-solid);
+  --chip-fg: var(--bluui-color-danger-contrast);
+  --chip-border: var(--bluui-color-danger-solid);
+}
+.blu-chip.blu-chip--magenta {
+  --chip-bg: var(--bluui-color-magenta-soft);
+  --chip-fg: var(--bluui-color-magenta-text);
+  --chip-border: var(--bluui-color-magenta-soft);
+}
+.blu-chip.blu-chip--red {
+  --chip-bg: var(--bluui-color-red-soft);
+  --chip-fg: var(--bluui-color-red-text);
+  --chip-border: var(--bluui-color-red-soft);
+}
+.blu-chip.blu-chip--volcano {
+  --chip-bg: var(--bluui-color-volcano-soft);
+  --chip-fg: var(--bluui-color-volcano-text);
+  --chip-border: var(--bluui-color-volcano-soft);
+}
+.blu-chip.blu-chip--orange {
+  --chip-bg: var(--bluui-color-orange-soft);
+  --chip-fg: var(--bluui-color-orange-text);
+  --chip-border: var(--bluui-color-orange-soft);
+}
+.blu-chip.blu-chip--gold {
+  --chip-bg: var(--bluui-color-gold-soft);
+  --chip-fg: var(--bluui-color-gold-text);
+  --chip-border: var(--bluui-color-gold-soft);
+}
+.blu-chip.blu-chip--lime {
+  --chip-bg: var(--bluui-color-lime-soft);
+  --chip-fg: var(--bluui-color-lime-text);
+  --chip-border: var(--bluui-color-lime-soft);
+}
+.blu-chip.blu-chip--green {
+  --chip-bg: var(--bluui-color-green-soft);
+  --chip-fg: var(--bluui-color-green-text);
+  --chip-border: var(--bluui-color-green-soft);
+}
+.blu-chip.blu-chip--cyan {
+  --chip-bg: var(--bluui-color-cyan-soft);
+  --chip-fg: var(--bluui-color-cyan-text);
+  --chip-border: var(--bluui-color-cyan-soft);
+}
+.blu-chip.blu-chip--blue {
+  --chip-bg: var(--bluui-color-blue-soft);
+  --chip-fg: var(--bluui-color-blue-text);
+  --chip-border: var(--bluui-color-blue-soft);
+}
+.blu-chip.blu-chip--geekblue {
+  --chip-bg: var(--bluui-color-geekblue-soft);
+  --chip-fg: var(--bluui-color-geekblue-text);
+  --chip-border: var(--bluui-color-geekblue-soft);
+}
+.blu-chip.blu-chip--purple {
+  --chip-bg: var(--bluui-color-purple-soft);
+  --chip-fg: var(--bluui-color-purple-text);
+  --chip-border: var(--bluui-color-purple-soft);
+}
+
+/* State modifiers are independent of color. Selection adds an outline-like
+ring; disabled styling accompanies native disabled controls and action guards. */
+.blu-chip--selected {
+  box-shadow: 0 0 0 2px var(--bluui-primary, #4f46e5);
+}
+
+.blu-chip--disabled {
+  opacity: .55;
+}
+
+/* Internal native Buttons use chip sizing instead of the standard Button shape.
+The repeated root class keeps these rules above later .phone .btn Theme rules.
+Reset only these two scoped controls; preserve other BluUI Button styles. */
+.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove) {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  min-height: 36px;
+  height: auto;
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  padding: 7px 12px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.4;
+  box-shadow: none;
+  cursor: pointer;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+/* The separate remove control retains a usable target even for a short label. */
+.blu-chip.blu-chip .blu-chip__remove {
+  min-width: 36px;
+  padding: 6px 10px;
+}
+
+/* Nonselectable chips display this plain label beside the optional remove button. */
+.blu-chip .blu-chip__label {
+  display: inline-flex;
+  align-items: center;
+  padding: 7px 12px;
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):disabled {
+  cursor: default;
+}
+
+/* Keyboard focus stays visible on the specific control, independently of selection. */
+.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):focus-visible {
+  outline: 2px solid var(--bluui-primary, #4f46e5);
+  outline-offset: 3px;
+}
+
+.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):hover:not(:disabled) {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}

package/styles/collection-layout.css

@@ -0,0 +1,30 @@
+/* BluUI_Core → collection-layout — component-owned stylesheet. */
+/* BluUI rich content: scoped defaults shared by standalone Blocks. */
+.blu-rich { box-sizing:border-box;min-width:0;color:var(--bluui-text,#172033);font-family:var(--bluui-font,Inter,system-ui,sans-serif); }
+.blu-rich *, .blu-rich *::before, .blu-rich *::after { box-sizing:border-box; }
+.blu-rich [hidden] { display:none!important; }
+.blu-rich img { display:block;max-width:100%; }
+.blu-rich figure { margin:0; }
+.blu-rich button,.blu-rich a,.blu-rich input { font:inherit; }
+.blu-rich-button { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 18px;border:1px solid var(--bluui-control-border,#94a3b8);border-radius:999px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#172033);cursor:pointer;text-decoration:none; }
+.blu-rich-button:hover { background:var(--bluui-surface-muted,#f1f5f9); }
+.blu-rich-button:disabled { opacity:.45;cursor:default; }
+.blu-rich :is(button,a,input,[tabindex]):focus-visible { outline:3px solid var(--bluui-primary,#4f46e5);outline-offset:4px; }
+.blu-rich-error { color:var(--bluui-color-danger-text,#b91c1c);padding:12px;border:1px solid currentColor;border-radius:8px; }
+.blu-rich-eyebrow { margin:0 0 20px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; }
+.blu-rich-title { color:inherit;margin:0 0 20px;font-size:clamp(28px,3.4vw,56px);line-height:1.1;letter-spacing:-.045em;text-wrap:balance; }
+.blu-rich-description { font-size:clamp(16px,1.4vw,19px);line-height:1.7;margin:0 0 24px;max-width:62ch;white-space:pre-line; }
+.blu-rich-link { display:inline-flex;gap:12px;align-items:center;min-height:44px;color:inherit;font-weight:650;text-decoration:none; }
+.blu-rich-link::after { content:'↗';font-size:1.25em; }
+.blu-rich-link:hover { text-decoration:underline; }
+.blu-rich-bridge { display:contents!important; }
+.blu-rich-enlarged { display:block;max-width:100%;max-height:75vh;object-fit:contain;margin:auto; }
+.blu-component-preview { display:none;-servicestudio-display:block;-servicestudio-padding:24px;-servicestudio-background:#eef2ff;-servicestudio-border:1px dashed #a5b4fc;-servicestudio-color:#312e81; }
+@media(prefers-reduced-motion:reduce){.blu-rich *, .blu-rich *::before, .blu-rich *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }}
+
+/* Row-major DOM order is retained in all layout variants. */
+.blu-collection-layout__items { position:relative;display:grid;grid-template-columns:repeat(var(--blu-collection-columns,3),minmax(0,1fr));gap:var(--blu-collection-gap,24px);align-items:stretch; }
+.blu-collection-layout__item { min-width:0; }
+.blu-collection-layout[data-variant=staggered] .blu-collection-layout__items { padding-bottom:40px; }
+.blu-collection-layout[data-variant=staggered] .blu-collection-layout__item { transform:translateY(var(--blu-stagger,0)); }
+.blu-collection-layout[data-variant=masonry] .blu-collection-layout__items { align-items:start; }

package/styles/columns2.css

@@ -0,0 +1 @@
+@import './form-layout.css';

package/styles/columns3.css

@@ -0,0 +1 @@
+@import './form-layout.css';

package/styles/columns4.css

@@ -0,0 +1 @@
+@import './form-layout.css';

package/styles/command-palette.css

@@ -0,0 +1,35 @@
+/* BluUI_Core → CommandPalette — owning Block stylesheet. */
+/* Shared control primitives, scoped to this component's runtime host. */
+.blu-command { --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-command *, .blu-command *::before, .blu-command *::after { box-sizing: border-box; }
+.blu-command [hidden] { display: none !important; }
+.blu-command .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-command .blu-control:hover:not(:disabled) { background: var(--bluui-surface-muted, #f4f5fb); border-color: var(--bluui-primary-border, #a5a1f8); }
+.blu-command .blu-control--primary { background: var(--blu-widget-primary); border-color: var(--blu-widget-primary); color: var(--bluui-on-primary, white); }
+.blu-command .blu-control--primary:hover:not(:disabled) { background: var(--bluui-color-primary-solid, #4338ca); color: var(--bluui-on-primary, white); }
+.blu-command .blu-control--quiet { border-color: transparent; background: transparent; }
+.blu-command .blu-control--icon { flex: 0 0 32px; min-width: 32px; min-height: 32px; padding: 3px; font-size: 18px; }
+.blu-command .blu-control:disabled { opacity: .5; cursor: default; }
+.blu-command .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-command :is(.blu-control, .blu-input):focus-visible { outline: 2px solid var(--blu-widget-primary); outline-offset: 2px; }
+.blu-command .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
+.blu-command .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-command-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; }
+
+/* Native dialog supplies the top layer, focus containment, and inert backdrop. */
+.blu-command__dialog { padding: 0; width: min(620px, calc(100vw - 32px)); max-height: min(650px, calc(100dvh - 48px)); border: 1px solid var(--bluui-border, #dce3ed); border-radius: 14px; color: var(--bluui-text, #182230); box-shadow: 0 28px 90px #10182840; overflow: hidden; }
+.blu-command__dialog::backdrop { background: var(--bluui-scrim, #18223066); backdrop-filter: blur(3px); }
+.blu-command .blu-command__dialog > .blu-input { height: 60px; padding: 18px 20px; border: 0; border-radius: 0; border-bottom: 1px solid var(--bluui-border, #e6eaf1); font-size: 16px; }
+.blu-command__list { list-style: none; margin: 0; padding: 10px; max-height: min(430px, calc(100dvh - 200px)); overflow: auto; }
+.blu-command__group { padding: 12px 10px 6px; color: var(--bluui-text-muted, #667085); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
+.blu-command__option { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 10px 12px; margin: 3px 0; border-radius: 8px; cursor: pointer; }
+.blu-command__option[aria-selected="true"] { background: var(--bluui-primary-soft, #f0edff); color: var(--bluui-primary-text, #4338ca); }
+.blu-command__option[aria-disabled="true"] { opacity: .45; cursor: default; }
+.blu-command__copy { display: flex; flex-direction: column; }
+.blu-command__copy small { color: var(--bluui-text-muted, #667085); font-size: 12px; }
+.blu-command kbd { padding: 2px 6px; background: var(--bluui-surface-muted, #f5f6fa); border: 1px solid var(--bluui-border, #dce3ed); border-radius: 4px; font: 11px ui-monospace, monospace; white-space: nowrap; }
+.blu-command__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--bluui-border, #e6eaf1); color: var(--bluui-text-muted, #667085); font-size: 11px; }
+
+/* Runtime validation messages sit beside the interactive root. */
+.blu-command-block .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }

package/styles/content-carousel.css

@@ -0,0 +1,34 @@
+/* BluUI_Core → content-carousel — component-owned stylesheet. */
+/* BluUI rich content: scoped defaults shared by standalone Blocks. */
+.blu-rich { box-sizing:border-box;min-width:0;color:var(--bluui-text,#172033);font-family:var(--bluui-font,Inter,system-ui,sans-serif); }
+.blu-rich *, .blu-rich *::before, .blu-rich *::after { box-sizing:border-box; }
+.blu-rich [hidden] { display:none!important; }
+.blu-rich img { display:block;max-width:100%; }
+.blu-rich figure { margin:0; }
+.blu-rich button,.blu-rich a,.blu-rich input { font:inherit; }
+.blu-rich-button { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 18px;border:1px solid var(--bluui-control-border,#94a3b8);border-radius:999px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#172033);cursor:pointer;text-decoration:none; }
+.blu-rich-button:hover { background:var(--bluui-surface-muted,#f1f5f9); }
+.blu-rich-button:disabled { opacity:.45;cursor:default; }
+.blu-rich :is(button,a,input,[tabindex]):focus-visible { outline:3px solid var(--bluui-primary,#4f46e5);outline-offset:4px; }
+.blu-rich-error { color:var(--bluui-color-danger-text,#b91c1c);padding:12px;border:1px solid currentColor;border-radius:8px; }
+.blu-rich-eyebrow { margin:0 0 20px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; }
+.blu-rich-title { color:inherit;margin:0 0 20px;font-size:clamp(28px,3.4vw,56px);line-height:1.1;letter-spacing:-.045em;text-wrap:balance; }
+.blu-rich-description { font-size:clamp(16px,1.4vw,19px);line-height:1.7;margin:0 0 24px;max-width:62ch;white-space:pre-line; }
+.blu-rich-link { display:inline-flex;gap:12px;align-items:center;min-height:44px;color:inherit;font-weight:650;text-decoration:none; }
+.blu-rich-link::after { content:'↗';font-size:1.25em; }
+.blu-rich-link:hover { text-decoration:underline; }
+.blu-rich-bridge { display:contents!important; }
+.blu-rich-enlarged { display:block;max-width:100%;max-height:75vh;object-fit:contain;margin:auto; }
+.blu-component-preview { display:none;-servicestudio-display:block;-servicestudio-padding:24px;-servicestudio-background:#eef2ff;-servicestudio-border:1px dashed #a5b4fc;-servicestudio-color:#312e81; }
+@media(prefers-reduced-motion:reduce){.blu-rich *, .blu-rich *::before, .blu-rich *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }}
+
+/* Horizontal native scrolling supplies touch support without a slider dependency. */
+.blu-content-carousel__track { display:flex;gap:var(--blu-carousel-gap,24px);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;scrollbar-width:none;padding:4px 0 16px; }
+.blu-content-carousel__track::-webkit-scrollbar { display:none; }
+.blu-content-carousel__item { flex:0 0 calc((100% - var(--blu-carousel-peek,48px) - (var(--blu-carousel-visible,3) - 1)*var(--blu-carousel-gap,24px))/var(--blu-carousel-visible,3));min-width:0;scroll-snap-align:start; }
+.blu-content-carousel__item>*,.blu-content-carousel__item>.OSBlockWidget { height:100%; }
+.blu-content-carousel__controls { display:flex;align-items:center;gap:20px;margin-top:16px; }
+.blu-content-carousel__controls .blu-rich-button { width:48px;height:48px;padding:0;flex:none;font-size:22px; }
+.blu-content-carousel__controls progress { flex:1;height:3px;min-width:20px;border:0;border-radius:9px;background:var(--bluui-border,#e2e8f0);accent-color:var(--bluui-primary,#4f46e5); }
+.blu-content-carousel__controls progress::-webkit-progress-bar { background:var(--bluui-border,#e2e8f0);border-radius:9px; }.blu-content-carousel__controls progress::-webkit-progress-value { background:var(--bluui-primary,#4f46e5);border-radius:9px; }
+.blu-content-carousel__status { font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap; }

package/styles/dashboard-canvas.css

@@ -0,0 +1,49 @@
+/* Shared control rules are scoped into each owning Block at build time.
+   Colors inherit BluUITheme; no screen or theme stylesheet additions are needed. */
+.blu-dashboard-canvas { box-sizing:border-box; width:100%; min-width:0; color:var(--bluui-text,#182230); font:14px/1.5 var(--blu-font-family,sans-serif); }
+.blu-dashboard-canvas *, .blu-dashboard-canvas *::before, .blu-dashboard-canvas *::after { box-sizing:border-box; }
+.blu-dashboard-canvas [hidden] { display:none !important; }
+.blu-dashboard-canvas .blu-platform__body { min-width:0; }
+.blu-dashboard-canvas .blu-platform__heading { margin:0 0 12px; font-size:18px; font-weight:650; line-height:1.4; }
+.blu-dashboard-canvas .blu-platform__toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
+.blu-dashboard-canvas .blu-platform__toolbar > .blu-platform__heading { flex:1; margin:0; }
+.blu-dashboard-canvas .blu-platform__button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:7px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:8px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:600 13px/1.4 var(--blu-font-family,sans-serif); cursor:pointer; text-decoration:none; }
+.blu-dashboard-canvas .blu-platform__button:hover:not(:disabled) { background:var(--bluui-hover,#f0f2f7); }
+.blu-dashboard-canvas .blu-platform__button[aria-pressed="true"] { color:var(--bluui-color-primary-text,#4338ca); border-color:var(--bluui-primary,#4f46e5); background:var(--bluui-color-primary-soft,#eef2ff); box-shadow:inset 0 0 0 1px var(--bluui-primary,#4f46e5); }
+.blu-dashboard-canvas .blu-platform__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-dashboard-canvas .blu-platform__button--primary:hover:not(:disabled) { background:var(--bluui-primary-hover,#4338ca); }
+.blu-dashboard-canvas .blu-platform__button:disabled, .blu-dashboard-canvas .blu-platform__input:disabled { cursor:default; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text-muted,#5c6b80); border-color:var(--bluui-border,#e2e8f0); }
+.blu-dashboard-canvas :is(button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:3px; }
+.blu-dashboard-canvas .blu-platform__input { display:block; width:100%; min-width:0; min-height:38px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:7px; padding:8px 10px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:inherit; }
+.blu-dashboard-canvas .blu-platform__input[aria-invalid="true"] { border-color:var(--bluui-color-error-text,#a33133); }
+.blu-dashboard-canvas .blu-platform__field { display:flex; flex-direction:column; gap:6px; margin:0; min-width:0; }
+.blu-dashboard-canvas .blu-platform__label { font-size:12px; font-weight:600; }
+.blu-dashboard-canvas .blu-platform__muted { color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-dashboard-canvas .blu-platform__error { display:block; color:var(--bluui-color-error-text,#a33133); font-size:13px; overflow-wrap:anywhere; }
+.blu-dashboard-canvas .blu-platform__success { color:var(--bluui-color-success-text,#2d6c0e); }
+.blu-dashboard-canvas .blu-platform__status { color:var(--bluui-text-muted,#5c6b80); margin:10px 0 0; font-size:13px; }
+.blu-dashboard-canvas .blu-platform__status:empty { margin:0; }
+.blu-dashboard-canvas .blu-platform__empty { border:1px dashed var(--bluui-border-strong,#b8c4d4); border-radius:10px; padding:28px 20px; text-align:center; margin:12px 0; }
+.blu-dashboard-canvas .blu-platform__empty p { color:var(--bluui-text-muted,#5c6b80); margin:6px 0 0; }
+.blu-dashboard-canvas .blu-platform__savebar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; margin:0 0 16px; border:1px solid var(--bluui-color-primary-border,#c7d2fe); border-radius:10px; background:var(--bluui-color-primary-soft,#eef2ff); }
+.blu-dashboard-canvas .blu-platform__savebar > span { flex:1; min-width:100px; color:var(--bluui-color-primary-text,#4338ca); font-weight:600; }
+.blu-dashboard-canvas .blu-platform__count { border-radius:20px; padding:3px 8px; background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#4338ca); font-size:12px; }
+.blu-dashboard-canvas .blu-platform__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+@media (forced-colors:active) { .blu-dashboard-canvas .blu-platform__button[aria-pressed="true"] { outline:2px solid Highlight; } }
+
+/* Panels retain native content while order, spans and visibility change. */
+.blu-dashboard-canvas__grid { display:grid; grid-template-columns:repeat(var(--blu-dashboard-columns,12),minmax(0,1fr)); grid-auto-rows:var(--blu-dashboard-row,100px); grid-auto-flow:row; gap:16px; }
+.blu-dashboard-canvas__bridge { display:contents; }
+.blu-dashboard-canvas__panel { display:flex; flex-direction:column; grid-column:span var(--blu-dashboard-span,6); grid-row:span var(--blu-dashboard-rows,2); min-width:0; min-height:0; border:1px solid var(--bluui-border,#e2e8f0); border-radius:12px; background:var(--bluui-surface,#fff); box-shadow:0 2px 8px var(--bluui-shadow-color); }
+.blu-dashboard-canvas__panel-header { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--bluui-border,#e2e8f0); position:relative; }
+.blu-dashboard-canvas__panel-title { flex:1; font:600 14px/1.5 var(--blu-font-family,sans-serif); margin:0; }
+.blu-dashboard-panel__content { flex:1; min-height:0; min-width:0; overflow:auto; padding:16px; }
+.blu-dashboard-canvas__drag { touch-action:none; cursor:grab; font-size:21px; padding:4px 8px; }
+.blu-dashboard-canvas__settings > summary { cursor:pointer; font-size:12px; min-height:28px; display:flex; align-items:center; }
+.blu-dashboard-canvas__settings-body { position:absolute; z-index:30; top:calc(100% - 4px); right:8px; display:grid; grid-template-columns:1fr 1fr; gap:10px; width:260px; max-width:calc(100vw - 40px); border:1px solid var(--bluui-border-strong,#b8c4d4); border-radius:10px; padding:14px; background:var(--bluui-surface-raised,#fff); box-shadow:var(--bluui-menu-shadow); }
+.blu-dashboard-canvas__drop { outline:3px solid var(--bluui-primary,#4f46e5); outline-offset:3px; }
+.blu-dashboard-canvas__ghost { position:fixed; z-index:10000; max-height:240px; overflow:hidden; pointer-events:none; padding:16px; border:2px solid var(--bluui-primary,#4f46e5); border-radius:12px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); box-shadow:var(--bluui-menu-shadow); }
+@media(max-width:700px) { .blu-dashboard-canvas__grid { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; } .blu-dashboard-canvas__panel { grid-column:1; grid-row:auto; min-height:180px; } .blu-dashboard-panel__content { max-height:400px; } }
+
+/* A visible design-time caption is hidden after the runtime mounts. */
+.blu-dashboard-canvas-block > .blu-component-preview { padding:20px; border:1px dashed var(--bluui-border-strong); color:var(--bluui-text-muted); border-radius:10px; }

package/styles/dashboard-panel.css

@@ -0,0 +1,2 @@
+/* Native content wrapper; DashboardCanvas owns layout and panel chrome. */
+.blu-dashboard-panel__content { min-width:0; min-height:0; }

package/styles/date-picker.css

@@ -0,0 +1,78 @@
+.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-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;}
+.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) 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;}
+.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-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;}
+ .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-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;}

package/styles/date-range-picker.css

@@ -0,0 +1,78 @@
+.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-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;}
+.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) 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;}
+.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-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;}
+ .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-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;}

package/styles/date-time-picker.css

@@ -0,0 +1,78 @@
+.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-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;}
+.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) 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;}
+.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-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;}
+ .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-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;}