@blukavantui/community 0.0.0-stage → 1.1.0

package/styles/card.css

@@ -0,0 +1,119 @@
+/* BluKavantUi_Community_Layout → Card — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-card {
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--bluui-text, #182230);
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+}
+/* Card — root surface, header/actions, body, and optional footer.
+Keep overflow visible so embedded grid menus and popovers can extend outside. */
+.blu-card {
+  width: 100%;
+  border: 1px solid var(--bluui-border, #e2e8f0);
+  /* Fill the native Block wrapper when its parent layout stretches a row.
+  With an auto-height parent, the Card keeps its natural content height.
+  This behavior belongs to Card and applies outside the showcase too. */
+  height: 100%;
+  border-radius: var(--bluui-card-radius, 12px);
+  background: var(--bluui-surface, #fff);
+  box-shadow: 0 5px 15px rgb(36 51 73 / 2%);
+  /* Grid popovers and other consumer overlays must not be clipped. */
+  overflow: visible;
+}
+.blu-card .blu-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 20px 24px 0;
+}
+.blu-card .blu-card__heading {
+  width: auto;
+  min-width: 0;
+  flex: 1 1 200px;
+}
+.blu-card .blu-card__title {
+  display: block;
+  margin: 0;
+  color: var(--bluui-text, #182230);
+  font-size: 16px;
+  font-weight: 650;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.blu-card .blu-card__description {
+  display: block;
+  margin-top: 4px;
+  color: var(--bluui-text-muted, #64748b);
+  font-size: 12px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.blu-card .blu-card__actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
+  margin-inline-start: auto;
+}
+.blu-card .blu-card__body {
+  min-width: 0;
+  padding: 20px 24px;
+}
+.blu-card.blu-card--flush > .blu-card__body {
+  padding: 0;
+}
+.blu-card.blu-card--flush > .blu-card__header {
+  padding-bottom: 18px;
+}
+.blu-card .blu-card__footer {
+  min-width: 0;
+  padding: 16px 24px;
+  border-top: 1px solid var(--bluui-border, #e2e8f0);
+}
+/* Placeholders and referenced Blocks may add wrapper elements. */
+.blu-card__actions > :is([data-block], [data-container]) {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Smaller screens retain source order and reduce spacing. */
+@media (max-width: 700px) {
+  .blu-card .blu-card__header {
+    padding: 18px 16px 0;
+  }
+  .blu-card .blu-card__body {
+    padding: 18px 16px;
+  }
+  .blu-card.blu-card--flush > .blu-card__body {
+    padding: 0;
+  }
+  .blu-card.blu-card--flush > .blu-card__header {
+    padding-bottom: 14px;
+  }
+  .blu-card .blu-card__footer {
+    padding: 14px 16px;
+  }
+}
+/* Design canvas: make empty placeholders visible. */
+.blu-card .blu-card__body {
+  -servicestudio-min-height: 96px;
+}
+.blu-card .blu-card__actions {
+  -servicestudio-min-width: 112px;
+  -servicestudio-min-height: 32px;
+}
+.blu-card .blu-card__footer {
+  -servicestudio-min-height: 48px;
+}

package/styles/cascader.css

@@ -0,0 +1,152 @@
+/* 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;
+}

package/styles/chat-widget.css

@@ -0,0 +1,121 @@
+/* Chat owns its layout, typography and motion. Messages are keyed DOM nodes;
+   animation runs on insertion only, never again for each streaming update. */
+.blu-chat, .blu-chat * { box-sizing:border-box; }
+.blu-chat { display:flex; flex-direction:column; position:relative; width:100%; min-width:0; overflow:hidden; border:1px solid var(--bluui-border,#dce2eb); border-radius:18px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:14px/1.55 var(--blu-font-family,system-ui,sans-serif); box-shadow:0 8px 28px #15204408; }
+.blu-chat [hidden] { display:none !important; }
+.blu-chat-sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+.blu-chat__header { display:flex; align-items:center; gap:12px; padding:20px 24px; border-bottom:1px solid var(--bluui-border,#dce2eb); flex:none; }
+.blu-chat__header h2 { color:inherit; margin:0; font-size:17px; font-weight:650; line-height:1.4; }
+.blu-chat__header p { margin:3px 0 0; color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-chat__scroll { flex:1 1 0; min-height:80px; overflow:auto; overscroll-behavior:contain; padding:24px; scrollbar-gutter:stable; }
+.blu-chat__messages { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:24px; }
+.blu-chat__message { display:flex; gap:10px; min-width:0; }
+.blu-chat__message-column { max-width:88%; min-width:0; }
+.blu-chat__message[data-role="User"] { flex-direction:row-reverse; }
+.blu-chat__message[data-role="User"] .blu-chat__meta { justify-content:flex-end; }
+.blu-chat__message[data-role="User"] .blu-chat__prose { background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#3730a3); border-radius:14px 4px 14px 14px; padding:12px 16px; }
+.blu-chat__message[data-role="System"] .blu-chat__prose { color:var(--bluui-text-muted,#5c6b80); border-left:2px solid var(--bluui-border,#dce2eb); padding-left:12px; }
+.blu-chat__avatar { flex:0 0 30px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--bluui-border,#dce2eb); border-radius:10px; background:var(--bluui-surface-muted,#f7f8fb); font-weight:650; font-size:12px; overflow:hidden; }
+.blu-chat__avatar img { width:100%; height:100%; object-fit:cover; }
+.blu-chat__meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:3px 0 8px; font-size:11px; color:var(--bluui-text-muted,#5c6b80); }
+.blu-chat__meta strong { color:var(--bluui-text,#182230); font-size:12px; font-weight:650; }
+.blu-chat__prose { overflow-wrap:anywhere; min-width:0; }
+.blu-chat__prose p { white-space:pre-wrap; margin:0 0 8px; }
+.blu-chat__prose > :last-child { margin-bottom:0; }
+.blu-chat__prose h3 { color:inherit; margin:14px 0 8px; font-size:15px; }
+.blu-chat__prose ul, .blu-chat__prose ol { padding-left:22px; margin:8px 0; }
+.blu-chat__prose pre { overflow:auto; max-width:100%; padding:14px; border:1px solid var(--bluui-border,#dce2eb); border-radius:10px; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text,#182230); font-size:12px; }
+.blu-chat__prose code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em; }
+.blu-chat__prose :not(pre) > code { padding:2px 4px; border-radius:4px; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text,#182230); }
+.blu-chat__prose a { color:var(--bluui-color-primary-text,#4338ca); text-decoration:underline; }
+.blu-chat__button { appearance:none; -webkit-appearance:none; display:inline-flex; justify-content:center; align-items:center; gap:6px; min-height:36px; margin:0; padding:7px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:9px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:600 12px/1.4 var(--blu-font-family,system-ui,sans-serif); cursor:pointer; box-shadow:none; text-transform:none; letter-spacing:normal; }
+.blu-chat__button svg { width:18px; height:18px; }
+.blu-chat__button:hover:not(:disabled) { background:var(--bluui-hover,#f0f2f7); }
+.blu-chat__button:disabled { opacity:.55; cursor:default; }
+.blu-chat__copy { min-height:28px; padding:3px 0; margin-top:6px; border:0; color:var(--bluui-text-muted,#5c6b80); font-size:11px; background:transparent; }
+.blu-chat__empty { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:24px 6px; height:100%; min-height:160px; }
+.blu-chat__empty > svg { width:36px; height:36px; padding:7px; border-radius:12px; background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#4338ca); margin-bottom:14px; }
+.blu-chat__empty h3 { font-size:24px; letter-spacing:-.7px; line-height:1.25; margin:0 0 10px; color:inherit; }
+.blu-chat__empty p { margin:0; max-width:35ch; color:var(--bluui-text-muted,#5c6b80); }
+.blu-chat__waiting { display:flex; flex:none; align-items:center; gap:10px; min-height:32px; padding:4px 24px; color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-chat__dots { display:flex; gap:4px; }
+.blu-chat__dots i { display:block; width:5px; height:5px; border-radius:50%; background:currentColor; animation:blu-chat-dot 1s ease-in-out 4; }
+.blu-chat__dots i:nth-child(2) { animation-delay:.12s; }
+.blu-chat__dots i:nth-child(3) { animation-delay:.24s; }
+.blu-chat__failure { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 16px; padding:10px; border:1px solid var(--bluui-color-error-border,#f5b4b4); border-radius:10px; background:var(--bluui-color-error-soft,#fff2f0); color:var(--bluui-color-error-text,#a33133); font-size:12px; overflow-wrap:anywhere; }
+.blu-chat__suggestions { display:flex; flex:none; flex-wrap:wrap; gap:6px; padding:10px 16px 0; }
+.blu-chat__suggestions:empty { display:none; }
+.blu-chat__suggestions .blu-chat__button { border-color:var(--bluui-border,#dce2eb); background:var(--bluui-surface-muted,#f7f8fb); font-weight:500; text-align:left; }
+.blu-chat__composer { flex:none; padding:12px; margin:12px 16px 16px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:12px; background:var(--bluui-surface,#fff); }
+.blu-chat__composer:focus-within { border-color:var(--bluui-color-primary-solid,#4f46e5); box-shadow:0 0 0 2px var(--bluui-color-primary-soft,#eef2ff); }
+.blu-chat__composer textarea { appearance:none; display:block; width:100%; min-width:0; min-height:44px; max-height:160px; padding:0; margin:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; line-height:1.5; resize:none; box-shadow:none; }
+.blu-chat__composer textarea::placeholder { color:var(--bluui-text-muted,#5c6b80); opacity:1; }
+.blu-chat__composer textarea:focus { outline:0; box-shadow:none; }
+.blu-chat__composer-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px; }
+.blu-chat__hint { color:var(--bluui-text-muted,#5c6b80); font-size:10px; }
+.blu-chat__button.blu-chat__send { background:var(--bluui-color-primary-solid,#4f46e5); color:var(--bluui-color-primary-contrast,#fff); border-color:transparent; width:36px; padding:8px; }
+.blu-chat__jump { position:absolute; top:76px; left:50%; transform:translateX(-50%); box-shadow:0 3px 15px #0002; z-index:1; white-space:nowrap; }
+.blu-chat :is(button,[tabindex]):focus-visible { outline:2px solid var(--bluui-color-primary-solid,#4f46e5); outline-offset:3px; }
+.blu-chat__message--new { animation:blu-chat-message .24s ease-out both; }
+@keyframes blu-chat-message { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+@keyframes blu-chat-dot { 0%,70%,100% { transform:translateY(0); opacity:.55; } 35% { transform:translateY(-4px); opacity:1; } }
+.blu-chat[data-animate="false"] *, .blu-chat[data-animate="false"] *::before { animation:none !important; transition:none !important; }
+@media (prefers-reduced-motion:reduce) { .blu-chat *, .blu-chat *::before { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
+@media (max-width:480px) { .blu-chat__scroll { padding:16px 12px; } .blu-chat__header { padding:16px; } .blu-chat__message-column { max-width:calc(100% - 40px); } .blu-chat__hint { font-size:9px; } }
+.blu-chat-block > .blu-component-preview { padding:24px; border:1px dashed var(--bluui-border,#dce2eb); border-radius:12px; }
+.blu-chat-block [data-blu-runtime-ready] + .blu-component-preview { display:none; }
+
+/* FloatButton is a reusable launcher. Container placement requires a positioned
+   ancestor; Viewport placement portals its root to body to escape clipped cards. */
+.blu-float { box-sizing:border-box; position:fixed; z-index:900; bottom:calc(var(--blu-float-offset,24px) + env(safe-area-inset-bottom,0px)); right:calc(var(--blu-float-offset,24px) + env(safe-area-inset-right,0px)); }
+.blu-float *, .blu-float *::before { box-sizing:border-box; }
+.blu-float [hidden] { display:none !important; }
+.blu-float[data-position="Container"] { position:absolute; z-index:2; }
+.blu-float[data-placement="BottomLeft"], .blu-float[data-placement="TopLeft"] { right:auto; left:calc(var(--blu-float-offset,24px) + env(safe-area-inset-left,0px)); }
+.blu-float[data-placement="TopLeft"], .blu-float[data-placement="TopRight"] { bottom:auto; top:calc(var(--blu-float-offset,24px) + env(safe-area-inset-top,0px)); }
+.blu-float__button { appearance:none; -webkit-appearance:none; position:relative; display:flex; gap:10px; align-items:center; justify-content:center; min-width:56px; min-height:56px; max-width:260px; margin:0; padding:14px; border:1px solid transparent; border-radius:50px; background:var(--blu-float-solid,#4f46e5); color:var(--blu-float-contrast,#fff); box-shadow:0 6px 18px #10182826; font:600 14px/1.4 var(--blu-font-family,system-ui,sans-serif); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; text-transform:none; letter-spacing:normal; }
+.blu-float[data-shape="Square"] .blu-float__button { border-radius:14px; }
+.blu-float__button:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 10px 24px #10182833; }
+.blu-float__button:active:not(:disabled) { transform:scale(.96); }
+.blu-float__button:focus-visible { outline:3px solid var(--bluui-text,#182230); outline-offset:4px; }
+.blu-float__button:disabled { opacity:.55; cursor:default; }
+.blu-float__icon, .blu-float__icon svg, .blu-float__icon img { display:block; width:24px; height:24px; flex:none; }
+/* Custom artwork keeps its aspect ratio and original colors. */
+.blu-float__icon img { object-fit:contain; }
+.blu-float__badge { position:absolute; top:-5px; right:-5px; display:flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 5px; border:2px solid var(--bluui-surface,#fff); border-radius:20px; background:var(--bluui-color-error-solid,#c93638); color:var(--bluui-color-error-contrast,#fff); font-size:10px; }
+.blu-float[data-animate="true"] { animation:blu-float-in .28s cubic-bezier(.2,.8,.2,1) both; }
+@keyframes blu-float-in { from { opacity:0; transform:translateY(12px) scale(.9); } to { opacity:1; transform:none; } }
+.blu-float[data-animate="false"] * { transition:none !important; }
+.blu-float[data-animate="false"] .blu-float__button { transform:none !important; }
+@media (prefers-reduced-motion:reduce) { .blu-float, .blu-float * { animation:none !important; transition:none !important; transform:none !important; } }
+@media (forced-colors:active) { .blu-float__button { border:1px solid ButtonText; } }
+.blu-float-button-block > .blu-component-preview { padding:24px; border:1px dashed var(--bluui-border,#dce2eb); }
+.blu-float-button-block [data-blu-runtime-ready] + .blu-component-preview { display:none; }
+
+.blu-float-button-block .blu-chat-sr, .blu-chat-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+
+/* Widget composes the canonical Chat and FloatButton; its panel remains mounted
+   while closed so drafts, scroll position and responses are retained. */
+.blu-chat-widget { position:fixed; z-index:900; bottom:calc(var(--blu-widget-offset,24px) + env(safe-area-inset-bottom,0px)); right:calc(var(--blu-widget-offset,24px) + env(safe-area-inset-right,0px)); width:56px; height:56px; color:var(--bluui-text,#182230); font-family:var(--blu-font-family,system-ui,sans-serif); }
+.blu-chat-widget *, .blu-chat-widget *::before { box-sizing:border-box; }
+.blu-chat-widget[data-position="Container"] { position:absolute; z-index:4; }
+.blu-chat-widget[data-placement="BottomLeft"] { right:auto; left:calc(var(--blu-widget-offset,24px) + env(safe-area-inset-left,0px)); }
+.blu-chat-widget .blu-float { right:0; bottom:0; left:auto; top:auto; }
+.blu-chat-widget__panel { position:absolute; bottom:72px; right:0; width:min(390px,calc(100vw - 48px)); border:1px solid var(--bluui-border,#dce2eb); border-radius:20px; background:var(--bluui-surface,#fff); box-shadow:0 24px 80px #10182830; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(14px) scale(.97); transform-origin:bottom right; transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility .24s; }
+.blu-chat-widget[data-placement="BottomLeft"] .blu-chat-widget__panel { right:auto; left:0; transform-origin:bottom left; }
+.blu-chat-widget[data-open="true"] .blu-chat-widget__panel { opacity:1; visibility:visible; transform:none; }
+.blu-chat-widget__header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--bluui-surface-muted,#f7f8fb); border-bottom:1px solid var(--bluui-border,#dce2eb); }
+.blu-chat-widget__header h2 { color:inherit; font-size:15px; font-weight:650; margin:0; }
+.blu-chat-widget__header > div { display:flex; gap:6px; }
+.blu-chat-widget__header button { min-width:32px; min-height:32px; padding:6px; background:transparent; border-color:transparent; }
+.blu-chat-widget__header button:focus-visible { outline:2px solid var(--bluui-color-primary-solid,#4f46e5); outline-offset:2px; }
+.blu-chat-widget .blu-chat { border:0; border-radius:0; height:min(490px,calc(100dvh - 205px)) !important; min-height:200px; box-shadow:none; }
+.blu-chat-widget[data-expanded="true"] .blu-chat-widget__panel { width:min(680px,calc(100vw - 48px)); }
+.blu-chat-widget[data-expanded="true"] .blu-chat { height:min(650px,calc(100dvh - 205px)) !important; }
+.blu-chat-widget[data-position="Container"] .blu-chat-widget__panel { width:min(390px,calc(100cqw - 48px)); }
+.blu-chat-widget[data-position="Container"][data-expanded="true"] .blu-chat-widget__panel { width:min(680px,calc(100cqw - 48px)); }
+.blu-chat-widget[data-animate="false"] *, .blu-chat-widget[data-animate="false"] { animation:none !important; transition:none !important; }
+@media (max-width:480px) { .blu-chat-widget__panel { width:calc(100vw - 32px); right:calc(16px - var(--blu-widget-offset,24px)); bottom:70px; } .blu-chat-widget[data-placement="BottomLeft"] .blu-chat-widget__panel { left:calc(16px - var(--blu-widget-offset,24px)); } .blu-chat-widget .blu-chat { height:min(540px,calc(100dvh - 190px)) !important; } }
+@media (prefers-reduced-motion:reduce) { .blu-chat-widget, .blu-chat-widget * { animation:none !important; transition:none !important; } }
+.blu-chat-widget-block > .blu-component-preview { padding:24px; border:1px dashed var(--bluui-border,#dce2eb); }
+.blu-chat-widget-block [data-blu-runtime-ready] + .blu-component-preview { display:none; }

package/styles/chat.css

@@ -0,0 +1,66 @@
+/* Chat owns its layout, typography and motion. Messages are keyed DOM nodes;
+   animation runs on insertion only, never again for each streaming update. */
+.blu-chat, .blu-chat * { box-sizing:border-box; }
+.blu-chat { display:flex; flex-direction:column; position:relative; width:100%; min-width:0; overflow:hidden; border:1px solid var(--bluui-border,#dce2eb); border-radius:18px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:14px/1.55 var(--blu-font-family,system-ui,sans-serif); box-shadow:0 8px 28px #15204408; }
+.blu-chat [hidden] { display:none !important; }
+.blu-chat-sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+.blu-chat__header { display:flex; align-items:center; gap:12px; padding:20px 24px; border-bottom:1px solid var(--bluui-border,#dce2eb); flex:none; }
+.blu-chat__header h2 { color:inherit; margin:0; font-size:17px; font-weight:650; line-height:1.4; }
+.blu-chat__header p { margin:3px 0 0; color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-chat__scroll { flex:1 1 0; min-height:80px; overflow:auto; overscroll-behavior:contain; padding:24px; scrollbar-gutter:stable; }
+.blu-chat__messages { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:24px; }
+.blu-chat__message { display:flex; gap:10px; min-width:0; }
+.blu-chat__message-column { max-width:88%; min-width:0; }
+.blu-chat__message[data-role="User"] { flex-direction:row-reverse; }
+.blu-chat__message[data-role="User"] .blu-chat__meta { justify-content:flex-end; }
+.blu-chat__message[data-role="User"] .blu-chat__prose { background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#3730a3); border-radius:14px 4px 14px 14px; padding:12px 16px; }
+.blu-chat__message[data-role="System"] .blu-chat__prose { color:var(--bluui-text-muted,#5c6b80); border-left:2px solid var(--bluui-border,#dce2eb); padding-left:12px; }
+.blu-chat__avatar { flex:0 0 30px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--bluui-border,#dce2eb); border-radius:10px; background:var(--bluui-surface-muted,#f7f8fb); font-weight:650; font-size:12px; overflow:hidden; }
+.blu-chat__avatar img { width:100%; height:100%; object-fit:cover; }
+.blu-chat__meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:3px 0 8px; font-size:11px; color:var(--bluui-text-muted,#5c6b80); }
+.blu-chat__meta strong { color:var(--bluui-text,#182230); font-size:12px; font-weight:650; }
+.blu-chat__prose { overflow-wrap:anywhere; min-width:0; }
+.blu-chat__prose p { white-space:pre-wrap; margin:0 0 8px; }
+.blu-chat__prose > :last-child { margin-bottom:0; }
+.blu-chat__prose h3 { color:inherit; margin:14px 0 8px; font-size:15px; }
+.blu-chat__prose ul, .blu-chat__prose ol { padding-left:22px; margin:8px 0; }
+.blu-chat__prose pre { overflow:auto; max-width:100%; padding:14px; border:1px solid var(--bluui-border,#dce2eb); border-radius:10px; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text,#182230); font-size:12px; }
+.blu-chat__prose code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em; }
+.blu-chat__prose :not(pre) > code { padding:2px 4px; border-radius:4px; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text,#182230); }
+.blu-chat__prose a { color:var(--bluui-color-primary-text,#4338ca); text-decoration:underline; }
+.blu-chat__button { appearance:none; -webkit-appearance:none; display:inline-flex; justify-content:center; align-items:center; gap:6px; min-height:36px; margin:0; padding:7px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:9px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:600 12px/1.4 var(--blu-font-family,system-ui,sans-serif); cursor:pointer; box-shadow:none; text-transform:none; letter-spacing:normal; }
+.blu-chat__button svg { width:18px; height:18px; }
+.blu-chat__button:hover:not(:disabled) { background:var(--bluui-hover,#f0f2f7); }
+.blu-chat__button:disabled { opacity:.55; cursor:default; }
+.blu-chat__copy { min-height:28px; padding:3px 0; margin-top:6px; border:0; color:var(--bluui-text-muted,#5c6b80); font-size:11px; background:transparent; }
+.blu-chat__empty { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:24px 6px; height:100%; min-height:160px; }
+.blu-chat__empty > svg { width:36px; height:36px; padding:7px; border-radius:12px; background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#4338ca); margin-bottom:14px; }
+.blu-chat__empty h3 { font-size:24px; letter-spacing:-.7px; line-height:1.25; margin:0 0 10px; color:inherit; }
+.blu-chat__empty p { margin:0; max-width:35ch; color:var(--bluui-text-muted,#5c6b80); }
+.blu-chat__waiting { display:flex; flex:none; align-items:center; gap:10px; min-height:32px; padding:4px 24px; color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-chat__dots { display:flex; gap:4px; }
+.blu-chat__dots i { display:block; width:5px; height:5px; border-radius:50%; background:currentColor; animation:blu-chat-dot 1s ease-in-out 4; }
+.blu-chat__dots i:nth-child(2) { animation-delay:.12s; }
+.blu-chat__dots i:nth-child(3) { animation-delay:.24s; }
+.blu-chat__failure { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 16px; padding:10px; border:1px solid var(--bluui-color-error-border,#f5b4b4); border-radius:10px; background:var(--bluui-color-error-soft,#fff2f0); color:var(--bluui-color-error-text,#a33133); font-size:12px; overflow-wrap:anywhere; }
+.blu-chat__suggestions { display:flex; flex:none; flex-wrap:wrap; gap:6px; padding:10px 16px 0; }
+.blu-chat__suggestions:empty { display:none; }
+.blu-chat__suggestions .blu-chat__button { border-color:var(--bluui-border,#dce2eb); background:var(--bluui-surface-muted,#f7f8fb); font-weight:500; text-align:left; }
+.blu-chat__composer { flex:none; padding:12px; margin:12px 16px 16px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:12px; background:var(--bluui-surface,#fff); }
+.blu-chat__composer:focus-within { border-color:var(--bluui-color-primary-solid,#4f46e5); box-shadow:0 0 0 2px var(--bluui-color-primary-soft,#eef2ff); }
+.blu-chat__composer textarea { appearance:none; display:block; width:100%; min-width:0; min-height:44px; max-height:160px; padding:0; margin:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; line-height:1.5; resize:none; box-shadow:none; }
+.blu-chat__composer textarea::placeholder { color:var(--bluui-text-muted,#5c6b80); opacity:1; }
+.blu-chat__composer textarea:focus { outline:0; box-shadow:none; }
+.blu-chat__composer-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px; }
+.blu-chat__hint { color:var(--bluui-text-muted,#5c6b80); font-size:10px; }
+.blu-chat__button.blu-chat__send { background:var(--bluui-color-primary-solid,#4f46e5); color:var(--bluui-color-primary-contrast,#fff); border-color:transparent; width:36px; padding:8px; }
+.blu-chat__jump { position:absolute; top:76px; left:50%; transform:translateX(-50%); box-shadow:0 3px 15px #0002; z-index:1; white-space:nowrap; }
+.blu-chat :is(button,[tabindex]):focus-visible { outline:2px solid var(--bluui-color-primary-solid,#4f46e5); outline-offset:3px; }
+.blu-chat__message--new { animation:blu-chat-message .24s ease-out both; }
+@keyframes blu-chat-message { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+@keyframes blu-chat-dot { 0%,70%,100% { transform:translateY(0); opacity:.55; } 35% { transform:translateY(-4px); opacity:1; } }
+.blu-chat[data-animate="false"] *, .blu-chat[data-animate="false"] *::before { animation:none !important; transition:none !important; }
+@media (prefers-reduced-motion:reduce) { .blu-chat *, .blu-chat *::before { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
+@media (max-width:480px) { .blu-chat__scroll { padding:16px 12px; } .blu-chat__header { padding:16px; } .blu-chat__message-column { max-width:calc(100% - 40px); } .blu-chat__hint { font-size:9px; } }
+.blu-chat-block > .blu-component-preview { padding:24px; border:1px dashed var(--bluui-border,#dce2eb); border-radius:12px; }
+.blu-chat-block [data-blu-runtime-ready] + .blu-component-preview { display:none; }

package/styles/checkbox.css

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

package/styles/chip-group.css

@@ -0,0 +1,44 @@
+/* BluKavantUi_Community_Core → ChipGroup — 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-group {
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* ChipGroup — wrap related chips without stretching them to full width.
+Root padding leaves space for the selected/focus outlines. */
+.blu-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 3px;
+}
+
+/* Set this class on ChipGroup's Content Placeholder. That element contains
+the native Chip Block wrappers, so it must own the wrapping layout and gap.
+Inherit alignment so a centered playground group stays centered. */
+.blu-chip-group > .blu-chip-group__items {
+  display: flex;
+  flex-wrap: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  gap: inherit;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Each Chip's Block wrapper keeps its natural width. Scope these rules to
+item wrappers so the Content Placeholder itself can still fill the group. */
+.blu-chip-group > [data-block],
+.blu-chip-group > [data-container]:not(.blu-chip-group__items),
+.blu-chip-group > .blu-chip-group__items > :is([data-block], [data-container]) {
+  flex: 0 1 auto;
+  min-width: 0;
+  width: auto;
+  max-width: 100%;
+}