@mesgflow/ui-kit 0.6.0 → 0.7.0

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

@@ -1,51 +1,102 @@
 import * as i0 from '@angular/core';
 import { input, computed, Component } from '@angular/core';
-import { cn } from '@mesgflow/ui-kit/core';
+import { focusRecipe, disabledRecipe, 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';
 
+const TONES = ['primary', 'neutral', 'success', 'warning', 'danger', 'info', 'help'];
+/** Tonun "renkli metin" rolü — primary `accent`, diğerleri çıplak rol adı (moda göre takas olur). */
+const INK = {
+    primary: 'accent',
+    neutral: 'fg-muted',
+    success: 'success',
+    warning: 'warning',
+    danger: 'danger',
+    info: 'info',
+    help: 'help',
+};
 /**
- * İ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.
+ * Altı görünüm × yedi ton — her hücre `compoundVariants`'ta açık (üretilmiş,
+ * ama tek bir tabloda okunur). Görünüm hiyerarşisi (en vurgulu → en sessiz):
+ *
+ * - `filled`   — birincil eylem. Dolu rol zemini (`X-fill`), primary'de dark
+ *   modda emerald `shadow-glow`, diğer tonlarda `shadow-filled`.
+ * - `soft`     — tonal (Radix "soft", M3 "tonal"): `X-tint` zemin + `X-tint-fg`
+ *   metin. Kart içi ikincil eylemler, filtre çipleri, "Taslak kaydet".
+ * - `outlined` — rengin kendisinin düşük opaklıklı kenarlığı (jenerik gri
+ *   DEĞİL — gri çizgi "90'lar form elemanı" hissi veriyordu).
+ * - `ghost`    — kenarlıksız, zeminsiz; hover'da NÖTR state layer
+ *   (`bg-state-hover`, cam/renkli zeminde de doğru). Araç çubuğu/ikon butonları.
+ * - `text`     — `ghost`'un renkli-hover'lı hali (geriye dönük uyumluluk).
+ * - `link`     — satır içi bağlantı gibi: yükseklik/dolgu yok, altı çizili hover.
  *
  * 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(
+function toneMatrix() {
+    const rows = [];
+    for (const tone of TONES) {
+        const ink = INK[tone];
+        // ---- filled ----
+        const filled = tone === 'primary'
+            ? 'bg-accent-fill text-fg-on-accent shadow-glow hover:bg-accent-fill-hover'
+            : tone === 'neutral'
+                ? 'bg-neutral-fill text-neutral-fill-fg hover:bg-neutral-fill-hover'
+                : `bg-${tone}-fill text-${tone}-fill-fg shadow-filled hover:bg-${tone}-fill-hover`;
+        rows.push({ tone, appearance: 'filled', class: filled });
+        // ---- soft ----
+        const soft = tone === 'primary'
+            ? 'bg-primary-tint text-primary-tint-fg hover:bg-accent/20'
+            : tone === 'neutral'
+                ? 'bg-state-selected text-fg hover:bg-state-pressed'
+                : `bg-${tone}-tint text-${tone}-tint-fg hover:bg-${tone}/20`;
+        rows.push({ tone, appearance: 'soft', class: soft });
+        // ---- outlined ----
+        const outlined = tone === 'neutral'
+            ? 'border-border text-fg bg-surface shadow-control hover:bg-state-hover hover:border-border-strong'
+            : `border-${ink}/30 text-${ink} hover:bg-${ink}/5 hover:border-${ink}/50`;
+        rows.push({ tone, appearance: 'outlined', class: outlined });
+        // ---- ghost ----
+        const ghost = tone === 'neutral'
+            ? 'text-fg-muted hover:bg-state-hover hover:text-fg active:bg-state-pressed'
+            : `text-${ink} hover:bg-state-hover active:bg-state-pressed`;
+        rows.push({ tone, appearance: 'ghost', class: ghost });
+        // ---- text ----
+        const text = tone === 'neutral'
+            ? 'text-fg-muted hover:bg-state-hover hover:text-fg'
+            : `text-${ink} hover:bg-${ink}/5`;
+        rows.push({ tone, appearance: 'text', class: text });
+        // ---- link ----
+        const link = tone === 'neutral' ? 'text-fg hover:text-fg' : `text-${ink}`;
+        rows.push({ tone, appearance: 'link', class: link });
+    }
+    return rows;
+}
 /*
- * `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.
+ * Tailwind sınıf tarayıcısı üretilmiş string'leri GÖREMEZ (`bg-${tone}-fill`).
+ * Aşağıdaki liste yalnızca tarayıcı için — derlenen CSS'e girmelerini garanti eder.
+ * bg-success-fill bg-warning-fill bg-danger-fill bg-info-fill bg-help-fill
+ * text-success-fill-fg text-warning-fill-fg text-danger-fill-fg text-info-fill-fg text-help-fill-fg
+ * hover:bg-success-fill-hover hover:bg-warning-fill-hover hover:bg-danger-fill-hover hover:bg-info-fill-hover hover:bg-help-fill-hover
+ * bg-success-tint bg-warning-tint bg-danger-tint bg-info-tint bg-help-tint
+ * text-success-tint-fg text-warning-tint-fg text-danger-tint-fg text-info-tint-fg text-help-tint-fg
+ * hover:bg-success/20 hover:bg-warning/20 hover:bg-danger/20 hover:bg-info/20 hover:bg-help/20
+ * border-accent/30 border-success/30 border-warning/30 border-danger/30 border-info/30 border-help/30
+ * hover:border-accent/50 hover:border-success/50 hover:border-warning/50 hover:border-danger/50 hover:border-info/50 hover:border-help/50
+ * text-accent text-success text-warning text-danger text-info text-help
+ * hover:bg-accent/5 hover:bg-success/5 hover:bg-warning/5 hover:bg-danger/5 hover:bg-info/5 hover:bg-help/5
  */
+const buttonVariants = cva(
 /*
- * 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ı.
+ * `border border-transparent` — border width TEK kaynaktan; outlined
+ * yalnızca rengini değiştirir. Geçiş: renkler + gölge + `scale` (basma
+ * hissi artık anlık değil, `duration-fast` ile yumuşak).
+ * Focus: `outline` tabanlı TEK mekanizma (`focusRecipe`, bkz. core/recipes.ts).
  */
-'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', {
+'relative inline-flex shrink-0 appearance-none items-center justify-center gap-2 border border-transparent font-medium tracking-label whitespace-nowrap select-none ' +
+    'transition-[color,background-color,border-color,box-shadow,scale,opacity] duration-fast ease-emphasis ' +
+    'active:scale-[0.98] disabled:active:scale-100 ' +
+    `${focusRecipe} ${disabledRecipe}`, {
     variants: {
         tone: {
             primary: '',
@@ -58,48 +109,33 @@ const buttonVariants = cva(
         },
         appearance: {
             filled: '',
+            soft: '',
             outlined: 'bg-transparent',
+            ghost: 'bg-transparent',
             text: 'bg-transparent',
+            link: 'bg-transparent underline-offset-4 hover:underline active:scale-100',
         },
         /*
-         * 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.
+         * Input/Select/... ile PAYLAŞILAN merdiven: xs 28 · sm 32 · md 36 ·
+         * lg 40 · xl 48 (density ile birlikte ölçeklenir).
          */
         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',
+            xs: 'h-control-xs gap-1.5 rounded-md px-2.5 text-xs',
+            sm: 'h-control-sm gap-1.5 rounded-md px-3 text-sm',
+            md: 'h-control-md rounded-md px-4 text-sm',
+            lg: 'h-control-lg rounded-md px-5 text-base',
+            xl: 'h-control-xl rounded-lg px-6 text-base',
             /*
-             * `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).
+             * Kare ikon butonları — yükseklik ilgili kontrol basamağıyla aynı.
+             * `text-xs font-semibold`: ikon butonu kısa metin de taşıyabilir
+             * (dil değiştiricinin "EN"/"TR" etiketi).
              */
-            icon: 'relative aspect-square h-control-md shrink-0 text-xs font-semibold',
+            'icon-sm': 'aspect-square h-control-sm text-xs font-semibold',
+            icon: 'aspect-square h-control-md text-xs font-semibold',
+            'icon-lg': 'aspect-square h-control-lg text-sm 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.
-         */
+        /** Yalnızca ikon boyutlarında etkili — `round` (avatar yanı) / `square` (araç çubuğu). */
         shape: {
             round: '',
             square: '',
@@ -107,173 +143,49 @@ const buttonVariants = cva(
     },
     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.
+         * round: native `outline` `rounded-full`'u izlediği için doğrudan buton
+         * üzerinde "daire içinde daire" görünürdü — köşeli bağımsız bir
+         * `::after` çerçeve çiziliyor. square: buton zaten `rounded-md`.
          */
-        {
-            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',
-        },
+        ...['icon-sm', 'icon', 'icon-lg'].flatMap((size) => [
+            {
+                size,
+                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, shape: 'square', class: 'rounded-md' },
+        ]),
+        // `link` boyut ekseninin yüksekliğini/dolgusunu ezer — satır içi akar.
+        { appearance: 'link', class: 'h-auto rounded-sm p-0' },
+        ...toneMatrix(),
     ],
     defaultVariants: { tone: 'primary', appearance: 'filled', size: 'md', shape: 'round' },
 });
 
+/** İkon boyutu buton boyutuyla ölçeklenir. */
+const ICON_PX = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 20,
+    'icon-sm': 16,
+    icon: 18,
+    'icon-lg': 20,
+};
 /**
  * `<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.
+ * (`<mf-button>`) DEĞİL — tüketicinin `class="..."` ile verdiği static
+ * class doğrudan gerçek native elemana düşer. Component olmasının 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ç duyması.
+ *
+ * `tone` (renk) × `appearance` (filled/soft/outlined/ghost/text/link) ×
+ * `size` (xs…xl, icon-sm/icon/icon-lg) bağımsız eksenler.
  *
- * `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.
+ * Mikro-etkileşimler: basınca `scale(0.98)` (yumuşak geçişli), `iconEnd`
+ * hover'da 2px ileri kayar (RTL'de geri), loading genişliği korur.
  */
 class Button {
     tone = input('primary', /* @ts-ignore */
@@ -282,25 +194,24 @@ class Button {
     ...(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. */
+    /** Sadece ikon boyutlarında (`icon-sm`/`icon`/`icon-lg`) 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.
+     * `true` iken: `iconStart` varsa spinner onun YERİNE geçer (metin görünür
+     * kalır); yoksa spinner ortaya biner ve içerik saydamlaşır — iki durumda da
+     * buton genişliği DEĞİŞMEZ. `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. */
+    /** İkon 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). */
+    /** İkon adı — içeriğin ARDINA eklenir, hover'da ileri kayar. `loading=true` iken GİZLENİR. */
     iconEnd = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconEnd" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn(buttonVariants({
@@ -308,20 +219,39 @@ class Button {
         appearance: this.appearance(),
         size: this.size(),
         shape: this.shape(),
-    }), this.loading() ? 'cursor-wait' : ''), /* @ts-ignore */
+    }), 'group/btn', this.loading() ? 'cursor-wait' : ''), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     nativeType = computed(() => this.type(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nativeType" }] : /* istanbul ignore next */ []));
+    iconPx = computed(() => ICON_PX[this.size() ?? 'md'], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconPx" }] : /* istanbul ignore next */ []));
+    contentClass = computed(() => cn('inline-flex min-w-0 items-center gap-[inherit] empty:hidden', this.loading() && !this.iconStart() ? 'opacity-0' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentClass" }] : /* 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()) {
+    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", "attr.data-appearance": "appearance()" } }, exportAs: ["mfButton"], ngImport: i0, template: `
+    @if (loading() && !iconStart()) {
+      <!--
+        İkon yuvası yoksa spinner ORTAYA biner ve içerik saydamlaşır — buton
+        genişliği DEĞİŞMEZ (layout shift yok). Metin erişilebilirlik ağacında
+        KALIR (opacity, visibility değil).
+      -->
+      <span class="absolute inset-0 flex items-center justify-center" aria-hidden="true">
+        <mf-spinner size="xs" />
+      </span>
+    }
+    @if (loading() && iconStart()) {
       <mf-spinner size="xs" />
     } @else if (iconStart()) {
-      <span mfIcon [size]="18">{{ iconStart() }}</span>
+      <span mfIcon [size]="iconPx()">{{ iconStart() }}</span>
     }
-    <ng-content />
+    <span [class]="contentClass()"><ng-content /></span>
     @if (!loading() && iconEnd()) {
-      <span mfIcon [size]="18">{{ iconEnd() }}</span>
+      <span
+        mfIcon
+        [size]="iconPx()"
+        class="transition-transform duration-fast ease-emphasis group-hover/btn:translate-x-0.5 rtl:-scale-x-100 rtl:group-hover/btn:-translate-x-0.5"
+        >{{ 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"] }] });
 }
@@ -336,16 +266,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[class]': 'classes()',
                         '[attr.type]': 'nativeType()',
                         '[attr.aria-busy]': 'loading() || null',
+                        '[attr.data-appearance]': 'appearance()',
                     },
                     template: `
-    @if (loading()) {
+    @if (loading() && !iconStart()) {
+      <!--
+        İkon yuvası yoksa spinner ORTAYA biner ve içerik saydamlaşır — buton
+        genişliği DEĞİŞMEZ (layout shift yok). Metin erişilebilirlik ağacında
+        KALIR (opacity, visibility değil).
+      -->
+      <span class="absolute inset-0 flex items-center justify-center" aria-hidden="true">
+        <mf-spinner size="xs" />
+      </span>
+    }
+    @if (loading() && iconStart()) {
       <mf-spinner size="xs" />
     } @else if (iconStart()) {
-      <span mfIcon [size]="18">{{ iconStart() }}</span>
+      <span mfIcon [size]="iconPx()">{{ iconStart() }}</span>
     }
-    <ng-content />
+    <span [class]="contentClass()"><ng-content /></span>
     @if (!loading() && iconEnd()) {
-      <span mfIcon [size]="18">{{ iconEnd() }}</span>
+      <span
+        mfIcon
+        [size]="iconPx()"
+        class="transition-transform duration-fast ease-emphasis group-hover/btn:translate-x-0.5 rtl:-scale-x-100 rtl:group-hover/btn:-translate-x-0.5"
+        >{{ iconEnd() }}</span
+      >
     }
   `,
                 }]