@nanahoshi/mona-ui 0.15.3 → 0.17.0

package/chart/README.md

@@ -167,12 +167,13 @@ The benchmark is intentionally non-gating and emits one compact JSON record for
     <mona-chart-y-axis [nice]="true" />
 
     <mona-bar-series field="revenue" name="Revenue" [borderRadius]="4" />
-    <mona-line-series field="target" name="Target" curve="monotone-x" [showPoints]="true" />
-    <mona-area-series field="forecast" name="Forecast" fillMode="gradient" />
+    <mona-line-series field="target" name="Target" curve="monotone-x" lineStyle="dashed" [showPoints]="true" />
+    <mona-area-series field="forecast" name="Forecast" fillMode="gradient" lineStyle="dotted" />
 
     <mona-chart-legend position="bottom" [interactive]="true" />
     <mona-chart-tooltip [shared]="true" />
 </mona-chart>
+
 ```
 
 ### Stacked Bar Chart & 100% Stacked Bar Chart
@@ -348,26 +349,50 @@ Renders a Cartesian floating range bar series plotting discrete min-max interval
 | `valueFormatter` | `ChartValueFormatter` | `undefined`   | Custom formatter callback for formatting range bounds in tooltips and live region.      |
 | `visible`        | `model(boolean)`      | `true`        | Two-way bindable series visibility.                                                     |
 
+### `<mona-line-series>`
+
+Renders a continuous Cartesian line series connecting data points with configurable curve interpolation and stroke pattern.
+
+| Input / Output   | Type                     | Default      | Description                                                                                          |
+| :--------------- | :----------------------- | :----------- | :--------------------------------------------------------------------------------------------------- |
+| `field`          | `ChartField`             | `""`         | Property key or accessor extracting numeric Y value.                                                 |
+| `xField`         | `ChartField | undefined` | `undefined`  | Property key or accessor extracting X-axis coordinate (overrides chart-level `xField`).              |
+| `keyField`       | `ChartField | undefined` | `undefined`  | Unique identifier field for stable mark tracking across animation transitions.                       |
+| `name`           | `string`                 | `""`         | Series name for tooltips, legend, and accessibility.                                                 |
+| `lineStyle`      | `ChartLineStyle`         | `"solid"`    | Stroke pattern used to render the series line (`"solid"`, `"dashed"`, or `"dotted"`).               |
+| `curve`          | `ChartCurve`             | `"linear"`   | Curve interpolation algorithm (`"linear"`, `"monotone-x"`, `"natural"`, `"step"`, `"step-after"`).   |
+| `connectNulls`   | `boolean`                | `false`      | Whether to interpolate across null/missing data points without gaps.                                 |
+| `showPoints`     | `boolean`                | `false`      | Whether to render point markers at data coordinates.                                                 |
+| `pointRadius`    | `number | undefined`     | `undefined`  | Radius in pixels for point markers. Defaults to `--mona-chart-point-radius` (3px).                    |
+| `strokeWidth`    | `number | undefined`     | `undefined`  | Stroke width in pixels for the series line. Defaults to 2px.                                         |
+| `color`          | `string`                 | `""`         | Explicit stroke color override for the series line. Defaults to palette token.                       |
+| `visible`        | `model(boolean)`         | `true`       | Two-way bindable series visibility.                                                                  |
+
 ### `<mona-area-series>`
 
 Renders a continuous Cartesian area series supporting gradient fades, solid fills, cumulative stacking, and 100% normalized area bands.
 
-| Input / Output   | Type                  | Default      | Description                                                                                        |
-| :--------------- | :-------------------- | :----------- | :------------------------------------------------------------------------------------------------- |
-| `field`          | `ChartField`          | `"value"`    | Property key or accessor extracting numeric Y value.                                               |
-| `xField`         | `ChartField`          | `undefined`  | Property key or accessor extracting X-axis coordinate (overrides chart-level `xField`).            |
-| `keyField`       | `ChartField`          | `undefined`  | Unique identifier field for stable mark tracking across animation transitions.                     |
-| `name`           | `string`              | `"Area"`     | Series name for tooltips, legend, and accessibility.                                               |
-| `stack`          | `string`              | `undefined`  | Stack group name. Series sharing the same stack identifier are stacked into cumulative bands.      |
-| `stackMode`      | `ChartStackMode`      | `"normal"`   | Stacking calculation mode: `"normal"` (raw cumulative sum) or `"percent"` (normalized to 100%).    |
-| `fillMode`       | `ChartAreaFillMode`   | `"gradient"` | Area fill style: `"gradient"`, `"solid"`, or `"none"`.                                             |
-| `fillOpacity`    | `number`              | `0.2`        | Area fill opacity between 0.0 and 1.0.                                                             |
-| `curve`          | `ChartCurve`          | `"linear"`   | Curve interpolation algorithm (`"linear"`, `"monotone-x"`, `"natural"`, `"step"`, `"step-after"`). |
-| `connectNulls`   | `boolean`             | `false`      | Whether to interpolate across null/missing data points.                                            |
-| `showPoints`     | `boolean`             | `false`      | Whether to render point markers at data coordinates.                                               |
-| `color`          | `string`              | `undefined`  | Area line and fill color. Defaults to palette token.                                               |
-| `valueFormatter` | `ChartValueFormatter` | `undefined`  | Custom formatter callback for area raw values and stack totals in tooltips and live region.        |
-| `visible`        | `model(boolean)`      | `true`       | Two-way bindable series visibility.                                                                |
+| Input / Output   | Type                     | Default      | Description                                                                                          |
+| :--------------- | :----------------------- | :----------- | :--------------------------------------------------------------------------------------------------- |
+| `field`          | `ChartField`             | `""`         | Property key or accessor extracting numeric Y value.                                                 |
+| `xField`         | `ChartField | undefined` | `undefined`  | Property key or accessor extracting X-axis coordinate (overrides chart-level `xField`).              |
+| `keyField`       | `ChartField | undefined` | `undefined`  | Unique identifier field for stable mark tracking across animation transitions.                       |
+| `name`           | `string`                 | `""`         | Series name for tooltips, legend, and accessibility.                                                 |
+| `stack`          | `string | undefined`     | `undefined`  | Stack group name. Series sharing the same stack identifier are stacked into cumulative bands.        |
+| `stackMode`      | `ChartStackMode`         | `"normal"`   | Stacking calculation mode: `"normal"` (raw cumulative sum) or `"percent"` (normalized to 100%).      |
+| `fillMode`       | `ChartAreaFillMode`      | `"gradient"` | Area fill style: `"gradient"` fading to zero baseline, or uniform `"solid"`.                        |
+| `lineStyle`      | `ChartLineStyle`         | `"solid"`    | Stroke pattern used for the area's boundary line (`"solid"`, `"dashed"`, or `"dotted"`). Fill is unaffected. |
+| `fillOpacity`    | `number | undefined`     | `undefined`  | Maximum opacity applied to the area fill. Defaults to 0.18.                                          |
+| `curve`          | `ChartCurve`             | `"linear"`   | Curve interpolation algorithm (`"linear"`, `"monotone-x"`, `"natural"`, `"step"`, `"step-after"`).   |
+| `connectNulls`   | `boolean`                | `false`      | Whether to interpolate across null/missing data points without gaps.                                 |
+| `showPoints`     | `boolean`                | `false`      | Whether to render point markers at data coordinates.                                                 |
+| `pointRadius`    | `number | undefined`     | `undefined`  | Radius in pixels for point markers. Defaults to `--mona-chart-point-radius` (4px).                    |
+| `strokeWidth`    | `number | undefined`     | `undefined`  | Stroke width in pixels for the area boundary line. Defaults to 2px.                                  |
+| `color`          | `string`                 | `""`         | Explicit stroke and fill color override for the area series. Defaults to palette token.              |
+| `valueFormatter` | `ChartValueFormatter | undefined` | `undefined` | Custom formatter callback for area raw values and stack totals in tooltips and live region.       |
+| `visible`        | `model(boolean)`         | `true`       | Two-way bindable series visibility.                                                                  |
+
+
 
 ### `<mona-range-area-series>`
 

package/fesm2022/nanahoshi-mona-ui-chart.mjs

@@ -20743,6 +20743,7 @@ class ChartStyleResolver {
         const explicitStrokeWidth = "strokeWidth" in series ? series.strokeWidth?.() : undefined;
         const explicitPointRadius = "pointRadius" in series ? series.pointRadius?.() : undefined;
         const explicitFillOpacity = "fillOpacity" in series ? series.fillOpacity?.() : undefined;
+        const explicitLineStyle = "lineStyle" in series ? series.lineStyle?.() : undefined;
         let elementColor = "";
         let cssLineWidth;
         let cssPointRadius;
@@ -20807,11 +20808,13 @@ class ChartStyleResolver {
             ? Math.max(0, Math.min(1, explicitFillOpacity))
             : (cssAreaFillOpacity ?? defaultFillOpacity);
         const resolvedAreaFillColor = cssAreaFillColor ? this.resolveCssVariable(cssAreaFillColor) : resolvedColor;
+        const lineStyle = explicitLineStyle ?? "solid";
         return {
             areaFillColor: resolvedAreaFillColor,
             areaFillOpacity: resolvedFillOpacity,
             color: resolvedColor,
             fillOpacity: resolvedFillOpacity,
+            lineStyle,
             lineWidth: resolvedLineWidth,
             opacity: 1,
             pointRadius: resolvedPointRadius
@@ -36256,6 +36259,17 @@ function drawPointMarker(context, x, y, radius, fillColor, strokeColor, strokeWi
         context.stroke();
     }
 }
+function resolveCanvasStrokeDashArray(lineStyle) {
+    switch (lineStyle) {
+        case "dashed":
+            return [4, 4];
+        case "dotted":
+            return [2, 2];
+        case "solid":
+        default:
+            return [];
+    }
+}
 
 const MIXED_BASELINE_OPACITY_RATIO = 0.25;
 function withAlpha(color, alpha) {
@@ -36435,7 +36449,9 @@ class AreaSeriesRenderer {
         lineGenerator(validPoints);
         context.lineWidth = style.lineWidth;
         context.strokeStyle = style.color;
+        context.setLineDash([...resolveCanvasStrokeDashArray(style.lineStyle)]);
         context.stroke();
+        context.setLineDash([]);
         // 3. Draw Point Markers
         if (showPoints) {
             for (const p of validPoints) {
@@ -36547,7 +36563,9 @@ class LineSeriesRenderer {
         lineGenerator(validPoints);
         context.lineWidth = style.lineWidth;
         context.strokeStyle = style.color;
+        context.setLineDash([...resolveCanvasStrokeDashArray(style.lineStyle)]);
         context.stroke();
+        context.setLineDash([]);
         if (showPoints) {
             for (const p of validPoints) {
                 if (p.defined) {
@@ -40715,6 +40733,7 @@ class SvgAreaSeriesRenderer {
         setSvgAttribute(this.#strokePathElement, "fill", "none");
         setSvgAttribute(this.#strokePathElement, "stroke", style.color);
         setSvgAttribute(this.#strokePathElement, "stroke-width", style.lineWidth);
+        setSvgAttribute(this.#strokePathElement, "stroke-dasharray", resolveStrokeDashArray(style.lineStyle));
         setSvgAttribute(this.#strokePathElement, "opacity", seriesOpacity);
         // 3. Markers
         if (showPoints) {
@@ -40919,6 +40938,7 @@ class SvgLineSeriesRenderer {
         setSvgAttribute(this.#pathElement, "fill", "none");
         setSvgAttribute(this.#pathElement, "stroke", style.color);
         setSvgAttribute(this.#pathElement, "stroke-width", style.lineWidth);
+        setSvgAttribute(this.#pathElement, "stroke-dasharray", resolveStrokeDashArray(style.lineStyle));
         setSvgAttribute(this.#pathElement, "opacity", seriesOpacity);
         if (showPoints) {
             if (!this.#markersGroup) {
@@ -57709,6 +57729,12 @@ class LineSeriesComponent {
          */
         this.keyField = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "keyField" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Stroke pattern used to render the series line (`"solid"`, `"dashed"`, or `"dotted"`).
+         * @default "solid"
+         */
+        this.lineStyle = input("solid", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
         /**
          * @description Name of the series displayed in legends and tooltips.
          * @default ""
@@ -57800,6 +57826,7 @@ class LineSeriesComponent {
         });
         effect(() => {
             this.color();
+            this.lineStyle();
             this.userClass();
             if (this.#registered) {
                 this.#chartContext?.invalidate(4 /* ChartInvalidationReason.Style */);
@@ -57830,6 +57857,7 @@ class LineSeriesComponent {
             field: this.field,
             id: this.#id,
             keyField: this.keyField,
+            lineStyle: this.lineStyle,
             name: this.name,
             pointRadius: this.pointRadius,
             seriesKey: this.seriesKey,
@@ -57850,7 +57878,7 @@ class LineSeriesComponent {
         this.#destroyRef.onDestroy(unregister);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LineSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: LineSeriesComponent, isStandalone: true, selector: "mona-line-series", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, connectNulls: { classPropertyName: "connectNulls", publicName: "connectNulls", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataLabels: { classPropertyName: "dataLabels", publicName: "dataLabels", isSignal: true, isRequired: false, transformFunction: null }, downsampling: { classPropertyName: "downsampling", publicName: "downsampling", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, pointRadius: { classPropertyName: "pointRadius", publicName: "pointRadius", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, showPoints: { classPropertyName: "showPoints", publicName: "showPoints", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, xAxisId: { classPropertyName: "xAxisId", publicName: "xAxisId", isSignal: true, isRequired: false, transformFunction: null }, xField: { classPropertyName: "xField", publicName: "xField", isSignal: true, isRequired: false, transformFunction: null }, yAxisId: { classPropertyName: "yAxisId", publicName: "yAxisId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "userClass()" }, styleAttribute: "display: none !important;" }, queries: [{ propertyName: "dataLabelTemplate", first: true, predicate: ChartDataLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "", isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: LineSeriesComponent, isStandalone: true, selector: "mona-line-series", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, connectNulls: { classPropertyName: "connectNulls", publicName: "connectNulls", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataLabels: { classPropertyName: "dataLabels", publicName: "dataLabels", isSignal: true, isRequired: false, transformFunction: null }, downsampling: { classPropertyName: "downsampling", publicName: "downsampling", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, pointRadius: { classPropertyName: "pointRadius", publicName: "pointRadius", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, showPoints: { classPropertyName: "showPoints", publicName: "showPoints", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, xAxisId: { classPropertyName: "xAxisId", publicName: "xAxisId", isSignal: true, isRequired: false, transformFunction: null }, xField: { classPropertyName: "xField", publicName: "xField", isSignal: true, isRequired: false, transformFunction: null }, yAxisId: { classPropertyName: "yAxisId", publicName: "yAxisId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "userClass()" }, styleAttribute: "display: none !important;" }, queries: [{ propertyName: "dataLabelTemplate", first: true, predicate: ChartDataLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "", isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LineSeriesComponent, decorators: [{
             type: Component,
@@ -57863,7 +57891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         style: "display: none !important;"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], connectNulls: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectNulls", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartDataLabelTemplateDirective), { isSignal: true }] }], dataLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLabels", required: false }] }], downsampling: [{ type: i0.Input, args: [{ isSignal: true, alias: "downsampling", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], pointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointRadius", required: false }] }], seriesKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKey", required: false }] }], showPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPoints", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], xAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisId", required: false }] }], xField: [{ type: i0.Input, args: [{ isSignal: true, alias: "xField", required: false }] }], yAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisId", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], connectNulls: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectNulls", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartDataLabelTemplateDirective), { isSignal: true }] }], dataLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLabels", required: false }] }], downsampling: [{ type: i0.Input, args: [{ isSignal: true, alias: "downsampling", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], pointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointRadius", required: false }] }], seriesKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKey", required: false }] }], showPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPoints", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], xAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisId", required: false }] }], xField: [{ type: i0.Input, args: [{ isSignal: true, alias: "xField", required: false }] }], yAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisId", required: false }] }] } });
 
 let nextSeriesId$8 = 0;
 class AreaSeriesComponent {
@@ -57940,6 +57968,12 @@ class AreaSeriesComponent {
          */
         this.keyField = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "keyField" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Stroke pattern used for the area's boundary line (`"solid"`, `"dashed"`, or `"dotted"`).
+         * @default "solid"
+         */
+        this.lineStyle = input("solid", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
         /**
          * @description Name of the series displayed in legends and tooltips.
          * @default ""
@@ -58054,6 +58088,7 @@ class AreaSeriesComponent {
         effect(() => {
             this.color();
             this.fillMode();
+            this.lineStyle();
             this.userClass();
             if (this.#registered) {
                 this.#chartContext?.invalidate(4 /* ChartInvalidationReason.Style */);
@@ -58086,6 +58121,7 @@ class AreaSeriesComponent {
             fillOpacity: this.fillOpacity,
             id: this.#id,
             keyField: this.keyField,
+            lineStyle: this.lineStyle,
             name: this.name,
             pointRadius: this.pointRadius,
             seriesKey: this.seriesKey,
@@ -58109,7 +58145,7 @@ class AreaSeriesComponent {
         this.#destroyRef.onDestroy(unregister);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AreaSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: AreaSeriesComponent, isStandalone: true, selector: "mona-area-series", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, connectNulls: { classPropertyName: "connectNulls", publicName: "connectNulls", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataLabels: { classPropertyName: "dataLabels", publicName: "dataLabels", isSignal: true, isRequired: false, transformFunction: null }, downsampling: { classPropertyName: "downsampling", publicName: "downsampling", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, fillMode: { classPropertyName: "fillMode", publicName: "fillMode", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, pointRadius: { classPropertyName: "pointRadius", publicName: "pointRadius", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, showPoints: { classPropertyName: "showPoints", publicName: "showPoints", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, stackMode: { classPropertyName: "stackMode", publicName: "stackMode", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, xAxisId: { classPropertyName: "xAxisId", publicName: "xAxisId", isSignal: true, isRequired: false, transformFunction: null }, xField: { classPropertyName: "xField", publicName: "xField", isSignal: true, isRequired: false, transformFunction: null }, yAxisId: { classPropertyName: "yAxisId", publicName: "yAxisId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "userClass()" }, styleAttribute: "display: none !important;" }, queries: [{ propertyName: "dataLabelTemplate", first: true, predicate: ChartDataLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "", isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: AreaSeriesComponent, isStandalone: true, selector: "mona-area-series", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, connectNulls: { classPropertyName: "connectNulls", publicName: "connectNulls", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataLabels: { classPropertyName: "dataLabels", publicName: "dataLabels", isSignal: true, isRequired: false, transformFunction: null }, downsampling: { classPropertyName: "downsampling", publicName: "downsampling", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, fillMode: { classPropertyName: "fillMode", publicName: "fillMode", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, pointRadius: { classPropertyName: "pointRadius", publicName: "pointRadius", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, showPoints: { classPropertyName: "showPoints", publicName: "showPoints", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, stackMode: { classPropertyName: "stackMode", publicName: "stackMode", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, xAxisId: { classPropertyName: "xAxisId", publicName: "xAxisId", isSignal: true, isRequired: false, transformFunction: null }, xField: { classPropertyName: "xField", publicName: "xField", isSignal: true, isRequired: false, transformFunction: null }, yAxisId: { classPropertyName: "yAxisId", publicName: "yAxisId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "userClass()" }, styleAttribute: "display: none !important;" }, queries: [{ propertyName: "dataLabelTemplate", first: true, predicate: ChartDataLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "", isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AreaSeriesComponent, decorators: [{
             type: Component,
@@ -58122,7 +58158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         style: "display: none !important;"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], connectNulls: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectNulls", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartDataLabelTemplateDirective), { isSignal: true }] }], dataLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLabels", required: false }] }], downsampling: [{ type: i0.Input, args: [{ isSignal: true, alias: "downsampling", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], fillMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillMode", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], pointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointRadius", required: false }] }], seriesKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKey", required: false }] }], showPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPoints", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], stackMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackMode", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], xAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisId", required: false }] }], xField: [{ type: i0.Input, args: [{ isSignal: true, alias: "xField", required: false }] }], yAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisId", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], connectNulls: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectNulls", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartDataLabelTemplateDirective), { isSignal: true }] }], dataLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLabels", required: false }] }], downsampling: [{ type: i0.Input, args: [{ isSignal: true, alias: "downsampling", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], fillMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillMode", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], pointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointRadius", required: false }] }], seriesKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKey", required: false }] }], showPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPoints", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], stackMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackMode", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], xAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisId", required: false }] }], xField: [{ type: i0.Input, args: [{ isSignal: true, alias: "xField", required: false }] }], yAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisId", required: false }] }] } });
 
 let nextSeriesId$7 = 0;
 class BarSeriesComponent {

package/fesm2022/nanahoshi-mona-ui-segmented.mjs

@@ -36,6 +36,12 @@ const segmentedContainerThemeVariants = cva(`
         transition-colors duration-(--mona-motion-fast)
     `, {
     variants: {
+        alignment: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+            stretch: "justify-stretch"
+        },
         rounded: {
             none: "rounded-none",
             small: "rounded-sm",
@@ -45,11 +51,12 @@ const segmentedContainerThemeVariants = cva(`
         }
     },
     defaultVariants: {
+        alignment: "stretch",
         rounded: "medium"
     }
 });
 const segmentedOptionThemeVariants = cva(`
-        relative flex flex-1 cursor-pointer items-center justify-center gap-1
+        relative flex cursor-pointer items-center justify-center gap-1
         whitespace-nowrap
         transition-colors duration-(--mona-motion-fast)
         data-[disabled='true']:pointer-events-none
@@ -63,6 +70,12 @@ const segmentedOptionThemeVariants = cva(`
         data-[selected='true']:transition-none
     `, {
     variants: {
+        alignment: {
+            start: "flex-none",
+            center: "flex-none",
+            end: "flex-none",
+            stretch: "flex-1"
+        },
         rounded: {
             none: "rounded-none",
             small: "rounded-xs",
@@ -77,6 +90,7 @@ const segmentedOptionThemeVariants = cva(`
         }
     },
     defaultVariants: {
+        alignment: "stretch",
         rounded: "medium",
         size: "medium"
     }
@@ -127,7 +141,7 @@ class SegmentedComponent {
         this.#lastSize = null;
         this.#resizeObserver = null;
         this.containerClasses = computed(() => {
-            const classes = segmentedContainerThemeVariants({ rounded: this.rounded() });
+            const classes = segmentedContainerThemeVariants({ alignment: this.alignment(), rounded: this.rounded() });
             return twMerge(classes, this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
@@ -150,9 +164,10 @@ class SegmentedComponent {
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(SegmentedItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.optionClasses = computed(() => {
+            const alignment = this.alignment();
             const rounded = this.rounded();
             const size = this.size();
-            return segmentedOptionThemeVariants({ rounded, size });
+            return segmentedOptionThemeVariants({ alignment, rounded, size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "optionClasses" }] : /* istanbul ignore next */ []));
         this.optionElements = viewChildren("optionElement", /* @ts-ignore */
@@ -171,6 +186,12 @@ class SegmentedComponent {
             return this.disabled() || !!option?.disabled;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedOptionDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls the alignment of the items inside the segmented component.
+         * @default "stretch"
+         */
+        this.alignment = input("stretch", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []));
         /**
          * @description Controls whether the selection indicator animates between selected options.
          * When false, selection changes are applied immediately without transition.
@@ -245,6 +266,7 @@ class SegmentedComponent {
             read: () => {
                 this.selectedIndex();
                 this.optionElements();
+                this.alignment();
                 this.rounded();
                 this.animate();
                 const size = this.size();
@@ -335,7 +357,7 @@ class SegmentedComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SegmentedComponent, isStandalone: true, selector: "mona-segmented", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled() || undefined", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.role": "'radiogroup'", "class": "containerClasses()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: SegmentedItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "optionElements", predicate: ["optionElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (indicatorGeometry(); as geometry) {\n    <div\n        aria-hidden=\"true\"\n        [class]=\"indicatorClasses()\"\n        [attr.data-disabled]=\"selectedOptionDisabled() ? 'true' : null\"\n        [style.transform]=\"geometry.transform\"\n        [style.width.px]=\"geometry.width\"\n        [style.height.px]=\"geometry.height\"></div>\n}\n\n@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label\n        #optionElement\n        [class]=\"optionClasses()\"\n        [attr.data-selected]=\"selected\"\n        [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SegmentedComponent, isStandalone: true, selector: "mona-segmented", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled() || undefined", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.role": "'radiogroup'", "class": "containerClasses()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: SegmentedItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "optionElements", predicate: ["optionElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (indicatorGeometry(); as geometry) {\n    <div\n        aria-hidden=\"true\"\n        [class]=\"indicatorClasses()\"\n        [attr.data-disabled]=\"selectedOptionDisabled() ? 'true' : null\"\n        [style.transform]=\"geometry.transform\"\n        [style.width.px]=\"geometry.width\"\n        [style.height.px]=\"geometry.height\"></div>\n}\n\n@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label\n        #optionElement\n        [class]=\"optionClasses()\"\n        [attr.data-selected]=\"selected\"\n        [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SegmentedComponent, decorators: [{
             type: Component,
@@ -349,7 +371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.role]": "'radiogroup'",
                         "[class]": "containerClasses()"
                     }, template: "@if (indicatorGeometry(); as geometry) {\n    <div\n        aria-hidden=\"true\"\n        [class]=\"indicatorClasses()\"\n        [attr.data-disabled]=\"selectedOptionDisabled() ? 'true' : null\"\n        [style.transform]=\"geometry.transform\"\n        [style.width.px]=\"geometry.width\"\n        [style.height.px]=\"geometry.height\"></div>\n}\n\n@for (option of options(); track option.value) {\n    @let selected = option.value === value();\n    @let optionDisabled = disabled() || option.disabled;\n\n    <label\n        #optionElement\n        [class]=\"optionClasses()\"\n        [attr.data-selected]=\"selected\"\n        [attr.data-disabled]=\"optionDisabled\">\n        <input\n            type=\"radio\"\n            [name]=\"groupName\"\n            [value]=\"option.value\"\n            [checked]=\"selected\"\n            [disabled]=\"optionDisabled\"\n            [class]=\"inputClasses()\"\n            (change)=\"onOptionChange(option)\"\n            (blur)=\"onOptionBlur()\" />\n\n        <span\n            class=\"pointer-events-none flex flex-1 items-center justify-center gap-1\n                   [border-radius:inherit]\n                   peer-focus-visible:ring-2\n                   peer-focus-visible:ring-focus-indicator/35\">\n            @if (itemTemplate(); as template) {\n                <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"createOptionContext(option, $index)\"></ng-container>\n            } @else {\n                {{ option.label }}\n            }\n        </span>\n    </label>\n}\n\n" }]
-        }], ctorParameters: () => [], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SegmentedItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], optionElements: [{ type: i0.ViewChildren, args: ["optionElement", { isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SegmentedItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], optionElements: [{ type: i0.ViewChildren, args: ["optionElement", { isSignal: true }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/segmented

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.15.3",
+  "version": "0.17.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

package/types/nanahoshi-mona-ui-chart.d.ts

@@ -459,6 +459,7 @@ declare class ChartCrosshairLabelTemplateDirective {
 
 type ChartAreaFillMode = "gradient" | "solid";
 type ChartCurve = "linear" | "monotone-x" | "natural" | "step" | "step-after";
+type ChartLineStyle = "solid" | "dashed" | "dotted";
 type ChartSeriesType = "area" | "bar" | "bubble" | "candlestick" | "donut" | "funnel" | "gauge" | "heatmap" | "line" | "ohlc" | "pie" | "polar" | "radar" | "radialBar" | "rangeArea" | "rangeBar" | "rose" | "scatter" | "treemap" | "waterfall";
 type ChartSeriesFamily = "cartesian" | "funnel" | "heatmap" | "hierarchy" | "polar" | "radar" | "radialArc" | "sector" | "waterfall";
 declare function getChartSeriesFamily(type: ChartSeriesType): ChartSeriesFamily;
@@ -1588,6 +1589,7 @@ interface ChartSeriesStyle {
     areaFillOpacity: number;
     color: string;
     fillOpacity: number;
+    lineStyle?: ChartLineStyle;
     lineWidth: number;
     opacity: number;
     pointRadius: number;
@@ -3268,6 +3270,7 @@ interface ChartLineSeriesRegistration extends ChartCartesianScalarSeriesRegistra
     connectNulls?: Signal<boolean>;
     curve?: Signal<ChartCurve>;
     downsampling?: Signal<ChartDownsamplingInput | undefined>;
+    lineStyle?: Signal<ChartLineStyle>;
     pointRadius?: Signal<number | undefined>;
     showPoints?: Signal<boolean>;
     strokeWidth?: Signal<number | undefined>;
@@ -3279,6 +3282,7 @@ interface ChartAreaSeriesRegistration extends ChartCartesianScalarSeriesRegistra
     downsampling?: Signal<ChartDownsamplingInput | undefined>;
     fillMode?: Signal<ChartAreaFillMode>;
     fillOpacity?: Signal<number | undefined>;
+    lineStyle?: Signal<ChartLineStyle>;
     pointRadius?: Signal<number | undefined>;
     showPoints?: Signal<boolean>;
     stack: Signal<string | undefined>;
@@ -4902,6 +4906,11 @@ declare class LineSeriesComponent implements OnInit {
      * @default undefined
      */
     readonly keyField: _angular_core.InputSignal<ChartField | undefined>;
+    /**
+     * @description Stroke pattern used to render the series line (`"solid"`, `"dashed"`, or `"dotted"`).
+     * @default "solid"
+     */
+    readonly lineStyle: _angular_core.InputSignal<ChartLineStyle>;
     /**
      * @description Name of the series displayed in legends and tooltips.
      * @default ""
@@ -4955,7 +4964,7 @@ declare class LineSeriesComponent implements OnInit {
     constructor();
     ngOnInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LineSeriesComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LineSeriesComponent, "mona-line-series", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "dataLabels": { "alias": "dataLabels"; "required": false; "isSignal": true; }; "downsampling": { "alias": "downsampling"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "keyField": { "alias": "keyField"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "pointRadius": { "alias": "pointRadius"; "required": false; "isSignal": true; }; "seriesKey": { "alias": "seriesKey"; "required": false; "isSignal": true; }; "showPoints": { "alias": "showPoints"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "xAxisId": { "alias": "xAxisId"; "required": false; "isSignal": true; }; "xField": { "alias": "xField"; "required": false; "isSignal": true; }; "yAxisId": { "alias": "yAxisId"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, ["dataLabelTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LineSeriesComponent, "mona-line-series", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "dataLabels": { "alias": "dataLabels"; "required": false; "isSignal": true; }; "downsampling": { "alias": "downsampling"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "keyField": { "alias": "keyField"; "required": false; "isSignal": true; }; "lineStyle": { "alias": "lineStyle"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "pointRadius": { "alias": "pointRadius"; "required": false; "isSignal": true; }; "seriesKey": { "alias": "seriesKey"; "required": false; "isSignal": true; }; "showPoints": { "alias": "showPoints"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "xAxisId": { "alias": "xAxisId"; "required": false; "isSignal": true; }; "xField": { "alias": "xField"; "required": false; "isSignal": true; }; "yAxisId": { "alias": "yAxisId"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, ["dataLabelTemplate"], never, true, never>;
 }
 
 declare class AreaSeriesComponent implements OnInit {
@@ -5011,6 +5020,11 @@ declare class AreaSeriesComponent implements OnInit {
      * @default undefined
      */
     readonly keyField: _angular_core.InputSignal<ChartField | undefined>;
+    /**
+     * @description Stroke pattern used for the area's boundary line (`"solid"`, `"dashed"`, or `"dotted"`).
+     * @default "solid"
+     */
+    readonly lineStyle: _angular_core.InputSignal<ChartLineStyle>;
     /**
      * @description Name of the series displayed in legends and tooltips.
      * @default ""
@@ -5079,7 +5093,7 @@ declare class AreaSeriesComponent implements OnInit {
     constructor();
     ngOnInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AreaSeriesComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaSeriesComponent, "mona-area-series", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "dataLabels": { "alias": "dataLabels"; "required": false; "isSignal": true; }; "downsampling": { "alias": "downsampling"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "fillMode": { "alias": "fillMode"; "required": false; "isSignal": true; }; "fillOpacity": { "alias": "fillOpacity"; "required": false; "isSignal": true; }; "keyField": { "alias": "keyField"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "pointRadius": { "alias": "pointRadius"; "required": false; "isSignal": true; }; "seriesKey": { "alias": "seriesKey"; "required": false; "isSignal": true; }; "showPoints": { "alias": "showPoints"; "required": false; "isSignal": true; }; "stack": { "alias": "stack"; "required": false; "isSignal": true; }; "stackMode": { "alias": "stackMode"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "xAxisId": { "alias": "xAxisId"; "required": false; "isSignal": true; }; "xField": { "alias": "xField"; "required": false; "isSignal": true; }; "yAxisId": { "alias": "yAxisId"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, ["dataLabelTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaSeriesComponent, "mona-area-series", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "dataLabels": { "alias": "dataLabels"; "required": false; "isSignal": true; }; "downsampling": { "alias": "downsampling"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "fillMode": { "alias": "fillMode"; "required": false; "isSignal": true; }; "fillOpacity": { "alias": "fillOpacity"; "required": false; "isSignal": true; }; "keyField": { "alias": "keyField"; "required": false; "isSignal": true; }; "lineStyle": { "alias": "lineStyle"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "pointRadius": { "alias": "pointRadius"; "required": false; "isSignal": true; }; "seriesKey": { "alias": "seriesKey"; "required": false; "isSignal": true; }; "showPoints": { "alias": "showPoints"; "required": false; "isSignal": true; }; "stack": { "alias": "stack"; "required": false; "isSignal": true; }; "stackMode": { "alias": "stackMode"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "xAxisId": { "alias": "xAxisId"; "required": false; "isSignal": true; }; "xField": { "alias": "xField"; "required": false; "isSignal": true; }; "yAxisId": { "alias": "yAxisId"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, ["dataLabelTemplate"], never, true, never>;
 }
 
 declare class BarSeriesComponent implements OnInit {
@@ -7812,4 +7826,4 @@ declare class ChartBrushComponent implements OnInit {
 }
 
 export { AreaSeriesComponent, BarSeriesComponent, BubbleSeriesComponent, CandlestickSeriesComponent, ChartAngularAxisComponent, ChartAnnotationComponent, ChartAnnotationLabelTemplateDirective, ChartAxisLabelTemplateDirective, ChartBrushComponent, ChartCenterTemplateDirective, ChartComponent, ChartCrosshairComponent, ChartCrosshairLabelTemplateDirective, ChartDataLabelTemplateDirective, ChartExportError, ChartFunnelLabelTemplateDirective, ChartGaugeCenterTemplateDirective, ChartLegendComponent, ChartLegendItemTemplateDirective, ChartNoDataTemplateDirective, ChartRadialAxisComponent, ChartReferenceBandComponent, ChartReferenceLabelTemplateDirective, ChartReferenceLineComponent, ChartSelectionComponent, ChartSliceLabelTemplateDirective, ChartSubtitleTemplateDirective, ChartTitleTemplateDirective, ChartTooltipComponent, ChartTooltipTemplateDirective, ChartTreemapLabelTemplateDirective, ChartWaterfallLabelTemplateDirective, ChartXAxisComponent, ChartYAxisComponent, DonutSeriesComponent, FunnelSeriesComponent, GaugeSeriesComponent, HeatmapSeriesComponent, LineSeriesComponent, OhlcSeriesComponent, PieSeriesComponent, PolarSeriesComponent, RadarSeriesComponent, RadialBarSeriesComponent, RangeAreaSeriesComponent, RangeBarSeriesComponent, RoseSeriesComponent, ScatterSeriesComponent, TreemapSeriesComponent, WaterfallSeriesComponent, getChartSeriesFamily, isCartesianCoordinateFamily, isHierarchicalCoordinateFamily, isPolarCoordinateFamily };
-export type { ChartAnimationEasing, ChartAnimationInput, ChartAnimationOptions, ChartAnnotationAxisValue, ChartAnnotationLabelPlacement, ChartAnnotationLabelTemplateContext, ChartAnnotationMarker, ChartAreaFillMode, ChartAxisFormatter, ChartAxisLabelRotation, ChartAxisLabelTemplateContext, ChartAxisPosition, ChartAxisTick, ChartBarOrientation, ChartBrushActivation, ChartBrushAxisRange, ChartBrushCancelReason, ChartBrushCategoryRange, ChartBrushChangeEvent, ChartBrushContinuousRange, ChartBrushHitPolicy, ChartBrushLineStyle, ChartBrushMode, ChartBrushPhase, ChartBrushSelectionBehavior, ChartCategoryViewportWindow, ChartCenterTemplateContext, ChartColorLegendScale, ChartColorLegendStop, ChartColorLegendTick, ChartContinuousViewportWindow, ChartCoordinateSystem, ChartCrosshairAxisLabelContext, ChartCrosshairLineStyle, ChartCrosshairMode, ChartCrosshairResolvedAxisValue, ChartCrosshairSnapMode, ChartCrosshairSynchronizationOptions, ChartCurve, ChartDataLabelContext, ChartDataLabelFormatter, ChartDataLabelOptions, ChartDataLabelPosition, ChartDataLabelsInput, ChartDownloadOptions, ChartDownsamplingAlgorithm, ChartDownsamplingInput, ChartDownsamplingOptions, ChartExportBackground, ChartExportBaseOptions, ChartExportErrorCode, ChartExportFormat, ChartExportOptions, ChartExportPresentationOptions, ChartExportResult, ChartField, ChartFinancialDirection, ChartFinancialFillMode, ChartFunnelLabelContent, ChartFunnelLabelTemplateContext, ChartFunnelOrientation, ChartFunnelPointMetadata, ChartFunnelStageContext, ChartFunnelStageVisibilityEvent, ChartGaugeCenterTemplateContext, ChartGaugeIndicator, ChartHeaderAlignment, ChartHeatmapCategory, ChartHeatmapCellData, ChartHeatmapColorMode, ChartHierarchicalKind, ChartHierarchyNodeContext, ChartHierarchyPointMetadata, ChartLabelMeasurement, ChartLegendItem, ChartLegendItemKind, ChartLegendItemTemplateContext, ChartLegendMode, ChartNavigationAxisTarget, ChartNavigationInput, ChartNavigationOptions, ChartNumericScaleType, ChartOhlcPointValue, ChartOverlayLayer, ChartPadding, ChartPdfExportOptions, ChartPdfMargins, ChartPdfPageOptions, ChartPdfPageSize, ChartPdfRenderMode, ChartPngExportOptions, ChartPoint, ChartPointEvent, ChartPointFocusEvent, ChartPointValue, ChartPointValueKind, ChartPolarFillMode, ChartPolarLabelContent, ChartPolarLabelPosition, ChartPolarLabelSide, ChartRadialArcFillMode, ChartRadialCurve, ChartRadialDatumVisibilityEvent, ChartRadialFillMode, ChartRadialGridShape, ChartRangePointValue, ChartRect, ChartReferenceBandLabelContext, ChartReferenceLabelPosition, ChartReferenceLabelTemplateContext, ChartReferenceLineLabelContext, ChartReferenceLineStyle, ChartRendererMode, ChartRoseScaleMode, ChartScalarPointValue, ChartSelectedPoint, ChartSelectionChangeEvent, ChartSelectionChangeSource, ChartSelectionMode, ChartSeriesFamily, ChartSeriesStyle, ChartSeriesType, ChartSeriesVisibilityEvent, ChartSize, ChartSliceContext, ChartSliceLabelTemplateContext, ChartSliceVisibilityEvent, ChartStackMode, ChartSubtitleTemplateContext, ChartSvgExportOptions, ChartSynchronizationAxisMapping, ChartSynchronizationInput, ChartSynchronizationMode, ChartSynchronizationOptions, ChartTitleTemplateContext, ChartTooltipPointContext, ChartTooltipTemplateContext, ChartTreemapLabelTemplateContext, ChartTreemapNodeVisibilityEvent, ChartTreemapSort, ChartTreemapTile, ChartValueAccessor, ChartValueFormatter, ChartViewportAxisRef, ChartViewportChangeEvent, ChartViewportChangePhase, ChartViewportChangeSource, ChartViewportConstraint, ChartViewportLinkGroup, ChartViewportLinkMode, ChartViewportState, ChartViewportSynchronizationOptions, ChartViewportWindow, ChartWaterfallDatumKind, ChartWaterfallLabelTemplateContext, ChartWaterfallPointContext, ChartWaterfallPointValue, ChartWaterfallVisualKind, ChartXAxisPosition, ChartXAxisType, ChartYAxisPosition, ChartYAxisType, HeatmapCellClickEvent, HeatmapColorStop };
+export type { ChartAnimationEasing, ChartAnimationInput, ChartAnimationOptions, ChartAnnotationAxisValue, ChartAnnotationLabelPlacement, ChartAnnotationLabelTemplateContext, ChartAnnotationMarker, ChartAreaFillMode, ChartAxisFormatter, ChartAxisLabelRotation, ChartAxisLabelTemplateContext, ChartAxisPosition, ChartAxisTick, ChartBarOrientation, ChartBrushActivation, ChartBrushAxisRange, ChartBrushCancelReason, ChartBrushCategoryRange, ChartBrushChangeEvent, ChartBrushContinuousRange, ChartBrushHitPolicy, ChartBrushLineStyle, ChartBrushMode, ChartBrushPhase, ChartBrushSelectionBehavior, ChartCategoryViewportWindow, ChartCenterTemplateContext, ChartColorLegendScale, ChartColorLegendStop, ChartColorLegendTick, ChartContinuousViewportWindow, ChartCoordinateSystem, ChartCrosshairAxisLabelContext, ChartCrosshairLineStyle, ChartCrosshairMode, ChartCrosshairResolvedAxisValue, ChartCrosshairSnapMode, ChartCrosshairSynchronizationOptions, ChartCurve, ChartDataLabelContext, ChartDataLabelFormatter, ChartDataLabelOptions, ChartDataLabelPosition, ChartDataLabelsInput, ChartDownloadOptions, ChartDownsamplingAlgorithm, ChartDownsamplingInput, ChartDownsamplingOptions, ChartExportBackground, ChartExportBaseOptions, ChartExportErrorCode, ChartExportFormat, ChartExportOptions, ChartExportPresentationOptions, ChartExportResult, ChartField, ChartFinancialDirection, ChartFinancialFillMode, ChartFunnelLabelContent, ChartFunnelLabelTemplateContext, ChartFunnelOrientation, ChartFunnelPointMetadata, ChartFunnelStageContext, ChartFunnelStageVisibilityEvent, ChartGaugeCenterTemplateContext, ChartGaugeIndicator, ChartHeaderAlignment, ChartHeatmapCategory, ChartHeatmapCellData, ChartHeatmapColorMode, ChartHierarchicalKind, ChartHierarchyNodeContext, ChartHierarchyPointMetadata, ChartLabelMeasurement, ChartLegendItem, ChartLegendItemKind, ChartLegendItemTemplateContext, ChartLegendMode, ChartLineStyle, ChartNavigationAxisTarget, ChartNavigationInput, ChartNavigationOptions, ChartNumericScaleType, ChartOhlcPointValue, ChartOverlayLayer, ChartPadding, ChartPdfExportOptions, ChartPdfMargins, ChartPdfPageOptions, ChartPdfPageSize, ChartPdfRenderMode, ChartPngExportOptions, ChartPoint, ChartPointEvent, ChartPointFocusEvent, ChartPointValue, ChartPointValueKind, ChartPolarFillMode, ChartPolarLabelContent, ChartPolarLabelPosition, ChartPolarLabelSide, ChartRadialArcFillMode, ChartRadialCurve, ChartRadialDatumVisibilityEvent, ChartRadialFillMode, ChartRadialGridShape, ChartRangePointValue, ChartRect, ChartReferenceBandLabelContext, ChartReferenceLabelPosition, ChartReferenceLabelTemplateContext, ChartReferenceLineLabelContext, ChartReferenceLineStyle, ChartRendererMode, ChartRoseScaleMode, ChartScalarPointValue, ChartSelectedPoint, ChartSelectionChangeEvent, ChartSelectionChangeSource, ChartSelectionMode, ChartSeriesFamily, ChartSeriesStyle, ChartSeriesType, ChartSeriesVisibilityEvent, ChartSize, ChartSliceContext, ChartSliceLabelTemplateContext, ChartSliceVisibilityEvent, ChartStackMode, ChartSubtitleTemplateContext, ChartSvgExportOptions, ChartSynchronizationAxisMapping, ChartSynchronizationInput, ChartSynchronizationMode, ChartSynchronizationOptions, ChartTitleTemplateContext, ChartTooltipPointContext, ChartTooltipTemplateContext, ChartTreemapLabelTemplateContext, ChartTreemapNodeVisibilityEvent, ChartTreemapSort, ChartTreemapTile, ChartValueAccessor, ChartValueFormatter, ChartViewportAxisRef, ChartViewportChangeEvent, ChartViewportChangePhase, ChartViewportChangeSource, ChartViewportConstraint, ChartViewportLinkGroup, ChartViewportLinkMode, ChartViewportState, ChartViewportSynchronizationOptions, ChartViewportWindow, ChartWaterfallDatumKind, ChartWaterfallLabelTemplateContext, ChartWaterfallPointContext, ChartWaterfallPointValue, ChartWaterfallVisualKind, ChartXAxisPosition, ChartXAxisType, ChartYAxisPosition, ChartYAxisType, HeatmapCellClickEvent, HeatmapColorStop };

package/types/nanahoshi-mona-ui-segmented.d.ts

@@ -47,9 +47,11 @@ interface SegmentedItemTemplateContext<T extends SegmentedValue = SegmentedValue
 }
 
 declare const segmentedContainerThemeVariants: (props?: ({
+    alignment?: "start" | "center" | "end" | "stretch" | null | undefined;
     rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const segmentedOptionThemeVariants: (props?: ({
+    alignment?: "start" | "center" | "end" | "stretch" | null | undefined;
     rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -75,6 +77,11 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     protected readonly optionElements: _angular_core.Signal<readonly ElementRef<HTMLLabelElement>[]>;
     protected readonly selectedIndex: _angular_core.Signal<number>;
     protected readonly selectedOptionDisabled: _angular_core.Signal<boolean>;
+    /**
+     * @description Controls the alignment of the items inside the segmented component.
+     * @default "stretch"
+     */
+    readonly alignment: _angular_core.InputSignal<"start" | "center" | "end" | "stretch" | null | undefined>;
     /**
      * @description Controls whether the selection indicator animates between selected options.
      * When false, selection changes are applied immediately without transition.
@@ -144,7 +151,7 @@ declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> impl
     private setupResizeObserver;
     private updateIndicatorGeometry;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent<any>, "mona-segmented", never, { "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, ["itemTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent<any>, "mona-segmented", never, { "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, ["itemTemplate"], never, true, never>;
 }
 
 /**