@blukavantui/community 0.0.0-stage → 1.1.0

package/dist/skeleton.css

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

package/dist/skeleton.d.ts

@@ -0,0 +1,2 @@
+export { createSkeleton } from './essentials.js';
+export type * from './types.js';

package/dist/skeleton.js

@@ -0,0 +1 @@
+import"./chunk-UUZ4HU7L.js";import{g as a}from"./chunk-O3MRWAI5.js";import"./chunk-MEEQNPGM.js";import"./chunk-5TEIXA4R.js";import"./chunk-SDMH2EVD.js";export{a as createSkeleton};

package/dist/sparkline.css

@@ -0,0 +1,38 @@
+/* BluUI_Core / 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: .09; }
+.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; }
+
+/* Keep the native design preview in Service Studio only after initialization. */
+.blu-sparkline-block:has([data-blu-ready]) > .blu-component-preview { display: none; }
+
+/* Optional five-second glow. Only a decorative copy changes opacity; the
+   underlying line stays sharp and readable in every theme. No permanent loop. */
+.blu-sparkline__glow {
+  fill: none;
+  stroke: var(--blu-sparkline-color);
+  stroke-width: 5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  filter: blur(3px);
+  opacity: 0;
+  pointer-events: none;
+  animation: blu-sparkline-glow 5s ease-in-out 1 both;
+}
+@keyframes blu-sparkline-glow {
+  0%, 100% { opacity: 0; }
+  50% { opacity: .65; }
+}
+/* Respect the device preference and high-contrast rendering. */
+@media (prefers-reduced-motion: reduce), (forced-colors: active) {
+  .blu-sparkline__glow { display: none; animation: none; }
+}

package/dist/sparkline.d.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/sparkline.js';
+export type * from './types.js';

package/dist/sparkline.js

@@ -0,0 +1 @@
+import{a}from"./chunk-W4SW4RWX.js";import"./chunk-MEEQNPGM.js";import"./chunk-5TEIXA4R.js";import"./chunk-SDMH2EVD.js";export{a as createSparkline};

package/dist/split-section.css

@@ -0,0 +1,34 @@
+/* BluUI_Core → split-section — 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; }}
+
+/* The consumer supplies real media, controls and actions through slots. */
+.blu-split-section { background:var(--bluui-surface,#fff); }
+.blu-split-section>.blu-rich-body { max-width:1440px;margin:auto;padding:clamp(56px,7vw,110px) clamp(24px,6vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center; }
+.blu-split-section__media,.blu-split-section__copy { min-width:0; }
+.blu-split-section[data-side=right] .blu-split-section__media { order:2; }
+.blu-split-section[data-surface=muted] { background:var(--bluui-surface-muted,#f1f5f9); }
+.blu-split-section[data-surface=contrast] { background:var(--bluui-text,#172033);color:var(--bluui-surface,#fff); }
+.blu-split-section[data-spacing=compact]>.blu-rich-body { padding-block:40px; }
+.blu-split-section .blu-common-slot--actions { margin-top:28px; }
+@media(max-width:760px){.blu-split-section>.blu-rich-body{grid-template-columns:minmax(0,1fr)}.blu-split-section[data-side=right] .blu-split-section__media{order:0}}

package/dist/split-section.d.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/split-section.js';
+export type * from './types.js';

package/dist/split-section.js

@@ -0,0 +1 @@
+import{a}from"./chunk-4RM3B4L7.js";import"./chunk-MEEQNPGM.js";import"./chunk-5TEIXA4R.js";import"./chunk-SDMH2EVD.js";export{a as createSplitSection};

package/dist/splitter.css

@@ -0,0 +1,32 @@
+/* Splitter owns pane sizing and divider interactions. Native Placeholder content
+   stays mounted so resizing and collapsing preserve forms and component state. */
+.blu-splitter { display:grid; grid-template-columns:minmax(0,35fr) 32px minmax(0,65fr); grid-template-rows:minmax(0,1fr); width:100%; height:360px; min-width:0; position:relative; border:1px solid var(--bluui-border,#dce3ef); border-radius:12px; overflow:hidden; background:var(--bluui-surface,#fff); }
+.blu-splitter__primary,.blu-splitter__secondary { min-width:0; min-height:0; overflow:auto; padding:20px; }
+.blu-splitter__primary { grid-column:1; grid-row:1; }
+.blu-splitter__secondary { grid-column:3; grid-row:1; }
+.blu-splitter__primary[hidden] { display:none; }
+.blu-splitter__handle { grid-column:2; grid-row:1; position:relative; background:var(--bluui-surface-muted, #f1f4f9); min-width:0; min-height:0; }
+.blu-splitter__separator { position:absolute; inset:0; cursor:col-resize; touch-action:none; }
+.blu-splitter__separator::after { content:""; position:absolute; left:14px; top:12px; width:4px; height:18px; border-radius:4px; background:var(--bluui-surface-raised, #9aa9c0); }
+.blu-splitter__separator:hover { background:var(--bluui-primary-soft, #e5e7ff); }
+.blu-splitter__separator:focus-visible { outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:-2px; }
+.blu-splitter__separator[aria-disabled="true"] { cursor:default; opacity:.45; }
+.blu-splitter__toggle { position:absolute; top:calc(50% - 14px); left:2px; padding:0; width:28px; height:28px; border:0; border-radius:4px; color:var(--bluui-primary-text, #4f46e5); background:var(--bluui-primary-soft, #e9eaff); cursor:pointer; font:600 15px/1 sans-serif; }
+.blu-splitter__toggle:focus-visible { outline:2px solid var(--bluui-primary, #4f46e5); outline-offset:-2px; }
+.blu-splitter__toggle[hidden] { display:none; }
+.blu-splitter__toggle:disabled { cursor:default; opacity:.45; }
+/* Vertical means top/bottom panels; the separator orientation follows that axis. */
+.blu-splitter--vertical .blu-splitter__primary { grid-column:1; grid-row:1; }
+.blu-splitter--vertical .blu-splitter__handle { grid-column:1; grid-row:2; }
+.blu-splitter--vertical .blu-splitter__secondary { grid-column:1; grid-row:3; }
+.blu-splitter--vertical .blu-splitter__separator { cursor:row-resize; }
+.blu-splitter--vertical .blu-splitter__separator::after { top:14px; left:12px; height:4px; width:18px; }
+.blu-splitter--vertical .blu-splitter__toggle { top:2px; left:calc(50% - 14px); height:28px; width:28px; }
+.blu-splitter__error { position:absolute; inset:auto 8px 8px; padding:10px; color:var(--bluui-danger-text, #b42318); background:var(--bluui-danger-soft, #fff1f1); border-radius:6px; font-size:13px; z-index:2; }
+.blu-splitter__error[hidden],.blu-splitter__error:empty { display:none; }
+
+/* Three separate 28px targets provide resizing without dragging. */
+.blu-splitter__decrease { top:calc(50% - 46px); }
+.blu-splitter__increase { top:calc(50% + 18px); }
+.blu-splitter--vertical .blu-splitter__decrease { left:calc(50% - 46px); }
+.blu-splitter--vertical .blu-splitter__increase { left:calc(50% + 18px); }

package/dist/splitter.d.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/splitter.js';
+export type * from './types.js';

package/dist/splitter.js

@@ -0,0 +1 @@
+import{a}from"./chunk-K2P2BHV5.js";import"./chunk-5TEIXA4R.js";import"./chunk-SDMH2EVD.js";export{a as createSplitter};

package/dist/statistic.css

@@ -0,0 +1,107 @@
+/* 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
+}
+
+/* Metrics inherit surface from their containing Card. */
+.blu-statistic{
+  color:var(--bluui-text);
+  padding:8px 0;
+  min-width:0
+}
+.blu-statistic__label{
+  font-size:13px;
+  font-weight:500;
+  color:var(--bluui-text-muted);
+  margin-bottom:10px
+}
+.blu-statistic__value{
+  display:flex;
+  align-items:baseline;
+  gap:5px;
+  line-height:1.25;
+  color:var(--blu-common-color);
+  font-variant-numeric:tabular-nums;
+  flex-wrap:wrap
+}
+.blu-statistic__value strong{
+  font-size:36px;
+  letter-spacing:-.04em;
+  font-weight:650
+}
+.blu-statistic__affix{
+  font-size:20px;
+  font-weight:500
+}
+.blu-statistic__trend{
+  font-size:13px;
+  color:var(--bluui-text-muted);
+  margin:10px 0 0
+}
+.blu-statistic__trend span{
+  color:var(--blu-common-color);
+  font-weight:700
+}
+.blu-statistic__loading{
+  height:44px;
+  width:160px;
+  max-width:100%;
+  border-radius:8px;
+  background:var(--bluui-surface-muted)
+}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-statistic-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}

package/dist/statistic.d.ts

@@ -0,0 +1,2 @@
+export * from './component-factories/statistic.js';
+export type * from './types.js';

package/dist/statistic.js

@@ -0,0 +1 @@
+import{a}from"./chunk-AICXIQKD.js";import"./chunk-MEEQNPGM.js";import"./chunk-5TEIXA4R.js";import"./chunk-SDMH2EVD.js";export{a as createStatistic};