@mesgflow/ui-kit 0.6.0 → 0.7.0

package/fesm2022/mesgflow-ui-kit-splitter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-splitter.mjs","sources":["../../../projects/ui-kit/splitter/splitter.ts","../../../projects/ui-kit/splitter/splitter.html","../../../projects/ui-kit/splitter/mesgflow-ui-kit-splitter.ts"],"sourcesContent":["import { Component, ElementRef, computed, inject, input, linkedSignal } from '@angular/core';\r\nimport { cn, inlineStartRatio, isRtl } from '@mesgflow/ui-kit/core';\r\n\r\n/**\r\n * `<mf-splitter><div splitterPane1>Sol</div><div splitterPane2>Sağ</div></mf-splitter>`\r\n *\r\n * Tuvalin iki yanındaki yeniden boyutlanabilir paneller için — `@angular/aria`'da\r\n * hazır bir splitter pattern'i YOK, `role=\"separator\"` + klavye (ok tuşları/\r\n * Home/End) + pointer sürükleme ELLE kuruldu (Slider'daki AYNI hand-rolled\r\n * ARIA yaklaşımı). Yüzde tabanlı bölünme (`flex-basis: %`) — piksel değil,\r\n * konteyner yeniden boyutlandığında oran korunur.\r\n *\r\n * `currentSplit` BİLEREK `linkedSignal(() => this.initialSplit())` — düz bir\r\n * `signal(50)` + constructor'da `.set(this.initialSplit())` YERİNE (BULUNAN\r\n * GERÇEK HATA: constructor çalıştığı anda `input()` sinyali HENÜZ bağlanan\r\n * değere sahip DEĞİL, `initialSplit()` varsayılana — 50 — düşüyor ve\r\n * `currentSplit` bir daha ASLA güncellenmiyordu; `[split]=\"20\"` gibi\r\n * varsayılan-DIŞI bir değer SESSİZCE yok sayılıyordu, gerçek tarayıcıda\r\n * `aria-valuenow` okununca ortaya çıktı). `linkedSignal` hem `initialSplit()`\r\n * değiştiğinde YENİDEN hesaplanıyor HEM DE sürükleme/klavye ile YEREL\r\n * `.set()`'e izin veriyor (CLAUDE.md: \"birden çok reaktif kaynaktan türeyen\r\n * VE senkron kalması gereken durum için `linkedSignal()`\").\r\n */\r\n@Component({\r\n  selector: 'mf-splitter',\r\n  exportAs: 'mfSplitter',\r\n  host: { '[class]': 'hostClasses()' },\r\n  templateUrl: './splitter.html',\r\n})\r\nexport class Splitter {\r\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\r\n  readonly min = input(10);\r\n  readonly max = input(90);\r\n  // Alias `split` mevcut public API — yeniden adlandırma kırıcı, ileri bir sürümde ele alınacak.\r\n  // eslint-disable-next-line @angular-eslint/no-input-rename\r\n  readonly initialSplit = input(50, { alias: 'split' });\r\n\r\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\r\n\r\n  protected readonly currentSplit = linkedSignal(() => this.initialSplit());\r\n\r\n  protected readonly hostClasses = computed(() =>\r\n    cn('flex h-full w-full', this.orientation() === 'vertical' ? 'flex-col' : 'flex-row'),\r\n  );\r\n\r\n  private clamp(v: number): number {\r\n    return Math.min(this.max(), Math.max(this.min(), v));\r\n  }\r\n\r\n  protected onPointerDown(event: PointerEvent): void {\r\n    const handle = event.currentTarget as HTMLElement;\r\n    handle.setPointerCapture(event.pointerId);\r\n  }\r\n\r\n  protected onPointerMove(event: PointerEvent): void {\r\n    if (event.buttons !== 1) return;\r\n    const rect = this.elementRef.nativeElement.getBoundingClientRect();\r\n    const isVertical = this.orientation() === 'vertical';\r\n    // Yatayda ilk panel satır başında durur — RTL'de sağda; oran oradan ölçülür.\r\n    const ratio = isVertical\r\n      ? (event.clientY - rect.top) / rect.height\r\n      : inlineStartRatio(event.clientX, rect, isRtl(this.elementRef.nativeElement));\r\n    this.currentSplit.set(this.clamp(Math.round(ratio * 100)));\r\n  }\r\n\r\n  protected onPointerUp(event: PointerEvent): void {\r\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\r\n  }\r\n\r\n  protected onKeydown(event: KeyboardEvent): void {\r\n    const isVertical = this.orientation() === 'vertical';\r\n    // Yatay oklar görsel yöne göre: RTL'de ← ayırıcıyı satır sonuna (sola) iter, ilk paneli büyütür.\r\n    const rtl = !isVertical && isRtl(this.elementRef.nativeElement);\r\n    const increaseKey = isVertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';\r\n    const decreaseKey = isVertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';\r\n    if (event.key === increaseKey) {\r\n      event.preventDefault();\r\n      this.currentSplit.update((v) => this.clamp(v + 2));\r\n    } else if (event.key === decreaseKey) {\r\n      event.preventDefault();\r\n      this.currentSplit.update((v) => this.clamp(v - 2));\r\n    } else if (event.key === 'Home') {\r\n      event.preventDefault();\r\n      this.currentSplit.set(this.min());\r\n    } else if (event.key === 'End') {\r\n      event.preventDefault();\r\n      this.currentSplit.set(this.max());\r\n    }\r\n  }\r\n}\r\n","<div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex]=\"currentSplit() + '% 0 0'\">\r\n  <ng-content select=\"[splitterPane1]\" />\r\n</div>\r\n\r\n<div\r\n  role=\"separator\"\r\n  tabindex=\"0\"\r\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\r\n  [attr.aria-valuenow]=\"currentSplit()\"\r\n  [attr.aria-valuemin]=\"min()\"\r\n  [attr.aria-valuemax]=\"max()\"\r\n  [class]=\"\r\n    'shrink-0 touch-none bg-border transition-colors duration-fast ease-emphasis hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    (orientation() === 'vertical' ? 'h-1 w-full cursor-row-resize' : 'w-1 cursor-col-resize')\r\n  \"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (pointermove)=\"onPointerMove($event)\"\r\n  (pointerup)=\"onPointerUp($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n></div>\r\n\r\n<div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\r\n  <ng-content select=\"[splitterPane2]\" />\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mesgflow-ui-kit-splitter.mjs","sources":["../../../projects/ui-kit/splitter/splitter.ts","../../../projects/ui-kit/splitter/splitter.html","../../../projects/ui-kit/splitter/panel-group.ts","../../../projects/ui-kit/splitter/mesgflow-ui-kit-splitter.ts"],"sourcesContent":["import { Component, ElementRef, computed, inject, input, linkedSignal } from '@angular/core';\r\nimport { cn, inlineStartRatio, isRtl } from '@mesgflow/ui-kit/core';\r\n\r\n/**\r\n * `<mf-splitter><div splitterPane1>Sol</div><div splitterPane2>Sağ</div></mf-splitter>`\r\n *\r\n * Tuvalin iki yanındaki yeniden boyutlanabilir paneller için — `@angular/aria`'da\r\n * hazır bir splitter pattern'i YOK, `role=\"separator\"` + klavye (ok tuşları/\r\n * Home/End) + pointer sürükleme ELLE kuruldu (Slider'daki AYNI hand-rolled\r\n * ARIA yaklaşımı). Yüzde tabanlı bölünme (`flex-basis: %`) — piksel değil,\r\n * konteyner yeniden boyutlandığında oran korunur.\r\n *\r\n * `currentSplit` BİLEREK `linkedSignal(() => this.initialSplit())` — düz bir\r\n * `signal(50)` + constructor'da `.set(this.initialSplit())` YERİNE (BULUNAN\r\n * GERÇEK HATA: constructor çalıştığı anda `input()` sinyali HENÜZ bağlanan\r\n * değere sahip DEĞİL, `initialSplit()` varsayılana — 50 — düşüyor ve\r\n * `currentSplit` bir daha ASLA güncellenmiyordu; `[split]=\"20\"` gibi\r\n * varsayılan-DIŞI bir değer SESSİZCE yok sayılıyordu, gerçek tarayıcıda\r\n * `aria-valuenow` okununca ortaya çıktı). `linkedSignal` hem `initialSplit()`\r\n * değiştiğinde YENİDEN hesaplanıyor HEM DE sürükleme/klavye ile YEREL\r\n * `.set()`'e izin veriyor (CLAUDE.md: \"birden çok reaktif kaynaktan türeyen\r\n * VE senkron kalması gereken durum için `linkedSignal()`\").\r\n */\r\n@Component({\r\n  selector: 'mf-splitter',\r\n  exportAs: 'mfSplitter',\r\n  host: { '[class]': 'hostClasses()' },\r\n  templateUrl: './splitter.html',\r\n})\r\nexport class Splitter {\r\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\r\n  readonly min = input(10);\r\n  readonly max = input(90);\r\n  // Alias `split` mevcut public API — yeniden adlandırma kırıcı, ileri bir sürümde ele alınacak.\r\n  // eslint-disable-next-line @angular-eslint/no-input-rename\r\n  readonly initialSplit = input(50, { alias: 'split' });\r\n\r\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\r\n\r\n  protected readonly currentSplit = linkedSignal(() => this.initialSplit());\r\n\r\n  protected readonly hostClasses = computed(() =>\r\n    cn('flex h-full w-full', this.orientation() === 'vertical' ? 'flex-col' : 'flex-row'),\r\n  );\r\n\r\n  private clamp(v: number): number {\r\n    return Math.min(this.max(), Math.max(this.min(), v));\r\n  }\r\n\r\n  protected onPointerDown(event: PointerEvent): void {\r\n    const handle = event.currentTarget as HTMLElement;\r\n    handle.setPointerCapture(event.pointerId);\r\n  }\r\n\r\n  protected onPointerMove(event: PointerEvent): void {\r\n    if (event.buttons !== 1) return;\r\n    const rect = this.elementRef.nativeElement.getBoundingClientRect();\r\n    const isVertical = this.orientation() === 'vertical';\r\n    // Yatayda ilk panel satır başında durur — RTL'de sağda; oran oradan ölçülür.\r\n    const ratio = isVertical\r\n      ? (event.clientY - rect.top) / rect.height\r\n      : inlineStartRatio(event.clientX, rect, isRtl(this.elementRef.nativeElement));\r\n    this.currentSplit.set(this.clamp(Math.round(ratio * 100)));\r\n  }\r\n\r\n  protected onPointerUp(event: PointerEvent): void {\r\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\r\n  }\r\n\r\n  protected onKeydown(event: KeyboardEvent): void {\r\n    const isVertical = this.orientation() === 'vertical';\r\n    // Yatay oklar görsel yöne göre: RTL'de ← ayırıcıyı satır sonuna (sola) iter, ilk paneli büyütür.\r\n    const rtl = !isVertical && isRtl(this.elementRef.nativeElement);\r\n    const increaseKey = isVertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';\r\n    const decreaseKey = isVertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';\r\n    if (event.key === increaseKey) {\r\n      event.preventDefault();\r\n      this.currentSplit.update((v) => this.clamp(v + 2));\r\n    } else if (event.key === decreaseKey) {\r\n      event.preventDefault();\r\n      this.currentSplit.update((v) => this.clamp(v - 2));\r\n    } else if (event.key === 'Home') {\r\n      event.preventDefault();\r\n      this.currentSplit.set(this.min());\r\n    } else if (event.key === 'End') {\r\n      event.preventDefault();\r\n      this.currentSplit.set(this.max());\r\n    }\r\n  }\r\n}\r\n","<div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex]=\"currentSplit() + '% 0 0'\">\r\n  <ng-content select=\"[splitterPane1]\" />\r\n</div>\r\n\r\n<div\r\n  role=\"separator\"\r\n  tabindex=\"0\"\r\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\r\n  [attr.aria-valuenow]=\"currentSplit()\"\r\n  [attr.aria-valuemin]=\"min()\"\r\n  [attr.aria-valuemax]=\"max()\"\r\n  [class]=\"\r\n    'shrink-0 touch-none bg-border transition-colors duration-fast ease-emphasis hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    (orientation() === 'vertical' ? 'h-1 w-full cursor-row-resize' : 'w-1 cursor-col-resize')\r\n  \"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (pointermove)=\"onPointerMove($event)\"\r\n  (pointerup)=\"onPointerUp($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n></div>\r\n\r\n<div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\r\n  <ng-content select=\"[splitterPane2]\" />\r\n</div>\r\n","import {\r\n  Component,\r\n  ElementRef,\r\n  computed,\r\n  contentChildren,\r\n  effect,\r\n  inject,\r\n  input,\r\n  model,\r\n  signal,\r\n} from '@angular/core';\r\nimport { MF_PANEL_GROUP_LABELS, isRtl } from '@mesgflow/ui-kit/core';\r\n\r\n@Component({\r\n  selector: 'mf-panel',\r\n  exportAs: 'mfPanel',\r\n  host: {\r\n    class: 'relative min-h-0 min-w-0 overflow-auto',\r\n    '[style.flex-basis.%]': 'size()',\r\n    '[style.flex-grow]': '0',\r\n    '[style.flex-shrink]': '1',\r\n  },\r\n  template: '<ng-content />',\r\n})\r\nexport class Panel {\r\n  /** % */\r\n  readonly minSize = input(10);\r\n  /** % */\r\n  readonly maxSize = input(90);\r\n  /** Grup tarafından yazılır (%). */\r\n  readonly size = signal(0);\r\n}\r\n\r\n/**\r\n * `<mf-panel-group [(sizes)]=\"layout\" orientation=\"horizontal\">\r\n *    <mf-panel [minSize]=\"15\">Gezgin</mf-panel>\r\n *    <mf-panel-resizer />\r\n *    <mf-panel>Editör</mf-panel>\r\n *    <mf-panel-resizer />\r\n *    <mf-panel [minSize]=\"20\">Önizleme</mf-panel>\r\n *  </mf-panel-group>`\r\n *\r\n * N panelli yeniden boyutlandırma (IDE/e-posta editörü düzeni). `sizes`\r\n * yüzde dizisi (toplam 100); her ayırıcı iki komşu paneli etkiler.\r\n * Ayırıcı WAI-ARIA \"Window Splitter\": `role=\"separator\"` + `aria-valuenow`\r\n * (sol panelin yüzdesi) + ok tuşları (Shift ile 10), Home/End, çift tık eşitler.\r\n * `minSize`/`maxSize` panel başına sınır. `sizes` verilmezse eşit bölünür.\r\n */\r\n@Component({\r\n  selector: 'mf-panel-group',\r\n  exportAs: 'mfPanelGroup',\r\n  host: {\r\n    '[class]': \"'flex h-full w-full ' + (orientation() === 'vertical' ? 'flex-col' : 'flex-row')\",\r\n    '[attr.data-orientation]': 'orientation()',\r\n  },\r\n  template: '<ng-content />',\r\n})\r\nexport class PanelGroup {\r\n  readonly sizes = model<number[]>([]);\r\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\r\n\r\n  readonly panels = contentChildren(Panel);\r\n  readonly resizers = contentChildren(PanelResizer);\r\n  readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\r\n\r\n  /** Etkin boyutlar — `sizes` panel sayısıyla uyuşmuyorsa eşit bölünmüş. */\r\n  readonly resolved = computed(() => {\r\n    const n = this.panels().length;\r\n    const sizes = this.sizes();\r\n    if (sizes.length === n && n > 0) return sizes;\r\n    return Array.from({ length: n }, () => 100 / Math.max(1, n));\r\n  });\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      const sizes = this.resolved();\r\n      this.panels().forEach((p, i) => p.size.set(sizes[i] ?? 0));\r\n      this.resizers().forEach((r, i) => r.index.set(i));\r\n    });\r\n  }\r\n\r\n  /** `index` numaralı ayırıcıyı `delta` yüzde kaydırır (komşu iki panel arasında). */\r\n  resize(index: number, delta: number): void {\r\n    const sizes = [...this.resolved()];\r\n    const a = this.panels()[index];\r\n    const b = this.panels()[index + 1];\r\n    if (!a || !b) return;\r\n    const total = sizes[index]! + sizes[index + 1]!;\r\n    const min = a.minSize();\r\n    const max = Math.min(a.maxSize(), total - b.minSize());\r\n    const next = Math.min(max, Math.max(min, Math.max(total - b.maxSize(), sizes[index]! + delta)));\r\n    sizes[index] = +next.toFixed(2);\r\n    sizes[index + 1] = +(total - next).toFixed(2);\r\n    this.sizes.set(sizes);\r\n  }\r\n\r\n  /** İki komşuyu eşitler (çift tık). */\r\n  equalize(index: number): void {\r\n    const sizes = this.resolved();\r\n    const half = (sizes[index]! + sizes[index + 1]!) / 2;\r\n    this.resize(index, half - sizes[index]!);\r\n  }\r\n}\r\n\r\n@Component({\r\n  selector: 'mf-panel-resizer',\r\n  template: '',\r\n  exportAs: 'mfPanelResizer',\r\n  host: {\r\n    role: 'separator',\r\n    tabindex: '0',\r\n    '[attr.aria-orientation]': \"group.orientation() === 'horizontal' ? 'vertical' : 'horizontal'\",\r\n    '[attr.aria-valuenow]': 'valueNow()',\r\n    '[attr.aria-valuemin]': 'valueMin()',\r\n    '[attr.aria-valuemax]': 'valueMax()',\r\n    '[attr.aria-label]': 'label()',\r\n    '[class]': 'classes()',\r\n    '(keydown)': 'onKeydown($event)',\r\n    '(pointerdown)': 'onPointerDown($event)',\r\n    '(pointermove)': 'onPointerMove($event)',\r\n    '(pointerup)': 'onPointerUp($event)',\r\n    '(dblclick)': 'group.equalize(index())',\r\n  },\r\n})\r\nexport class PanelResizer {\r\n  protected readonly group = inject(PanelGroup);\r\n  private readonly labels = inject(MF_PANEL_GROUP_LABELS);\r\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  readonly index = signal(0);\r\n  private startPos = 0;\r\n  private startSize = 0;\r\n  private dragging = false;\r\n\r\n  protected readonly valueNow = computed(() =>\r\n    Math.round(this.group.resolved()[this.index()] ?? 0),\r\n  );\r\n  protected readonly valueMin = computed(() => this.group.panels()[this.index()]?.minSize() ?? 0);\r\n  protected readonly valueMax = computed(() => this.group.panels()[this.index()]?.maxSize() ?? 100);\r\n  protected readonly label = computed(() =>\r\n    this.labels().resize.replace('{index}', String(this.index() + 1)),\r\n  );\r\n\r\n  protected readonly classes = computed(() => {\r\n    const vertical = this.group.orientation() === 'vertical';\r\n    return [\r\n      'group/resizer relative z-[1] flex shrink-0 items-center justify-center outline-none touch-none select-none',\r\n      'before:absolute before:rounded-full before:bg-border before:transition-colors before:duration-fast',\r\n      'hover:before:bg-accent focus-visible:before:bg-focus-ring active:before:bg-accent',\r\n      vertical\r\n        ? 'h-2 w-full cursor-row-resize before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 hover:before:h-0.5'\r\n        : 'h-full w-2 cursor-col-resize before:inset-0 before:mx-auto before:w-px hover:before:w-0.5',\r\n    ].join(' ');\r\n  });\r\n\r\n  protected onKeydown(e: Event): void {\r\n    const event = e as KeyboardEvent;\r\n    const vertical = this.group.orientation() === 'vertical';\r\n    const rtl = !vertical && isRtl(this.el);\r\n    const step = event.shiftKey ? 10 : 2;\r\n    const grow = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';\r\n    const shrink = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';\r\n    const i = this.index();\r\n    if (event.key === grow) this.group.resize(i, step);\r\n    else if (event.key === shrink) this.group.resize(i, -step);\r\n    else if (event.key === 'Home') this.group.resize(i, -100);\r\n    else if (event.key === 'End') this.group.resize(i, 100);\r\n    else if (event.key === 'Enter') this.group.equalize(i);\r\n    else return;\r\n    event.preventDefault();\r\n  }\r\n\r\n  protected onPointerDown(e: Event): void {\r\n    const event = e as PointerEvent;\r\n    this.dragging = true;\r\n    this.el.setPointerCapture?.(event.pointerId);\r\n    this.startPos = this.group.orientation() === 'vertical' ? event.clientY : event.clientX;\r\n    this.startSize = this.group.resolved()[this.index()] ?? 0;\r\n    event.preventDefault();\r\n  }\r\n\r\n  protected onPointerMove(e: Event): void {\r\n    const event = e as PointerEvent;\r\n    if (!this.dragging) return;\r\n    const rect = this.group.host.nativeElement.getBoundingClientRect();\r\n    const vertical = this.group.orientation() === 'vertical';\r\n    const px = (vertical ? event.clientY : event.clientX) - this.startPos;\r\n    const total = vertical ? rect.height : rect.width;\r\n    const dir = !vertical && isRtl(this.el) ? -1 : 1;\r\n    const target = this.startSize + (dir * px * 100) / total;\r\n    this.group.resize(this.index(), target - (this.group.resolved()[this.index()] ?? 0));\r\n  }\r\n\r\n  protected onPointerUp(e: Event): void {\r\n    const event = e as PointerEvent;\r\n    this.dragging = false;\r\n    this.el.releasePointerCapture?.(event.pointerId);\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mesgflow-ui-kit-stat-tile.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, Component } from '@angular/core';
+import { input, booleanAttribute, computed, inject, Component } from '@angular/core';
 import { Card } from '@mesgflow/ui-kit/card';
 import { Sparkline } from '@mesgflow/ui-kit/chart';
-import { cn } from '@mesgflow/ui-kit/core';
+import { cn, MF_STAT_TILE_LABELS } from '@mesgflow/ui-kit/core';
 import { Icon } from '@mesgflow/ui-kit/icon';
 import { cva } from 'class-variance-authority';
 
@@ -75,6 +75,13 @@ class StatTile {
     ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
     deltaIcon = computed(() => DELTA_ICON[this.deltaDirection()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "deltaIcon" }] : /* istanbul ignore next */ []));
+    labels = inject(MF_STAT_TILE_LABELS);
+    /** Yön ikon ile ÇİZİLİR ama ekran okuyucuya metin olarak da söylenir. */
+    deltaText = computed(() => {
+        const l = this.labels();
+        return { up: l.increase, down: l.decrease, flat: l.noChange }[this.deltaDirection()];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
     deltaClasses = computed(() => {
         const direction = this.deltaDirection();
         const good = direction === 'up' ? this.upIsGood() : !this.upIsGood();
@@ -83,11 +90,11 @@ class StatTile {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "deltaClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StatTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StatTile, isStandalone: true, selector: "mf-stat-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaDirection: { classPropertyName: "deltaDirection", publicName: "deltaDirection", isSignal: true, isRequired: false, transformFunction: null }, upIsGood: { classPropertyName: "upIsGood", publicName: "upIsGood", isSignal: true, isRequired: false, transformFunction: null }, deltaCaption: { classPropertyName: "deltaCaption", publicName: "deltaCaption", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block @container" }, ngImport: i0, template: "<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: Card, selector: "[mfCard]", inputs: ["padding", "interactive"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Sparkline, selector: "mf-sparkline", inputs: ["values", "ariaLabel", "width", "height", "area"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StatTile, isStandalone: true, selector: "mf-stat-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaDirection: { classPropertyName: "deltaDirection", publicName: "deltaDirection", isSignal: true, isRequired: false, transformFunction: null }, upIsGood: { classPropertyName: "upIsGood", publicName: "upIsGood", isSignal: true, isRequired: false, transformFunction: null }, deltaCaption: { classPropertyName: "deltaCaption", publicName: "deltaCaption", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block @container" }, ngImport: i0, template: "<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          <span class=\"sr-only\">{{ deltaText() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: Card, selector: "[mfCard]", inputs: ["appearance", "padding", "interactive"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Sparkline, selector: "mf-sparkline", inputs: ["values", "ariaLabel", "width", "height", "area"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StatTile, decorators: [{
             type: Component,
-            args: [{ selector: 'mf-stat-tile', imports: [Card, Icon, Sparkline], host: { class: 'block @container' }, template: "<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'mf-stat-tile', imports: [Card, Icon, Sparkline], host: { class: 'block @container' }, template: "<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          <span class=\"sr-only\">{{ deltaText() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaDirection", required: false }] }], upIsGood: [{ type: i0.Input, args: [{ isSignal: true, alias: "upIsGood", required: false }] }], deltaCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaCaption", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], trendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendLabel", required: false }] }] } });
 
 /**

package/fesm2022/mesgflow-ui-kit-stat-tile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-stat-tile.mjs","sources":["../../../projects/ui-kit/stat-tile/stat-tile.variants.ts","../../../projects/ui-kit/stat-tile/stat-tile.ts","../../../projects/ui-kit/stat-tile/stat-tile.html","../../../projects/ui-kit/stat-tile/mesgflow-ui-kit-stat-tile.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\n/** Tonal ikon dolgusu — Badge/Avatar'daki AYNI tonal işaret rol token'ı (`bg-X-tint text-X-tint-fg`, `color-mix()` tabanlı), bkz. projects/ui-kit/README.md \"Token mimarisi\". */\r\nexport const statTileIconVariants = cva(\r\n  'flex h-10 w-10 shrink-0 items-center justify-center rounded-md',\r\n  {\r\n    variants: {\r\n      tone: {\r\n        neutral: 'bg-surface-alt text-fg-muted',\r\n        primary: 'bg-primary-tint text-primary-tint-fg',\r\n        success: 'bg-success-tint text-success-tint-fg',\r\n        warning: 'bg-warning-tint text-warning-tint-fg',\r\n        danger: 'bg-danger-tint text-danger-tint-fg',\r\n        info: 'bg-info-tint text-info-tint-fg',\r\n        help: 'bg-help-tint text-help-tint-fg',\r\n      },\r\n    },\r\n    defaultVariants: { tone: 'neutral' },\r\n  },\r\n);\r\n\r\nexport type StatTileTone = VariantProps<typeof statTileIconVariants>['tone'];\r\n","import { Component, booleanAttribute, computed, input } from '@angular/core';\r\nimport { Card } from '@mesgflow/ui-kit/card';\r\nimport { Sparkline } from '@mesgflow/ui-kit/chart';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { statTileIconVariants, type StatTileTone } from './stat-tile.variants';\r\n\r\nexport type StatTileDeltaDirection = 'up' | 'down' | 'flat';\r\n\r\nconst DELTA_ICON: Record<StatTileDeltaDirection, string> = {\r\n  up: 'trending_up',\r\n  down: 'trending_down',\r\n  flat: 'trending_flat',\r\n};\r\n\r\n/**\r\n * `<mf-stat-tile label=\"Aktif üye\" value=\"1.284\" delta=\"+12%\" deltaDirection=\"up\"\r\n *   deltaCaption=\"geçen aya göre\" [trend]=\"last12\" trendLabel=\"Son 12 ay\" />`\r\n *\r\n * KPI şeridinin tek birimi — dataviz \"figür sözleşmesi\": `label` · `value` · opsiyonel `delta`\r\n * (işaretli, adı verilen bir döneme göre) · opsiyonel `trend` (sparkline, güncel dönem vurgulu).\r\n *\r\n * Delta rengi = YÖN × \"yukarı iyi mi\" (`upIsGood` — hata oranında düşüş iyidir): iyi → success,\r\n * kötü → danger, yatay → nötr. Renk ASLA tek başına anlam taşımaz: yön ikonu + işaretli metin\r\n * her zaman yanında. Değer büyük tek başına bir sayı olduğu için orantılı rakam (tabular DEĞİL —\r\n * `tabular-nums` \"121\"i büyük boyutta dağınık gösterir).\r\n *\r\n * Ray motifi BİLEREK yok — README bu motifi 4 yerle sınırlıyor, StatTile beşinci yer olmuyor.\r\n * Dar bir ızgara hücresinde (16rem altı, `@container`) ikon metnin ÜSTÜNE geçer — değer satırı daralmaz.\r\n * `@container` (inline-size containment) host'un genişliği İÇERİKTEN gelemez demek: ızgara/blok\r\n * içinde doğal çalışır; genişliği verilmemiş bir flex öğesi olarak kullanırken `flex-1`/`w-*` verin.\r\n */\r\n@Component({\r\n  selector: 'mf-stat-tile',\r\n  imports: [Card, Icon, Sparkline],\r\n  host: { class: 'block @container' },\r\n  templateUrl: './stat-tile.html',\r\n})\r\nexport class StatTile {\r\n  readonly label = input.required<string>();\r\n  readonly value = input.required<string>();\r\n  readonly icon = input<string>('');\r\n  readonly caption = input<string>('');\r\n  readonly tone = input<StatTileTone>('neutral');\r\n\r\n  /** Görüntülenecek işaretli değişim (\"+12%\", \"−3\"). Boşsa delta satırı çizilmez. */\r\n  readonly delta = input('');\r\n  readonly deltaDirection = input<StatTileDeltaDirection>('flat');\r\n  /** Artış iyi mi? Hata oranı, churn, yanıt süresi gibi metriklerde `false`. */\r\n  readonly upIsGood = input(true, { transform: booleanAttribute });\r\n  /** Karşılaştırılan dönem (\"geçen aya göre\") — tüketici metni, kit varsayılanı YOK. */\r\n  readonly deltaCaption = input('');\r\n  /** Sparkline değerleri (en az 2). Güncel dönem vurgu renginde çizilir. */\r\n  readonly trend = input<readonly number[]>([]);\r\n  /** Sparkline'ın erişilebilir adı; boşsa süs sayılır (değer zaten metinde). */\r\n  readonly trendLabel = input('');\r\n\r\n  protected readonly iconClasses = computed(() => cn(statTileIconVariants({ tone: this.tone() })));\r\n\r\n  protected readonly deltaIcon = computed(() => DELTA_ICON[this.deltaDirection()]);\r\n\r\n  protected readonly deltaClasses = computed(() => {\r\n    const direction = this.deltaDirection();\r\n    const good = direction === 'up' ? this.upIsGood() : !this.upIsGood();\r\n    const color = direction === 'flat' ? 'text-fg-muted' : good ? 'text-success' : 'text-danger';\r\n    return cn('inline-flex items-center gap-0.5 font-medium tabular-nums', color);\r\n  });\r\n}\r\n","<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mesgflow-ui-kit-stat-tile.mjs","sources":["../../../projects/ui-kit/stat-tile/stat-tile.variants.ts","../../../projects/ui-kit/stat-tile/stat-tile.ts","../../../projects/ui-kit/stat-tile/stat-tile.html","../../../projects/ui-kit/stat-tile/mesgflow-ui-kit-stat-tile.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\n/** Tonal ikon dolgusu — Badge/Avatar'daki AYNI tonal işaret rol token'ı (`bg-X-tint text-X-tint-fg`, `color-mix()` tabanlı), bkz. projects/ui-kit/README.md \"Token mimarisi\". */\r\nexport const statTileIconVariants = cva(\r\n  'flex h-10 w-10 shrink-0 items-center justify-center rounded-md',\r\n  {\r\n    variants: {\r\n      tone: {\r\n        neutral: 'bg-surface-alt text-fg-muted',\r\n        primary: 'bg-primary-tint text-primary-tint-fg',\r\n        success: 'bg-success-tint text-success-tint-fg',\r\n        warning: 'bg-warning-tint text-warning-tint-fg',\r\n        danger: 'bg-danger-tint text-danger-tint-fg',\r\n        info: 'bg-info-tint text-info-tint-fg',\r\n        help: 'bg-help-tint text-help-tint-fg',\r\n      },\r\n    },\r\n    defaultVariants: { tone: 'neutral' },\r\n  },\r\n);\r\n\r\nexport type StatTileTone = VariantProps<typeof statTileIconVariants>['tone'];\r\n","import { Component, booleanAttribute, computed, inject, input } from '@angular/core';\r\nimport { Card } from '@mesgflow/ui-kit/card';\r\nimport { Sparkline } from '@mesgflow/ui-kit/chart';\r\nimport { MF_STAT_TILE_LABELS, cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { statTileIconVariants, type StatTileTone } from './stat-tile.variants';\r\n\r\nexport type StatTileDeltaDirection = 'up' | 'down' | 'flat';\r\n\r\nconst DELTA_ICON: Record<StatTileDeltaDirection, string> = {\r\n  up: 'trending_up',\r\n  down: 'trending_down',\r\n  flat: 'trending_flat',\r\n};\r\n\r\n/**\r\n * `<mf-stat-tile label=\"Aktif üye\" value=\"1.284\" delta=\"+12%\" deltaDirection=\"up\"\r\n *   deltaCaption=\"geçen aya göre\" [trend]=\"last12\" trendLabel=\"Son 12 ay\" />`\r\n *\r\n * KPI şeridinin tek birimi — dataviz \"figür sözleşmesi\": `label` · `value` · opsiyonel `delta`\r\n * (işaretli, adı verilen bir döneme göre) · opsiyonel `trend` (sparkline, güncel dönem vurgulu).\r\n *\r\n * Delta rengi = YÖN × \"yukarı iyi mi\" (`upIsGood` — hata oranında düşüş iyidir): iyi → success,\r\n * kötü → danger, yatay → nötr. Renk ASLA tek başına anlam taşımaz: yön ikonu + işaretli metin\r\n * her zaman yanında. Değer büyük tek başına bir sayı olduğu için orantılı rakam (tabular DEĞİL —\r\n * `tabular-nums` \"121\"i büyük boyutta dağınık gösterir).\r\n *\r\n * Ray motifi BİLEREK yok — README bu motifi 4 yerle sınırlıyor, StatTile beşinci yer olmuyor.\r\n * Dar bir ızgara hücresinde (16rem altı, `@container`) ikon metnin ÜSTÜNE geçer — değer satırı daralmaz.\r\n * `@container` (inline-size containment) host'un genişliği İÇERİKTEN gelemez demek: ızgara/blok\r\n * içinde doğal çalışır; genişliği verilmemiş bir flex öğesi olarak kullanırken `flex-1`/`w-*` verin.\r\n */\r\n@Component({\r\n  selector: 'mf-stat-tile',\r\n  imports: [Card, Icon, Sparkline],\r\n  host: { class: 'block @container' },\r\n  templateUrl: './stat-tile.html',\r\n})\r\nexport class StatTile {\r\n  readonly label = input.required<string>();\r\n  readonly value = input.required<string>();\r\n  readonly icon = input<string>('');\r\n  readonly caption = input<string>('');\r\n  readonly tone = input<StatTileTone>('neutral');\r\n\r\n  /** Görüntülenecek işaretli değişim (\"+12%\", \"−3\"). Boşsa delta satırı çizilmez. */\r\n  readonly delta = input('');\r\n  readonly deltaDirection = input<StatTileDeltaDirection>('flat');\r\n  /** Artış iyi mi? Hata oranı, churn, yanıt süresi gibi metriklerde `false`. */\r\n  readonly upIsGood = input(true, { transform: booleanAttribute });\r\n  /** Karşılaştırılan dönem (\"geçen aya göre\") — tüketici metni, kit varsayılanı YOK. */\r\n  readonly deltaCaption = input('');\r\n  /** Sparkline değerleri (en az 2). Güncel dönem vurgu renginde çizilir. */\r\n  readonly trend = input<readonly number[]>([]);\r\n  /** Sparkline'ın erişilebilir adı; boşsa süs sayılır (değer zaten metinde). */\r\n  readonly trendLabel = input('');\r\n\r\n  protected readonly iconClasses = computed(() => cn(statTileIconVariants({ tone: this.tone() })));\r\n\r\n  protected readonly deltaIcon = computed(() => DELTA_ICON[this.deltaDirection()]);\r\n\r\n  private readonly labels = inject(MF_STAT_TILE_LABELS);\r\n  /** Yön ikon ile ÇİZİLİR ama ekran okuyucuya metin olarak da söylenir. */\r\n  protected readonly deltaText = computed(() => {\r\n    const l = this.labels();\r\n    return { up: l.increase, down: l.decrease, flat: l.noChange }[this.deltaDirection()];\r\n  });\r\n\r\n  protected readonly deltaClasses = computed(() => {\r\n    const direction = this.deltaDirection();\r\n    const good = direction === 'up' ? this.upIsGood() : !this.upIsGood();\r\n    const color = direction === 'flat' ? 'text-fg-muted' : good ? 'text-success' : 'text-danger';\r\n    return cn('inline-flex items-center gap-0.5 font-medium tabular-nums', color);\r\n  });\r\n}\r\n","<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          <span class=\"sr-only\">{{ deltaText() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mesgflow-ui-kit-stepper.mjs

@@ -1,30 +1,46 @@
 import * as i0 from '@angular/core';
-import { input, inject, computed, Component } from '@angular/core';
+import { model, input, booleanAttribute, inject, computed, signal, Component } from '@angular/core';
 import { MF_STEPPER_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { Icon } from '@mesgflow/ui-kit/icon';
 
 /**
- * `<mf-stepper [current]="1"><mf-step label="Hesap" /><mf-step label="Ödeme" /></mf-stepper>`
+ * `<mf-stepper [(current)]="step" clickable linear><mf-step label="Hesap" /><mf-step label="Ödeme" /></mf-stepper>`
  *
- * Salt görsel bir ilerleme göstergesi — gezinme (bir sonraki/önceki adıma
- * geçme) çağıranın kendi sorumluluğunda (`[current]`'ı değiştiren düğmeler
- * dışarıda yaşar). Her `mf-step` kendi index'ini KURULUŞTA bir kez
- * `registerStep()` ile alır — `contentChildren` yerine basit bir kayıt-sırası
- * sayacı, `Step`'in `Stepper`'ı import ETMESİ yeterli (tersi YOK, döngüsel
- * bir tip bağımlılığı kurulmuyor).
+ * İlerleme göstergesi + (isteğe bağlı) gezinme:
+ * - `current` iki yönlü model; `next()` / `prev()` / `goTo(i)` programatik API
+ *   (`#stepper="mfStepper"` ile şablondan çağrılır).
+ * - `clickable`: adımlar düğme olur, tıklayınca o adıma gider.
+ * - `linear`: yalnızca tamamlanmış adımlara ve BİR sonraki adıma gidilebilir
+ *   (sihirbazın atlanmasını önler).
+ * - `orientation="vertical"`: dikey düzen (uzun sihirbazlar, yan panel).
+ *
+ * Her `mf-step` kendi index'ini kuruluşta `registerStep()` ile alır — `Step`
+ * `Stepper`'ı import eder, tersi değil (döngüsel bağımlılık yok).
  */
 class Stepper {
-    current = input(0, /* @ts-ignore */
+    current = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
     ariaLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    stepperLabels = inject(MF_STEPPER_LABELS);
-    effectiveAriaLabel = computed(() => this.ariaLabel() ?? this.stepperLabels().ariaLabel, /* @ts-ignore */
+    clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    labels = inject(MF_STEPPER_LABELS);
+    effectiveAriaLabel = computed(() => this.ariaLabel() ?? this.labels().ariaLabel, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
-    nextIndex = 0;
+    count = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /** Kayıtlı adım sayısı. */
+    stepCount = this.count.asReadonly();
+    hostClasses = computed(() => cn('flex', this.orientation() === 'vertical' ? 'flex-col items-stretch' : 'items-center'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     /** Her `mf-step` kurulumda BİR KEZ çağırır — kendi (sıradaki) index'ini alır. */
     registerStep() {
-        return this.nextIndex++;
+        const index = this.count();
+        this.count.set(index + 1);
+        return index;
     }
     isComplete(index) {
         return index < this.current();
@@ -32,8 +48,25 @@ class Stepper {
     isCurrent(index) {
         return index === this.current();
     }
+    canGoTo(index) {
+        if (index < 0 || index >= this.count())
+            return false;
+        if (!this.linear())
+            return true;
+        return index <= this.current() + 1;
+    }
+    goTo(index) {
+        if (this.canGoTo(index))
+            this.current.set(index);
+    }
+    next() {
+        this.goTo(this.current() + 1);
+    }
+    prev() {
+        this.goTo(this.current() - 1);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Stepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Stepper, isStandalone: true, selector: "mf-stepper", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "attr.aria-label": "effectiveAriaLabel()" }, classAttribute: "flex items-center" }, exportAs: ["mfStepper"], ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Stepper, isStandalone: true, selector: "mf-stepper", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange" }, host: { attributes: { "role": "list" }, properties: { "attr.aria-label": "effectiveAriaLabel()", "class": "hostClasses()" } }, exportAs: ["mfStepper"], ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Stepper, decorators: [{
             type: Component,
@@ -43,87 +76,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     host: {
                         role: 'list',
                         '[attr.aria-label]': 'effectiveAriaLabel()',
-                        class: 'flex items-center',
+                        '[class]': 'hostClasses()',
                     },
                     template: '<ng-content />',
                 }]
-        }], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+        }], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
 
 /**
- * `<mf-step label="Hesap" description="Bilgilerinizi girin" />` — bir
- * `mf-stepper` ATASI ZORUNLU (bkz. `stepper.ts`'in JSDoc'u). Bağlayıcı
- * çizgi kendi `::after` pseudo-elementi (`last:after:hidden` ile SON
- * adımda gizlenir — hangi adımın son olduğunu bilmek için ayrı bir
- * hesaplama GEREKMEZ, saf CSS `:last-child`).
+ * `<mf-step label="Hesap" description="Bilgilerinizi girin" [state]="'error'" optional />`
+ * — bir `mf-stepper` ATASI ZORUNLU. Bağlayıcı çizgi kendi `::after`'ı
+ * (`last:after:hidden` son adımda gizler).
+ *
+ * `clickable` stepper'da adım bir `<button>` olur (gidilemeyen adımlar
+ * devre dışı). Durum ikonları ekran okuyucuya metinle de söylenir.
  */
 class Step {
     label = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     description = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** `auto`: current'a göre; `completed`/`error` elle zorlanır (doğrulama hatası vb.). */
+    state = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     stepper = inject(Stepper);
     index = this.stepper.registerStep();
-    isComplete = computed(() => this.stepper.isComplete(this.index), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isComplete" }] : /* istanbul ignore next */ []));
     isCurrent = computed(() => this.stepper.isCurrent(this.index), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isCurrent" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn("relative flex flex-1 items-center gap-2 after:mx-3 after:h-px after:flex-1 after:content-[''] last:after:hidden", this.isComplete() ? 'after:bg-accent-fill' : 'after:bg-border'), /* @ts-ignore */
+    resolvedState = computed(() => {
+        const s = this.state();
+        if (s !== 'auto')
+            return s;
+        return this.stepper.isComplete(this.index) ? 'completed' : 'auto';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const vertical = this.stepper.orientation() === 'vertical';
+        const done = this.resolvedState() === 'completed';
+        return cn("relative flex after:content-[''] last:after:hidden", vertical
+            ? 'flex-col items-start pb-6 after:absolute after:start-3 after:top-8 after:bottom-1 after:w-px last:pb-0'
+            : 'flex-1 items-center gap-2 after:mx-3 after:h-px after:flex-1', done ? 'after:bg-accent-fill' : 'after:bg-border', 'after:transition-colors after:duration-slow after:ease-emphasis');
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     circleClasses() {
-        return cn('flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium', this.isComplete()
-            ? 'bg-accent-fill text-fg-on-accent'
-            : this.isCurrent()
-                ? 'border-2 border-accent text-accent'
-                : 'border border-border text-fg-subtle');
+        const state = this.resolvedState();
+        return cn('flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium transition-[background-color,border-color,color,box-shadow] duration-base ease-emphasis', state === 'error'
+            ? 'bg-danger-fill text-danger-fill-fg'
+            : state === 'completed'
+                ? 'bg-accent-fill text-fg-on-accent'
+                : this.isCurrent()
+                    ? 'border-2 border-accent text-accent shadow-[0_0_0_4px_var(--mf-primary-tint)]'
+                    : 'border border-border text-fg-subtle');
     }
     labelClasses() {
-        return cn('text-sm', this.isCurrent() || this.isComplete() ? 'font-medium text-fg' : 'text-fg-subtle');
+        const state = this.resolvedState();
+        return cn('truncate text-sm', state === 'error'
+            ? 'font-medium text-danger'
+            : this.isCurrent() || state === 'completed'
+                ? 'font-medium text-fg'
+                : 'text-fg-subtle');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Step, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Step, isStandalone: true, selector: "mf-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "hostClasses()", "attr.aria-current": "isCurrent() ? \"step\" : null" } }, exportAs: ["mfStep"], ngImport: i0, template: `
-    <span [class]="circleClasses()">
-      @if (isComplete()) {
-        <span mfIcon [size]="14">check</span>
-      } @else {
-        {{ index + 1 }}
-      }
-    </span>
-    <span class="flex min-w-0 flex-col">
-      <span [class]="labelClasses()">{{ label() }}</span>
-      @if (description()) {
-        <span class="truncate text-xs text-fg-subtle">{{ description() }}</span>
-      }
-    </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Step, isStandalone: true, selector: "mf-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "hostClasses()", "attr.aria-current": "isCurrent() ? \"step\" : null" } }, exportAs: ["mfStep"], ngImport: i0, template: `
+    @if (stepper.clickable()) {
+      <button
+        type="button"
+        class="group/step flex min-w-0 items-center gap-2 rounded-md py-1 pe-2 text-start outline-none transition-colors duration-fast ease-emphasis enabled:hover:bg-state-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed"
+        [disabled]="!stepper.canGoTo(index)"
+        (click)="stepper.goTo(index)"
+      >
+        <ng-container [ngTemplateOutlet]="body" />
+      </button>
+    } @else {
+      <span class="flex min-w-0 items-center gap-2"
+        ><ng-container [ngTemplateOutlet]="body"
+      /></span>
+    }
+    <ng-template #body>
+      <span [class]="circleClasses()">
+        @if (resolvedState() === 'error') {
+          <span mfIcon [size]="14">close</span>
+        } @else if (resolvedState() === 'completed') {
+          <span mfIcon [size]="14" class="animate-pop">check</span>
+        } @else {
+          {{ index + 1 }}
+        }
+      </span>
+      <span class="flex min-w-0 flex-col">
+        <span [class]="labelClasses()">{{ label() }}</span>
+        @if (description() || optional()) {
+          <span class="truncate text-xs text-fg-subtle">{{
+            description() || stepper.labels().optional
+          }}</span>
+        }
+        @if (resolvedState() !== 'auto') {
+          <span class="sr-only">{{
+            resolvedState() === 'error' ? stepper.labels().error : stepper.labels().completed
+          }}</span>
+        }
+      </span>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Step, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-step',
                     exportAs: 'mfStep',
-                    imports: [Icon],
+                    imports: [Icon, NgTemplateOutlet],
                     host: {
                         role: 'listitem',
                         '[class]': 'hostClasses()',
                         '[attr.aria-current]': 'isCurrent() ? "step" : null',
                     },
                     template: `
-    <span [class]="circleClasses()">
-      @if (isComplete()) {
-        <span mfIcon [size]="14">check</span>
-      } @else {
-        {{ index + 1 }}
-      }
-    </span>
-    <span class="flex min-w-0 flex-col">
-      <span [class]="labelClasses()">{{ label() }}</span>
-      @if (description()) {
-        <span class="truncate text-xs text-fg-subtle">{{ description() }}</span>
-      }
-    </span>
+    @if (stepper.clickable()) {
+      <button
+        type="button"
+        class="group/step flex min-w-0 items-center gap-2 rounded-md py-1 pe-2 text-start outline-none transition-colors duration-fast ease-emphasis enabled:hover:bg-state-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed"
+        [disabled]="!stepper.canGoTo(index)"
+        (click)="stepper.goTo(index)"
+      >
+        <ng-container [ngTemplateOutlet]="body" />
+      </button>
+    } @else {
+      <span class="flex min-w-0 items-center gap-2"
+        ><ng-container [ngTemplateOutlet]="body"
+      /></span>
+    }
+    <ng-template #body>
+      <span [class]="circleClasses()">
+        @if (resolvedState() === 'error') {
+          <span mfIcon [size]="14">close</span>
+        } @else if (resolvedState() === 'completed') {
+          <span mfIcon [size]="14" class="animate-pop">check</span>
+        } @else {
+          {{ index + 1 }}
+        }
+      </span>
+      <span class="flex min-w-0 flex-col">
+        <span [class]="labelClasses()">{{ label() }}</span>
+        @if (description() || optional()) {
+          <span class="truncate text-xs text-fg-subtle">{{
+            description() || stepper.labels().optional
+          }}</span>
+        }
+        @if (resolvedState() !== 'auto') {
+          <span class="sr-only">{{
+            resolvedState() === 'error' ? stepper.labels().error : stepper.labels().completed
+          }}</span>
+        }
+      </span>
+    </ng-template>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/mesgflow-ui-kit-stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-stepper.mjs","sources":["../../../projects/ui-kit/stepper/stepper.ts","../../../projects/ui-kit/stepper/step.ts","../../../projects/ui-kit/stepper/mesgflow-ui-kit-stepper.ts"],"sourcesContent":["import { Component, computed, inject, input } from '@angular/core';\r\nimport { MF_STEPPER_LABELS } from '@mesgflow/ui-kit/core';\r\n\r\n/**\r\n * `<mf-stepper [current]=\"1\"><mf-step label=\"Hesap\" /><mf-step label=\"Ödeme\" /></mf-stepper>`\r\n *\r\n * Salt görsel bir ilerleme göstergesi — gezinme (bir sonraki/önceki adıma\r\n * geçme) çağıranın kendi sorumluluğunda (`[current]`'ı değiştiren düğmeler\r\n * dışarıda yaşar). Her `mf-step` kendi index'ini KURULUŞTA bir kez\r\n * `registerStep()` ile alır — `contentChildren` yerine basit bir kayıt-sırası\r\n * sayacı, `Step`'in `Stepper`'ı import ETMESİ yeterli (tersi YOK, döngüsel\r\n * bir tip bağımlılığı kurulmuyor).\r\n */\r\n@Component({\r\n  selector: 'mf-stepper',\r\n  exportAs: 'mfStepper',\r\n  host: {\r\n    role: 'list',\r\n    '[attr.aria-label]': 'effectiveAriaLabel()',\r\n    class: 'flex items-center',\r\n  },\r\n  template: '<ng-content />',\r\n})\r\nexport class Stepper {\r\n  readonly current = input(0);\r\n  readonly ariaLabel = input<string>();\r\n\r\n  private readonly stepperLabels = inject(MF_STEPPER_LABELS);\r\n  protected readonly effectiveAriaLabel = computed(\r\n    () => this.ariaLabel() ?? this.stepperLabels().ariaLabel,\r\n  );\r\n\r\n  private nextIndex = 0;\r\n\r\n  /** Her `mf-step` kurulumda BİR KEZ çağırır — kendi (sıradaki) index'ini alır. */\r\n  registerStep(): number {\r\n    return this.nextIndex++;\r\n  }\r\n\r\n  isComplete(index: number): boolean {\r\n    return index < this.current();\r\n  }\r\n\r\n  isCurrent(index: number): boolean {\r\n    return index === this.current();\r\n  }\r\n}\r\n","import { Component, computed, inject, input } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Stepper } from './stepper';\r\n\r\n/**\r\n * `<mf-step label=\"Hesap\" description=\"Bilgilerinizi girin\" />` — bir\r\n * `mf-stepper` ATASI ZORUNLU (bkz. `stepper.ts`'in JSDoc'u). Bağlayıcı\r\n * çizgi kendi `::after` pseudo-elementi (`last:after:hidden` ile SON\r\n * adımda gizlenir — hangi adımın son olduğunu bilmek için ayrı bir\r\n * hesaplama GEREKMEZ, saf CSS `:last-child`).\r\n */\r\n@Component({\r\n  selector: 'mf-step',\r\n  exportAs: 'mfStep',\r\n  imports: [Icon],\r\n  host: {\r\n    role: 'listitem',\r\n    '[class]': 'hostClasses()',\r\n    '[attr.aria-current]': 'isCurrent() ? \"step\" : null',\r\n  },\r\n  template: `\r\n    <span [class]=\"circleClasses()\">\r\n      @if (isComplete()) {\r\n        <span mfIcon [size]=\"14\">check</span>\r\n      } @else {\r\n        {{ index + 1 }}\r\n      }\r\n    </span>\r\n    <span class=\"flex min-w-0 flex-col\">\r\n      <span [class]=\"labelClasses()\">{{ label() }}</span>\r\n      @if (description()) {\r\n        <span class=\"truncate text-xs text-fg-subtle\">{{ description() }}</span>\r\n      }\r\n    </span>\r\n  `,\r\n})\r\nexport class Step {\r\n  readonly label = input.required<string>();\r\n  readonly description = input('');\r\n\r\n  private readonly stepper = inject(Stepper);\r\n  protected readonly index = this.stepper.registerStep();\r\n\r\n  protected readonly isComplete = computed(() => this.stepper.isComplete(this.index));\r\n  protected readonly isCurrent = computed(() => this.stepper.isCurrent(this.index));\r\n\r\n  protected readonly hostClasses = computed(() =>\r\n    cn(\r\n      \"relative flex flex-1 items-center gap-2 after:mx-3 after:h-px after:flex-1 after:content-[''] last:after:hidden\",\r\n      this.isComplete() ? 'after:bg-accent-fill' : 'after:bg-border',\r\n    ),\r\n  );\r\n\r\n  protected circleClasses(): string {\r\n    return cn(\r\n      'flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium',\r\n      this.isComplete()\r\n        ? 'bg-accent-fill text-fg-on-accent'\r\n        : this.isCurrent()\r\n          ? 'border-2 border-accent text-accent'\r\n          : 'border border-border text-fg-subtle',\r\n    );\r\n  }\r\n\r\n  protected labelClasses(): string {\r\n    return cn(\r\n      'text-sm',\r\n      this.isCurrent() || this.isComplete() ? 'font-medium text-fg' : 'text-fg-subtle',\r\n    );\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mesgflow-ui-kit-stepper.mjs","sources":["../../../projects/ui-kit/stepper/stepper.ts","../../../projects/ui-kit/stepper/step.ts","../../../projects/ui-kit/stepper/mesgflow-ui-kit-stepper.ts"],"sourcesContent":["import { Component, booleanAttribute, computed, inject, input, model, signal } from '@angular/core';\r\nimport { MF_STEPPER_LABELS, cn } from '@mesgflow/ui-kit/core';\r\n\r\nexport type StepperOrientation = 'horizontal' | 'vertical';\r\n\r\n/**\r\n * `<mf-stepper [(current)]=\"step\" clickable linear><mf-step label=\"Hesap\" /><mf-step label=\"Ödeme\" /></mf-stepper>`\r\n *\r\n * İlerleme göstergesi + (isteğe bağlı) gezinme:\r\n * - `current` iki yönlü model; `next()` / `prev()` / `goTo(i)` programatik API\r\n *   (`#stepper=\"mfStepper\"` ile şablondan çağrılır).\r\n * - `clickable`: adımlar düğme olur, tıklayınca o adıma gider.\r\n * - `linear`: yalnızca tamamlanmış adımlara ve BİR sonraki adıma gidilebilir\r\n *   (sihirbazın atlanmasını önler).\r\n * - `orientation=\"vertical\"`: dikey düzen (uzun sihirbazlar, yan panel).\r\n *\r\n * Her `mf-step` kendi index'ini kuruluşta `registerStep()` ile alır — `Step`\r\n * `Stepper`'ı import eder, tersi değil (döngüsel bağımlılık yok).\r\n */\r\n@Component({\r\n  selector: 'mf-stepper',\r\n  exportAs: 'mfStepper',\r\n  host: {\r\n    role: 'list',\r\n    '[attr.aria-label]': 'effectiveAriaLabel()',\r\n    '[class]': 'hostClasses()',\r\n  },\r\n  template: '<ng-content />',\r\n})\r\nexport class Stepper {\r\n  readonly current = model(0);\r\n  readonly ariaLabel = input<string>();\r\n  readonly clickable = input(false, { transform: booleanAttribute });\r\n  readonly linear = input(false, { transform: booleanAttribute });\r\n  readonly orientation = input<StepperOrientation>('horizontal');\r\n\r\n  readonly labels = inject(MF_STEPPER_LABELS);\r\n  protected readonly effectiveAriaLabel = computed(\r\n    () => this.ariaLabel() ?? this.labels().ariaLabel,\r\n  );\r\n\r\n  private readonly count = signal(0);\r\n  /** Kayıtlı adım sayısı. */\r\n  readonly stepCount = this.count.asReadonly();\r\n\r\n  protected readonly hostClasses = computed(() =>\r\n    cn('flex', this.orientation() === 'vertical' ? 'flex-col items-stretch' : 'items-center'),\r\n  );\r\n\r\n  /** Her `mf-step` kurulumda BİR KEZ çağırır — kendi (sıradaki) index'ini alır. */\r\n  registerStep(): number {\r\n    const index = this.count();\r\n    this.count.set(index + 1);\r\n    return index;\r\n  }\r\n\r\n  isComplete(index: number): boolean {\r\n    return index < this.current();\r\n  }\r\n\r\n  isCurrent(index: number): boolean {\r\n    return index === this.current();\r\n  }\r\n\r\n  canGoTo(index: number): boolean {\r\n    if (index < 0 || index >= this.count()) return false;\r\n    if (!this.linear()) return true;\r\n    return index <= this.current() + 1;\r\n  }\r\n\r\n  goTo(index: number): void {\r\n    if (this.canGoTo(index)) this.current.set(index);\r\n  }\r\n\r\n  next(): void {\r\n    this.goTo(this.current() + 1);\r\n  }\r\n\r\n  prev(): void {\r\n    this.goTo(this.current() - 1);\r\n  }\r\n}\r\n","import { Component, booleanAttribute, computed, inject, input } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Stepper } from './stepper';\r\n\r\nexport type StepState = 'auto' | 'completed' | 'error';\r\n\r\n/**\r\n * `<mf-step label=\"Hesap\" description=\"Bilgilerinizi girin\" [state]=\"'error'\" optional />`\r\n * — bir `mf-stepper` ATASI ZORUNLU. Bağlayıcı çizgi kendi `::after`'ı\r\n * (`last:after:hidden` son adımda gizler).\r\n *\r\n * `clickable` stepper'da adım bir `<button>` olur (gidilemeyen adımlar\r\n * devre dışı). Durum ikonları ekran okuyucuya metinle de söylenir.\r\n */\r\n@Component({\r\n  selector: 'mf-step',\r\n  exportAs: 'mfStep',\r\n  imports: [Icon, NgTemplateOutlet],\r\n  host: {\r\n    role: 'listitem',\r\n    '[class]': 'hostClasses()',\r\n    '[attr.aria-current]': 'isCurrent() ? \"step\" : null',\r\n  },\r\n  template: `\r\n    @if (stepper.clickable()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"group/step flex min-w-0 items-center gap-2 rounded-md py-1 pe-2 text-start outline-none transition-colors duration-fast ease-emphasis enabled:hover:bg-state-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed\"\r\n        [disabled]=\"!stepper.canGoTo(index)\"\r\n        (click)=\"stepper.goTo(index)\"\r\n      >\r\n        <ng-container [ngTemplateOutlet]=\"body\" />\r\n      </button>\r\n    } @else {\r\n      <span class=\"flex min-w-0 items-center gap-2\"\r\n        ><ng-container [ngTemplateOutlet]=\"body\"\r\n      /></span>\r\n    }\r\n    <ng-template #body>\r\n      <span [class]=\"circleClasses()\">\r\n        @if (resolvedState() === 'error') {\r\n          <span mfIcon [size]=\"14\">close</span>\r\n        } @else if (resolvedState() === 'completed') {\r\n          <span mfIcon [size]=\"14\" class=\"animate-pop\">check</span>\r\n        } @else {\r\n          {{ index + 1 }}\r\n        }\r\n      </span>\r\n      <span class=\"flex min-w-0 flex-col\">\r\n        <span [class]=\"labelClasses()\">{{ label() }}</span>\r\n        @if (description() || optional()) {\r\n          <span class=\"truncate text-xs text-fg-subtle\">{{\r\n            description() || stepper.labels().optional\r\n          }}</span>\r\n        }\r\n        @if (resolvedState() !== 'auto') {\r\n          <span class=\"sr-only\">{{\r\n            resolvedState() === 'error' ? stepper.labels().error : stepper.labels().completed\r\n          }}</span>\r\n        }\r\n      </span>\r\n    </ng-template>\r\n  `,\r\n})\r\nexport class Step {\r\n  readonly label = input.required<string>();\r\n  readonly description = input('');\r\n  /** `auto`: current'a göre; `completed`/`error` elle zorlanır (doğrulama hatası vb.). */\r\n  readonly state = input<StepState>('auto');\r\n  readonly optional = input(false, { transform: booleanAttribute });\r\n\r\n  protected readonly stepper = inject(Stepper);\r\n  protected readonly index = this.stepper.registerStep();\r\n\r\n  protected readonly isCurrent = computed(() => this.stepper.isCurrent(this.index));\r\n  protected readonly resolvedState = computed<StepState>(() => {\r\n    const s = this.state();\r\n    if (s !== 'auto') return s;\r\n    return this.stepper.isComplete(this.index) ? 'completed' : 'auto';\r\n  });\r\n\r\n  protected readonly hostClasses = computed(() => {\r\n    const vertical = this.stepper.orientation() === 'vertical';\r\n    const done = this.resolvedState() === 'completed';\r\n    return cn(\r\n      \"relative flex after:content-[''] last:after:hidden\",\r\n      vertical\r\n        ? 'flex-col items-start pb-6 after:absolute after:start-3 after:top-8 after:bottom-1 after:w-px last:pb-0'\r\n        : 'flex-1 items-center gap-2 after:mx-3 after:h-px after:flex-1',\r\n      done ? 'after:bg-accent-fill' : 'after:bg-border',\r\n      'after:transition-colors after:duration-slow after:ease-emphasis',\r\n    );\r\n  });\r\n\r\n  protected circleClasses(): string {\r\n    const state = this.resolvedState();\r\n    return cn(\r\n      'flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium transition-[background-color,border-color,color,box-shadow] duration-base ease-emphasis',\r\n      state === 'error'\r\n        ? 'bg-danger-fill text-danger-fill-fg'\r\n        : state === 'completed'\r\n          ? 'bg-accent-fill text-fg-on-accent'\r\n          : this.isCurrent()\r\n            ? 'border-2 border-accent text-accent shadow-[0_0_0_4px_var(--mf-primary-tint)]'\r\n            : 'border border-border text-fg-subtle',\r\n    );\r\n  }\r\n\r\n  protected labelClasses(): string {\r\n    const state = this.resolvedState();\r\n    return cn(\r\n      'truncate text-sm',\r\n      state === 'error'\r\n        ? 'font-medium text-danger'\r\n        : this.isCurrent() || state === 'completed'\r\n          ? 'font-medium text-fg'\r\n          : 'text-fg-subtle',\r\n    );\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mesgflow-ui-kit-switch.mjs

@@ -58,11 +58,11 @@ class Switch extends ValueAccessorBase {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Switch, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Switch, isStandalone: true, selector: "mf-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }], exportAs: ["mfSwitch"], usesInheritance: true, ngImport: i0, template: "<label\r\n  class=\"inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active transition-colors duration-fast ease-emphasis peer-checked:bg-accent-fill peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-control transition-transform duration-fast ease-out ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Switch, isStandalone: true, selector: "mf-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }], exportAs: ["mfSwitch"], usesInheritance: true, ngImport: i0, template: "<label\r\n  class=\"group/switch inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active shadow-[inset_0_1px_2px_rgb(0_0_0/0.12)] transition-colors duration-base ease-emphasis group-hover/switch:bg-border-strong peer-checked:bg-accent-fill peer-checked:group-hover/switch:bg-accent-fill-hover peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-1 transition-[translate,scale] duration-base ease-spring group-active/switch:scale-x-110 ' +\r\n        'dark:bg-neutral-50 ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Switch, decorators: [{
             type: Component,
-            args: [{ selector: 'mf-switch', exportAs: 'mfSwitch', host: { class: 'inline-flex' }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }], template: "<label\r\n  class=\"inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active transition-colors duration-fast ease-emphasis peer-checked:bg-accent-fill peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-control transition-transform duration-fast ease-out ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n" }]
+            args: [{ selector: 'mf-switch', exportAs: 'mfSwitch', host: { class: 'inline-flex' }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }], template: "<label\r\n  class=\"group/switch inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active shadow-[inset_0_1px_2px_rgb(0_0_0/0.12)] transition-colors duration-base ease-emphasis group-hover/switch:bg-border-strong peer-checked:bg-accent-fill peer-checked:group-hover/switch:bg-accent-fill-hover peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-1 transition-[translate,scale] duration-base ease-spring group-active/switch:scale-x-110 ' +\r\n        'dark:bg-neutral-50 ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n" }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**