@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,84 @@
+import * as i0 from '@angular/core';
+import { input, inject, computed, Component } from '@angular/core';
+import { MF_BREADCRUMB_LABELS } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Link } from '@mesgflow/ui-kit/link';
+
+/**
+ * `<mf-breadcrumb [items]="[{label: 'Ayarlar', href: '/ayarlar'}, {label: 'Ekip'}]" />`
+ *
+ * SON öğe (mevcut sayfa) `href` verilse BİLE bağlantı OLARAK render
+ * EDİLMEZ — WAI-ARIA breadcrumb deseninin önerdiği gibi düz metin +
+ * `aria-current="page"`. Host `role="navigation"` taşır (`nav` etiketi
+ * DEĞİL — `mf-breadcrumb` özel bir eleman, ama landmark semantiği aynı
+ * şekilde çalışır).
+ */
+class Breadcrumb {
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    injectedLabels = inject(MF_BREADCRUMB_LABELS);
+    effectiveAriaLabel = computed(() => this.ariaLabel() ?? this.injectedLabels().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Breadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Breadcrumb, isStandalone: true, selector: "mf-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "effectiveAriaLabel()" } }, exportAs: ["mfBreadcrumb"], ngImport: i0, template: `
+    <ol class="flex flex-wrap items-center gap-1.5 text-sm text-fg-muted">
+      @for (item of items(); track item.label; let last = $last) {
+        <li class="flex items-center gap-1.5">
+          @if (!last && item.href) {
+            <a mfLink [href]="item.href" underline="hover">{{ item.label }}</a>
+          } @else {
+            <span [attr.aria-current]="last ? 'page' : null" [class.text-fg]="last">{{
+              item.label
+            }}</span>
+          }
+          @if (!last) {
+            <span mfIcon [size]="14" class="text-fg-subtle rtl:-scale-x-100" aria-hidden="true"
+              >chevron_right</span
+            >
+          }
+        </li>
+      }
+    </ol>
+  `, isInline: true, dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Link, selector: "a[mfLink]", inputs: ["tone", "underline"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Breadcrumb, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-breadcrumb',
+                    exportAs: 'mfBreadcrumb',
+                    imports: [Icon, Link],
+                    host: {
+                        role: 'navigation',
+                        '[attr.aria-label]': 'effectiveAriaLabel()',
+                    },
+                    template: `
+    <ol class="flex flex-wrap items-center gap-1.5 text-sm text-fg-muted">
+      @for (item of items(); track item.label; let last = $last) {
+        <li class="flex items-center gap-1.5">
+          @if (!last && item.href) {
+            <a mfLink [href]="item.href" underline="hover">{{ item.label }}</a>
+          } @else {
+            <span [attr.aria-current]="last ? 'page' : null" [class.text-fg]="last">{{
+              item.label
+            }}</span>
+          }
+          @if (!last) {
+            <span mfIcon [size]="14" class="text-fg-subtle rtl:-scale-x-100" aria-hidden="true"
+              >chevron_right</span
+            >
+          }
+        </li>
+      }
+    </ol>
+  `,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Breadcrumb };
+//# sourceMappingURL=mesgflow-ui-kit-breadcrumb.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-breadcrumb.mjs","sources":["../../../projects/ui-kit/breadcrumb/breadcrumb.ts","../../../projects/ui-kit/breadcrumb/mesgflow-ui-kit-breadcrumb.ts"],"sourcesContent":["import { Component, computed, inject, input } from '@angular/core';\r\nimport { MF_BREADCRUMB_LABELS } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Link } from '@mesgflow/ui-kit/link';\r\n\r\nexport interface BreadcrumbItem {\r\n  label: string;\r\n  href?: string;\r\n}\r\n\r\n/**\r\n * `<mf-breadcrumb [items]=\"[{label: 'Ayarlar', href: '/ayarlar'}, {label: 'Ekip'}]\" />`\r\n *\r\n * SON öğe (mevcut sayfa) `href` verilse BİLE bağlantı OLARAK render\r\n * EDİLMEZ — WAI-ARIA breadcrumb deseninin önerdiği gibi düz metin +\r\n * `aria-current=\"page\"`. Host `role=\"navigation\"` taşır (`nav` etiketi\r\n * DEĞİL — `mf-breadcrumb` özel bir eleman, ama landmark semantiği aynı\r\n * şekilde çalışır).\r\n */\r\n@Component({\r\n  selector: 'mf-breadcrumb',\r\n  exportAs: 'mfBreadcrumb',\r\n  imports: [Icon, Link],\r\n  host: {\r\n    role: 'navigation',\r\n    '[attr.aria-label]': 'effectiveAriaLabel()',\r\n  },\r\n  template: `\r\n    <ol class=\"flex flex-wrap items-center gap-1.5 text-sm text-fg-muted\">\r\n      @for (item of items(); track item.label; let last = $last) {\r\n        <li class=\"flex items-center gap-1.5\">\r\n          @if (!last && item.href) {\r\n            <a mfLink [href]=\"item.href\" underline=\"hover\">{{ item.label }}</a>\r\n          } @else {\r\n            <span [attr.aria-current]=\"last ? 'page' : null\" [class.text-fg]=\"last\">{{\r\n              item.label\r\n            }}</span>\r\n          }\r\n          @if (!last) {\r\n            <span mfIcon [size]=\"14\" class=\"text-fg-subtle rtl:-scale-x-100\" aria-hidden=\"true\"\r\n              >chevron_right</span\r\n            >\r\n          }\r\n        </li>\r\n      }\r\n    </ol>\r\n  `,\r\n})\r\nexport class Breadcrumb {\r\n  readonly items = input.required<BreadcrumbItem[]>();\r\n  readonly ariaLabel = input<string>();\r\n\r\n  private readonly injectedLabels = inject(MF_BREADCRUMB_LABELS);\r\n  protected readonly effectiveAriaLabel = computed(\r\n    () => this.ariaLabel() ?? this.injectedLabels().ariaLabel,\r\n  );\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAUA;;;;;;;;AAQG;MA8BU,UAAU,CAAA;IACZ,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAoB;AAC1C,IAAA,SAAS,GAAG,KAAK;6FAAU;AAEnB,IAAA,cAAc,GAAG,MAAM,CAAC,oBAAoB,CAAC;AAC3C,IAAA,kBAAkB,GAAG,QAAQ,CAC9C,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,SAAS;2FAC1D;uGAPU,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,YAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EArBX,CAAA;;;;;;;;;;;;;;;;;;;GAmBT,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAxBS,IAAI,qFAAE,IAAI,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FA0BT,UAAU,EAAA,UAAA,EAAA,CAAA;kBA7BtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;AACrB,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,YAAY;AAClB,wBAAA,mBAAmB,EAAE,sBAAsB;AAC5C,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;;;;;;;AAmBT,EAAA,CAAA;AACF,iBAAA;;;AC/CD;;AAEG;;"}

package/fesm2022/mesgflow-ui-kit-button-group.mjs

@@ -0,0 +1,37 @@
+import * as i0 from '@angular/core';
+import { input, Component } from '@angular/core';
+
+/**
+ * `<mf-button-group><button mfButton appearance="outlined">A</button>...</mf-button-group>`
+ * — bitişik butonları TEK bir segment şeridi gibi birleştirir: iç köşeler
+ * kare, kenarlıklar 1px çakışır (`-ms-px`), hover/odaklı buton `z-10` ile
+ * komşusunun üstüne çıkar (çakışan kenarlık kesilmesin diye). En anlamlısı
+ * `appearance="outlined"` butonlarla — dolu/düz-metin butonlarda zaten
+ * görünür kenarlık yok, sadece aralarındaki boşluk kapanır.
+ */
+class ButtonGroup {
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: ButtonGroup, isStandalone: true, selector: "mf-button-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "inline-flex [&>*]:rounded-none [&>*:first-child]:rounded-s-md [&>*:last-child]:rounded-e-md [&>*:not(:first-child)]:-ms-px [&>*:focus-visible]:z-10 [&>*:hover]:z-10" }, exportAs: ["mfButtonGroup"], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-button-group',
+                    exportAs: 'mfButtonGroup',
+                    host: {
+                        role: 'group',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        class: 'inline-flex [&>*]:rounded-none [&>*:first-child]:rounded-s-md [&>*:last-child]:rounded-e-md [&>*:not(:first-child)]:-ms-px [&>*:focus-visible]:z-10 [&>*:hover]:z-10',
+                    },
+                    template: '<ng-content />',
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonGroup };
+//# sourceMappingURL=mesgflow-ui-kit-button-group.mjs.map

package/fesm2022/mesgflow-ui-kit-button-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-button-group.mjs","sources":["../../../projects/ui-kit/button-group/button-group.ts","../../../projects/ui-kit/button-group/mesgflow-ui-kit-button-group.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\n\r\n/**\r\n * `<mf-button-group><button mfButton appearance=\"outlined\">A</button>...</mf-button-group>`\r\n * — bitişik butonları TEK bir segment şeridi gibi birleştirir: iç köşeler\r\n * kare, kenarlıklar 1px çakışır (`-ms-px`), hover/odaklı buton `z-10` ile\r\n * komşusunun üstüne çıkar (çakışan kenarlık kesilmesin diye). En anlamlısı\r\n * `appearance=\"outlined\"` butonlarla — dolu/düz-metin butonlarda zaten\r\n * görünür kenarlık yok, sadece aralarındaki boşluk kapanır.\r\n */\r\n@Component({\r\n  selector: 'mf-button-group',\r\n  exportAs: 'mfButtonGroup',\r\n  host: {\r\n    role: 'group',\r\n    '[attr.aria-label]': 'ariaLabel() || null',\r\n    class:\r\n      'inline-flex [&>*]:rounded-none [&>*:first-child]:rounded-s-md [&>*:last-child]:rounded-e-md [&>*:not(:first-child)]:-ms-px [&>*:focus-visible]:z-10 [&>*:hover]:z-10',\r\n  },\r\n  template: '<ng-content />',\r\n})\r\nexport class ButtonGroup {\r\n  readonly ariaLabel = input('');\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;;;;AAOG;MAYU,WAAW,CAAA;IACb,SAAS,GAAG,KAAK,CAAC,EAAE;kFAAC;uGADnB,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,qhBAFZ,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEf,WAAW,EAAA,UAAA,EAAA,CAAA;kBAXvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,mBAAmB,EAAE,qBAAqB;AAC1C,wBAAA,KAAK,EACH,sKAAsK;AACzK,qBAAA;AACD,oBAAA,QAAQ,EAAE,gBAAgB;AAC3B,iBAAA;;;ACpBD;;AAEG;;"}

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

@@ -0,0 +1,359 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+import { cn } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Spinner } from '@mesgflow/ui-kit/spinner';
+import { cva } from 'class-variance-authority';
+
+/**
+ * İki bağımsız eksen: `tone` (anlamsal renk, bkz. `MfTone`) × `appearance`
+ * (dolu/kenarlıklı/düz-metin). Her kombinasyon
+ * `compoundVariants`'ta açık — okunabilirlik netlik demek, kısayola kaçma.
+ *
+ * Gloss/iç-highlight YOK — 2 kez reddedildi.
+ * `outlined` kenarlığı bilinçli olarak jenerik gri DEĞİL, rengin kendisinin
+ * düşük opaklıklı hali (`border-accent/30` gibi) — düz gri çizgi "90'lar
+ * form elemanı" hissi veriyordu, renkli-şeffaf kenarlık modern/kasıtlı durur.
+ * Bu opaklık artık TEK bir class'ta iki modu birden doğru veriyor: `accent`/
+ * `success`/`warning`/`danger`/`info` çıplak isimleri `styles.css`'te
+ * moda göre takas olan rol token'ları (600 basamağı light, 400 basamağı
+ * dark) — `dark:` ikizi yazmaya gerek YOK.
+ */
+const buttonVariants = cva(
+/*
+ * `appearance-none border border-transparent`: Tailwind'in TAM `preflight.css`'i
+ * (bkz. styles.css) native <button>'ın tarayıcı varsayılan görünümünü zaten
+ * sıfırlıyor; `border-transparent` burada BİLEREK KALICI — `border` width'i
+ * TEK KAYNAKTAN (buradan) gelsin diye netlik amaçlı bırakıldı. Outlined
+ * compound variant'ları sadece border-RENGİNİ değiştiriyor (`cn()`/twMerge
+ * ile çakışma güvenli çözülüyor, bkz. button.ts) — ayrıca bir yerde
+ * `border-0`/`border` çifti YAZMA.
+ */
+/*
+ * Focus: box-shadow tabanlı `ring`+`ring-offset` YERİNE native `outline`+
+ * `outline-offset` kullanılıyor (bkz. projects/ui-kit/README.md "Focus — tek
+ * mekanizma") — Windows Yüksek Kontrast modunda box-shadow tamamen
+ * kayboluyor ama outline korunuyor, outline `overflow:hidden` içinde
+ * kırpılmıyor, ve modern tarayıcılar outline'ı elementin kendi
+ * border-radius'una göre otomatik yuvarlıyor. Renk artık TÜM primitifler
+ * genelinde TEK bir kaynak: `outline-focus-ring` (styles.css'te tanımlı,
+ * moda göre 600/400 basamağı arasında takas olur) — eskiden her tone
+ * kendi `focus-visible:outline-X/50`'sini taşıyordu (input'ta `ring-4`,
+ * checkbox'ta `ring-2 ring-offset-2` gibi üç farklı mekanizma da vardı),
+ * artık tüm primitifler bu tek mekanizmaya bağlı.
+ */
+'inline-flex appearance-none items-center justify-center gap-2 border border-transparent font-medium tracking-label transition-colors duration-fast ease-emphasis ' +
+    'active:scale-[0.99] ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +
+    'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:active:scale-100', {
+    variants: {
+        tone: {
+            primary: '',
+            neutral: '',
+            success: '',
+            warning: '',
+            danger: '',
+            info: '',
+            help: '',
+        },
+        appearance: {
+            filled: '',
+            outlined: 'bg-transparent',
+            text: 'bg-transparent',
+        },
+        /*
+         * Yoğunluk sıkılaştırıldı: md 40px→36px (kurumsal panellerde 40px iri
+         * duruyordu, Linear/Vercel/GitHub yoğunluğuna çekildi). Radius
+         * `rounded-lg`(eski 8px) → `rounded-md`(yeni 8px) — görünüş AYNI,
+         * sadece isim değişti (bkz. radius.css'teki "nested radius" notu:
+         * kart/panel gibi KAPSAYICILAR artık `rounded-lg`de kalıp otomatik
+         * 12px'e büyüyor, kontroller bu satırda `rounded-md`ye taşınarak eski
+         * görünümü koruyor).
+         *
+         * `h-control-*` (bkz. radius.css) — TEK kontrol-yükseklik kaynağı,
+         * Input/Select/NumberInput/... ile PAYLAŞILAN aynı üç basamak (bkz.
+         * `core/recipes.ts` `controlSize`). `lg` bu geçişte 44px→40px'e indi
+         * (BREAKING — CHANGELOG'a bkz.): 44px sm/md'ye göre orantısız iriydi,
+         * yeni üçlü tutarlı bir 32/36/40 merdiveni.
+         */
+        size: {
+            sm: 'h-control-sm px-3 text-sm rounded-md',
+            md: 'h-control-md px-4 text-sm rounded-md',
+            lg: 'h-control-lg px-5 text-base rounded-md',
+            /*
+             * `text-xs font-semibold`: icon boyutu SADECE ikon değil metin de
+             * taşıyabiliyor (ör. language-switcher'ın "EN"/"TR" etiketi) — boyut
+             * tanımlanmadığında metin varsayılan (büyük) font'ta basılıyor,
+             * yanındaki 18px ikonla görsel ağırlığı uyuşmuyordu.
+             *
+             * Şekil (yuvarlak/köşeli) ve dolayısıyla focus mekanizması artık
+             * `shape` eksenine taşındı (aşağıda) — bu satır sadece boyut/tipografi
+             * taşıyor, `rounded-*` YOK. Yükseklik `md` ile aynı (36px).
+             */
+            icon: 'relative aspect-square h-control-md shrink-0 text-xs font-semibold',
+        },
+        /**
+         * `size="icon"` için şekil ekseni — diğer boyutlarda (sm/md/lg) etkisiz
+         * (boş string). Kullanıcı geri bildirimi: yuvarlak ikon-buton hover'ı
+         * "her yerde aynı" duruyordu, GitHub/Linear tarzı köşeli (rounded-md)
+         * bir hover/şekil de istendi — toolbar aksiyonları (Filtreler, satır
+         * düzenle/sil vb.) `square`, avatar-yanı ikonlar (tema/dil değiştirici)
+         * `round` (varsayılan) kullanıyor.
+         */
+        shape: {
+            round: '',
+            square: '',
+        },
+    },
+    compoundVariants: [
+        /*
+         * round: native `outline` `rounded-full`'u izlediği için (modern
+         * tarayıcılar outline'ı border-radius'a göre otomatik yuvarlıyor)
+         * doğrudan buton üzerinde bırakılsaydı focus göstergesi daire-içinde-
+         * daire ("bullseye"/ripple'ı andıran) görünürdü. Bunun yerine kendi
+         * `rounded-md` (köşeli) radius'una sahip bağımsız bir `::after` pseudo-
+         * element kare/köşeli bir çerçeve çiziyor, rengi de artık tek kaynaklı
+         * `outline-focus-ring` — eskiden "ink/paper" sabit zıtlığı (light:
+         * dark-canvas, dark: slate-100) kullanılıyordu çünkü `outline-current`
+         * filled+beyaz-metin butonlarda beyaz zeminde beyaza karışıyordu; yeni
+         * `focus-ring` token'ı zaten primary-600/400 (arkaplandan bağımsız
+         * yüksek kontrastlı bir marka rengi) olduğu için aynı sorunu yaşamıyor.
+         *
+         * square: buton zaten `rounded-md` olduğundan native `outline` fazladan
+         * bir teknik gerektirmeden doğru köşeli çerçeveyi otomatik veriyor —
+         * base class'taki `focus-visible:outline` mekanizması yeterli, ek bir
+         * şey eklemeye GEREK YOK.
+         */
+        {
+            size: 'icon',
+            shape: 'round',
+            class: "rounded-full focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-1 after:rounded-md after:opacity-0 after:outline after:outline-2 after:outline-focus-ring after:transition-opacity after:duration-fast after:content-[''] focus-visible:after:opacity-100",
+        },
+        {
+            size: 'icon',
+            shape: 'square',
+            class: 'rounded-md',
+        },
+        // ---- filled ----
+        // NOT: primary'nin dolu bloğu `bg-accent-fill`/`hover:bg-accent-fill-hover`
+        // (color.css'te tanımlı rol token'ları) KULLANIR, ham basamak DEĞİL —
+        // LIGHT'ta primary-900 (`#062c22`, spec'in "Forest Emerald" CTA'sı),
+        // DARK'ta primary-400 (`#10b981`, spec'in canlı zümrüt CTA'sı) + DARK'ta
+        // mürekkep metin (`--mf-fg-on-accent`, beyaz `#10B981` üstünde 2.54:1
+        // AA altı olduğundan). Diğer dört semantik ton (success/warning/danger/
+        // info/help) da AYNI beşli rol desenini paylaşır: `bg-X-fill
+        // text-X-fill-fg shadow-filled hover:bg-X-fill-hover` — light'ta
+        // danger/help/info beyaz metin taşır, success/warning HER ZAMAN
+        // mürekkep (spec'in beş rengi de dark modda beyazla AA'yı geçmiyor,
+        // bu yüzden dark'ta hepsi mürekkep). `shadow-filled` (elevation.css) —
+        // `shadow-1` kapsayıcı gölgesidir, kontrol ödünç almaz; nötr filled
+        // (spec'in "Secondary"si, `neutral-fill` rol token'ı) gölgesiz kalır.
+        {
+            tone: 'primary',
+            appearance: 'filled',
+            class: 'bg-accent-fill text-fg-on-accent shadow-glow hover:bg-accent-fill-hover',
+        },
+        {
+            tone: 'neutral',
+            appearance: 'filled',
+            class: 'bg-neutral-fill text-neutral-fill-fg hover:bg-neutral-fill-hover',
+        },
+        {
+            tone: 'danger',
+            appearance: 'filled',
+            class: 'bg-danger-fill text-danger-fill-fg shadow-filled hover:bg-danger-fill-hover',
+        },
+        {
+            tone: 'info',
+            appearance: 'filled',
+            class: 'bg-info-fill text-info-fill-fg shadow-filled hover:bg-info-fill-hover',
+        },
+        {
+            tone: 'success',
+            appearance: 'filled',
+            class: 'bg-success-fill text-success-fill-fg shadow-filled hover:bg-success-fill-hover',
+        },
+        {
+            tone: 'warning',
+            appearance: 'filled',
+            class: 'bg-warning-fill text-warning-fill-fg shadow-filled hover:bg-warning-fill-hover',
+        },
+        {
+            tone: 'help',
+            appearance: 'filled',
+            class: 'bg-help-fill text-help-fill-fg shadow-filled hover:bg-help-fill-hover',
+        },
+        // ---- outlined ----
+        {
+            tone: 'primary',
+            appearance: 'outlined',
+            class: 'border-accent/30 text-accent hover:bg-accent/5',
+        },
+        {
+            tone: 'neutral',
+            appearance: 'outlined',
+            class: 'border-border text-fg-muted hover:bg-surface-alt',
+        },
+        {
+            tone: 'success',
+            appearance: 'outlined',
+            class: 'border-success/30 text-success hover:bg-success/5',
+        },
+        {
+            tone: 'warning',
+            appearance: 'outlined',
+            class: 'border-warning/30 text-warning hover:bg-warning/5',
+        },
+        {
+            tone: 'danger',
+            appearance: 'outlined',
+            class: 'border-danger/30 text-danger hover:bg-danger/5',
+        },
+        {
+            tone: 'info',
+            appearance: 'outlined',
+            class: 'border-info/30 text-info hover:bg-info/5',
+        },
+        {
+            tone: 'help',
+            appearance: 'outlined',
+            class: 'border-help/30 text-help hover:bg-help/5',
+        },
+        // ---- text ----
+        {
+            tone: 'primary',
+            appearance: 'text',
+            class: 'text-accent hover:bg-accent/5',
+        },
+        {
+            tone: 'neutral',
+            appearance: 'text',
+            class: 'text-fg-muted hover:bg-surface-alt',
+        },
+        {
+            tone: 'success',
+            appearance: 'text',
+            class: 'text-success hover:bg-success/5',
+        },
+        {
+            tone: 'warning',
+            appearance: 'text',
+            class: 'text-warning hover:bg-warning/5',
+        },
+        {
+            tone: 'danger',
+            appearance: 'text',
+            class: 'text-danger hover:bg-danger/5',
+        },
+        {
+            tone: 'info',
+            appearance: 'text',
+            class: 'text-info hover:bg-info/5',
+        },
+        {
+            tone: 'help',
+            appearance: 'text',
+            class: 'text-help hover:bg-help/5',
+        },
+    ],
+    defaultVariants: { tone: 'primary', appearance: 'filled', size: 'md', shape: 'round' },
+});
+
+/**
+ * `<button mfButton>`/`<a mfButton>` — selector native elemanın KENDİSİNİ
+ * hedefler (`button[mfButton], a[mfButton]`), bir SARMALAYICI etiket
+ * (`<mf-button>`) DEĞİL (bkz. `projects/ui-kit/README.md` "Directive mi,
+ * component mi?") — bu yüzden tüketicinin `class="..."` ile verdiği static
+ * class GENE doğrudan gerçek native elemana düşer, eskiden directive'ken
+ * olduğu gibi (host'ta kalıp içe düşmeme sorunu YOK). Directive'ten
+ * component'e yükseltilmenin TEK sebebi: `loading`'i gerçek bir
+ * `<mf-spinner>`'a, `iconStart`/`iconEnd`'i gerçek ikon element'lerine
+ * bağlayabilmek için bir ŞABLONA ihtiyaç duyulması — tüketicinin kendi
+ * içeriği `<ng-content />` ile AYNEN korunur.
+ *
+ * `tone` (renk) × `appearance` (dolu/kenarlıklı/düz-metin) bağımsız iki
+ * girdi — ör. `tone="danger" appearance="text" size="icon"` sadece ikon
+ * gösteren, kenarlıksız bir sil butonu için.
+ */
+class Button {
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    appearance = input('filled', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Sadece `size="icon"`'da etkili — bkz. button.variants.ts. */
+    shape = input('round', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** Native <button> varsayılan type="submit" sürprizini önlemek için — <a>'da yok sayılır. */
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` iken içeriğin (`<ng-content />`) ÖNÜNE `<mf-spinner size="xs" />`
+     * eklenir — `iconStart` varsa YERİNE geçer, etiket metni görünür KALIR
+     * (buton "Kaydet" yazıp yanında dönen bir gösterge taşır, metin
+     * kaybolmaz). `disabled`'ı KENDİLİĞİNDEN yönetmez — tüketici
+     * `[disabled]="loading() || ..."` ile kendi bağlar.
+     */
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Material Symbol adı (bkz. `Icon`) — içeriğin ÖNÜNE eklenir. `loading=true` iken spinner onun YERİNE geçer. */
+    iconStart = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconStart" }] : /* istanbul ignore next */ []));
+    /** Material Symbol adı — içeriğin ARDINA eklenir. `loading=true` iken GİZLENİR (tek bir dönen gösterge yeterli — `iconStart` ile aynı ilke). */
+    iconEnd = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconEnd" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(buttonVariants({
+        tone: this.tone(),
+        appearance: this.appearance(),
+        size: this.size(),
+        shape: this.shape(),
+    }), this.loading() ? 'cursor-wait' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    nativeType = computed(() => this.type(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeType" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Button, isStandalone: true, selector: "button[mfButton], a[mfButton]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.type": "nativeType()", "attr.aria-busy": "loading() || null" } }, exportAs: ["mfButton"], ngImport: i0, template: `
+    @if (loading()) {
+      <mf-spinner size="xs" />
+    } @else if (iconStart()) {
+      <span mfIcon [size]="18">{{ iconStart() }}</span>
+    }
+    <ng-content />
+    @if (!loading() && iconEnd()) {
+      <span mfIcon [size]="18">{{ iconEnd() }}</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Spinner, selector: "mf-spinner", inputs: ["size", "tone", "ariaLabel"], exportAs: ["mfSpinner"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector -- BİLEREK native eleman + attribute (bkz. yukarıdaki JSDoc)
+                    selector: 'button[mfButton], a[mfButton]',
+                    exportAs: 'mfButton',
+                    imports: [Icon, Spinner],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.type]': 'nativeType()',
+                        '[attr.aria-busy]': 'loading() || null',
+                    },
+                    template: `
+    @if (loading()) {
+      <mf-spinner size="xs" />
+    } @else if (iconStart()) {
+      <span mfIcon [size]="18">{{ iconStart() }}</span>
+    }
+    <ng-content />
+    @if (!loading() && iconEnd()) {
+      <span mfIcon [size]="18">{{ iconEnd() }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Button, buttonVariants };
+//# sourceMappingURL=mesgflow-ui-kit-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-button.mjs","sources":["../../../projects/ui-kit/button/button.variants.ts","../../../projects/ui-kit/button/button.ts","../../../projects/ui-kit/button/mesgflow-ui-kit-button.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\n/**\r\n * İki bağımsız eksen: `tone` (anlamsal renk, bkz. `MfTone`) × `appearance`\r\n * (dolu/kenarlıklı/düz-metin). Her kombinasyon\r\n * `compoundVariants`'ta açık — okunabilirlik netlik demek, kısayola kaçma.\r\n *\r\n * Gloss/iç-highlight YOK — 2 kez reddedildi.\r\n * `outlined` kenarlığı bilinçli olarak jenerik gri DEĞİL, rengin kendisinin\r\n * düşük opaklıklı hali (`border-accent/30` gibi) — düz gri çizgi \"90'lar\r\n * form elemanı\" hissi veriyordu, renkli-şeffaf kenarlık modern/kasıtlı durur.\r\n * Bu opaklık artık TEK bir class'ta iki modu birden doğru veriyor: `accent`/\r\n * `success`/`warning`/`danger`/`info` çıplak isimleri `styles.css`'te\r\n * moda göre takas olan rol token'ları (600 basamağı light, 400 basamağı\r\n * dark) — `dark:` ikizi yazmaya gerek YOK.\r\n */\r\nexport const buttonVariants = cva(\r\n  /*\r\n   * `appearance-none border border-transparent`: Tailwind'in TAM `preflight.css`'i\r\n   * (bkz. styles.css) native <button>'ın tarayıcı varsayılan görünümünü zaten\r\n   * sıfırlıyor; `border-transparent` burada BİLEREK KALICI — `border` width'i\r\n   * TEK KAYNAKTAN (buradan) gelsin diye netlik amaçlı bırakıldı. Outlined\r\n   * compound variant'ları sadece border-RENGİNİ değiştiriyor (`cn()`/twMerge\r\n   * ile çakışma güvenli çözülüyor, bkz. button.ts) — ayrıca bir yerde\r\n   * `border-0`/`border` çifti YAZMA.\r\n   */\r\n  /*\r\n   * Focus: box-shadow tabanlı `ring`+`ring-offset` YERİNE native `outline`+\r\n   * `outline-offset` kullanılıyor (bkz. projects/ui-kit/README.md \"Focus — tek\r\n   * mekanizma\") — Windows Yüksek Kontrast modunda box-shadow tamamen\r\n   * kayboluyor ama outline korunuyor, outline `overflow:hidden` içinde\r\n   * kırpılmıyor, ve modern tarayıcılar outline'ı elementin kendi\r\n   * border-radius'una göre otomatik yuvarlıyor. Renk artık TÜM primitifler\r\n   * genelinde TEK bir kaynak: `outline-focus-ring` (styles.css'te tanımlı,\r\n   * moda göre 600/400 basamağı arasında takas olur) — eskiden her tone\r\n   * kendi `focus-visible:outline-X/50`'sini taşıyordu (input'ta `ring-4`,\r\n   * checkbox'ta `ring-2 ring-offset-2` gibi üç farklı mekanizma da vardı),\r\n   * artık tüm primitifler bu tek mekanizmaya bağlı.\r\n   */\r\n  'inline-flex appearance-none items-center justify-center gap-2 border border-transparent font-medium tracking-label transition-colors duration-fast ease-emphasis ' +\r\n    'active:scale-[0.99] ' +\r\n    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    'disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:active:scale-100',\r\n  {\r\n    variants: {\r\n      tone: {\r\n        primary: '',\r\n        neutral: '',\r\n        success: '',\r\n        warning: '',\r\n        danger: '',\r\n        info: '',\r\n        help: '',\r\n      },\r\n      appearance: {\r\n        filled: '',\r\n        outlined: 'bg-transparent',\r\n        text: 'bg-transparent',\r\n      },\r\n      /*\r\n       * Yoğunluk sıkılaştırıldı: md 40px→36px (kurumsal panellerde 40px iri\r\n       * duruyordu, Linear/Vercel/GitHub yoğunluğuna çekildi). Radius\r\n       * `rounded-lg`(eski 8px) → `rounded-md`(yeni 8px) — görünüş AYNI,\r\n       * sadece isim değişti (bkz. radius.css'teki \"nested radius\" notu:\r\n       * kart/panel gibi KAPSAYICILAR artık `rounded-lg`de kalıp otomatik\r\n       * 12px'e büyüyor, kontroller bu satırda `rounded-md`ye taşınarak eski\r\n       * görünümü koruyor).\r\n       *\r\n       * `h-control-*` (bkz. radius.css) — TEK kontrol-yükseklik kaynağı,\r\n       * Input/Select/NumberInput/... ile PAYLAŞILAN aynı üç basamak (bkz.\r\n       * `core/recipes.ts` `controlSize`). `lg` bu geçişte 44px→40px'e indi\r\n       * (BREAKING — CHANGELOG'a bkz.): 44px sm/md'ye göre orantısız iriydi,\r\n       * yeni üçlü tutarlı bir 32/36/40 merdiveni.\r\n       */\r\n      size: {\r\n        sm: 'h-control-sm px-3 text-sm rounded-md',\r\n        md: 'h-control-md px-4 text-sm rounded-md',\r\n        lg: 'h-control-lg px-5 text-base rounded-md',\r\n        /*\r\n         * `text-xs font-semibold`: icon boyutu SADECE ikon değil metin de\r\n         * taşıyabiliyor (ör. language-switcher'ın \"EN\"/\"TR\" etiketi) — boyut\r\n         * tanımlanmadığında metin varsayılan (büyük) font'ta basılıyor,\r\n         * yanındaki 18px ikonla görsel ağırlığı uyuşmuyordu.\r\n         *\r\n         * Şekil (yuvarlak/köşeli) ve dolayısıyla focus mekanizması artık\r\n         * `shape` eksenine taşındı (aşağıda) — bu satır sadece boyut/tipografi\r\n         * taşıyor, `rounded-*` YOK. Yükseklik `md` ile aynı (36px).\r\n         */\r\n        icon: 'relative aspect-square h-control-md shrink-0 text-xs font-semibold',\r\n      },\r\n      /**\r\n       * `size=\"icon\"` için şekil ekseni — diğer boyutlarda (sm/md/lg) etkisiz\r\n       * (boş string). Kullanıcı geri bildirimi: yuvarlak ikon-buton hover'ı\r\n       * \"her yerde aynı\" duruyordu, GitHub/Linear tarzı köşeli (rounded-md)\r\n       * bir hover/şekil de istendi — toolbar aksiyonları (Filtreler, satır\r\n       * düzenle/sil vb.) `square`, avatar-yanı ikonlar (tema/dil değiştirici)\r\n       * `round` (varsayılan) kullanıyor.\r\n       */\r\n      shape: {\r\n        round: '',\r\n        square: '',\r\n      },\r\n    },\r\n    compoundVariants: [\r\n      /*\r\n       * round: native `outline` `rounded-full`'u izlediği için (modern\r\n       * tarayıcılar outline'ı border-radius'a göre otomatik yuvarlıyor)\r\n       * doğrudan buton üzerinde bırakılsaydı focus göstergesi daire-içinde-\r\n       * daire (\"bullseye\"/ripple'ı andıran) görünürdü. Bunun yerine kendi\r\n       * `rounded-md` (köşeli) radius'una sahip bağımsız bir `::after` pseudo-\r\n       * element kare/köşeli bir çerçeve çiziyor, rengi de artık tek kaynaklı\r\n       * `outline-focus-ring` — eskiden \"ink/paper\" sabit zıtlığı (light:\r\n       * dark-canvas, dark: slate-100) kullanılıyordu çünkü `outline-current`\r\n       * filled+beyaz-metin butonlarda beyaz zeminde beyaza karışıyordu; yeni\r\n       * `focus-ring` token'ı zaten primary-600/400 (arkaplandan bağımsız\r\n       * yüksek kontrastlı bir marka rengi) olduğu için aynı sorunu yaşamıyor.\r\n       *\r\n       * square: buton zaten `rounded-md` olduğundan native `outline` fazladan\r\n       * bir teknik gerektirmeden doğru köşeli çerçeveyi otomatik veriyor —\r\n       * base class'taki `focus-visible:outline` mekanizması yeterli, ek bir\r\n       * şey eklemeye GEREK YOK.\r\n       */\r\n      {\r\n        size: 'icon',\r\n        shape: 'round',\r\n        class:\r\n          \"rounded-full focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-1 after:rounded-md after:opacity-0 after:outline after:outline-2 after:outline-focus-ring after:transition-opacity after:duration-fast after:content-[''] focus-visible:after:opacity-100\",\r\n      },\r\n      {\r\n        size: 'icon',\r\n        shape: 'square',\r\n        class: 'rounded-md',\r\n      },\r\n      // ---- filled ----\r\n      // NOT: primary'nin dolu bloğu `bg-accent-fill`/`hover:bg-accent-fill-hover`\r\n      // (color.css'te tanımlı rol token'ları) KULLANIR, ham basamak DEĞİL —\r\n      // LIGHT'ta primary-900 (`#062c22`, spec'in \"Forest Emerald\" CTA'sı),\r\n      // DARK'ta primary-400 (`#10b981`, spec'in canlı zümrüt CTA'sı) + DARK'ta\r\n      // mürekkep metin (`--mf-fg-on-accent`, beyaz `#10B981` üstünde 2.54:1\r\n      // AA altı olduğundan). Diğer dört semantik ton (success/warning/danger/\r\n      // info/help) da AYNI beşli rol desenini paylaşır: `bg-X-fill\r\n      // text-X-fill-fg shadow-filled hover:bg-X-fill-hover` — light'ta\r\n      // danger/help/info beyaz metin taşır, success/warning HER ZAMAN\r\n      // mürekkep (spec'in beş rengi de dark modda beyazla AA'yı geçmiyor,\r\n      // bu yüzden dark'ta hepsi mürekkep). `shadow-filled` (elevation.css) —\r\n      // `shadow-1` kapsayıcı gölgesidir, kontrol ödünç almaz; nötr filled\r\n      // (spec'in \"Secondary\"si, `neutral-fill` rol token'ı) gölgesiz kalır.\r\n      {\r\n        tone: 'primary',\r\n        appearance: 'filled',\r\n        class: 'bg-accent-fill text-fg-on-accent shadow-glow hover:bg-accent-fill-hover',\r\n      },\r\n      {\r\n        tone: 'neutral',\r\n        appearance: 'filled',\r\n        class: 'bg-neutral-fill text-neutral-fill-fg hover:bg-neutral-fill-hover',\r\n      },\r\n      {\r\n        tone: 'danger',\r\n        appearance: 'filled',\r\n        class: 'bg-danger-fill text-danger-fill-fg shadow-filled hover:bg-danger-fill-hover',\r\n      },\r\n      {\r\n        tone: 'info',\r\n        appearance: 'filled',\r\n        class: 'bg-info-fill text-info-fill-fg shadow-filled hover:bg-info-fill-hover',\r\n      },\r\n      {\r\n        tone: 'success',\r\n        appearance: 'filled',\r\n        class: 'bg-success-fill text-success-fill-fg shadow-filled hover:bg-success-fill-hover',\r\n      },\r\n      {\r\n        tone: 'warning',\r\n        appearance: 'filled',\r\n        class: 'bg-warning-fill text-warning-fill-fg shadow-filled hover:bg-warning-fill-hover',\r\n      },\r\n      {\r\n        tone: 'help',\r\n        appearance: 'filled',\r\n        class: 'bg-help-fill text-help-fill-fg shadow-filled hover:bg-help-fill-hover',\r\n      },\r\n\r\n      // ---- outlined ----\r\n      {\r\n        tone: 'primary',\r\n        appearance: 'outlined',\r\n        class: 'border-accent/30 text-accent hover:bg-accent/5',\r\n      },\r\n      {\r\n        tone: 'neutral',\r\n        appearance: 'outlined',\r\n        class: 'border-border text-fg-muted hover:bg-surface-alt',\r\n      },\r\n      {\r\n        tone: 'success',\r\n        appearance: 'outlined',\r\n        class: 'border-success/30 text-success hover:bg-success/5',\r\n      },\r\n      {\r\n        tone: 'warning',\r\n        appearance: 'outlined',\r\n        class: 'border-warning/30 text-warning hover:bg-warning/5',\r\n      },\r\n      {\r\n        tone: 'danger',\r\n        appearance: 'outlined',\r\n        class: 'border-danger/30 text-danger hover:bg-danger/5',\r\n      },\r\n      {\r\n        tone: 'info',\r\n        appearance: 'outlined',\r\n        class: 'border-info/30 text-info hover:bg-info/5',\r\n      },\r\n      {\r\n        tone: 'help',\r\n        appearance: 'outlined',\r\n        class: 'border-help/30 text-help hover:bg-help/5',\r\n      },\r\n      // ---- text ----\r\n      {\r\n        tone: 'primary',\r\n        appearance: 'text',\r\n        class: 'text-accent hover:bg-accent/5',\r\n      },\r\n      {\r\n        tone: 'neutral',\r\n        appearance: 'text',\r\n        class: 'text-fg-muted hover:bg-surface-alt',\r\n      },\r\n      {\r\n        tone: 'success',\r\n        appearance: 'text',\r\n        class: 'text-success hover:bg-success/5',\r\n      },\r\n      {\r\n        tone: 'warning',\r\n        appearance: 'text',\r\n        class: 'text-warning hover:bg-warning/5',\r\n      },\r\n      {\r\n        tone: 'danger',\r\n        appearance: 'text',\r\n        class: 'text-danger hover:bg-danger/5',\r\n      },\r\n      {\r\n        tone: 'info',\r\n        appearance: 'text',\r\n        class: 'text-info hover:bg-info/5',\r\n      },\r\n      {\r\n        tone: 'help',\r\n        appearance: 'text',\r\n        class: 'text-help hover:bg-help/5',\r\n      },\r\n    ],\r\n    defaultVariants: { tone: 'primary', appearance: 'filled', size: 'md', shape: 'round' },\r\n  },\r\n);\r\n\r\nexport type ButtonTone = VariantProps<typeof buttonVariants>['tone'];\r\n/** @deprecated `ButtonTone` kullan — `severity` girdisi `tone`'a taşındı (bkz. plan Faz 1a). */\r\nexport type ButtonSeverity = ButtonTone;\r\nexport type ButtonAppearance = VariantProps<typeof buttonVariants>['appearance'];\r\nexport type ButtonSize = VariantProps<typeof buttonVariants>['size'];\r\nexport type ButtonShape = VariantProps<typeof buttonVariants>['shape'];\r\n","import { Component, computed, input } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Spinner } from '@mesgflow/ui-kit/spinner';\r\nimport {\r\n  buttonVariants,\r\n  type ButtonAppearance,\r\n  type ButtonShape,\r\n  type ButtonSize,\r\n  type ButtonTone,\r\n} from './button.variants';\r\n\r\n/**\r\n * `<button mfButton>`/`<a mfButton>` — selector native elemanın KENDİSİNİ\r\n * hedefler (`button[mfButton], a[mfButton]`), bir SARMALAYICI etiket\r\n * (`<mf-button>`) DEĞİL (bkz. `projects/ui-kit/README.md` \"Directive mi,\r\n * component mi?\") — bu yüzden tüketicinin `class=\"...\"` ile verdiği static\r\n * class GENE doğrudan gerçek native elemana düşer, eskiden directive'ken\r\n * olduğu gibi (host'ta kalıp içe düşmeme sorunu YOK). Directive'ten\r\n * component'e yükseltilmenin TEK sebebi: `loading`'i gerçek bir\r\n * `<mf-spinner>`'a, `iconStart`/`iconEnd`'i gerçek ikon element'lerine\r\n * bağlayabilmek için bir ŞABLONA ihtiyaç duyulması — tüketicinin kendi\r\n * içeriği `<ng-content />` ile AYNEN korunur.\r\n *\r\n * `tone` (renk) × `appearance` (dolu/kenarlıklı/düz-metin) bağımsız iki\r\n * girdi — ör. `tone=\"danger\" appearance=\"text\" size=\"icon\"` sadece ikon\r\n * gösteren, kenarlıksız bir sil butonu için.\r\n */\r\n@Component({\r\n  // eslint-disable-next-line @angular-eslint/component-selector -- BİLEREK native eleman + attribute (bkz. yukarıdaki JSDoc)\r\n  selector: 'button[mfButton], a[mfButton]',\r\n  exportAs: 'mfButton',\r\n  imports: [Icon, Spinner],\r\n  host: {\r\n    '[class]': 'classes()',\r\n    '[attr.type]': 'nativeType()',\r\n    '[attr.aria-busy]': 'loading() || null',\r\n  },\r\n  template: `\r\n    @if (loading()) {\r\n      <mf-spinner size=\"xs\" />\r\n    } @else if (iconStart()) {\r\n      <span mfIcon [size]=\"18\">{{ iconStart() }}</span>\r\n    }\r\n    <ng-content />\r\n    @if (!loading() && iconEnd()) {\r\n      <span mfIcon [size]=\"18\">{{ iconEnd() }}</span>\r\n    }\r\n  `,\r\n})\r\nexport class Button {\r\n  readonly tone = input<ButtonTone>('primary');\r\n  readonly appearance = input<ButtonAppearance>('filled');\r\n  readonly size = input<ButtonSize>('md');\r\n  /** Sadece `size=\"icon\"`'da etkili — bkz. button.variants.ts. */\r\n  readonly shape = input<ButtonShape>('round');\r\n  /** Native <button> varsayılan type=\"submit\" sürprizini önlemek için — <a>'da yok sayılır. */\r\n  readonly type = input<'button' | 'submit' | 'reset'>('button');\r\n  /**\r\n   * `true` iken içeriğin (`<ng-content />`) ÖNÜNE `<mf-spinner size=\"xs\" />`\r\n   * eklenir — `iconStart` varsa YERİNE geçer, etiket metni görünür KALIR\r\n   * (buton \"Kaydet\" yazıp yanında dönen bir gösterge taşır, metin\r\n   * kaybolmaz). `disabled`'ı KENDİLİĞİNDEN yönetmez — tüketici\r\n   * `[disabled]=\"loading() || ...\"` ile kendi bağlar.\r\n   */\r\n  readonly loading = input(false);\r\n  /** Material Symbol adı (bkz. `Icon`) — içeriğin ÖNÜNE eklenir. `loading=true` iken spinner onun YERİNE geçer. */\r\n  readonly iconStart = input('');\r\n  /** Material Symbol adı — içeriğin ARDINA eklenir. `loading=true` iken GİZLENİR (tek bir dönen gösterge yeterli — `iconStart` ile aynı ilke). */\r\n  readonly iconEnd = input('');\r\n\r\n  protected readonly classes = computed(() =>\r\n    cn(\r\n      buttonVariants({\r\n        tone: this.tone(),\r\n        appearance: this.appearance(),\r\n        size: this.size(),\r\n        shape: this.shape(),\r\n      }),\r\n      this.loading() ? 'cursor-wait' : '',\r\n    ),\r\n  );\r\n  protected readonly nativeType = computed(() => this.type());\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAEA;;;;;;;;;;;;;AAaG;AACI,MAAM,cAAc,GAAG,GAAG;AAC/B;;;;;;;;AAQG;AACH;;;;;;;;;;;;AAYG;AACH,mKAAmK;IACjK,sBAAsB;IACtB,gHAAgH;AAChH,IAAA,iGAAiG,EACnG;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,IAAI,EAAE,EAAE;AACT,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,QAAQ,EAAE,gBAAgB;AAC1B,YAAA,IAAI,EAAE,gBAAgB;AACvB,SAAA;AACD;;;;;;;;;;;;;;AAcG;AACH,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,sCAAsC;AAC1C,YAAA,EAAE,EAAE,sCAAsC;AAC1C,YAAA,EAAE,EAAE,wCAAwC;AAC5C;;;;;;;;;AASG;AACH,YAAA,IAAI,EAAE,oEAAoE;AAC3E,SAAA;AACD;;;;;;;AAOG;AACH,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,EAAE;AACT,YAAA,MAAM,EAAE,EAAE;AACX,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB;;;;;;;;;;;;;;;;;AAiBG;AACH,QAAA;AACE,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EACH,yRAAyR;AAC5R,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,QAAQ;AACf,YAAA,KAAK,EAAE,YAAY;AACpB,SAAA;;;;;;;;;;;;;;;AAeD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,yEAAyE;AACjF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,kEAAkE;AAC1E,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,6EAA6E;AACrF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,uEAAuE;AAC/E,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,gFAAgF;AACxF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,gFAAgF;AACxF,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,uEAAuE;AAC/E,SAAA;;AAGD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,KAAK,EAAE,gDAAgD;AACxD,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,KAAK,EAAE,kDAAkD;AAC1D,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,KAAK,EAAE,mDAAmD;AAC3D,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,KAAK,EAAE,mDAAmD;AAC3D,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,KAAK,EAAE,gDAAgD;AACxD,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,KAAK,EAAE,0CAA0C;AAClD,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,KAAK,EAAE,0CAA0C;AAClD,SAAA;;AAED,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,KAAK,EAAE,+BAA+B;AACvC,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,KAAK,EAAE,oCAAoC;AAC5C,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,KAAK,EAAE,iCAAiC;AACzC,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,KAAK,EAAE,iCAAiC;AACzC,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,KAAK,EAAE,+BAA+B;AACvC,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,KAAK,EAAE,2BAA2B;AACnC,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,KAAK,EAAE,2BAA2B;AACnC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;AACvF,CAAA;;ACrPH;;;;;;;;;;;;;;;AAeG;MAuBU,MAAM,CAAA;IACR,IAAI,GAAG,KAAK,CAAa,SAAS;6EAAC;IACnC,UAAU,GAAG,KAAK,CAAmB,QAAQ;mFAAC;IAC9C,IAAI,GAAG,KAAK,CAAa,IAAI;6EAAC;;IAE9B,KAAK,GAAG,KAAK,CAAc,OAAO;8EAAC;;IAEnC,IAAI,GAAG,KAAK,CAAgC,QAAQ;6EAAC;AAC9D;;;;;;AAMG;IACM,OAAO,GAAG,KAAK,CAAC,KAAK;gFAAC;;IAEtB,SAAS,GAAG,KAAK,CAAC,EAAE;kFAAC;;IAErB,OAAO,GAAG,KAAK,CAAC,EAAE;gFAAC;IAET,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA,cAAc,CAAC;AACb,QAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,QAAA,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE;AAC7B,QAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,QAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACpB,KAAA,CAAC,EACF,IAAI,CAAC,OAAO,EAAE,GAAG,aAAa,GAAG,EAAE,CACpC;gFACF;IACkB,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE;mFAAC;uGAhChD,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAZP,CAAA;;;;;;;;;;GAUT,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAhBS,IAAI,qFAAE,OAAO,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAkBZ,MAAM,EAAA,UAAA,EAAA,CAAA;kBAtBlB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,+BAA+B;AACzC,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;AACxB,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,aAAa,EAAE,cAAc;AAC7B,wBAAA,kBAAkB,EAAE,mBAAmB;AACxC,qBAAA;AACD,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;AAUT,EAAA,CAAA;AACF,iBAAA;;;ACjDD;;AAEG;;"}