@blukavantui/charts-community 0.0.0-stage → 1.2.0

package/dist/styles.css

@@ -0,0 +1,496 @@
+.blu-chart { width:100%; min-width:0; color:var(--bluui-text,#182230); background:var(--bluui-surface,#fff); font:13px/1.5 var(--blu-font-family,Inter,system-ui,sans-serif); }
+.blu-chart [hidden] { display:none!important; }
+.blu-chart__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 16px 12px; }
+.blu-chart__heading>div:first-child { min-width:0; }
+.blu-chart__heading h3 { margin:0; color:inherit; font-size:16px; font-weight:650; letter-spacing:-.3px; overflow-wrap:anywhere; }
+.blu-chart__heading p { margin:5px 0 0; font-size:11px; color:var(--bluui-text-muted,#667085); line-height:1.6; overflow-wrap:anywhere; }
+.blu-chart__export { display:flex; gap:5px; flex-shrink:0; margin-left:auto; }
+.blu-chart__export :is(select,button) { font:inherit; font-size:11px; border:1px solid var(--bluui-border,#ddd); color:inherit; border-radius:6px; background:var(--bluui-surface,#fff); min-height:34px; padding:6px 8px; cursor:pointer; }
+.blu-chart__export button:disabled { opacity:.5; cursor:default; }
+.blu-chart__stage { position:relative; min-width:0; }
+.blu-chart__plot { width:100%; min-width:0; }
+.blu-chart__state { position:absolute; inset:0; display:grid; place-items:center; background:var(--bluui-surface-muted,#f8f8fa); color:var(--bluui-text-muted,#667085); padding:20px; text-align:center; }
+.blu-chart__state--loading {grid-template-rows:minmax(0,1fr) auto;gap:14px;place-items:stretch;background:var(--bluui-surface,#fff);padding:16px}
+.blu-chart__skeleton {display:flex;flex-direction:column;gap:24px;min-width:0;min-height:0}
+.blu-chart__skeleton-key {display:flex;gap:16px;align-items:center;flex-wrap:wrap}
+.blu-chart__skeleton-plot {flex:1;min-height:0}
+.blu-chart__skeleton-plot>div {height:100%}
+.blu-chart__state-message {font-size:12px}
+.blu-chart__data { margin:12px 16px 0; border-top:1px solid var(--bluui-border,#ddd); font-size:11px; }
+.blu-chart__data summary { cursor:pointer; padding:12px 0; color:var(--bluui-text-muted,#667085); }
+.blu-chart__data--compact { margin-top:0; border-top:0; }
+.blu-chart__data--compact summary { padding:6px 0; }
+.blu-chart__table { overflow:auto; max-height:320px; }
+.blu-chart__table table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:11px; font-variant-numeric:tabular-nums; }
+.blu-chart__table caption { text-align:left; color:var(--bluui-text-muted,#667085); padding:8px; }
+.blu-chart__table th,.blu-chart__table td { padding:8px; border-bottom:1px solid var(--bluui-border,#ddd); text-align:right; }
+.blu-chart__table th:first-child { text-align:left; }
+.blu-chart__table button { font:inherit; color:var(--bluui-primary,#6557e8); background:transparent; border:0; border-radius:3px; padding:5px; cursor:pointer; }
+.blu-chart__table button[aria-pressed=true] { background:var(--bluui-selected,#eeeaff); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; font-weight:700; }
+.blu-chart :is(button,select,summary,[tabindex]):focus-visible { outline:2px solid var(--bluui-primary,#6557e8); outline-offset:2px; }
+.blu-chart__status { font-size:11px; color:var(--bluui-text-muted,#667085); margin:0 16px; }
+.blu-chart__status:not(:empty) { padding:8px 0; }
+@media(max-width:640px) { .blu-chart__heading { flex-wrap:wrap; padding-inline:12px; }.blu-chart__export { margin-left:0; }.blu-chart__data { margin-inline:12px; } }
+
+.blu-chart__navigation {display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px}
+.blu-chart__navigation button {min-width:32px;min-height:32px;padding:5px 9px;font:inherit;font-size:12px;color:var(--bluui-text);background:var(--bluui-surface);border:1px solid var(--bluui-control-border);border-radius:5px;cursor:pointer}
+.blu-chart__stage[tabindex]:focus-visible {outline-offset:-3px}
+
+
+.blu-chart__state-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+.blu-chart__patterns {display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 0 12px;cursor:pointer}
+.blu-chart__patterns input {width:24px;height:24px;margin:0;accent-color:var(--bluui-color-primary-solid)}
+
+.blu-chart__missing-note {margin:8px 12px;color:var(--bluui-text-muted);font-size:12px;line-height:1.5}
+
+/* BEGIN GENERATED SHARED CHECKBOX — scripts/build-checkbox-styles.mjs */
+/* One checkbox design, emitted into each owning Block. Keep native input/tree/grid semantics. */
+.blu-chart .blu-chart__patterns input[type="checkbox"] {
+  -webkit-appearance:none;
+  appearance:none;
+  box-sizing:border-box;
+  position:relative;
+  display:inline-block;
+  flex:0 0 22px;
+  width:22px;
+  height:22px;
+  min-width:22px;
+  min-height:22px;
+  margin:0;
+  padding:0;
+  border:1.5px solid var(--bluui-control-border,#7b8799);
+  border-radius:6px;
+  background-color:var(--bluui-surface,#fff);
+  background-image:none;
+  box-shadow:0 1px 2px rgb(15 23 42 / 6%);
+  vertical-align:middle;
+  cursor:pointer;
+  opacity:1;
+  filter:none;
+  transition:background-color 120ms ease,border-color 120ms ease,box-shadow 120ms ease;
+}
+.blu-chart .blu-chart__patterns input[type="checkbox"]::after { content:none; }
+.blu-chart .blu-chart__patterns input[type="checkbox"]:checked,
+.blu-chart .blu-chart__patterns input[type="checkbox"]:indeterminate {
+  border-color:var(--bluui-color-primary-solid,#4f46e5);
+  background-color:var(--bluui-color-primary-solid,#4f46e5);
+}
+.blu-chart .blu-chart__patterns input[type="checkbox"]:checked::after,
+.blu-chart .blu-chart__patterns input[type="checkbox"]:indeterminate::after {
+  content:"";
+  box-sizing:content-box;
+  position:absolute;
+  inset:auto;
+  width:10px;
+  height:6px;
+  left:4px;
+  top:5px;
+  border:solid var(--bluui-color-primary-contrast,#fff);
+  border-width:0 0 2px 2px;
+  border-radius:0;
+  background:none;
+  -webkit-mask:none;
+  mask:none;
+  transform:rotate(-45deg);
+  pointer-events:none;
+}
+.blu-chart .blu-chart__patterns input[type="checkbox"]:indeterminate::after {
+  height:0;
+  top:8px;
+  border-width:0 0 2px;
+  transform:none;
+}
+.blu-chart .blu-chart__patterns input[type="checkbox"]:hover:not(:disabled) {
+  border-color:var(--bluui-color-primary-solid,#4f46e5);
+  box-shadow:0 0 0 3px var(--bluui-color-primary-soft,#eef2ff);
+}
+.blu-chart .blu-chart__patterns input[type="checkbox"]:focus-visible {
+  outline:2px solid var(--bluui-color-primary-solid,#4f46e5);
+  outline-offset:3px;
+}
+.blu-chart .blu-chart__patterns input[type="checkbox"]:disabled {
+  border-color:var(--bluui-border-strong,#b8c4d4);
+  background-color:var(--bluui-surface-muted,#f7f8fb);
+  box-shadow:none;
+  cursor:not-allowed;
+}
+.blu-chart .blu-chart__patterns input[type="checkbox"]:disabled:checked,
+.blu-chart .blu-chart__patterns input[type="checkbox"]:disabled:indeterminate {
+  border-color:var(--bluui-text-muted,#5c6b80);
+  background-color:var(--bluui-text-muted,#5c6b80);
+}
+@media (prefers-reduced-motion:reduce) {
+  .blu-chart .blu-chart__patterns input[type="checkbox"] { transition:none; }
+}
+.blu-chart .blu-chart__patterns input[type="checkbox"]::before { content:none; }
+@media (forced-colors:active) {
+  .blu-chart .blu-chart__patterns input[type="checkbox"],
+  .blu-chart .blu-chart__patterns input[type="checkbox"]:checked,
+  .blu-chart .blu-chart__patterns input[type="checkbox"]:indeterminate,
+  .blu-chart .blu-chart__patterns input[type="checkbox"]:disabled,
+  .blu-chart .blu-chart__patterns input[type="checkbox"]:disabled:checked,
+  .blu-chart .blu-chart__patterns input[type="checkbox"]:disabled:indeterminate { -webkit-appearance:checkbox; appearance:auto; background:revert; border:revert; box-shadow:none; forced-color-adjust:auto; }
+  .blu-chart .blu-chart__patterns input[type="checkbox"]:checked::after, .blu-chart .blu-chart__patterns input[type="checkbox"]:indeterminate::after { content:none; }
+}
+/* END GENERATED SHARED CHECKBOX */
+
+.blu-chart__body {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
+.blu-chart__body[data-legend-position=Top] .blu-chart__legend {grid-row:1}
+.blu-chart__body[data-legend-position=Bottom] .blu-chart__legend {grid-row:2}
+.blu-chart__body[data-legend-position=Left] {grid-template-columns:190px minmax(0,1fr);align-items:center}
+.blu-chart__body[data-legend-position=Right] {grid-template-columns:minmax(0,1fr) 190px;align-items:center}
+.blu-chart__body[data-legend-position=Left] .blu-chart__legend {grid-column:1;grid-row:1}
+.blu-chart__body[data-legend-position=Left] .blu-chart__stage {grid-column:2;grid-row:1}
+.blu-chart__body[data-legend-position=Right] .blu-chart__legend {grid-column:2;grid-row:1}
+.blu-chart__body[data-legend-position=Right] .blu-chart__stage {grid-column:1;grid-row:1}
+.blu-chart__body.blu-chart__body--no-legend {grid-template-columns:minmax(0,1fr);gap:0}
+.blu-chart__body--no-legend .blu-chart__stage {grid-column:1!important;grid-row:1!important}
+.blu-chart__legend {--legend-selected:color-mix(in srgb,var(--bluui-primary) 9%,var(--bluui-surface));min-width:0;padding:8px 20px 16px;font:12px/1.45 var(--bluui-font,Inter,system-ui,sans-serif);color:var(--bluui-text)}
+.blu-chart__legend-items {display:flex;flex-wrap:wrap;gap:8px}
+.blu-chart__legend-entry {min-width:0;max-width:100%;display:flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;color:inherit;font:inherit;text-align:left;padding:7px 8px;border-radius:8px;cursor:pointer;min-height:36px}
+.blu-chart__legend-entry:hover {background:var(--bluui-surface-muted)}
+.blu-chart__legend-entry[aria-pressed=true] {text-decoration:none;background:var(--legend-selected)}
+.blu-chart__legend-heading {display:flex;align-items:center;gap:7px;min-width:0}
+.blu-chart__legend-marker {display:flex;flex-shrink:0}
+.blu-chart__legend-text {overflow-wrap:anywhere}
+.blu-chart__legend-label {font-weight:500}
+.blu-chart__legend-detail,.blu-chart__legend-percent,.blu-chart__legend-note {font-size:11px;color:var(--bluui-text-muted)}
+.blu-chart__legend-numbers {display:flex;align-items:baseline;gap:10px;min-width:0;font-variant-numeric:tabular-nums}
+.blu-chart__legend-value {font-weight:600;letter-spacing:-.25px}
+.blu-chart__legend-check {visibility:hidden;margin-left:auto;color:var(--bluui-primary);font-weight:700;font-size:12px}
+[aria-pressed=true] .blu-chart__legend-check {visibility:visible}
+.blu-chart__legend[data-style=Standard] .blu-chart__legend-detail,.blu-chart__legend[data-style=Standard] .blu-chart__legend-check {display:none}
+.blu-chart__legend[data-style=Standard] .blu-chart__legend-value {font-size:11px;color:var(--bluui-text-muted)}
+.blu-chart__legend-track {display:none;height:3px;background:var(--bluui-border);border-radius:2px;overflow:hidden}
+.blu-chart__legend-track>span {display:block;height:100%}
+/* The compact key uses Community Chip; only this chart-specific appearance is scoped here. */
+.blu-chart__legend-chip-host {min-width:0;max-width:100%}
+.blu-chart__legend .blu-chip.blu-chart__legend-chip {--chip-bg:transparent;--chip-fg:var(--bluui-text);--chip-border:var(--bluui-border);max-width:100%;box-shadow:none}
+.blu-chart__legend .blu-chart__legend-chip.blu-chip--selected {--chip-bg:var(--legend-selected);--chip-border:var(--bluui-primary);box-shadow:none}
+.blu-chart__legend .blu-chart__legend-chip .blu-chip__select {min-height:38px;padding:9px 12px;gap:10px;font:inherit;font-size:11px;text-align:left;justify-content:flex-start}
+.blu-chart__legend-chip .blu-chart__legend-label {font-weight:500}
+.blu-chart__legend-chip .blu-chart__legend-detail,.blu-chart__legend-chip .blu-chart__legend-check {display:none}
+.blu-chart__legend-chip [aria-pressed=true] {text-decoration:none}
+.blu-chart__legend-chip [aria-pressed=true] .blu-chart__legend-label {text-decoration:underline;text-underline-offset:3px}
+.blu-chart__legend-chip .blu-chart__legend-numbers {gap:7px;flex-wrap:wrap}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-items,.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-items {display:grid;grid-template-columns:repeat(var(--legend-columns,1),minmax(0,1fr));gap:10px}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-entry {display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:10px 11px;border:0}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-numbers {margin-left:23px;justify-content:space-between}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-value {font-size:19px;letter-spacing:-.4px;line-height:1.3}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-detail {margin-left:23px}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-track {display:block;margin:3px 0 0 23px}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-entry {display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:12px;min-height:36px;align-self:start;border-color:var(--bluui-border);border-radius:12px}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-entry[aria-pressed=true] {border-color:var(--bluui-primary)}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-heading {font-size:11px}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-numbers {flex-direction:column;align-items:stretch;gap:6px;margin-top:10px}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-value {font-size:24px;letter-spacing:-.6px;line-height:1.2}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-detail {margin-top:6px}
+.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend {padding:8px 12px 16px}
+.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend-items {display:flex;flex-direction:column}
+.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend-entry {width:100%}
+.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend[data-style=Standard] .blu-chart__legend-entry {flex-wrap:wrap;gap:4px 10px}
+.blu-chart__legend-scale {max-width:360px;min-width:0;margin:0 0 8px}
+.blu-chart__legend-scale-title {display:block;font-size:11px;font-weight:500;margin-bottom:10px;color:var(--bluui-text-muted)}
+.blu-chart__legend-gradient {height:8px;border-radius:4px}
+.blu-chart__legend-range {display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-variant-numeric:tabular-nums}
+.blu-chart__legend[data-style=Compact] .blu-chart__legend-scale {padding:12px 16px;border:1px solid var(--bluui-border);border-radius:18px}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-scale {padding:10px 11px}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-scale {padding:16px;border:1px solid var(--bluui-border);border-radius:12px}
+.blu-chart__legend-note {display:block;margin-top:10px}
+@media(forced-colors:active) {.blu-chart__legend-entry{border:1px solid ButtonText!important}.blu-chart__legend-entry[aria-pressed=true],.blu-chart__legend .blu-chart__legend-chip.blu-chip--selected{outline:1px solid Highlight}.blu-chart__legend-marker svg{forced-color-adjust:none}.blu-chart__legend-gradient{background:Canvas!important;border:1px solid CanvasText}}
+
+/* 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);
+}
+
+/* BluKavantUi_Community_Core → Skeleton — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-skeleton {
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* Skeleton — decorative loading shapes
+The native Block supplies width/height through its style Attribute. For Circle,
+the Block uses HeightPixels for both dimensions to prevent an oval. */
+.blu-skeleton {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  -servicestudio-height: 16px;
+  -servicestudio-min-width: 120px;
+  -servicestudio-background-color: var(--bluui-skeleton-base, #e2e8f0);
+  -servicestudio-border-radius: 4px;
+  background: var(--bluui-skeleton-base, #e2e8f0);
+}
+
+.blu-skeleton--text {
+  border-radius: 4px;
+}
+
+.blu-skeleton--rectangle {
+  border-radius: 10px;
+}
+
+.blu-skeleton--circle {
+  border-radius: 50%;
+}
+
+/* Optional shimmer stops after 4.8 seconds. The static loading shape remains.
+This prevents indefinite nonessential movement alongside loaded content. */
+.blu-skeleton--animated::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, var(--bluui-skeleton-shine, rgb(255 255 255 / 65%)), transparent);
+  transform: translateX(-100%);
+  animation: blu-skeleton-wave 1.6s ease-in-out 3;
+}
+
+@keyframes blu-skeleton-wave {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Respect the user's motion preference even when IsAnimated is True.
+The base shape remains visible when the animated overlay is removed. */
+@media (prefers-reduced-motion: reduce) {
+  .blu-skeleton--animated::after {
+    animation: none;
+    display: none;
+  }
+}
+
+
+/* Visible default size only in the Service Studio canvas. */
+.blu-skeleton {
+  -servicestudio-width: 180px;
+  -servicestudio-height: 20px;
+}
+
+/* The opt-in native motion adapter owns the shimmer. Avoid a second legacy
+wave, including when the adapter is Reduced or Off. Removing the adapter
+restores the existing IsAnimated behavior without changing its contract. */
+.blu-skeleton[data-blu-native-motion="loading-skeleton"]::after {
+  animation: none !important;
+  display: none !important;
+}
+
+/* BluKavantUI Charts Community / Sparkline. SVG scales with the container; colors inherit the
+   shared palette. Values are always exposed through an accessible summary. */
+.blu-sparkline { min-width: 0; width: 100%; color: var(--bluui-text); }
+.blu-sparkline svg { display: block; width: 100%; height: var(--blu-sparkline-height, 64px); overflow: visible; }
+.blu-sparkline__line { fill: none; stroke: var(--blu-sparkline-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.blu-sparkline__area { fill: var(--blu-sparkline-color); opacity: 1; }
+.blu-sparkline__point { fill: var(--blu-sparkline-color); }
+.blu-sparkline__empty { margin: 0; min-height: var(--blu-sparkline-height, 64px); display: flex; align-items: center; color: var(--bluui-text-muted); }
+.blu-sparkline__data { margin-top: 8px; font-size: 13px; }
+.blu-sparkline__data summary { width: fit-content; padding: 6px 0; cursor: pointer; color: var(--bluui-color-primary-text); }
+.blu-sparkline__data table { border-collapse: collapse; width: 100%; margin-top: 8px; }
+.blu-sparkline__data :is(th,td) { padding: 6px 12px; border-bottom: 1px solid var(--bluui-border); text-align: start; }
+.blu-sparkline__data summary:focus-visible { outline: 2px solid var(--bluui-primary); outline-offset: 3px; }
+
+
+/* A small point and its soft halo travel along the line, easing into the end. */
+.blu-sparkline__traveler { pointer-events: none; fill: var(--blu-sparkline-color); }
+.blu-sparkline__halo { opacity: .18; filter: blur(1.5px); }
+.blu-sparkline__ring { opacity: .12; }
+.blu-sparkline__cursor { stroke: none; }
+.blu-sparkline__pause { margin-top: 8px; padding: 5px 8px; min-height: 28px; border: 1px solid var(--bluui-border); border-radius: 5px; background: var(--bluui-surface); color: var(--bluui-text-muted); font: inherit; font-size: 11px; cursor: pointer; }
+.blu-sparkline__pause:focus-visible { outline: 2px solid var(--bluui-primary); outline-offset: 3px; }
+@media (prefers-reduced-motion: reduce), (forced-colors: active) {
+  .blu-sparkline__traveler { display: none; }
+}