@blukavantui/community 0.0.0-stage → 1.0.1

package/styles/tree-select.css

@@ -0,0 +1,135 @@
+/* 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 */

package/styles/tree-view.css

@@ -0,0 +1,118 @@
+/* BluUI_Core → TreeView — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-tree {
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* TreeView — styles for markup created inside the empty TreeHost.
+BluUIRuntime owns roles, expanded/selected state, and keyboard navigation. */
+.blu-tree {
+  width: 100%;
+  color: var(--bluui-text, #182230);
+}
+
+.blu-tree :is(.blu-tree__list, .blu-tree__group) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Indent each child group logically so the hierarchy also follows RTL direction. */
+.blu-tree .blu-tree__group {
+  padding-inline-start: 22px;
+}
+
+/* Keep collapsed groups hidden even when a surrounding theme styles list display. */
+.blu-tree .blu-tree__group[hidden] {
+  display: none;
+}
+
+/* Focus is painted on the row below, instead of outlining its entire subtree. */
+.blu-tree .blu-tree__item {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+.blu-tree .blu-tree__row {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 38px;
+  padding: 6px 8px;
+  border-radius: 7px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.blu-tree .blu-tree__toggle {
+  flex: 0 0 24px;
+  text-align: center;
+}
+
+.blu-tree .blu-tree__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: 14px;
+}
+
+/* Apply state styles only to this item's direct row; descendants have their own
+selection, focus, and disabled state. Focus does not imply selection. */
+.blu-tree .blu-tree__item[aria-selected="true"] > .blu-tree__row {
+  background: var(--bluui-primary-soft, #eef2ff);
+  color: var(--bluui-primary-text, #3730a3);
+  font-weight: 600;
+}
+
+.blu-tree .blu-tree__item:focus-visible > .blu-tree__row {
+  outline: 2px solid var(--bluui-primary, #4f46e5);
+  outline-offset: -2px;
+}
+
+.blu-tree .blu-tree__item[aria-disabled="true"] > .blu-tree__row {
+  opacity: .5;
+  cursor: default;
+}
+
+.blu-tree .blu-tree__item[aria-disabled="false"] > .blu-tree__row:hover {
+  background: var(--bluui-hover, #f1f5f9);
+}
+
+/* Shared empty-state text for TreeView and the two TransferList panels. */
+.blu-tree__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-tree .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-tree .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-tree .blu-component-preview-line {
+  display: block;
+  padding: 5px;
+  color: var(--bluui-text-muted, #64748b);
+  font-size: 13px;
+}

package/styles/upload-manager.css

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