@luzmo/analytics-components-kit 1.0.1-alpha.113 → 1.0.1-alpha.115

package/LICENSE

@@ -1,6 +1,6 @@
 A kit of modern Luzmo Web Components for analytics in your web application.
 
-Copyright © 2025 Luzmo
+Copyright © 2026 Luzmo
 All rights reserved.
 Luzmo web components (“Luzmo Web Components”)
 must be used according to the Luzmo Terms of Service.

package/README.md

@@ -16,69 +16,104 @@ A collection of web components for building analytics interfaces with Luzmo. Bui
 npm install @luzmo/analytics-components-kit
 ```
 
+## Table of contents
+
+- [Available Components](#available-components)
+  - [Data Components](#data-components)
+  - [Filter Components](#filter-components)
+  - [Display Settings](#display-settings)
+  - [Layout Components](#layout-components)
+  - [Edit Components](#edit-components)
+- [Utilities](#utilities)
+- [Usage: Drag & Drop Data Flow](#usage-drag-drop-data-flow)
+  - [Concept](#concept)
+  - [Example Implementation](#example-implementation)
+    - [TypeScript](#typescript)
+    - [HTML](#html)
+  - [Key Points](#key-points)
+- [Item Definitions](#item-definitions)
+- [Theming](#theming)
+  - [Global Variables Reference](#global-variables-reference)
+    - [Animation](#animation)
+    - [Border Colors](#border-colors)
+    - [Border Radius](#border-radius)
+    - [Border Width](#border-width)
+    - [Background Colors](#background-colors)
+    - [Typography](#typography)
+    - [Font Colors](#font-colors)
+    - [Primary Color](#primary-color)
+    - [Secondary Color](#secondary-color)
+    - [Semantic Colors](#semantic-colors)
+    - [Selected State Colors](#selected-state-colors)
+    - [Spacing](#spacing)
+    - [Focus Indicator](#focus-indicator)
+    - [Component Heights](#component-heights)
+    - [Icon Sizes](#icon-sizes)
+  - [Overriding Variables](#overriding-variables)
+  - [Dark Theme](#dark-theme)
+  - [Component CSS Variable Overrides](#component-css-variable-overrides)
+- [Browser Support](#browser-support)
+- [License](#license)
+
 ## Available Components
 
 ### Data Components
 
-| Component | Import | Description |
-|-----------|--------|-------------|
-| Draggable Data Item | `@luzmo/analytics-components-kit/draggable-data-item` | Draggable representation of a dataset column or formula |
-| Droppable Slot | `@luzmo/analytics-components-kit/droppable-slot` | Drop target for data items in chart configuration |
-| Slot Contents Picker | `@luzmo/analytics-components-kit/slot-contents-picker` | Picker-based slot content selection |
+| Component            | Import                                                 | Description                                             |
+| -------------------- | ------------------------------------------------------ | ------------------------------------------------------- |
+| Draggable Data Field | `@luzmo/analytics-components-kit/draggable-data-field` | Draggable representation of a dataset column or formula |
+| Droppable Slot       | `@luzmo/analytics-components-kit/droppable-slot`       | Drop target for data items in chart configuration       |
+| Slot Contents Picker | `@luzmo/analytics-components-kit/slot-contents-picker` | Picker-based slot content selection                     |
 
 ### Filter Components
 
-| Component | Import | Description |
-|-----------|--------|-------------|
-| Filter Item | `@luzmo/analytics-components-kit/filter-item` | Filter configuration component |
-| Edit Filters | `@luzmo/analytics-components-kit/edit-filters` | Filter editing panel
+| Component    | Import                                         | Description                    |
+| ------------ | ---------------------------------------------- | ------------------------------ |
+| Filter Item  | `@luzmo/analytics-components-kit/filter-item`  | Filter configuration component |
+| Edit Filters | `@luzmo/analytics-components-kit/edit-filters` | Filter editing panel           |
 
 ### Display Settings
 
-| Component | Import | Description |
-|-----------|--------|-------------|
-| Display Settings | `@luzmo/analytics-components-kit/display-settings` | Column display settings
+| Component        | Import                                             | Description             |
+| ---------------- | -------------------------------------------------- | ----------------------- |
+| Display Settings | `@luzmo/analytics-components-kit/display-settings` | Column display settings |
 
 ### Layout Components
 
-| Component | Import | Description |
-|-----------|--------|-------------|
-| Grid | `@luzmo/analytics-components-kit/grid` | Responsive grid layout for dashboard items
+| Component | Import                                 | Description                                |
+| --------- | -------------------------------------- | ------------------------------------------ |
+| Grid      | `@luzmo/analytics-components-kit/grid` | Responsive grid layout for dashboard items |
 
 ### Edit Components
 
-| Component | Import | Description |
-|-----------|--------|-------------|
-| Edit Item | `@luzmo/analytics-components-kit/edit-item` | Container for editing chart options |
-| Edit Option | `@luzmo/analytics-components-kit/edit-option` | Individual option editor |
+| Component   | Import                                        | Description                         |
+| ----------- | --------------------------------------------- | ----------------------------------- |
+| Edit Item   | `@luzmo/analytics-components-kit/edit-item`   | Container for editing chart options |
+| Edit Option | `@luzmo/analytics-components-kit/edit-option` | Individual option editor            |
 
 ## Utilities
 
 ```typescript
-import { loadDraggableItemsForDatasets } from '@luzmo/analytics-components-kit/utils';
-
-// Load datasets with draggable data items
-const datasets = await loadDraggableItemsForDatasets(
-  ['dataset-id-1', 'dataset-id-2'],
-  {
-    dataBrokerConfig: {
-      apiUrl: 'https://api.luzmo.com',
-      authKey: 'your-auth-key',
-      authToken: 'your-auth-token'
-    }
+import { loadDraggableFieldsForDatasets } from '@luzmo/analytics-components-kit/utils';
+
+// Load datasets with draggable data fields
+const datasets = await loadDraggableFieldsForDatasets(['dataset-id-1', 'dataset-id-2'], {
+  dataBrokerConfig: {
+    apiUrl: 'https://api.luzmo.com',
+    authKey: 'your-auth-key',
+    authToken: 'your-auth-token'
   }
-);
+});
 ```
 
-
 ## Usage: Drag & Drop Data Flow
 
 This library provides a complete drag-and-drop system for building Luzmo chart configurations. The flow consists of loading dataset columns/formulas as draggable items and dropping them into chart slots.
 
 ### Concept
 
-1. **Load datasets**: Use `loadDraggableItemsForDatasets()` to fetch datasets with their columns and formulas from the Luzmo API
-2. **Display draggable data items**: Render each column/formula as a `<luzmo-draggable-data-item>` component
+1. **Load datasets**: Use `loadDraggableFieldsForDatasets()` to fetch datasets with their columns and formulas from the Luzmo API
+2. **Display draggable data fields**: Render each column/formula as a `<luzmo-draggable-data-field>` component
 3. **Define droppable slots**: Create `<luzmo-droppable-slot>` components representing data slots of a Luzmo chart (e.g., 'Y-axis', 'Measure' and 'Legend' for a bar chart)
 4. **Handle drops on the slot**: On each `<luzmo-droppable-slot>`, listen to the `slot-contents-changed` event to capture data dropped into each slot
 5. **Use slot contents**: The slot contents are in the format expected by Luzmo charts and can be passed directly to the slots array of Luzmo Flex SDK visualization components
@@ -88,22 +123,19 @@ This library provides a complete drag-and-drop system for building Luzmo chart c
 #### TypeScript
 
 ```typescript
-import '@luzmo/analytics-components-kit/draggable-data-item';
+import '@luzmo/analytics-components-kit/draggable-data-field';
 import '@luzmo/analytics-components-kit/droppable-slot';
-import { loadDraggableItemsForDatasets } from '@luzmo/analytics-components-kit/utils';
+import { loadDraggableFieldsForDatasets } from '@luzmo/analytics-components-kit/utils';
 import barChartSlotsConfig from '@luzmo/analytics-components-kit/item-definitions/bar-chart/bar-chart-slots.config';
 
 // Load datasets with their columns and formulas
-const datasets = await loadDraggableItemsForDatasets(
-  ['dataset-id-1', 'dataset-id-2'],
-  {
-    dataBrokerConfig: {
-      apiUrl: 'https://api.luzmo.com',
-      authKey: 'your-auth-key',
-      authToken: 'your-auth-token'
-    }
+const datasets = await loadDraggableFieldsForDatasets(['dataset-id-1', 'dataset-id-2'], {
+  dataBrokerConfig: {
+    apiUrl: 'https://api.luzmo.com',
+    authKey: 'your-auth-key',
+    authToken: 'your-auth-token'
   }
-);
+});
 
 // Slots configuration for a bar chart
 const slotsConfig = barChartSlotsConfig;
@@ -125,16 +157,16 @@ function handleSlotChange(event, slotName) {
 <div class="data-panel">
   <h3>Available Data</h3>
   ${datasets.map(dataset => html`
-    <div class="dataset">
-      <h4>${dataset.name}</h4>
-      ${dataset.columns.map(column => html`
-        <luzmo-draggable-data-item
-          size="m"
-          language="en"
-          .data=${column}
-        ></luzmo-draggable-data-item>
-      `)}
-    </div>
+  <div class="dataset">
+    <h4>${dataset.name}</h4>
+    ${dataset.columns.map(column => html`
+    <luzmo-draggable-data-field
+      size="m"
+      language="en"
+      .data="${column}"
+    ></luzmo-draggable-data-field>
+    `)}
+  </div>
   `)}
 </div>
 
@@ -142,27 +174,30 @@ function handleSlotChange(event, slotName) {
 <div class="chart-config">
   <h3>Bar Chart Configuration</h3>
   ${slotsConfig.map(slot => html`
-    <luzmo-droppable-slot
-      item-type="bar-chart"
-      slot-name=${slot.name}
-      label=${slot.label}
-      size="m"
-      .slotConfiguration=${slot}
-      @slot-contents-changed=${(e) => handleSlotChange(e, slot.name)}
-    ></luzmo-droppable-slot>
+  <luzmo-droppable-slot
+    item-type="bar-chart"
+    slot-name="${slot.name}"
+    label="${slot.label}"
+    size="m"
+    .slotConfiguration="${slot}"
+    @slot-contents-changed="${(e)"
+    =""
+  >
+    handleSlotChange(e, slot.name)} ></luzmo-droppable-slot
+  >
   `)}
 </div>
 ```
 
 ### Key Points
 
-- `loadDraggableItemsForDatasets()` handles authentication, fetches datasets, and transforms them into the correct format for draggable items
+- `loadDraggableFieldsForDatasets()` handles authentication, fetches datasets, and transforms them into the correct format for draggable fields
 - Chart slot config can be imported from `item-definitions/{chart-type}/{chart-type}-slots.config` to dynamically create appropriate drop zones
-- `<luzmo-draggable-data-item>` automatically handles drag behavior and displays columns/formulas with appropriate icons and hierarchy levels
+- `<luzmo-draggable-data-field>` automatically handles drag behavior and displays columns/formulas with appropriate icons and hierarchy levels
 - `<luzmo-droppable-slot>` validates drops based on configuration (e.g., only numeric types for measures) and emits `slot-contents-changed` event
-- Slot configuration defines validation rules like `canAcceptMultipleDataItems`, `canAcceptFormula`, and `acceptableDataItemTypes`
+- Slot configuration defines validation rules like `canAcceptMultipleDataFields`, `canAcceptFormula`, and `acceptableDataFieldTypes`
 - Slot contents returned from the event are already in the format expected by Luzmo chart components
-- The transformation from `DraggableDataItem` to `GenericSlotContent` happens automatically when dropping
+- The transformation from `DraggableDataField` to `GenericSlotContent` happens automatically when dropping
 
 ## Item Definitions
 
@@ -177,60 +212,219 @@ Available chart types include: `area-chart`, `bar-chart`, `bubble-chart`, `bulle
 
 ## Theming
 
-All components use CSS custom properties (variables) that can be overridden to customize appearance.
-
-### Key Variables
+Components are themed via global CSS custom properties (`--luzmo-*`). Define them on `:root` / `html` or scope them to a container.
+
+### Global Variables Reference
+
+All components inherit global CSS variables defined on `html` / `:root`. Overriding these variables updates the styling across all components.
+
+#### Animation
+
+| Variable                     | Default | Description                            |
+| ---------------------------- | ------- | -------------------------------------- |
+| `--luzmo-animation-duration` | `0.15s` | Duration of transitions and animations |
+
+#### Border Colors
+
+| Variable                          | Default               | Description                              |
+| --------------------------------- | --------------------- | ---------------------------------------- |
+| `--luzmo-border-color`            | `rgba(0, 0, 0, 0.1)`  | Default border color (semi-transparent)  |
+| `--luzmo-border-color-hover`      | `rgba(0, 0, 0, 0.15)` | Border color on hover                    |
+| `--luzmo-border-color-down`       | `rgba(0, 0, 0, 0.3)`  | Border color when pressed                |
+| `--luzmo-border-color-focus`      | `rgba(0, 0, 0, 0.15)` | Border color when focused                |
+| `--luzmo-border-color-rgb`        | `0, 0, 0`             | RGB values for border color calculations |
+| `--luzmo-border-color-full`       | `rgb(180, 180, 180)`  | Full opacity border color                |
+| `--luzmo-border-color-full-hover` | `rgb(140, 140, 140)`  | Full opacity border on hover             |
+| `--luzmo-border-color-full-down`  | `rgb(110, 110, 110)`  | Full opacity border when pressed         |
+| `--luzmo-border-color-full-focus` | `rgb(140, 140, 140)`  | Full opacity border when focused         |
+| `--luzmo-border-color-disabled`   | `#dddddd`             | Border color for disabled state          |
+
+#### Border Radius
+
+| Variable                     | Default  | Description                |
+| ---------------------------- | -------- | -------------------------- |
+| `--luzmo-border-radius`      | `6px`    | Default border radius      |
+| `--luzmo-border-radius-s`    | `4px`    | Small border radius        |
+| `--luzmo-border-radius-l`    | `8px`    | Large border radius        |
+| `--luzmo-border-radius-xl`   | `12px`   | Extra large border radius  |
+| `--luzmo-border-radius-full` | `999rem` | Fully rounded (pill shape) |
+
+#### Border Width
+
+| Variable               | Default | Description          |
+| ---------------------- | ------- | -------------------- |
+| `--luzmo-border-width` | `1px`   | Default border width |
+
+#### Background Colors
+
+| Variable                                      | Default              | Description                            |
+| --------------------------------------------- | -------------------- | -------------------------------------- |
+| `--luzmo-background-color`                    | `#ffffff`            | Default background color               |
+| `--luzmo-background-color-rgb`                | `255, 255, 255`      | RGB values for background calculations |
+| `--luzmo-background-color-disabled`           | `#eeeeee`            | Background for disabled state          |
+| `--luzmo-background-color-hover`              | `#f0f0fc`            | Background on hover                    |
+| `--luzmo-background-color-down`               | `#f1f1ff`            | Background when pressed                |
+| `--luzmo-background-color-focus`              | `#f0f0fc`            | Background when focused                |
+| `--luzmo-background-color-highlight`          | `rgb(240, 240, 240)` | Highlighted background                 |
+| `--luzmo-background-color-highlight-disabled` | `rgb(245, 245, 245)` | Disabled highlighted background        |
+| `--luzmo-background-color-highlight-hover`    | `rgb(225, 225, 225)` | Highlighted background on hover        |
+| `--luzmo-background-color-highlight-down`     | `rgb(215, 215, 215)` | Highlighted background when pressed    |
+| `--luzmo-background-color-highlight-focus`    | `rgb(225, 225, 225)` | Highlighted background when focused    |
+| `--luzmo-background-color-alt-1`              | `rgb(250, 250, 250)` | Alternate background 1                 |
+| `--luzmo-background-color-alt-2`              | `rgb(239, 239, 239)` | Alternate background 2                 |
+
+#### Typography
+
+| Variable                       | Default            | Description                 |
+| ------------------------------ | ------------------ | --------------------------- |
+| `--luzmo-font-family`          | System fonts stack | Font family for all text    |
+| `--luzmo-font-size-xs`         | `10px`             | Extra small font size       |
+| `--luzmo-font-size-s`          | `12px`             | Small font size             |
+| `--luzmo-font-size-m`          | `14px`             | Medium font size            |
+| `--luzmo-font-size`            | `14px`             | Default font size           |
+| `--luzmo-font-size-l`          | `16px`             | Large font size             |
+| `--luzmo-font-size-xl`         | `18px`             | Extra large font size       |
+| `--luzmo-font-size-xxl`        | `20px`             | Extra extra large font size |
+| `--luzmo-font-style`           | `normal`           | Default font style          |
+| `--luzmo-line-height`          | `normal`           | Default line height         |
+| `--luzmo-font-weight`          | `400`              | Regular font weight         |
+| `--luzmo-font-weight-semibold` | `500`              | Semi-bold font weight       |
+| `--luzmo-font-weight-bold`     | `600`              | Bold font weight            |
+
+#### Font Colors
+
+| Variable                          | Default   | Description              |
+| --------------------------------- | --------- | ------------------------ |
+| `--luzmo-font-color`              | `#333`    | Default text color       |
+| `--luzmo-font-color-hard`         | `#000`    | High contrast text color |
+| `--luzmo-font-color-disabled`     | `#aaaaaa` | Disabled text color      |
+| `--luzmo-font-color-extra-dimmed` | `#888`    | Very subtle text color   |
+| `--luzmo-font-color-hover`        | `#333`    | Text color on hover      |
+| `--luzmo-font-color-down`         | `#111`    | Text color when pressed  |
+| `--luzmo-font-color-focus`        | `#333`    | Text color when focused  |
+
+#### Primary Color
+
+| Variable                        | Default       | Description                      |
+| ------------------------------- | ------------- | -------------------------------- |
+| `--luzmo-primary`               | `#4434ff`     | Primary brand color              |
+| `--luzmo-primary-hover`         | `#4234e4`     | Primary color on hover           |
+| `--luzmo-primary-down`          | `#392cc7`     | Primary color when pressed       |
+| `--luzmo-primary-focus`         | `#4234e4`     | Primary color when focused       |
+| `--luzmo-primary-inverse-color` | `#ffffff`     | Text color on primary background |
+| `--luzmo-primary-rgb`           | `68, 52, 255` | RGB values for primary color     |
+
+#### Secondary Color
+
+| Variable                          | Default                  | Description                        |
+| --------------------------------- | ------------------------ | ---------------------------------- |
+| `--luzmo-secondary`               | `#ff00ff`                | Secondary brand color              |
+| `--luzmo-secondary-hover`         | `#e309e3`                | Secondary color on hover           |
+| `--luzmo-secondary-down`          | `#c711c7`                | Secondary color when pressed       |
+| `--luzmo-secondary-focus`         | `#e309e3`                | Secondary color when focused       |
+| `--luzmo-secondary-inverse-color` | `#ffffff`                | Text color on secondary background |
+| `--luzmo-secondary-rgb`           | `255, 0, 255`            | RGB values for secondary color     |
+| `--luzmo-secondary-outline`       | `rgba(255, 0, 255, 0.2)` | Secondary outline color            |
+
+#### Semantic Colors
+
+| Variable                        | Default             | Description                      |
+| ------------------------------- | ------------------- | -------------------------------- |
+| `--luzmo-negative-color`        | `#ca221c`           | Error/danger color               |
+| `--luzmo-negative-color-hover`  | `#b3241f`           | Negative color on hover          |
+| `--luzmo-negative-color-down`   | `#9f231f`           | Negative color when pressed      |
+| `--luzmo-negative-color-focus`  | `#b3241f`           | Negative color when focused      |
+| `--luzmo-negative-color-rgb`    | `202, 34, 28`       | RGB values for negative color    |
+| `--luzmo-positive-color`        | `rgb(20, 150, 101)` | Success color                    |
+| `--luzmo-positive-color-hover`  | `rgb(17, 128, 86)`  | Positive color on hover          |
+| `--luzmo-positive-color-down`   | `rgb(16, 105, 71)`  | Positive color when pressed      |
+| `--luzmo-positive-color-focus`  | `rgb(17, 128, 86)`  | Positive color when focused      |
+| `--luzmo-positive-color-rgb`    | `20, 150, 101`      | RGB values for positive color    |
+| `--luzmo-color-informative`     | `#1a77e9`           | Informational color              |
+| `--luzmo-color-informative-rgb` | `26, 119, 233`      | RGB values for informative color |
+| `--luzmo-color-disabled`        | `#aaaaaa`           | Disabled state color             |
+
+#### Selected State Colors
+
+| Variable                            | Default              | Description                  |
+| ----------------------------------- | -------------------- | ---------------------------- |
+| `--luzmo-selected-color`            | `rgb(110, 110, 110)` | Selected item color          |
+| `--luzmo-selected-color-hover`      | `rgb(70, 70, 70)`    | Selected color on hover      |
+| `--luzmo-selected-color-down`       | `rgb(40, 40, 40)`    | Selected color when pressed  |
+| `--luzmo-selected-color-focus`      | `rgb(70, 70, 70)`    | Selected color when focused  |
+| `--luzmo-selected-color-hard`       | `#1e1e1e`            | High contrast selected color |
+| `--luzmo-selected-color-hard-hover` | `rgb(0, 0, 0)`       | Hard selected on hover       |
+| `--luzmo-selected-color-hard-down`  | `rgb(0, 0, 0)`       | Hard selected when pressed   |
+| `--luzmo-selected-color-hard-focus` | `rgb(0, 0, 0)`       | Hard selected when focused   |
+
+#### Spacing
+
+| Variable            | Default | Description           |
+| ------------------- | ------- | --------------------- |
+| `--luzmo-spacing-1` | `2px`   | Smallest spacing unit |
+| `--luzmo-spacing-2` | `4px`   | Extra small spacing   |
+| `--luzmo-spacing-3` | `8px`   | Small spacing         |
+| `--luzmo-spacing-4` | `12px`  | Medium spacing        |
+| `--luzmo-spacing-5` | `16px`  | Large spacing         |
+
+#### Focus Indicator
+
+| Variable                  | Default                | Description                             |
+| ------------------------- | ---------------------- | --------------------------------------- |
+| `--luzmo-indicator-gap`   | `2px`                  | Gap between element and focus indicator |
+| `--luzmo-indicator-width` | `1px`                  | Focus indicator width                   |
+| `--luzmo-indicator-color` | `var(--luzmo-primary)` | Focus indicator color                   |
+
+#### Component Heights
+
+| Variable                       | Default | Description                        |
+| ------------------------------ | ------- | ---------------------------------- |
+| `--luzmo-component-height-xxs` | `20px`  | Extra extra small component height |
+| `--luzmo-component-height-xs`  | `24px`  | Extra small component height       |
+| `--luzmo-component-height-s`   | `28px`  | Small component height             |
+| `--luzmo-component-height`     | `32px`  | Default component height           |
+| `--luzmo-component-height-l`   | `40px`  | Large component height             |
+| `--luzmo-component-height-xl`  | `48px`  | Extra large component height       |
+| `--luzmo-component-height-xxl` | `64px`  | Extra extra large component height |
+
+#### Icon Sizes
+
+| Variable                | Default | Description            |
+| ----------------------- | ------- | ---------------------- |
+| `--luzmo-icon-size-xxs` | `12px`  | Extra extra small icon |
+| `--luzmo-icon-size-xs`  | `14px`  | Extra small icon       |
+| `--luzmo-icon-size-s`   | `16px`  | Small icon             |
+| `--luzmo-icon-size-m`   | `18px`  | Medium icon            |
+| `--luzmo-icon-size-l`   | `20px`  | Large icon             |
+| `--luzmo-icon-size-xl`  | `22px`  | Extra large icon       |
+| `--luzmo-icon-size-xxl` | `32px`  | Extra extra large icon |
+
+### Overriding Variables
 
 ```css
 :root {
-  /* Primary color with states */
   --luzmo-primary: #4434ff;
-  --luzmo-primary-hover: #4234e4;
-  --luzmo-primary-down: #392cc7;
-  --luzmo-primary-focus: #4234e4;
-  --luzmo-primary-inverse-color: #ffffff;
-  --luzmo-primary-rgb: 68, 52, 255;
-  
-  /* Secondary color with states */
-  --luzmo-secondary: #ff00ff;
-  --luzmo-secondary-hover: #e309e3;
-  --luzmo-secondary-down: #c711c7;
-  --luzmo-secondary-focus: #e309e3;
-  --luzmo-secondary-inverse-color: #ffffff;
-  
-  /* Background colors with states */
   --luzmo-background-color: #ffffff;
-  --luzmo-background-color-hover: #f0f0fc;
-  --luzmo-background-color-down: #f1f1ff;
-  --luzmo-background-color-focus: #f0f0fc;
-  --luzmo-background-color-highlight: rgb(240, 240, 240);
-  --luzmo-background-color-rgb: 255, 255, 255;
-  
-  /* Font colors with states */
   --luzmo-font-color: #333;
-  --luzmo-font-color-hover: #333;
-  --luzmo-font-color-down: #111;
-  --luzmo-font-color-focus: #333;
-  
-  /* Border colors with states */
-  --luzmo-border-color: rgba(0, 0, 0, 0.1);
-  --luzmo-border-color-hover: rgba(0, 0, 0, 0.15);
-  --luzmo-border-color-down: rgba(0, 0, 0, 0.3);
-  --luzmo-border-color-focus: rgba(0, 0, 0, 0.15);
-  --luzmo-border-color-rgb: 0, 0, 0;
-  
-  /* Typography */
-  --luzmo-font-size: 14px;
-  --luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  
-  /* Border */
-  --luzmo-border-radius: 6px;
+}
+
+/* Scope overrides to a specific container */
+.my-chart-editor {
+  --luzmo-primary: #7b90ff;
+  --luzmo-background-color: #262626;
+  --luzmo-font-color: #ced4da;
 }
 ```
 
-### Dark Mode
+### Dark Theme
 
-A pre-built dark theme is available at `src/styles/global-variables-dark-theme.css`. Import or use these values:
+Apply the pre-defined dark theme by adding the `dark-theme` class to a container or `html`:
+
+```html
+<html class="dark-theme">
+  <!-- All components inherit dark theme -->
+</html>
+```
 
 ```css
 .dark-theme {
@@ -241,14 +435,14 @@ A pre-built dark theme is available at `src/styles/global-variables-dark-theme.c
   --luzmo-primary-focus: rgb(94, 113, 208);
   --luzmo-primary-inverse-color: #ffffff;
   --luzmo-primary-rgb: 94, 113, 208;
-  
+
   /* Secondary color */
   --luzmo-secondary: #ebff00;
   --luzmo-secondary-hover: #c8db00;
   --luzmo-secondary-down: #b1c008;
   --luzmo-secondary-focus: rgb(200, 219, 0);
   --luzmo-secondary-inverse-color: #333;
-  
+
   /* Background colors */
   --luzmo-background-color: #262626;
   --luzmo-background-color-hover: #414040;
@@ -259,7 +453,7 @@ A pre-built dark theme is available at `src/styles/global-variables-dark-theme.c
   --luzmo-background-color-highlight-down: rgb(100, 100, 100);
   --luzmo-background-color-alt-1: rgb(45, 45, 50);
   --luzmo-background-color-rgb: 0, 0, 0;
-  
+
   /* Font colors */
   --luzmo-font-color: #ced4da;
   --luzmo-font-color-hover: #e0e4e8;
@@ -267,7 +461,7 @@ A pre-built dark theme is available at `src/styles/global-variables-dark-theme.c
   --luzmo-font-color-focus: #f8f9fa;
   --luzmo-font-color-hard: #f8f9fa;
   --luzmo-font-color-extra-dimmed: #72787f;
-  
+
   /* Border colors (white-based for dark backgrounds) */
   --luzmo-border-color-rgb: 255, 255, 255;
   --luzmo-border-color: rgba(255, 255, 255, 0.2);
@@ -277,28 +471,20 @@ A pre-built dark theme is available at `src/styles/global-variables-dark-theme.c
   --luzmo-border-color-full: #4c4c57;
   --luzmo-border-color-full-hover: rgb(101, 101, 112);
   --luzmo-border-color-full-down: rgb(130, 130, 138);
-  
+
   /* Selected state colors */
   --luzmo-selected-color: #afafaf;
   --luzmo-selected-color-hover: #dfdfdf;
   --luzmo-selected-color-down: #efefef;
   --luzmo-selected-color-focus: #dfdfdf;
   --luzmo-selected-color-hard: #e9e9e9;
-  
+
   /* Disabled state */
   --luzmo-color-disabled: #75797b;
   --luzmo-border-color-disabled: #333;
 }
 ```
 
-Apply by adding the class to a container or `html`:
-
-```html
-<html class="dark-theme">
-  <!-- All components inherit dark theme -->
-</html>
-```
-
 ### Component CSS Variable Overrides
 
 Each component exposes its own CSS variables for fine-grained customization. To discover available variables:
@@ -331,7 +517,6 @@ luzmo-droppable-slot {
 
 ## License
 
-Copyright © 2025 Luzmo. All rights reserved.
+Copyright © 2026 Luzmo. All rights reserved.
 
 This package must be used according to the [Luzmo Terms of Service](https://www.luzmo.com/information-pages/terms-of-use). This license allows users with a current active Luzmo account to use this package.
-

package/angular/README.md

@@ -24,38 +24,8 @@ bootstrapApplication(AiChatMessageAssistantComponent);
 ## Available components
 - `AiChatMessageAssistantComponent` → <luzmo-ai-chat-message-assistant>
 - `AiChatMessageUserComponent` → <luzmo-ai-chat-message-user>
-- `AiChatMessagesContainerComponent` → <luzmo-ai-chat-messages-container>
 - `AiInteractionTextareaComponent` → <luzmo-ai-interaction-textarea>
-- `DataItemsSelectComponent` → <luzmo-data-items-select>
 - `DatasetIconComponent` → <luzmo-dataset-icon>
 - `DatasetSelectorListComponent` → <luzmo-dataset-selector-list>
 - `DatasetSelectorRowComponent` → <luzmo-dataset-selector-row>
-- `DisplaySettingsComponent` → <luzmo-display-settings>
-- `DisplaySettingsBinningComponent` → <luzmo-display-settings-binning>
-- `DisplaySettingsDatetimeComponent` → <luzmo-display-settings-datetime>
-- `DisplaySettingsGrandTotalsComponent` → <luzmo-display-settings-grand-totals>
-- `DisplaySettingsNumericComponent` → <luzmo-display-settings-numeric>
-- `DisplaySettingsPeriodOverPeriodComponent` → <luzmo-display-settings-period-over-period>
-- `DraggableDataItemComponent` → <luzmo-draggable-data-item>
-- `DraggableDataItemLevelComponent` → <luzmo-draggable-data-item-level>
-- `DroppableSlotComponent` → <luzmo-droppable-slot>
-- `EditFiltersComponent` → <luzmo-edit-filters>
-- `EditItemComponent` → <luzmo-edit-item>
-- `EditOptionComponent` → <luzmo-edit-option>
-- `EditOptionColorPickerComponent` → <luzmo-edit-option-color-picker>
-- `EditOptionColorRangeComponent` → <luzmo-edit-option-color-range>
-- `FilterExpressionPickerComponent` → <luzmo-filter-expression-picker>
-- `FilterItemComponent` → <luzmo-filter-item>
-- `FilterParameterPickerComponent` → <luzmo-filter-parameter-picker>
-- `FilterValuePickerComponent` → <luzmo-filter-value-picker>
-- `FilterValuePickerDatetimeComponent` → <luzmo-filter-value-picker-datetime>
-- `FilterValuePickerHierarchyComponent` → <luzmo-filter-value-picker-hierarchy>
-- `FilterValuePickerNumericComponent` → <luzmo-filter-value-picker-numeric>
-- `GridComponent` → <luzmo-grid>
-- `GridItemActionsMenuComponent` → <luzmo-grid-item-actions-menu>
-- `ItemDataDropPanelComponent` → <luzmo-item-data-drop-panel>
-- `ItemDataPickerPanelComponent` → <luzmo-item-data-picker-panel>
-- `SlotContentsPickerComponent` → <luzmo-slot-contents-picker>
-- `SlotMenuComponent` → <luzmo-slot-menu>
-- `SlotMenuListComponent` → <luzmo-slot-menu-list>
 - `VizItemMenuComponent` → <luzmo-viz-item-menu>

package/angular/components/draggable-data-field/types.ts

@@ -0,0 +1,37 @@
+import { Column, Currency, Formula, HierarchyLevel } from '@luzmo/dashboard-contents-types';
+
+export type ColumnFieldData = {
+  type: Column['type'];
+  name: Column['name'];
+  datasetId: string;
+  formulaId?: never;
+  columnId: Column['id'];
+  level?: number;
+  hierarchyLevels?: Pick<HierarchyLevel, 'id' | 'level' | 'name'>[];
+  currency?: Pick<Currency, 'id' | 'name' | 'symbol'>;
+} & Partial<
+  Pick<
+    Column,
+    | 'description'
+    | 'subtype'
+    | 'format'
+    | 'lowestLevel'
+    | 'highestLevel'
+    | 'hierarchy_enabled'
+    | 'duration_levels'
+    | 'duration_format'
+    | 'expression'
+  >
+>;
+
+export type FormulaFieldData = {
+  type: Formula['type'];
+  name: Formula['name'];
+  datasetId: string;
+  formulaId: Formula['id'];
+  columnId?: never;
+  level?: number;
+  currency?: Pick<Currency, 'id' | 'name' | 'symbol'>;
+} & Partial<Pick<Formula, 'description' | 'subtype' | 'format' | 'lowestLevel' | 'duration_levels' | 'duration_format' | 'expression'>>;
+
+export type DraggableDataFieldData = ColumnFieldData | FormulaFieldData;