@yewdiel21/motion-kit 0.15.0 → 0.16.0

package/dist/css/components/chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/dist/css/components/heatmap-chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/dist/css/components/pie-chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/dist/css/components/radar-chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/dist/css/components/radial-chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }
@@ -330,6 +337,13 @@ mk-radial-chart {
   stroke: var(--mk-chart-grid);
 }
 
+[data-mk-chart-type='radial'][data-mk-segmented] :is([data-mk-part='tracks'], [data-mk-part='series']) path {
+  stroke-width: 1px;
+  stroke-linejoin: round;
+}
+[data-mk-chart-type='radial'][data-mk-segmented] [data-mk-part='tracks'] path { fill: var(--mk-chart-track); stroke: var(--mk-chart-track); }
+[data-mk-chart-type='radial'][data-mk-segmented] [data-mk-part='series'] path[data-mk-on] { filter: brightness(1.12); stroke-width: 2px; }
+
 [data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path[data-mk-on] {
   stroke-width: calc(var(--mk-radial-thickness, 12px) + 4px);
 }
@@ -340,12 +354,12 @@ mk-radial-chart {
 
 [data-mk-radial-center] {
   position: absolute;
-  top: 50%;
+  top: var(--mk-radial-center-y, 50%);
   left: 50%;
   display: grid;
   justify-items: center;
   gap: 0.15rem;
-  max-width: calc(var(--mk-radial-size, 240px) * 0.36);
+  max-width: calc(var(--mk-radial-size, 240px) * var(--mk-radial-center-width, 0.36));
   transform: translate(-50%, -50%);
   text-align: center;
   pointer-events: none;

package/dist/css/components/sankey-chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/dist/css/components/scroll-island.css

@@ -74,6 +74,8 @@ mk-scroll-island {
 [data-mk-island-content] {
   display: inline-flex;
   flex: none;
+  max-width: 100%;
+  min-width: 0;
   align-items: center;
   gap: 0.5rem;
   padding: 0 14px;
@@ -92,6 +94,7 @@ mk-scroll-island {
 }
 
 [data-mk-island-section] {
+  min-width: 0;
   max-width: 12rem;
   overflow: hidden;
   color: rgb(255 255 255 / 0.68);

package/dist/elements/index.d.ts

@@ -1,7 +1,7 @@
 import { I as Instance } from '../types-BkS_raL8.js';
-import { d0 as StudioDockInstance, d3 as StudioDockView, dg as TrailerInstance, bb as DialogInstance, bd as DialogOptions, bX as MenuInstance, ch as QuantityInstance, c3 as PaginationInstance, bG as HoverCardInstance, bM as InputOtpInstance, aq as CalendarInstance, cP as SlotPickerInstance, ad as AttachmentInstance, ac as AttachmentFile, ai as AttachmentStatus, cM as SkeletonInstance, ck as QuestionnaireInstance, cj as QuestionnaireAnswers, aF as CodeBlockInstance, aU as ContextMenuInstance, bR as LinkPreviewInstance, ce as ProgressInstance, cp as RangeSliderInstance, cr as RangeValue, aw as ChartInstance, ax as ChartOptions, aX as CreditCardInstance, aW as CreditCardField, a_ as CreditCardValues, av as CardBrand, aS as CommandSearchInstance, aR as CommandItem, bE as HoldConfirmInstance, bK as ImagePreviewInstance, c0 as NotificationBellInstance, c8 as PasswordStrengthInstance, cD as ScratchCardInstance, cY as StarRatingInstance, aP as ColorSliderInstance, aH as ColorAreaInstance, aK as ColorFieldInstance, aN as ColorPickerInstance, d7 as TimeFieldInstance, cn as RangeCalendarInstance, b6 as DateRange, b7 as DateRangePickerInstance, de as TooltipInstance, cc as PopoverInstance, bU as LoadingButtonInstance, bW as LoadingState, ak as BreadcrumbInstance, bm as EmptyStateInstance, c_ as StatCardInstance, aA as ChartTooltipInstance, bZ as MultiSelectInstance, d5 as TagInputInstance, b9 as DateTimePickerInstance, bw as FilterBuilderInstance, bA as FilterGroup, db as TimelineInstance, da as TimelineEvent, a6 as ActivityFeedInstance, a8 as ActivityItem, dj as TreeViewInstance, br as FileExplorerInstance, bP as JsonViewerInstance, dm as VirtualListInstance, cs as ResizablePanelInstance, cW as SplitViewInstance, b4 as DataTableInstance, b2 as DataRow, bh as EditableTableInstance, cy as RichTextEditorInstance, cH as SelectInstance, aa as AddToCartInstance, cF as ScrollIslandInstance } from '../reveal-BfyKKsw4.js';
-import { E as ThemePickerInstance, M as ToasterInstance, C as ChatInstance, d as ChatRole, l as NavInstance, n as NavStyle, o as NavStyleAlias, e as CursorInstance, I as IslandInstance, V as ToolbarInstance, B as BidirectionalSliderInstance, X as VoiceDotsInstance, Z as VoiceState, r as PieChartInstance, s as PieChartOptions, R as RadarChartInstance, u as RadarChartOptions, w as RadialChartInstance, x as RadialChartOptions, S as SankeyChartInstance, z as SankeyChartOptions, H as HeatmapChartInstance, h as HeatmapChartOptions, O as OrbitMenuInstance } from '../store-CA2Qcun_.js';
-export { an as toast } from '../store-CA2Qcun_.js';
+import { d0 as StudioDockInstance, d3 as StudioDockView, dg as TrailerInstance, bb as DialogInstance, bd as DialogOptions, bX as MenuInstance, ch as QuantityInstance, c3 as PaginationInstance, bG as HoverCardInstance, bM as InputOtpInstance, aq as CalendarInstance, cP as SlotPickerInstance, ad as AttachmentInstance, ac as AttachmentFile, ai as AttachmentStatus, cM as SkeletonInstance, ck as QuestionnaireInstance, cj as QuestionnaireAnswers, aF as CodeBlockInstance, aU as ContextMenuInstance, bR as LinkPreviewInstance, ce as ProgressInstance, cp as RangeSliderInstance, cr as RangeValue, aw as ChartInstance, ax as ChartOptions, aX as CreditCardInstance, aW as CreditCardField, a_ as CreditCardValues, av as CardBrand, aS as CommandSearchInstance, aR as CommandItem, bE as HoldConfirmInstance, bK as ImagePreviewInstance, c0 as NotificationBellInstance, c8 as PasswordStrengthInstance, cD as ScratchCardInstance, cY as StarRatingInstance, aP as ColorSliderInstance, aH as ColorAreaInstance, aK as ColorFieldInstance, aN as ColorPickerInstance, d7 as TimeFieldInstance, cn as RangeCalendarInstance, b6 as DateRange, b7 as DateRangePickerInstance, de as TooltipInstance, cc as PopoverInstance, bU as LoadingButtonInstance, bW as LoadingState, ak as BreadcrumbInstance, bm as EmptyStateInstance, c_ as StatCardInstance, aA as ChartTooltipInstance, bZ as MultiSelectInstance, d5 as TagInputInstance, b9 as DateTimePickerInstance, bw as FilterBuilderInstance, bA as FilterGroup, db as TimelineInstance, da as TimelineEvent, a6 as ActivityFeedInstance, a8 as ActivityItem, dj as TreeViewInstance, br as FileExplorerInstance, bP as JsonViewerInstance, dm as VirtualListInstance, cs as ResizablePanelInstance, cW as SplitViewInstance, b4 as DataTableInstance, b2 as DataRow, bh as EditableTableInstance, cy as RichTextEditorInstance, cH as SelectInstance, aa as AddToCartInstance, cF as ScrollIslandInstance } from '../reveal-DRpNO4KP.js';
+import { E as ThemePickerInstance, M as ToasterInstance, C as ChatInstance, d as ChatRole, l as NavInstance, n as NavStyle, o as NavStyleAlias, e as CursorInstance, I as IslandInstance, V as ToolbarInstance, B as BidirectionalSliderInstance, X as VoiceDotsInstance, Z as VoiceState, r as PieChartInstance, s as PieChartOptions, R as RadarChartInstance, u as RadarChartOptions, w as RadialChartInstance, x as RadialChartOptions, S as SankeyChartInstance, z as SankeyChartOptions, H as HeatmapChartInstance, h as HeatmapChartOptions, O as OrbitMenuInstance } from '../store-Da3zSh8Z.js';
+export { an as toast } from '../store-Da3zSh8Z.js';
 import { C as ChatBackgroundInstance, c as StepsInstance, P as PillButtonInstance } from '../engine-5zRIssTO.js';
 import { L as LikeButtonInstance, S as SwipeActionsInstance } from '../engine-QECQnGz1.js';
 import 'gsap/Flip';

package/dist/elements/index.js

@@ -17,7 +17,7 @@ import {
   createVoiceDots,
   iconSvg,
   toast
-} from "../chunk-JXRS3OEA.js";
+} from "../chunk-RBEKR5UZ.js";
 import {
   createActivityFeed,
   createAddToCart,
@@ -83,7 +83,7 @@ import {
   createTrailer,
   createTreeView,
   createVirtualList
-} from "../chunk-A6QQCF6V.js";
+} from "../chunk-SDQ776LG.js";
 import "../chunk-RVSKEBIC.js";
 import "../chunk-DOOMULVV.js";
 import "../chunk-TGV27ZWM.js";
@@ -927,6 +927,11 @@ var MkChartElement = class extends MkElement {
     series: "json",
     points: "json",
     stacked: "boolean",
+    barStyle: "string",
+    barTrack: "boolean",
+    barFill: "string",
+    barWidth: "number",
+    curve: "string",
     label: "string",
     height: "number",
     emptyLabel: "string",
@@ -940,7 +945,7 @@ var MkChartElement = class extends MkElement {
   }
   attributeChangedCallback(_name, previous, next) {
     if (previous === next || !this.instance) return;
-    this.instance.update({ stacked: false, legend: void 0, ...this.options });
+    this.instance.update({ stacked: false, barTrack: false, barStyle: void 0, barFill: void 0, barWidth: void 0, curve: void 0, legend: void 0, ...this.options });
   }
   update(options) {
     this.instance?.update(options);
@@ -1881,7 +1886,7 @@ var MkAddToCartElement = class extends MkElement {
 
 // src/components/scroll-island/element.ts
 var MkScrollIslandElement = class extends MkElement {
-  static options = { sections: "string", reach: "number", idle: "number", page: "boolean" };
+  static options = { sections: "string", reach: "number", idle: "number", persistent: "boolean", page: "boolean" };
   create(options) {
     return createScrollIsland(options.page ? document.documentElement : this, options);
   }
@@ -2026,13 +2031,13 @@ var MkRadarChartElement = class extends MkElement {
 
 // src/components/radial-chart/element.ts
 var MkRadialChartElement = class extends MkElement {
-  static options = { data: "json", max: "number", sweep: "number", size: "number", thickness: "number", label: "string", totalLabel: "string", legend: "boolean", emptyLabel: "string" };
+  static options = { data: "json", max: "number", sweep: "number", size: "number", thickness: "number", segments: "number", center: "string", label: "string", totalLabel: "string", legend: "boolean", emptyLabel: "string" };
   create(options) {
     return createRadialChart(this, options);
   }
   attributeChangedCallback(_name, previous, next) {
     if (previous === next || !this.instance) return;
-    this.instance.update({ legend: void 0, max: void 0, ...this.options });
+    this.instance.update({ legend: void 0, max: void 0, segments: 0, center: void 0, ...this.options });
   }
   update(options) {
     this.instance?.update(options);