@santi020k/lumen-elements 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +43 -1
  2. package/dist/define.d.ts +6 -1
  3. package/dist/define.d.ts.map +1 -1
  4. package/dist/define.js +471 -21
  5. package/package.json +3 -3
package/README.md CHANGED
@@ -16,6 +16,10 @@ Load the shared stylesheet once from your app entry or global CSS.
16
16
  @import "@santi020k/lumen-elements/styles.css";
17
17
  ```
18
18
 
19
+ The stylesheet defaults `--ui-font` to `"Montserrat", "Avenir Next", "Segoe UI", sans-serif`.
20
+ It declares the family stack but does not bundle or load font files. Load Montserrat once through
21
+ your preferred delivery path, or override `--ui-font` in application CSS.
22
+
19
23
  ## Usage
20
24
 
21
25
  Register the elements once, then use `lumen-*` tags anywhere HTML is valid.
@@ -44,6 +48,44 @@ Use `lumen-icon` for Lucide icons by name across framework adapters.
44
48
  <lumen-icon name="search" label="Search"></lumen-icon>
45
49
  ```
46
50
 
51
+ Use `lumen-scroll-progress` on long reading surfaces. Registration supplies its scroll behavior,
52
+ accessible value, and top or bottom positioning.
53
+
54
+ ```html
55
+ <lumen-scroll-progress
56
+ aria-label="Article reading progress"
57
+ position="top"
58
+ ></lumen-scroll-progress>
59
+ ```
60
+
61
+ ## Statistics
62
+
63
+ Use `variant="default"` for the original neutral surface, `variant="accent"` for a featured metric,
64
+ or `variant="glass"` for selective translucency.
65
+
66
+ ```html
67
+ <lumen-stat label="Active workspaces" value="1,234" variant="accent">
68
+ <p>Across all production organizations.</p>
69
+ </lumen-stat>
70
+ ```
71
+
72
+ ## Data visualization
73
+
74
+ Set serializable `series` data through the JavaScript property for application data. The JSON
75
+ attribute form is useful for static HTML and server output.
76
+
77
+ ```html
78
+ <lumen-line-chart
79
+ aria-label="Views by day"
80
+ heading="Website traffic"
81
+ series='[{"id":"views","label":"Views","data":[{"x":"Mon","y":42},{"x":"Tue","y":68}]}]'
82
+ ></lumen-line-chart>
83
+ ```
84
+
85
+ `lumen-sparkline` also accepts comma-separated or JSON `values`. Bar, line, and pie charts include
86
+ a revealable semantic table unless `show-table="false"` is set. `lumen-pie-chart` uses the first
87
+ serialized series and defaults to `variant="donut"`.
88
+
47
89
  ## Optimized images
48
90
 
49
91
  Image optimization belongs to the host framework or CDN. Keep its generated `picture`, `srcset`,
@@ -90,7 +132,7 @@ Astro runtime's data event, validation, calendar grids, OTP segmentation, date r
90
132
  text command, context menu, schedule drag/drop, resizable pane sizing, theme export, ARIA,
91
133
  keyboard, Escape, dismissal, and toast controller semantics while keeping markup declarative and
92
134
  Declarative-Shadow-DOM friendly.
93
- FileUpload, Tour, Anchor, Transfer, Mentions, Cascader, and TreeSelect also run directly through
135
+ FileUpload, Tour, Anchor, ScrollProgress, Transfer, Mentions, Cascader, and TreeSelect also run directly through
94
136
  their registered custom elements; no Astro runtime or host controller is required.
95
137
  Rich text controls may provide `data-ui-editor-value` for commands such as `formatBlock` and
96
138
  `createLink`; editable surfaces emit `ui:editor-change` with both HTML and plain text, support common
package/dist/define.d.ts CHANGED
@@ -52,7 +52,7 @@ export declare class LumenElement extends HTMLElement {
52
52
  export declare const enhanceLumenElements: (scope?: ParentNode) => void;
53
53
  export declare const defineLumenElements: (customElementsRegistry?: CustomElementRegistry | undefined) => void;
54
54
  export declare const installLumenControllers: () => void;
55
- export declare const lumenElementDefinitions: (readonly ["lumen-accordion" | "lumen-alert" | "lumen-alert-dialog" | "lumen-agenda" | "lumen-aspect-ratio" | "lumen-attachment" | "lumen-autocomplete" | "lumen-avatar" | "lumen-back-to-top" | "lumen-badge" | "lumen-breadcrumb" | "lumen-bubble" | "lumen-button" | "lumen-button-group" | "lumen-calendar" | "lumen-callout" | "lumen-card" | "lumen-carousel" | "lumen-chart" | "lumen-checkbox" | "lumen-collapsible" | "lumen-code" | "lumen-code-tabs" | "lumen-combobox" | "lumen-command" | "lumen-color-picker" | "lumen-context-menu" | "lumen-data-table" | "lumen-date-picker" | "lumen-date-range-picker" | "lumen-dialog" | "lumen-direction" | "lumen-drawer" | "lumen-dropdown-menu" | "lumen-empty" | "lumen-eyebrow" | "lumen-field" | "lumen-floating-badge" | "lumen-formatted-date" | "lumen-hover-card" | "lumen-icon" | "lumen-image" | "lumen-input" | "lumen-input-group" | "lumen-input-otp" | "lumen-number-field" | "lumen-item" | "lumen-kbd" | "lumen-label" | "lumen-link" | "lumen-marker" | "lumen-menubar" | "lumen-message" | "lumen-message-scroller" | "lumen-native-select" | "lumen-navigation-menu" | "lumen-pagination" | "lumen-phone-input" | "lumen-pill" | "lumen-popover" | "lumen-progress" | "lumen-prose" | "lumen-radio-group" | "lumen-resizable" | "lumen-rich-text-editor" | "lumen-scroll-area" | "lumen-schedule" | "lumen-search-field" | "lumen-select" | "lumen-separator" | "lumen-sheet" | "lumen-sidebar" | "lumen-skeleton" | "lumen-skip-link" | "lumen-slider" | "lumen-sonner" | "lumen-spinner" | "lumen-switch" | "lumen-table" | "lumen-tabs" | "lumen-tag-group" | "lumen-textarea" | "lumen-theme-builder" | "lumen-theme-toggle" | "lumen-time-field" | "lumen-toast" | "lumen-toggle" | "lumen-toggle-group" | "lumen-tooltip" | "lumen-tree" | "lumen-tree-grid" | "lumen-typography" | "lumen-virtual-list" | "lumen-language-toggle" | "lumen-particles" | "lumen-animated-number" | "lumen-reveal-group" | "lumen-scroll-reveal" | "lumen-stat" | "lumen-meter" | "lumen-note" | "lumen-rating" | "lumen-timeline" | "lumen-animated-logo" | "lumen-animated-portrait" | "lumen-button-link" | "lumen-cover-image" | "lumen-gradient-divider" | "lumen-stepper" | "lumen-file-upload" | "lumen-tour" | "lumen-anchor" | "lumen-segmented" | "lumen-toolbar" | "lumen-descriptions" | "lumen-popconfirm" | "lumen-transfer" | "lumen-cascader" | "lumen-tree-select" | "lumen-mentions" | "lumen-qr-code" | "lumen-watermark" | "lumen-affix" | "lumen-speed-dial", typeof LumenElement])[];
55
+ export declare const lumenElementDefinitions: (readonly ["lumen-accordion" | "lumen-alert" | "lumen-alert-dialog" | "lumen-agenda" | "lumen-aspect-ratio" | "lumen-attachment" | "lumen-autocomplete" | "lumen-avatar" | "lumen-back-to-top" | "lumen-badge" | "lumen-bar-chart" | "lumen-breadcrumb" | "lumen-bubble" | "lumen-button" | "lumen-button-group" | "lumen-calendar" | "lumen-callout" | "lumen-card" | "lumen-carousel" | "lumen-chart" | "lumen-checkbox" | "lumen-collapsible" | "lumen-code" | "lumen-code-tabs" | "lumen-combobox" | "lumen-command" | "lumen-color-picker" | "lumen-context-menu" | "lumen-data-table" | "lumen-date-picker" | "lumen-date-range-picker" | "lumen-dialog" | "lumen-direction" | "lumen-drawer" | "lumen-dropdown-menu" | "lumen-empty" | "lumen-eyebrow" | "lumen-field" | "lumen-floating-badge" | "lumen-formatted-date" | "lumen-hover-card" | "lumen-icon" | "lumen-image" | "lumen-input" | "lumen-input-group" | "lumen-input-otp" | "lumen-number-field" | "lumen-item" | "lumen-kbd" | "lumen-label" | "lumen-link" | "lumen-line-chart" | "lumen-marker" | "lumen-menubar" | "lumen-pie-chart" | "lumen-message" | "lumen-message-scroller" | "lumen-native-select" | "lumen-navigation-menu" | "lumen-pagination" | "lumen-phone-input" | "lumen-pill" | "lumen-popover" | "lumen-progress" | "lumen-prose" | "lumen-radio-group" | "lumen-resizable" | "lumen-rich-text-editor" | "lumen-scroll-area" | "lumen-scroll-progress" | "lumen-schedule" | "lumen-search-field" | "lumen-select" | "lumen-separator" | "lumen-sheet" | "lumen-sidebar" | "lumen-skeleton" | "lumen-skip-link" | "lumen-slider" | "lumen-sonner" | "lumen-sparkline" | "lumen-spinner" | "lumen-switch" | "lumen-table" | "lumen-tabs" | "lumen-tag-group" | "lumen-textarea" | "lumen-theme-builder" | "lumen-theme-toggle" | "lumen-time-field" | "lumen-toast" | "lumen-toggle" | "lumen-toggle-group" | "lumen-tooltip" | "lumen-tree" | "lumen-tree-grid" | "lumen-typography" | "lumen-virtual-list" | "lumen-language-toggle" | "lumen-particles" | "lumen-animated-number" | "lumen-reveal-group" | "lumen-scroll-reveal" | "lumen-stat" | "lumen-meter" | "lumen-note" | "lumen-rating" | "lumen-timeline" | "lumen-animated-logo" | "lumen-animated-portrait" | "lumen-button-link" | "lumen-cover-image" | "lumen-gradient-divider" | "lumen-stepper" | "lumen-file-upload" | "lumen-tour" | "lumen-anchor" | "lumen-segmented" | "lumen-toolbar" | "lumen-descriptions" | "lumen-popconfirm" | "lumen-transfer" | "lumen-cascader" | "lumen-tree-select" | "lumen-mentions" | "lumen-qr-code" | "lumen-watermark" | "lumen-affix" | "lumen-speed-dial", typeof LumenElement])[];
56
56
  export declare const LumenAccordionElement: typeof LumenElement;
57
57
  export declare const LumenAlertElement: typeof LumenElement;
58
58
  export declare const LumenAlertDialogElement: typeof LumenElement;
@@ -62,6 +62,7 @@ export declare const LumenAttachmentElement: typeof LumenElement;
62
62
  export declare const LumenAutocompleteElement: typeof LumenElement;
63
63
  export declare const LumenAvatarElement: typeof LumenElement;
64
64
  export declare const LumenBadgeElement: typeof LumenElement;
65
+ export declare const LumenBarChartElement: typeof LumenElement;
65
66
  export declare const LumenBreadcrumbElement: typeof LumenElement;
66
67
  export declare const LumenBubbleElement: typeof LumenElement;
67
68
  export declare const LumenButtonElement: typeof LumenElement;
@@ -96,6 +97,7 @@ export declare const LumenNumberFieldElement: typeof LumenElement;
96
97
  export declare const LumenItemElement: typeof LumenElement;
97
98
  export declare const LumenKbdElement: typeof LumenElement;
98
99
  export declare const LumenLabelElement: typeof LumenElement;
100
+ export declare const LumenLineChartElement: typeof LumenElement;
99
101
  export declare const LumenMarkerElement: typeof LumenElement;
100
102
  export declare const LumenMenubarElement: typeof LumenElement;
101
103
  export declare const LumenMessageElement: typeof LumenElement;
@@ -104,12 +106,14 @@ export declare const LumenNativeSelectElement: typeof LumenElement;
104
106
  export declare const LumenNavigationMenuElement: typeof LumenElement;
105
107
  export declare const LumenPaginationElement: typeof LumenElement;
106
108
  export declare const LumenPhoneInputElement: typeof LumenElement;
109
+ export declare const LumenPieChartElement: typeof LumenElement;
107
110
  export declare const LumenPopoverElement: typeof LumenElement;
108
111
  export declare const LumenProgressElement: typeof LumenElement;
109
112
  export declare const LumenRadioGroupElement: typeof LumenElement;
110
113
  export declare const LumenResizableElement: typeof LumenElement;
111
114
  export declare const LumenRichTextEditorElement: typeof LumenElement;
112
115
  export declare const LumenScrollAreaElement: typeof LumenElement;
116
+ export declare const LumenScrollProgressElement: typeof LumenElement;
113
117
  export declare const LumenScheduleElement: typeof LumenElement;
114
118
  export declare const LumenSearchFieldElement: typeof LumenElement;
115
119
  export declare const LumenSelectElement: typeof LumenElement;
@@ -119,6 +123,7 @@ export declare const LumenSidebarElement: typeof LumenElement;
119
123
  export declare const LumenSkeletonElement: typeof LumenElement;
120
124
  export declare const LumenSliderElement: typeof LumenElement;
121
125
  export declare const LumenSonnerElement: typeof LumenElement;
126
+ export declare const LumenSparklineElement: typeof LumenElement;
122
127
  export declare const LumenSpinnerElement: typeof LumenElement;
123
128
  export declare const LumenSwitchElement: typeof LumenElement;
124
129
  export declare const LumenTableElement: typeof LumenElement;
package/dist/define.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAwCA,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAE/D,KAAK,cAAc,GACf,eAAe,GACf,aAAa,GACb,cAAc,GACd,YAAY,GACZ,UAAU,GACV,WAAW,CAAA;AAEf,KAAK,YAAY,GAAG,MAAM,CAAA;AAY1B,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACzD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,MAAM,CAAA;IACvC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CAClD;AAED,UAAU,kBAAkB;IAC1B,gBAAgB,CAAC,EAAE,iBAAiB,CAAA;IACpC,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;AA45BD,eAAO,MAAM,iBAAiB,GAC5B,QAAO,UAAqB,KAC3B,IAIF,CAAA;AAyKD,eAAO,MAAM,2BAA2B,GACtC,QAAO,UAAqB,KAC3B,IAEF,CAAA;AA+FD,eAAO,MAAM,qBAAqB,GAChC,QAAO,UAAqB,KAC3B,IAEF,CAAA;AAiQD,eAAO,MAAM,qBAAqB,GAChC,QAAO,UAAqB,KAC3B,IAEF,CAAA;AAwMD,eAAO,MAAM,4BAA4B,GACvC,QAAO,UAAqB,KAC3B,IAEF,CAAA;AAwBD,eAAO,MAAM,uBAAuB,GAClC,QAAO,UAAqB,KAC3B,IAEF,CAAA;AA0TD,eAAO,MAAM,qBAAqB,GAChC,QAAO,UAAqB,KAC3B,IAEF,CAAA;AA8bD,eAAO,MAAM,qBAAqB,GAChC,QAAO,UAAqB,KAC3B,IAEF,CAAA;AAuID,eAAO,MAAM,wBAAwB,GACnC,QAAO,UAAqB,KAC3B,IAEF,CAAA;AAkVD,eAAO,MAAM,UAAU,EAAE,QA+ExB,CAAA;AAgCD,qBAAa,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAA;IAEjC,MAAM,KAAK,kBAAkB,aAE5B;IAED,iBAAiB;IAMjB,oBAAoB;IAIpB,wBAAwB;IAIxB,SAAS,KAAK,MAAM,uBAEnB;IAED,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,eAAe;CAyBxB;AAqoGD,eAAO,MAAM,oBAAoB,GAAI,QAAO,UAAqB,KAAG,IAUnE,CAAA;AAED,eAAO,MAAM,mBAAmB,GAC9B,yBAAwB,qBAAqB,GAAG,SAE9B,SA+BnB,CAAA;AAED,eAAO,MAAM,uBAAuB,QAAO,IAM1C,CAAA;AAED,eAAO,MAAM,uBAAuB,shFAAqB,CAAA;AAEzD,eAAO,MAAM,qBAAqB,qBAA2B,CAAA;AAC7D,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,wBAAwB,qBAA8B,CAAA;AACnE,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,gBAAgB,qBAAsB,CAAA;AACnD,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,gBAAgB,qBAAsB,CAAA;AACnD,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,mBAAmB,qBAAyB,CAAA;AACzD,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,qBAAqB,qBAA2B,CAAA;AAC7D,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,2BAA2B,qBAAiC,CAAA;AACzE,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,qBAAqB,qBAA2B,CAAA;AAC7D,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,wBAAwB,qBAA8B,CAAA;AACnE,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,qBAAqB,qBAA2B,CAAA;AAC7D,eAAO,MAAM,gBAAgB,qBAAsB,CAAA;AACnD,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,gBAAgB,qBAAsB,CAAA;AACnD,eAAO,MAAM,eAAe,qBAAqB,CAAA;AACjD,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,qBAAqB,qBAA2B,CAAA;AAC7D,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,mBAAmB,qBAAyB,CAAA;AACzD,eAAO,MAAM,mBAAmB,qBAAyB,CAAA;AACzD,eAAO,MAAM,2BAA2B,qBAAiC,CAAA;AACzE,eAAO,MAAM,wBAAwB,qBAA8B,CAAA;AACnE,eAAO,MAAM,0BAA0B,qBAAgC,CAAA;AACvE,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,mBAAmB,qBAAyB,CAAA;AACzD,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,qBAAqB,qBAA2B,CAAA;AAC7D,eAAO,MAAM,0BAA0B,qBAAgC,CAAA;AACvE,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,0BAA0B,qBAAgC,CAAA;AACvE,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,qBAAqB,qBAA2B,CAAA;AAC7D,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,mBAAmB,qBAAyB,CAAA;AACzD,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,qBAAqB,qBAA2B,CAAA;AAC7D,eAAO,MAAM,mBAAmB,qBAAyB,CAAA;AACzD,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,gBAAgB,qBAAsB,CAAA;AACnD,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,wBAAwB,qBAA8B,CAAA;AACnE,eAAO,MAAM,qBAAqB,qBAA2B,CAAA;AAC7D,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,mBAAmB,qBAAyB,CAAA;AACzD,eAAO,MAAM,gBAAgB,qBAAsB,CAAA;AACnD,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,0BAA0B,qBAAgC,CAAA;AACvE,eAAO,MAAM,qBAAqB,qBAA2B,CAAA;AAC7D,eAAO,MAAM,0BAA0B,qBAAgC,CAAA;AACvE,eAAO,MAAM,uBAAuB,qBAA6B,CAAA;AACjE,eAAO,MAAM,wBAAwB,qBAA8B,CAAA;AACnE,eAAO,MAAM,gBAAgB,qBAAsB,CAAA;AACnD,eAAO,MAAM,iBAAiB,qBAAuB,CAAA;AACrD,eAAO,MAAM,gBAAgB,qBAAsB,CAAA;AACnD,eAAO,MAAM,kBAAkB,qBAAwB,CAAA;AACvD,eAAO,MAAM,oBAAoB,qBAA0B,CAAA;AAC3D,eAAO,MAAM,wBAAwB,qBAA8B,CAAA;AACnE,eAAO,MAAM,4BAA4B,qBAAkC,CAAA;AAC3E,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,sBAAsB,qBAA4B,CAAA;AAC/D,eAAO,MAAM,2BAA2B,qBAAiC,CAAA"}
package/dist/define.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /* eslint-disable complexity, @typescript-eslint/no-non-null-assertion */
2
- import { coerceThemeBuilderExportFormat, coerceThemeBuilderMode, coerceThemeBuilderScheme, composeClassName, createThemeBuilderTokens, exportThemeBuilderValue, getLumenRichTextShortcut, getVirtualRange, isLumenRichTextToggleCommand, lumenComponentNames, normalizeThemeBuilderHex, parseThemeCss, renderLumenIconSvg, scoreThemeContrast, tuneThemeContrast } from '@santi020k/lumen-core';
2
+ import { alignLumenChartSeries, coerceThemeBuilderExportFormat, coerceThemeBuilderMode, coerceThemeBuilderScheme, composeClassName, createLumenBarGeometry, createLumenLineGeometry, createLumenPieGeometry, createThemeBuilderTokens, exportThemeBuilderValue, getLumenChartCategories, getLumenChartDomain, getLumenChartTicks, getLumenRichTextShortcut, getVirtualRange, hasLumenChartData, hasLumenPieData, isLumenRichTextToggleCommand, lumenChartTones, lumenComponentNames, normalizeThemeBuilderHex, parseThemeCss, renderLumenIconSvg, resolveLumenChartTone, scaleLumenChartValue, scoreThemeContrast, tuneThemeContrast } from '@santi020k/lumen-core';
3
3
  const registry = new Set();
4
4
  const appliedClassNames = new WeakMap();
5
5
  const focusableSelector = [
@@ -134,6 +134,13 @@ const elementConfigs = {
134
134
  defaults: { variant: 'default' },
135
135
  tagName: 'lumen-badge'
136
136
  },
137
+ BarChart: {
138
+ attributeClasses: glassAttributeClasses('ui-chart--glass'),
139
+ baseClassName: 'ui-chart ui-bar-chart',
140
+ defaults: { layout: 'grouped', orientation: 'vertical' },
141
+ role: 'figure',
142
+ tagName: 'lumen-bar-chart'
143
+ },
137
144
  Breadcrumb: { baseClassName: 'ui-breadcrumb', defaults: { 'aria-label': 'Breadcrumb' }, tagName: 'lumen-breadcrumb' },
138
145
  Bubble: {
139
146
  attributeClasses: { from: { user: 'ui-bubble--user' }, ...glassAttributeClasses('ui-bubble--glass') },
@@ -299,6 +306,12 @@ const elementConfigs = {
299
306
  Kbd: { baseClassName: 'ui-kbd', tagName: 'lumen-kbd' },
300
307
  Label: { baseClassName: 'ui-label', tagName: 'lumen-label' },
301
308
  Link: { attributeClasses: { variant: { inherit: 'ui-link--inherit' } }, baseClassName: 'ui-link', tagName: 'lumen-link' },
309
+ LineChart: {
310
+ attributeClasses: glassAttributeClasses('ui-chart--glass'),
311
+ baseClassName: 'ui-chart ui-line-chart',
312
+ role: 'figure',
313
+ tagName: 'lumen-line-chart'
314
+ },
302
315
  Marker: {
303
316
  attributeClasses: {
304
317
  variant: {
@@ -320,6 +333,19 @@ const elementConfigs = {
320
333
  defaults: { 'data-ui-menubar': '', surface: 'default' },
321
334
  tagName: 'lumen-menubar'
322
335
  },
336
+ PieChart: {
337
+ attributeClasses: {
338
+ ...glassAttributeClasses('ui-chart--glass'),
339
+ variant: {
340
+ donut: 'ui-pie-chart--donut',
341
+ pie: 'ui-pie-chart--pie'
342
+ }
343
+ },
344
+ baseClassName: 'ui-chart ui-pie-chart',
345
+ defaults: { variant: 'donut' },
346
+ role: 'figure',
347
+ tagName: 'lumen-pie-chart'
348
+ },
323
349
  Message: {
324
350
  attributeClasses: {
325
351
  from: {
@@ -345,7 +371,17 @@ const elementConfigs = {
345
371
  },
346
372
  Pagination: { baseClassName: 'ui-pagination', defaults: { 'aria-label': 'Pagination' }, tagName: 'lumen-pagination' },
347
373
  PhoneInput: { baseClassName: 'ui-phone-input ui-input-group', tagName: 'lumen-phone-input' },
348
- Pill: { baseClassName: 'ui-pill', tagName: 'lumen-pill' },
374
+ Pill: {
375
+ attributeClasses: {
376
+ variant: {
377
+ brand: 'ui-pill--brand',
378
+ outline: 'ui-pill--outline'
379
+ }
380
+ },
381
+ baseClassName: 'ui-pill',
382
+ defaults: { variant: 'neutral' },
383
+ tagName: 'lumen-pill'
384
+ },
349
385
  Popover: {
350
386
  attributeClasses: {
351
387
  glass: { strong: 'ui-popover--glass ui-glass-strong', subtle: 'ui-popover--glass ui-glass-subtle', true: 'ui-popover--glass' },
@@ -366,6 +402,22 @@ const elementConfigs = {
366
402
  },
367
403
  RichTextEditor: { attributeClasses: glassAttributeClasses('ui-rich-text-editor--glass'), baseClassName: 'ui-rich-text-editor', defaults: { 'data-ui-rich-text-editor': '' }, tagName: 'lumen-rich-text-editor' },
368
404
  ScrollArea: { attributeClasses: glassAttributeClasses('ui-scroll-area--glass'), baseClassName: 'ui-scroll-area', tagName: 'lumen-scroll-area' },
405
+ ScrollProgress: {
406
+ attributeClasses: {
407
+ position: { bottom: 'ui-scroll-progress--bottom' }
408
+ },
409
+ baseClassName: 'ui-scroll-progress',
410
+ defaults: {
411
+ 'aria-label': 'Reading progress',
412
+ 'aria-valuemax': '100',
413
+ 'aria-valuemin': '0',
414
+ 'aria-valuenow': '0',
415
+ 'data-ui-scroll-progress': '',
416
+ position: 'top',
417
+ role: 'progressbar'
418
+ },
419
+ tagName: 'lumen-scroll-progress'
420
+ },
369
421
  Schedule: { attributeClasses: glassAttributeClasses('ui-schedule--glass'), baseClassName: 'ui-schedule', defaults: { 'data-ui-schedule': '' }, tagName: 'lumen-schedule' },
370
422
  SearchField: { baseClassName: 'ui-input ui-search-field', defaults: { type: 'search' }, tagName: 'lumen-search-field' },
371
423
  Select: {
@@ -410,6 +462,7 @@ const elementConfigs = {
410
462
  SkipLink: { baseClassName: 'ui-skip-link', tagName: 'lumen-skip-link' },
411
463
  Slider: { baseClassName: 'ui-slider', defaults: { type: 'range' }, tagName: 'lumen-slider' },
412
464
  Sonner: { baseClassName: 'ui-sonner', defaults: { 'data-ui-sonner': '' }, tagName: 'lumen-sonner' },
465
+ Sparkline: { baseClassName: 'ui-sparkline', tagName: 'lumen-sparkline' },
413
466
  Spinner: { baseClassName: 'ui-spinner', tagName: 'lumen-spinner' },
414
467
  Switch: { baseClassName: 'ui-switch', defaults: { role: 'switch', type: 'checkbox' }, tagName: 'lumen-switch' },
415
468
  Table: { attributeClasses: glassAttributeClasses('ui-table-wrap--glass'), baseClassName: 'ui-table-wrap', tagName: 'lumen-table' },
@@ -497,7 +550,17 @@ const elementConfigs = {
497
550
  defaults: { animation: 'fade', duration: 'slow', once: 'true', threshold: '0.15' },
498
551
  tagName: 'lumen-scroll-reveal'
499
552
  },
500
- Stat: { baseClassName: 'ui-stat', tagName: 'lumen-stat' },
553
+ Stat: {
554
+ attributeClasses: {
555
+ variant: {
556
+ accent: 'ui-stat--accent',
557
+ glass: 'ui-stat--glass'
558
+ }
559
+ },
560
+ baseClassName: 'ui-stat',
561
+ defaults: { variant: 'default' },
562
+ tagName: 'lumen-stat'
563
+ },
501
564
  Meter: { baseClassName: 'ui-meter', tagName: 'lumen-meter' },
502
565
  Note: {
503
566
  attributeClasses: {
@@ -580,7 +643,11 @@ const elementConfigs = {
580
643
  };
581
644
  const observedAttributeNames = [
582
645
  'animation',
646
+ 'area',
583
647
  'border-position',
648
+ 'caption',
649
+ 'center-label',
650
+ 'center-value',
584
651
  'decimals',
585
652
  'delay',
586
653
  'decorative',
@@ -589,21 +656,31 @@ const observedAttributeNames = [
589
656
  'duration',
590
657
  'from',
591
658
  'glass',
659
+ 'heading',
592
660
  'hover',
593
661
  'label',
594
662
  'locale',
663
+ 'layout',
664
+ 'markers',
595
665
  'name',
596
666
  'orientation',
597
667
  'position',
598
668
  'prefix',
599
669
  'pressed',
670
+ 'reference-value',
671
+ 'series',
600
672
  'shape',
673
+ 'show-endpoint',
674
+ 'show-legend',
675
+ 'show-table',
601
676
  'size',
602
677
  'surface',
603
678
  'stagger',
604
679
  'suffix',
605
680
  'threshold',
681
+ 'tone',
606
682
  'value',
683
+ 'values',
607
684
  'variant'
608
685
  ];
609
686
  const hasDocument = () => typeof document !== 'undefined';
@@ -2345,6 +2422,315 @@ export class LumenElement extends HTMLElement {
2345
2422
  appliedClassNames.set(this, classNames);
2346
2423
  }
2347
2424
  }
2425
+ const escapeChartHtml = (value) => String(value)
2426
+ .replaceAll('&', '&amp;')
2427
+ .replaceAll('<', '&lt;')
2428
+ .replaceAll('>', '&gt;')
2429
+ .replaceAll('"', '&quot;')
2430
+ .replaceAll("'", '&#39;');
2431
+ const chartBooleanAttribute = (element, name, defaultValue) => {
2432
+ if (!element.hasAttribute(name))
2433
+ return defaultValue;
2434
+ return element.getAttribute(name) !== 'false';
2435
+ };
2436
+ const parseChartSeries = (value) => {
2437
+ if (!value)
2438
+ return [];
2439
+ try {
2440
+ const parsed = JSON.parse(value);
2441
+ if (!Array.isArray(parsed))
2442
+ return [];
2443
+ return parsed.flatMap((candidate, seriesIndex) => {
2444
+ if (typeof candidate !== 'object' ||
2445
+ candidate === null)
2446
+ return [];
2447
+ const record = candidate;
2448
+ if (!Array.isArray(record.data))
2449
+ return [];
2450
+ const candidateData = record.data;
2451
+ const data = candidateData.flatMap(datum => {
2452
+ if (typeof datum !== 'object' ||
2453
+ datum === null ||
2454
+ !('x' in datum) ||
2455
+ !('y' in datum))
2456
+ return [];
2457
+ const point = datum;
2458
+ if ((typeof point.x !== 'string' && typeof point.x !== 'number') ||
2459
+ (point.y !== null && (typeof point.y !== 'number' || !Number.isFinite(point.y))))
2460
+ return [];
2461
+ return [{
2462
+ ...(typeof point.label === 'string' ? { label: point.label } : {}),
2463
+ ...(typeof point.tone === 'string' &&
2464
+ lumenChartTones.includes(point.tone)
2465
+ ? { tone: point.tone }
2466
+ : {}),
2467
+ x: point.x,
2468
+ y: point.y
2469
+ }];
2470
+ });
2471
+ const tone = typeof record.tone === 'string' &&
2472
+ lumenChartTones.includes(record.tone)
2473
+ ? record.tone
2474
+ : undefined;
2475
+ return [{
2476
+ data,
2477
+ id: typeof record.id === 'string' ? record.id : `series-${seriesIndex + 1}`,
2478
+ label: typeof record.label === 'string' ? record.label : `Series ${seriesIndex + 1}`,
2479
+ ...(tone ? { tone } : {})
2480
+ }];
2481
+ });
2482
+ }
2483
+ catch {
2484
+ return [];
2485
+ }
2486
+ };
2487
+ const chartHeaderHtml = (element) => {
2488
+ const heading = element.getAttribute('heading');
2489
+ const description = element.getAttribute('description');
2490
+ const value = element.getAttribute('value');
2491
+ if (!heading && !description && !value)
2492
+ return '';
2493
+ return `<header><div class="ui-chart__heading">${heading ? `<h3>${escapeChartHtml(heading)}</h3>` : ''}${description ? `<p>${escapeChartHtml(description)}</p>` : ''}</div>${value ? `<strong data-ui-chart-value>${escapeChartHtml(value)}</strong>` : ''}</header>`;
2494
+ };
2495
+ const chartCaptionHtml = (element) => {
2496
+ const caption = element.getAttribute('caption');
2497
+ return caption ? `<figcaption>${escapeChartHtml(caption)}</figcaption>` : '';
2498
+ };
2499
+ const chartLegendHtml = (series) => `<ul class="ui-chart__legend" aria-label="Chart legend">${series.map((item, index) => `<li class="ui-chart-tone--${resolveLumenChartTone(item.tone, index)}"><span aria-hidden="true"></span>${escapeChartHtml(item.label)}</li>`).join('')}</ul>`;
2500
+ const chartDataTableHtml = (categories, series) => {
2501
+ const headers = series
2502
+ .map(item => `<th scope="col">${escapeChartHtml(item.label)}</th>`)
2503
+ .join('');
2504
+ const rows = categories.map(category => {
2505
+ const cells = series.map(item => {
2506
+ const datum = item.data.find(candidate => candidate.x === category);
2507
+ const value = datum?.label ??
2508
+ (datum?.y === null || datum === undefined ? 'Not available' : String(datum.y));
2509
+ return `<td>${escapeChartHtml(value)}</td>`;
2510
+ }).join('');
2511
+ return `<tr><th scope="row">${escapeChartHtml(category)}</th>${cells}</tr>`;
2512
+ }).join('');
2513
+ return `<details class="ui-chart__data"><summary>View chart data</summary><div><table><thead><tr><th scope="col">Category</th>${headers}</tr></thead><tbody>${rows}</tbody></table></div></details>`;
2514
+ };
2515
+ const chartPercentage = (percentage) => new Intl.NumberFormat(undefined, {
2516
+ maximumFractionDigits: percentage < 0.01 ? 1 : 0,
2517
+ style: 'percent'
2518
+ }).format(percentage);
2519
+ class LumenDataChartBehaviorElement extends LumenElement {
2520
+ #series;
2521
+ get series() {
2522
+ return this.#series ?? parseChartSeries(this.getAttribute('series'));
2523
+ }
2524
+ set series(value) {
2525
+ this.#series = value;
2526
+ this.renderChart();
2527
+ }
2528
+ connectedCallback() {
2529
+ super.connectedCallback();
2530
+ this.renderChart();
2531
+ }
2532
+ attributeChangedCallback() {
2533
+ super.attributeChangedCallback();
2534
+ if (this.isConnected)
2535
+ this.renderChart();
2536
+ }
2537
+ }
2538
+ class LumenSparklineBehaviorElement extends LumenElement {
2539
+ #toneClass;
2540
+ #values;
2541
+ get values() {
2542
+ if (this.#values)
2543
+ return this.#values;
2544
+ const source = this.getAttribute('values');
2545
+ if (!source)
2546
+ return [];
2547
+ try {
2548
+ const parsed = JSON.parse(source);
2549
+ if (Array.isArray(parsed))
2550
+ return parsed.filter((value) => typeof value === 'number' && Number.isFinite(value));
2551
+ }
2552
+ catch {
2553
+ return source
2554
+ .split(',')
2555
+ .map(value => Number(value.trim()))
2556
+ .filter(Number.isFinite);
2557
+ }
2558
+ return [];
2559
+ }
2560
+ set values(value) {
2561
+ this.#values = value;
2562
+ this.renderSparkline();
2563
+ }
2564
+ connectedCallback() {
2565
+ super.connectedCallback();
2566
+ this.renderSparkline();
2567
+ }
2568
+ attributeChangedCallback() {
2569
+ super.attributeChangedCallback();
2570
+ if (this.isConnected)
2571
+ this.renderSparkline();
2572
+ }
2573
+ renderSparkline() {
2574
+ const values = this.values;
2575
+ if (values.length === 0) {
2576
+ const label = this.getAttribute('label') ?? 'No trend data available.';
2577
+ this.setAttribute('aria-label', label);
2578
+ this.setAttribute('role', 'img');
2579
+ this.innerHTML = `<span class="ui-sr-only">${escapeChartHtml(label)}</span>`;
2580
+ return;
2581
+ }
2582
+ const label = this.getAttribute('label') ?? 'Trend';
2583
+ const toneAttribute = this.getAttribute('tone');
2584
+ const tone = resolveLumenChartTone(toneAttribute && lumenChartTones.includes(toneAttribute)
2585
+ ? toneAttribute
2586
+ : undefined);
2587
+ const geometry = createLumenLineGeometry(values.map((value, index) => ({ x: index, y: value })), { height: 40, padding: 3, width: 120 });
2588
+ const area = chartBooleanAttribute(this, 'area', false);
2589
+ const showEndpoint = chartBooleanAttribute(this, 'show-endpoint', true);
2590
+ const endpoint = geometry.points.at(-1);
2591
+ if (this.#toneClass)
2592
+ this.classList.remove(this.#toneClass);
2593
+ this.#toneClass = `ui-chart-tone--${tone}`;
2594
+ this.classList.add(this.#toneClass);
2595
+ this.setAttribute('aria-label', label);
2596
+ this.setAttribute('role', 'img');
2597
+ this.innerHTML = `<svg aria-hidden="true" preserveAspectRatio="none" viewBox="0 0 120 40">${area ? geometry.areaPaths.map(path => `<path class="ui-sparkline__area" d="${path}"></path>`).join('') : ''}<path class="ui-sparkline__line" d="${geometry.path}"></path>${showEndpoint && endpoint ? `<circle class="ui-sparkline__endpoint" cx="${endpoint.xCoordinate}" cy="${endpoint.yCoordinate}" r="2.5"></circle>` : ''}</svg><span class="ui-sr-only">${escapeChartHtml(label)}</span>`;
2598
+ }
2599
+ }
2600
+ class LumenBarChartBehaviorElement extends LumenDataChartBehaviorElement {
2601
+ renderChart() {
2602
+ const series = this.series;
2603
+ if (!hasLumenChartData(series)) {
2604
+ this.innerHTML = `${chartHeaderHtml(this)}<p class="ui-chart__empty" role="status">No chart data available.</p>${chartCaptionHtml(this)}`;
2605
+ return;
2606
+ }
2607
+ const orientation = this.getAttribute('orientation') === 'horizontal'
2608
+ ? 'horizontal'
2609
+ : 'vertical';
2610
+ const layout = this.getAttribute('layout') === 'stacked' ? 'stacked' : 'grouped';
2611
+ const geometry = createLumenBarGeometry(series, { layout, orientation });
2612
+ const ticks = getLumenChartTicks(geometry.domain);
2613
+ const margin = orientation === 'horizontal'
2614
+ ? { bottom: 24, left: 112, right: 20, top: 16 }
2615
+ : { bottom: 52, left: 52, right: 16, top: 16 };
2616
+ const grid = ticks.map(tick => {
2617
+ const coordinate = orientation === 'horizontal'
2618
+ ? scaleLumenChartValue(tick, geometry.domain, margin.left, geometry.width - margin.right)
2619
+ : scaleLumenChartValue(tick, geometry.domain, geometry.height - margin.bottom, margin.top);
2620
+ return orientation === 'horizontal'
2621
+ ? `<line x1="${coordinate}" x2="${coordinate}" y1="${margin.top}" y2="${geometry.height - margin.bottom}"></line>`
2622
+ : `<line x1="${margin.left}" x2="${geometry.width - margin.right}" y1="${coordinate}" y2="${coordinate}"></line>`;
2623
+ }).join('');
2624
+ const labels = geometry.categories.map(category => `<text dominant-baseline="${orientation === 'horizontal' ? 'middle' : 'auto'}" text-anchor="${orientation === 'horizontal' ? 'end' : 'middle'}" x="${category.x}" y="${category.y}">${escapeChartHtml(category.label)}</text>`).join('');
2625
+ const marks = geometry.marks.map(mark => `<rect class="ui-chart-tone--${mark.tone}" height="${mark.height}" rx="4" width="${mark.width}" x="${mark.x}" y="${mark.y}"><title>${escapeChartHtml(`${String(mark.category)} · ${mark.seriesLabel}: ${mark.value}`)}</title></rect>`).join('');
2626
+ const showLegend = chartBooleanAttribute(this, 'show-legend', series.length > 1);
2627
+ const showTable = chartBooleanAttribute(this, 'show-table', true);
2628
+ const categories = geometry.categories.map(category => category.label);
2629
+ this.innerHTML = `${chartHeaderHtml(this)}${showLegend ? chartLegendHtml(series) : ''}<div class="ui-chart__plot"><svg aria-hidden="true" preserveAspectRatio="xMidYMid meet" viewBox="0 0 ${geometry.width} ${geometry.height}"><g class="ui-chart__grid">${grid}</g><g class="ui-chart__axis-labels">${labels}</g><g class="ui-bar-chart__marks">${marks}</g></svg></div>${showTable ? chartDataTableHtml(categories, series) : ''}${chartCaptionHtml(this)}`;
2630
+ }
2631
+ }
2632
+ class LumenLineChartBehaviorElement extends LumenDataChartBehaviorElement {
2633
+ renderChart() {
2634
+ const series = this.series;
2635
+ if (!hasLumenChartData(series)) {
2636
+ this.innerHTML = `${chartHeaderHtml(this)}<p class="ui-chart__empty" role="status">No chart data available.</p>${chartCaptionHtml(this)}`;
2637
+ return;
2638
+ }
2639
+ const width = 640;
2640
+ const height = 320;
2641
+ const padding = 44;
2642
+ const categories = getLumenChartCategories(series);
2643
+ const alignedSeries = series.map(item => alignLumenChartSeries(item, categories));
2644
+ const referenceAttribute = this.getAttribute('reference-value');
2645
+ const parsedReference = referenceAttribute === null ? undefined : Number(referenceAttribute);
2646
+ const referenceValue = parsedReference !== undefined && Number.isFinite(parsedReference)
2647
+ ? parsedReference
2648
+ : undefined;
2649
+ const domain = getLumenChartDomain([
2650
+ ...alignedSeries.flatMap(item => item.data.map(datum => datum.y)),
2651
+ referenceValue ?? null
2652
+ ], false);
2653
+ const geometries = alignedSeries.map(item => createLumenLineGeometry(item.data, {
2654
+ domain,
2655
+ height,
2656
+ includeZero: false,
2657
+ padding,
2658
+ width
2659
+ }));
2660
+ const ticks = getLumenChartTicks(domain);
2661
+ const labelStep = Math.max(1, Math.ceil(categories.length / 8));
2662
+ const grid = ticks.map(tick => {
2663
+ const y = scaleLumenChartValue(tick, domain, height - padding, padding);
2664
+ return `<line x1="${padding}" x2="${width - padding}" y1="${y}" y2="${y}"></line><text x="${padding - 8}" y="${y}">${Number(tick.toPrecision(4))}</text>`;
2665
+ }).join('');
2666
+ const labels = categories.map((category, index) => {
2667
+ if (index % labelStep !== 0 && index !== categories.length - 1)
2668
+ return '';
2669
+ const denominator = Math.max(1, categories.length - 1);
2670
+ const x = padding + (index / denominator) * (width - padding * 2);
2671
+ return `<text text-anchor="middle" x="${x}" y="${height - 14}">${escapeChartHtml(category)}</text>`;
2672
+ }).join('');
2673
+ const area = chartBooleanAttribute(this, 'area', false);
2674
+ const markers = chartBooleanAttribute(this, 'markers', true);
2675
+ const paths = geometries.map((geometry, index) => {
2676
+ const item = series[index];
2677
+ if (!item)
2678
+ return '';
2679
+ const tone = resolveLumenChartTone(item.tone, index);
2680
+ const areaPaths = area
2681
+ ? geometry.areaPaths.map(path => `<path class="ui-line-chart__area" d="${path}"></path>`).join('')
2682
+ : '';
2683
+ const points = markers
2684
+ ? geometry.points.map(point => `<circle class="ui-line-chart__point" cx="${point.xCoordinate}" cy="${point.yCoordinate}" r="3"><title>${escapeChartHtml(`${point.label ?? String(point.x)} · ${item.label}: ${String(point.y)}`)}</title></circle>`).join('')
2685
+ : '';
2686
+ return `<g class="ui-line-chart__series ui-chart-tone--${tone}">${areaPaths}<path class="ui-line-chart__line" d="${geometry.path}"></path>${points}</g>`;
2687
+ }).join('');
2688
+ const reference = referenceValue === undefined
2689
+ ? ''
2690
+ : `<line class="ui-chart__reference" x1="${padding}" x2="${width - padding}" y1="${scaleLumenChartValue(referenceValue, domain, height - padding, padding)}" y2="${scaleLumenChartValue(referenceValue, domain, height - padding, padding)}"></line>`;
2691
+ const showLegend = chartBooleanAttribute(this, 'show-legend', series.length > 1);
2692
+ const showTable = chartBooleanAttribute(this, 'show-table', true);
2693
+ this.innerHTML = `${chartHeaderHtml(this)}${showLegend ? chartLegendHtml(series) : ''}<div class="ui-chart__plot"><svg aria-hidden="true" preserveAspectRatio="xMidYMid meet" viewBox="0 0 ${width} ${height}"><g class="ui-chart__grid">${grid}</g><g class="ui-chart__axis-labels">${labels}</g>${reference}${paths}</svg></div>${showTable ? chartDataTableHtml(categories, series) : ''}${chartCaptionHtml(this)}`;
2694
+ }
2695
+ }
2696
+ class LumenPieChartBehaviorElement extends LumenDataChartBehaviorElement {
2697
+ #valueFormatter;
2698
+ get valueFormatter() {
2699
+ return this.#valueFormatter ?? String;
2700
+ }
2701
+ set valueFormatter(value) {
2702
+ this.#valueFormatter = value;
2703
+ this.renderChart();
2704
+ }
2705
+ renderChart() {
2706
+ const series = this.series[0];
2707
+ if (!series || !hasLumenPieData(series.data)) {
2708
+ this.innerHTML = `${chartHeaderHtml(this)}<p class="ui-chart__empty" role="status">No chart data available.</p>${chartCaptionHtml(this)}`;
2709
+ return;
2710
+ }
2711
+ const variant = this.getAttribute('variant') === 'pie' ? 'pie' : 'donut';
2712
+ const geometry = createLumenPieGeometry(series.data, { variant });
2713
+ const showLegend = chartBooleanAttribute(this, 'show-legend', true);
2714
+ const showTable = chartBooleanAttribute(this, 'show-table', true);
2715
+ const legend = showLegend
2716
+ ? `<ul class="ui-chart__legend" aria-label="Chart legend">${geometry.slices.map(slice => `<li class="ui-chart-tone--${slice.tone}"><span aria-hidden="true"></span>${escapeChartHtml(slice.label)}</li>`).join('')}</ul>`
2717
+ : '';
2718
+ const slices = geometry.slices.map(slice => `<path class="ui-chart-tone--${slice.tone}" d="${slice.path}" fill-rule="evenodd"><title>${escapeChartHtml(`${slice.label}: ${this.valueFormatter(slice.value)} (${chartPercentage(slice.percentage)})`)}</title></path>`).join('');
2719
+ const centerLabel = this.getAttribute('center-label');
2720
+ const centerValue = this.getAttribute('center-value');
2721
+ const center = variant === 'donut' && (centerLabel || centerValue)
2722
+ ? `<div class="ui-pie-chart__center" aria-hidden="true">${centerValue ? `<strong>${escapeChartHtml(centerValue)}</strong>` : ''}${centerLabel ? `<span>${escapeChartHtml(centerLabel)}</span>` : ''}</div>`
2723
+ : '';
2724
+ const table = showTable
2725
+ ? this.pieDataTable(geometry.slices)
2726
+ : '';
2727
+ this.innerHTML = `${chartHeaderHtml(this)}${legend}<div class="ui-chart__plot ui-pie-chart__plot"><svg aria-hidden="true" preserveAspectRatio="xMidYMid meet" viewBox="0 0 ${geometry.size} ${geometry.size}"><g class="ui-pie-chart__slices">${slices}</g></svg>${center}</div>${table}${chartCaptionHtml(this)}`;
2728
+ }
2729
+ pieDataTable(slices) {
2730
+ const rows = slices.map(slice => `<tr><th scope="row">${escapeChartHtml(slice.label)}</th><td>${escapeChartHtml(this.valueFormatter(slice.value))}</td><td>${escapeChartHtml(chartPercentage(slice.percentage))}</td></tr>`).join('');
2731
+ return `<details class="ui-chart__data"><summary>View chart data</summary><div><table><thead><tr><th scope="col">Category</th><th scope="col">Value</th><th scope="col">Share</th></tr></thead><tbody>${rows}</tbody></table></div></details>`;
2732
+ }
2733
+ }
2348
2734
  class LumenIconBehaviorElement extends LumenElement {
2349
2735
  connectedCallback() {
2350
2736
  super.connectedCallback();
@@ -3574,6 +3960,57 @@ class LumenAnchorBehaviorElement extends LumenElement {
3574
3960
  this.observer = undefined;
3575
3961
  }
3576
3962
  }
3963
+ class LumenScrollProgressBehaviorElement extends LumenElement {
3964
+ abortController;
3965
+ frame = 0;
3966
+ update = () => {
3967
+ this.frame = 0;
3968
+ const scrollingElement = document.scrollingElement ?? document.documentElement;
3969
+ const maximum = scrollingElement.scrollHeight - scrollingElement.clientHeight;
3970
+ const percentage = maximum > 0
3971
+ ? Math.min(100, Math.max(0, (scrollingElement.scrollTop / maximum) * 100))
3972
+ : 0;
3973
+ let bar = this.querySelector('.ui-scroll-progress__bar');
3974
+ if (!bar) {
3975
+ bar = document.createElement('span');
3976
+ bar.className = 'ui-scroll-progress__bar';
3977
+ this.append(bar);
3978
+ }
3979
+ this.setAttribute('aria-valuenow', `${Math.round(percentage)}`);
3980
+ bar.style.transform = `scaleX(${percentage / 100})`;
3981
+ };
3982
+ scheduleUpdate = () => {
3983
+ if (this.frame)
3984
+ return;
3985
+ if (typeof requestAnimationFrame === 'undefined') {
3986
+ this.update();
3987
+ return;
3988
+ }
3989
+ this.frame = requestAnimationFrame(this.update);
3990
+ };
3991
+ connectedCallback() {
3992
+ super.connectedCallback();
3993
+ this.abortController?.abort();
3994
+ this.abortController = new AbortController();
3995
+ window.addEventListener('resize', this.scheduleUpdate, {
3996
+ passive: true,
3997
+ signal: this.abortController.signal
3998
+ });
3999
+ window.addEventListener('scroll', this.scheduleUpdate, {
4000
+ passive: true,
4001
+ signal: this.abortController.signal
4002
+ });
4003
+ this.update();
4004
+ }
4005
+ disconnectedCallback() {
4006
+ this.abortController?.abort();
4007
+ this.abortController = undefined;
4008
+ if (this.frame && typeof cancelAnimationFrame !== 'undefined') {
4009
+ cancelAnimationFrame(this.frame);
4010
+ }
4011
+ this.frame = 0;
4012
+ }
4013
+ }
3577
4014
  class LumenTourBehaviorElement extends LumenElement {
3578
4015
  abortController;
3579
4016
  opener = null;
@@ -3943,30 +4380,33 @@ class LumenParticlesBehaviorElement extends LumenElement {
3943
4380
  return;
3944
4381
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
3945
4382
  return;
3946
- if (this.children.length > 0)
4383
+ if (this.hasAttribute('data-ui-particles-initialized'))
3947
4384
  return;
4385
+ this.setAttribute('data-ui-particles-initialized', '');
3948
4386
  const densityConfig = { low: 15, medium: 25, high: 40 };
4387
+ const particleTones = [
4388
+ 'var(--brand)',
4389
+ 'var(--accent)',
4390
+ 'var(--glow, var(--brand))'
4391
+ ];
3949
4392
  const density = (this.getAttribute('data-ui-particles') || 'medium');
3950
4393
  const count = densityConfig[density];
3951
4394
  for (let i = 0; i < count; i++) {
3952
- const el = document.createElement('div');
4395
+ const particle = document.createElement('span');
3953
4396
  const size = Math.random() * 12 + 8;
3954
- const left = Math.random() * 100;
3955
- const top = Math.random() * 100;
3956
- const delay = Math.random() * 8;
3957
- const duration = 20 + Math.random() * 15;
3958
- el.style.cssText = `
3959
- position: absolute;
3960
- left: ${left}%;
3961
- top: ${top}%;
3962
- width: ${size}px;
3963
- height: ${size}px;
3964
- border-radius: 50%;
3965
- background: var(--ui-surface-strong, currentColor);
3966
- opacity: 0.1;
3967
- animation: ui-particle-drift ${duration}s ease-in-out ${delay}s infinite;
3968
- `;
3969
- this.appendChild(el);
4397
+ particle.className = 'ui-particles__particle';
4398
+ const particleStyles = {
4399
+ '--ui-particle-delay': `${Math.random() * 8}s`,
4400
+ '--ui-particle-duration': `${20 + Math.random() * 15}s`,
4401
+ '--ui-particle-left': `${Math.random() * 100}%`,
4402
+ '--ui-particle-size': `${size}px`,
4403
+ '--ui-particle-tone': particleTones[Math.floor(Math.random() * particleTones.length)] ?? 'var(--brand)',
4404
+ '--ui-particle-top': `${Math.random() * 100}%`
4405
+ };
4406
+ for (const [property, value] of Object.entries(particleStyles)) {
4407
+ particle.style.setProperty(property, value);
4408
+ }
4409
+ this.appendChild(particle);
3970
4410
  }
3971
4411
  }
3972
4412
  }
@@ -4187,6 +4627,7 @@ const behaviorElementClasses = {
4187
4627
  Anchor: LumenAnchorBehaviorElement,
4188
4628
  AnimatedNumber: LumenAnimatedNumberBehaviorElement,
4189
4629
  BackToTop: LumenBackToTopBehaviorElement,
4630
+ BarChart: LumenBarChartBehaviorElement,
4190
4631
  Cascader: LumenCascaderBehaviorElement,
4191
4632
  CodeTabs: LumenTabsBehaviorElement,
4192
4633
  DataTable: LumenDataTableBehaviorElement,
@@ -4195,14 +4636,18 @@ const behaviorElementClasses = {
4195
4636
  FileUpload: LumenFileUploadBehaviorElement,
4196
4637
  Icon: LumenIconBehaviorElement,
4197
4638
  LanguageToggle: LumenLanguageToggleBehaviorElement,
4639
+ LineChart: LumenLineChartBehaviorElement,
4198
4640
  Mentions: LumenMentionsBehaviorElement,
4199
4641
  Particles: LumenParticlesBehaviorElement,
4642
+ PieChart: LumenPieChartBehaviorElement,
4200
4643
  Popover: LumenDisclosureBehaviorElement,
4201
4644
  Rating: LumenRatingBehaviorElement,
4202
4645
  RevealGroup: LumenRevealGroupBehaviorElement,
4646
+ ScrollProgress: LumenScrollProgressBehaviorElement,
4203
4647
  ScrollReveal: LumenScrollRevealBehaviorElement,
4204
4648
  Select: LumenSelectBehaviorElement,
4205
4649
  Sonner: LumenSonnerBehaviorElement,
4650
+ Sparkline: LumenSparklineBehaviorElement,
4206
4651
  Tabs: LumenTabsBehaviorElement,
4207
4652
  ThemeBuilder: LumenThemeBuilderBehaviorElement,
4208
4653
  ThemeToggle: LumenThemeToggleBehaviorElement,
@@ -4268,6 +4713,7 @@ export const LumenAttachmentElement = elementClasses.Attachment;
4268
4713
  export const LumenAutocompleteElement = elementClasses.Autocomplete;
4269
4714
  export const LumenAvatarElement = elementClasses.Avatar;
4270
4715
  export const LumenBadgeElement = elementClasses.Badge;
4716
+ export const LumenBarChartElement = elementClasses.BarChart;
4271
4717
  export const LumenBreadcrumbElement = elementClasses.Breadcrumb;
4272
4718
  export const LumenBubbleElement = elementClasses.Bubble;
4273
4719
  export const LumenButtonElement = elementClasses.Button;
@@ -4302,6 +4748,7 @@ export const LumenNumberFieldElement = elementClasses.NumberField;
4302
4748
  export const LumenItemElement = elementClasses.Item;
4303
4749
  export const LumenKbdElement = elementClasses.Kbd;
4304
4750
  export const LumenLabelElement = elementClasses.Label;
4751
+ export const LumenLineChartElement = elementClasses.LineChart;
4305
4752
  export const LumenMarkerElement = elementClasses.Marker;
4306
4753
  export const LumenMenubarElement = elementClasses.Menubar;
4307
4754
  export const LumenMessageElement = elementClasses.Message;
@@ -4310,12 +4757,14 @@ export const LumenNativeSelectElement = elementClasses.NativeSelect;
4310
4757
  export const LumenNavigationMenuElement = elementClasses.NavigationMenu;
4311
4758
  export const LumenPaginationElement = elementClasses.Pagination;
4312
4759
  export const LumenPhoneInputElement = elementClasses.PhoneInput;
4760
+ export const LumenPieChartElement = elementClasses.PieChart;
4313
4761
  export const LumenPopoverElement = elementClasses.Popover;
4314
4762
  export const LumenProgressElement = elementClasses.Progress;
4315
4763
  export const LumenRadioGroupElement = elementClasses.RadioGroup;
4316
4764
  export const LumenResizableElement = elementClasses.Resizable;
4317
4765
  export const LumenRichTextEditorElement = elementClasses.RichTextEditor;
4318
4766
  export const LumenScrollAreaElement = elementClasses.ScrollArea;
4767
+ export const LumenScrollProgressElement = elementClasses.ScrollProgress;
4319
4768
  export const LumenScheduleElement = elementClasses.Schedule;
4320
4769
  export const LumenSearchFieldElement = elementClasses.SearchField;
4321
4770
  export const LumenSelectElement = elementClasses.Select;
@@ -4325,6 +4774,7 @@ export const LumenSidebarElement = elementClasses.Sidebar;
4325
4774
  export const LumenSkeletonElement = elementClasses.Skeleton;
4326
4775
  export const LumenSliderElement = elementClasses.Slider;
4327
4776
  export const LumenSonnerElement = elementClasses.Sonner;
4777
+ export const LumenSparklineElement = elementClasses.Sparkline;
4328
4778
  export const LumenSpinnerElement = elementClasses.Spinner;
4329
4779
  export const LumenSwitchElement = elementClasses.Switch;
4330
4780
  export const LumenTableElement = elementClasses.Table;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@santi020k/lumen-elements",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,8 +35,8 @@
35
35
  "LICENSE"
36
36
  ],
37
37
  "dependencies": {
38
- "@santi020k/lumen": "^0.3.0",
39
- "@santi020k/lumen-core": "^0.3.0"
38
+ "@santi020k/lumen": "^0.4.0",
39
+ "@santi020k/lumen-core": "^0.4.0"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@vitest/coverage-v8": "^4.1.10",