@godxjp/ui 33.15.0 → 33.16.0

package/dist/props/registry.js

@@ -717,6 +717,60 @@ const VOCABULARY_REGISTRY = {
   }
 };
 const COMPONENT_PROP_REGISTRY = {
+  DashboardGridProp: {
+    group: "layout",
+    file: "components/dashboard-grid.prop.ts",
+    vocabulary: [
+      "ClassNameProp",
+      "IdProp",
+      {
+        field: "items",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "layout",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "defaultLayout",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "onLayoutChange",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "columns",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "rowHeight",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "editable",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      }
+    ]
+  },
+  DashboardGridItemProp: {
+    group: "layout",
+    file: "components/dashboard-grid.prop.ts",
+    vocabulary: [
+      { field: "id", local: true, reason: "Persisted grid cell coordinate or identity." },
+      { field: "x", local: true, reason: "Persisted grid cell coordinate or identity." },
+      { field: "y", local: true, reason: "Persisted grid cell coordinate or identity." },
+      { field: "w", local: true, reason: "Persisted grid cell coordinate or identity." },
+      { field: "h", local: true, reason: "Persisted grid cell coordinate or identity." }
+    ]
+  },
   AppProviderProp: { group: "app", file: "components/app.prop.ts", vocabulary: ["ChildrenProp"] },
   ThemeScopeProp: {
     group: "app",
@@ -2843,6 +2897,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/charts.prop.ts",
     vocabulary: [
+      {
+        field: "onDatumSelect",
+        local: true,
+        reason: "Pointer and keyboard datum selection action, independent of dashboard state."
+      },
       "LabelProp",
       "DescriptionProp",
       "SizeProp",
@@ -2879,6 +2938,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/charts.prop.ts",
     vocabulary: [
+      {
+        field: "onDatumSelect",
+        local: true,
+        reason: "Pointer and keyboard datum selection action, independent of dashboard state."
+      },
       "LabelProp",
       "DescriptionProp",
       "SizeProp",
@@ -2952,6 +3016,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/charts.prop.ts",
     vocabulary: [
+      {
+        field: "onDatumSelect",
+        local: true,
+        reason: "Pointer and keyboard datum selection action, independent of dashboard state."
+      },
       "LabelProp",
       "DescriptionProp",
       "SizeProp",
@@ -2988,6 +3057,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/charts.prop.ts",
     vocabulary: [
+      {
+        field: "onDatumSelect",
+        local: true,
+        reason: "Pointer and keyboard datum selection action, independent of dashboard state."
+      },
       "LabelProp",
       "DescriptionProp",
       "SizeProp",
@@ -3025,6 +3099,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/charts.prop.ts",
     vocabulary: [
+      {
+        field: "onDatumSelect",
+        local: true,
+        reason: "Pointer and keyboard datum selection action, independent of dashboard state."
+      },
       "LabelProp",
       "DescriptionProp",
       "SizeProp",

package/dist/styles/chart-layout.css

@@ -326,3 +326,31 @@
     calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
   );
 }
+
+.ui-chart-datum,
+.ui-chart-heatmap-cell[data-interactive] {
+  cursor: pointer;
+}
+
+.ui-chart-datum:hover,
+.ui-chart-heatmap-cell[data-interactive]:hover {
+  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color, var(--ring)));
+  outline-offset: var(--focus-ring-offset);
+}
+
+.ui-chart-bar-hit {
+  width: max(var(--chart-mark-width, 0px), var(--touch-target-min));
+  height: max(var(--chart-mark-height, 0px), var(--touch-target-min));
+}
+
+.ui-chart-point-hit {
+  r: calc(var(--touch-target-min) / 2);
+}
+
+.ui-chart-canvas:has(.ui-chart-datum) .recharts-surface {
+  overflow: visible;
+}
+
+.ui-chart-canvas:has(.ui-chart-datum) .recharts-text {
+  direction: ltr;
+}

package/dist/styles/control.css

@@ -3921,3 +3921,85 @@
     }
   }
 }
+
+@layer components {
+  .ui-dashboard-grid,
+  .ui-dashboard-grid-items,
+  .ui-dashboard-grid-item,
+  .ui-dashboard-grid-content {
+    min-inline-size: 0;
+  }
+  .ui-dashboard-grid-items {
+    display: grid;
+    grid-template-columns: repeat(var(--dashboard-grid-columns, 1), minmax(0, 1fr));
+    grid-auto-rows: var(--dashboard-grid-row-height);
+    gap: var(--dashboard-grid-gap);
+  }
+  .ui-dashboard-grid-item {
+    position: relative;
+    border-radius: var(--dashboard-grid-item-radius);
+  }
+  .ui-dashboard-grid-surface {
+    display: flex;
+    flex-direction: column;
+    block-size: 100%;
+  }
+  .ui-dashboard-grid-item .ui-dashboard-grid-header {
+    padding-inline-start: calc(
+      var(--dashboard-grid-handle-size) + var(--dashboard-grid-handle-inset) * 2
+    );
+  }
+  .ui-dashboard-grid-items[data-stacked] {
+    grid-auto-rows: auto;
+  }
+  .ui-dashboard-grid-content {
+    flex: 1;
+    min-block-size: 0;
+    overflow: auto;
+  }
+  .ui-dashboard-grid-item[data-held] {
+    outline: var(--focus-ring-width) solid
+      hsl(var(--dashboard-grid-preview-ring-color, var(--ring)));
+    outline-offset: var(--focus-ring-offset);
+  }
+  .ui-dashboard-grid-move,
+  .ui-dashboard-grid-resize {
+    position: absolute;
+    z-index: 1;
+    inline-size: var(--dashboard-grid-handle-size);
+    block-size: var(--dashboard-grid-handle-size);
+    min-inline-size: var(--touch-target-min);
+    min-block-size: var(--touch-target-min);
+    touch-action: none;
+  }
+  .ui-dashboard-grid-move {
+    inset-block-start: var(--dashboard-grid-handle-inset);
+    inset-inline-start: var(--dashboard-grid-handle-inset);
+    cursor: grab;
+  }
+  .ui-dashboard-grid-resize {
+    inset-block-end: var(--dashboard-grid-handle-inset);
+    inset-inline-end: var(--dashboard-grid-handle-inset);
+    cursor: nwse-resize;
+    opacity: 0;
+  }
+  .ui-dashboard-grid-item:dir(rtl) .ui-dashboard-grid-resize {
+    cursor: nesw-resize;
+    transform: scaleX(-1);
+  }
+  .ui-dashboard-grid-item:hover .ui-dashboard-grid-resize,
+  .ui-dashboard-grid-item:focus-within .ui-dashboard-grid-resize {
+    opacity: 1;
+  }
+  .ui-dashboard-grid-item[data-held] .ui-dashboard-grid-move {
+    cursor: grabbing;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ui-dashboard-grid-item,
+    .ui-dashboard-grid-move,
+    .ui-dashboard-grid-resize {
+      transition: none;
+      animation: none;
+    }
+  }
+}

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.15.0",
+  "version": "33.16.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -404,6 +404,15 @@
         "data-display-layout.css"
       ]
     },
+    "DashboardGrid": {
+      "layers": [
+        "control.css",
+        "toggle.css",
+        "card-layout.css",
+        "dialog-layout.css",
+        "navigation-layout.css"
+      ]
+    },
     "DataState": {
       "layers": [
         "layout.css",

package/dist/styles/navigation-layout.css

@@ -493,6 +493,8 @@
   }
 
   .ui-pagination {
+
+    padding-inline: 0;
     scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
     max-inline-size: 100%;
     overflow-x: auto;