@sd-angular/core 19.0.13 → 19.0.14

package/assets/images/success.svg

@@ -1,18 +1,18 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
-  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
-  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
-
-  
-  <circle cx="96" cy="96" r="44" fill="#E4E4E7" stroke="#52525B" stroke-width="2"></circle>
-  <circle cx="96" cy="96" r="32" fill="#FFFFFF" stroke="#52525B" stroke-width="1.5" stroke-opacity="0.45"></circle>
-  
-  <path d="M80 96 L92 108 L114 84" fill="none" stroke="#52525B" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>
-  
-  <circle cx="44" cy="50" r="3" fill="#71717A"></circle>
-  <rect x="148" y="44" width="6" height="6" rx="1.5" transform="rotate(20 151 47)" fill="#D4D4D8"></rect>
-  <circle cx="36" cy="118" r="2.5" fill="#D4D4D8"></circle>
-  <rect x="158" y="116" width="5" height="5" rx="1" transform="rotate(35 161 119)" fill="#71717A"></rect>
-  <path d="M50 84 l0 -6 M47 81 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
-  <path d="M150 90 l0 -5 M147.5 87.5 l5 0" stroke="#71717A" stroke-width="1.8" stroke-linecap="round"></path>
-
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  
+  <circle cx="96" cy="96" r="44" fill="#E4E4E7" stroke="#52525B" stroke-width="2"></circle>
+  <circle cx="96" cy="96" r="32" fill="#FFFFFF" stroke="#52525B" stroke-width="1.5" stroke-opacity="0.45"></circle>
+  
+  <path d="M80 96 L92 108 L114 84" fill="none" stroke="#52525B" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>
+  
+  <circle cx="44" cy="50" r="3" fill="#71717A"></circle>
+  <rect x="148" y="44" width="6" height="6" rx="1.5" transform="rotate(20 151 47)" fill="#D4D4D8"></rect>
+  <circle cx="36" cy="118" r="2.5" fill="#D4D4D8"></circle>
+  <rect x="158" y="116" width="5" height="5" rx="1" transform="rotate(35 161 119)" fill="#71717A"></rect>
+  <path d="M50 84 l0 -6 M47 81 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <path d="M150 90 l0 -5 M147.5 87.5 l5 0" stroke="#71717A" stroke-width="1.8" stroke-linecap="round"></path>
+
 </svg>

package/assets/images/unauthorized.svg

@@ -1,22 +1,22 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
-  
-  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
-  
-  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
-
-  <path d="M70 84 V64 a26 26 0 0 1 52 0 V84" fill="none" stroke="#52525B" stroke-width="6" stroke-linecap="round"></path>
-  <rect x="52" y="82" width="64" height="58" rx="8" fill="#E4E4E7" stroke="#52525B" stroke-width="2"></rect>
-  <circle cx="84" cy="106" r="6" fill="#52525B"></circle>
-  <path d="M84 108 L82 122 H86 Z" fill="#52525B"></path>
-  <g transform="translate(124 102) rotate(28)">
-    <circle cx="0" cy="0" r="10" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></circle>
-    <circle cx="0" cy="0" r="4" fill="#E4E4E7" stroke="#52525B" stroke-width="1.5"></circle>
-    <rect x="8" y="-3" width="28" height="6" rx="1" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></rect>
-    <rect x="26" y="3" width="4" height="6" fill="#52525B"></rect>
-    <rect x="32" y="3" width="4" height="6" fill="#52525B"></rect>
-  </g>
-  <circle cx="44" cy="50" r="2.5" fill="#71717A"></circle>
-  <circle cx="38" cy="118" r="2.2" fill="#D4D4D8"></circle>
-  <path d="M156 56 l0 -6 M153 53 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
-
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  <path d="M70 84 V64 a26 26 0 0 1 52 0 V84" fill="none" stroke="#52525B" stroke-width="6" stroke-linecap="round"></path>
+  <rect x="52" y="82" width="64" height="58" rx="8" fill="#E4E4E7" stroke="#52525B" stroke-width="2"></rect>
+  <circle cx="84" cy="106" r="6" fill="#52525B"></circle>
+  <path d="M84 108 L82 122 H86 Z" fill="#52525B"></path>
+  <g transform="translate(124 102) rotate(28)">
+    <circle cx="0" cy="0" r="10" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></circle>
+    <circle cx="0" cy="0" r="4" fill="#E4E4E7" stroke="#52525B" stroke-width="1.5"></circle>
+    <rect x="8" y="-3" width="28" height="6" rx="1" fill="#FFFFFF" stroke="#52525B" stroke-width="2"></rect>
+    <rect x="26" y="3" width="4" height="6" fill="#52525B"></rect>
+    <rect x="32" y="3" width="4" height="6" fill="#52525B"></rect>
+  </g>
+  <circle cx="44" cy="50" r="2.5" fill="#71717A"></circle>
+  <circle cx="38" cy="118" r="2.2" fill="#D4D4D8"></circle>
+  <path d="M156 56 l0 -6 M153 53 l6 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+
 </svg>

package/assets/images/unknown-error.svg

@@ -1,18 +1,18 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
-  
-  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
-  
-  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
-
-  <path d="M96 44 L150 134 a6 6 0 0 1 -5 9 H51 a6 6 0 0 1 -5 -9 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
-  <path d="M96 60 L138 130 H54 Z" fill="#FFFFFF" fill-opacity="0.55"></path>
-  <path d="M96 80 L96 112" stroke="#52525B" stroke-width="6" stroke-linecap="round"></path>
-  <circle cx="96" cy="124" r="4" fill="#52525B"></circle>
-  <path d="M30 76 l8 4 l-4 8" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
-  <path d="M162 90 l-8 4 l4 8" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
-  <path d="M52 46 l0 -8 M48 42 l8 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
-  <circle cx="146" cy="46" r="2.8" fill="#71717A"></circle>
-  <circle cx="40" cy="128" r="2.2" fill="#D4D4D8"></circle>
-  <circle cx="158" cy="130" r="2.5" fill="#71717A"></circle>
-
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192" fill="none">
+  
+  <circle cx="96" cy="98" r="64" fill="#F4F4F5"></circle>
+  
+  <ellipse cx="96" cy="160" rx="50" ry="4.5" fill="#1C1B1F" fill-opacity="0.05"></ellipse>
+
+  <path d="M96 44 L150 134 a6 6 0 0 1 -5 9 H51 a6 6 0 0 1 -5 -9 Z" fill="#E4E4E7" stroke="#52525B" stroke-width="2" stroke-linejoin="round"></path>
+  <path d="M96 60 L138 130 H54 Z" fill="#FFFFFF" fill-opacity="0.55"></path>
+  <path d="M96 80 L96 112" stroke="#52525B" stroke-width="6" stroke-linecap="round"></path>
+  <circle cx="96" cy="124" r="4" fill="#52525B"></circle>
+  <path d="M30 76 l8 4 l-4 8" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+  <path d="M162 90 l-8 4 l4 8" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+  <path d="M52 46 l0 -8 M48 42 l8 0" stroke="#71717A" stroke-width="2" stroke-linecap="round"></path>
+  <circle cx="146" cy="46" r="2.8" fill="#71717A"></circle>
+  <circle cx="40" cy="128" r="2.2" fill="#D4D4D8"></circle>
+  <circle cx="158" cy="130" r="2.5" fill="#71717A"></circle>
+
 </svg>

package/assets/scss/ckeditor5.scss

@@ -1,88 +1,88 @@
-// Import the core styles.
-@import '@ckeditor/ckeditor5-ui/dist/index.css';
-@import '@ckeditor/ckeditor5-clipboard/dist/index.css';
-@import '@ckeditor/ckeditor5-core/dist/index.css';
-@import '@ckeditor/ckeditor5-engine/dist/index.css';
-@import '@ckeditor/ckeditor5-enter/dist/index.css';
-@import '@ckeditor/ckeditor5-paragraph/dist/index.css';
-@import '@ckeditor/ckeditor5-select-all/dist/index.css';
-@import '@ckeditor/ckeditor5-typing/dist/index.css';
-@import '@ckeditor/ckeditor5-undo/dist/index.css';
-@import '@ckeditor/ckeditor5-upload/dist/index.css';
-@import '@ckeditor/ckeditor5-utils/dist/index.css';
-@import '@ckeditor/ckeditor5-watchdog/dist/index.css';
-@import '@ckeditor/ckeditor5-widget/dist/index.css';
-
-// Import the editor styles.
-// @import '@ckeditor/ckeditor5-editor-classic/dist/index.css';
-@import '@ckeditor/ckeditor5-essentials/dist/index.css';
-@import '@ckeditor/ckeditor5-page-break/dist/index.css';
-@import '@ckeditor/ckeditor5-autoformat/dist/index.css';
-@import '@ckeditor/ckeditor5-basic-styles/dist/index.css';
-// @import '@ckeditor/ckeditor5-block-quote/dist/index.css';
-@import '@ckeditor/ckeditor5-heading/dist/index.css';
-// @import '@ckeditor/ckeditor5-image/dist/index.css';
-@import '@ckeditor/ckeditor5-image/dist/index-editor.css';
-@import '@ckeditor/ckeditor5-indent/dist/index.css';
-@import '@ckeditor/ckeditor5-link/dist/index.css';
-@import '@ckeditor/ckeditor5-list/dist/index.css';
-// @import '@ckeditor/ckeditor5-media-embed/dist/index.css';
-@import '@ckeditor/ckeditor5-paste-from-office/dist/index.css';
-
-// hung.pham16: không sử dụng default styles của ckeditor vì server không hỗ trợ
-// @import '@ckeditor/ckeditor5-table/dist/index.css';
-@import '@ckeditor/ckeditor5-table/dist/index-editor.css';
-
-// @import '@ckeditor/ckeditor5-mention/dist/index.css';
-
-// Custom toolbar
-.ck-editor {
-  /* --- 1. GIẢM KÍCH THƯỚC ICON VÀ CHỮ --- */
-  /* Giảm cỡ chữ trong dropdown (mặc định khoảng 13px) */
-  --ck-font-size-base: 11px !important;
-
-  /* Giảm kích thước Icon (mặc định 20px) */
-  --ck-icon-size: 16px !important;
-
-  /* --- 2. TỐI ƯU KHOẢNG CÁCH (Padding/Margin) --- */
-
-  /* Giảm khoảng cách giữa các nút */
-  --ck-spacing-small: 2px !important;
-  --ck-spacing-standard: 6px !important;
-  --ck-spacing-large: 8px !important;
-
-  /*  */
-  --ck-color-table-focused-cell-background: transparent !important;
-  --ck-table-content-default-border-color: transparent !important;
-
-  //
-  --ck-insert-table-dropdown-padding: 10px;
-  --ck-insert-table-dropdown-box-height: 16px;
-  --ck-insert-table-dropdown-box-width: 16px;
-  --ck-insert-table-dropdown-box-margin: 1px;
-
-  --ck-focus-ring: 1px solid var(--ck-color-base-border);
-}
-
-/* Giảm độ cao của thanh toolbar (cho gọn) */
-.ck-toolbar {
-  min-height: 32px !important; /* Mặc định thường là 40px */
-  padding: 2px !important;
-
-  /* Làm màu nền toolbar nhạt hơn cho hiện đại */
-  background: #f8f9fa !important;
-  border-bottom: 1px solid #e0e0e0 !important;
-}
-
-.ck-toolbar__items {
-  /* Chỉnh nút bấm trong toolbar nhỏ lại */
-  > .ck-button {
-    padding: 2px 4px !important; /* Giảm padding trái phải của nút */
-    min-height: 24px !important;
-  }
-
-  /* Chỉnh lại dropdown (Heading, Font Size) cho khớp */
-  > .ck-dropdown {
-    min-height: 24px !important;
-  }
-}
+// Import the core styles.
+@import '@ckeditor/ckeditor5-ui/dist/index.css';
+@import '@ckeditor/ckeditor5-clipboard/dist/index.css';
+@import '@ckeditor/ckeditor5-core/dist/index.css';
+@import '@ckeditor/ckeditor5-engine/dist/index.css';
+@import '@ckeditor/ckeditor5-enter/dist/index.css';
+@import '@ckeditor/ckeditor5-paragraph/dist/index.css';
+@import '@ckeditor/ckeditor5-select-all/dist/index.css';
+@import '@ckeditor/ckeditor5-typing/dist/index.css';
+@import '@ckeditor/ckeditor5-undo/dist/index.css';
+@import '@ckeditor/ckeditor5-upload/dist/index.css';
+@import '@ckeditor/ckeditor5-utils/dist/index.css';
+@import '@ckeditor/ckeditor5-watchdog/dist/index.css';
+@import '@ckeditor/ckeditor5-widget/dist/index.css';
+
+// Import the editor styles.
+// @import '@ckeditor/ckeditor5-editor-classic/dist/index.css';
+@import '@ckeditor/ckeditor5-essentials/dist/index.css';
+@import '@ckeditor/ckeditor5-page-break/dist/index.css';
+@import '@ckeditor/ckeditor5-autoformat/dist/index.css';
+@import '@ckeditor/ckeditor5-basic-styles/dist/index.css';
+// @import '@ckeditor/ckeditor5-block-quote/dist/index.css';
+@import '@ckeditor/ckeditor5-heading/dist/index.css';
+// @import '@ckeditor/ckeditor5-image/dist/index.css';
+@import '@ckeditor/ckeditor5-image/dist/index-editor.css';
+@import '@ckeditor/ckeditor5-indent/dist/index.css';
+@import '@ckeditor/ckeditor5-link/dist/index.css';
+@import '@ckeditor/ckeditor5-list/dist/index.css';
+// @import '@ckeditor/ckeditor5-media-embed/dist/index.css';
+@import '@ckeditor/ckeditor5-paste-from-office/dist/index.css';
+
+// hung.pham16: không sử dụng default styles của ckeditor vì server không hỗ trợ
+// @import '@ckeditor/ckeditor5-table/dist/index.css';
+@import '@ckeditor/ckeditor5-table/dist/index-editor.css';
+
+// @import '@ckeditor/ckeditor5-mention/dist/index.css';
+
+// Custom toolbar
+.ck-editor {
+  /* --- 1. GIẢM KÍCH THƯỚC ICON VÀ CHỮ --- */
+  /* Giảm cỡ chữ trong dropdown (mặc định khoảng 13px) */
+  --ck-font-size-base: 11px !important;
+
+  /* Giảm kích thước Icon (mặc định 20px) */
+  --ck-icon-size: 16px !important;
+
+  /* --- 2. TỐI ƯU KHOẢNG CÁCH (Padding/Margin) --- */
+
+  /* Giảm khoảng cách giữa các nút */
+  --ck-spacing-small: 2px !important;
+  --ck-spacing-standard: 6px !important;
+  --ck-spacing-large: 8px !important;
+
+  /*  */
+  --ck-color-table-focused-cell-background: transparent !important;
+  --ck-table-content-default-border-color: transparent !important;
+
+  //
+  --ck-insert-table-dropdown-padding: 10px;
+  --ck-insert-table-dropdown-box-height: 16px;
+  --ck-insert-table-dropdown-box-width: 16px;
+  --ck-insert-table-dropdown-box-margin: 1px;
+
+  --ck-focus-ring: 1px solid var(--ck-color-base-border);
+}
+
+/* Giảm độ cao của thanh toolbar (cho gọn) */
+.ck-toolbar {
+  min-height: 32px !important; /* Mặc định thường là 40px */
+  padding: 2px !important;
+
+  /* Làm màu nền toolbar nhạt hơn cho hiện đại */
+  background: #f8f9fa !important;
+  border-bottom: 1px solid #e0e0e0 !important;
+}
+
+.ck-toolbar__items {
+  /* Chỉnh nút bấm trong toolbar nhỏ lại */
+  > .ck-button {
+    padding: 2px 4px !important; /* Giảm padding trái phải của nút */
+    min-height: 24px !important;
+  }
+
+  /* Chỉnh lại dropdown (Heading, Font Size) cho khớp */
+  > .ck-dropdown {
+    min-height: 24px !important;
+  }
+}

package/assets/scss/core/_inline-edit.scss

@@ -1,105 +1,105 @@
-// Shared `viewed='inline'` styles for sd-form-controls.
-// why: 1 nguồn cho text-face + editor ẩn (panel control) và input borderless, tránh lặp ~40 dòng/control.
-// Bare-flatten (mat-* internals) KHÔNG nằm ở đây — khác nhau theo control, giữ trong scss riêng.
-
-// Clear-× — hover-gated, đặt cuối "mặt". Include BÊN TRONG rule của phần tử hover (face/input).
-@mixin _inline-clear {
-  .sd-inline-clear {
-    display: none;
-    align-items: center;
-    margin-left: 4px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    line-height: 0;
-    color: var(--sd-text-secondary, #6b7280);
-    transition: color 0.15s ease;
-
-    mat-icon {
-      font-size: 16px;
-      width: 16px;
-      height: 16px;
-    }
-
-    &:hover {
-      color: var(--sd-error, #b32626);
-    }
-  }
-
-  &:hover .sd-inline-clear {
-    display: inline-flex;
-  }
-}
-
-// Panel-based controls (select / date / datetime / date-range / autocomplete):
-// `<sd-view>` text là "mặt" + trigger; editor render ẩn (overlay) chỉ để neo + mở panel.
-@mixin sd-inline-panel {
-  // Neo cho .sd-inline-editor (absolute). Bare flatten + display nằm ở :host(.sd-bare) riêng của control.
-  :host(.sd-bare) {
-    position: relative;
-  }
-
-  .sd-inline-view {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    width: 100%;
-    // why: nền nhẹ + đậm hơn khi hover → tín hiệu "viewed có thể bấm để sửa".
-    padding: 1px 6px;
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.04);
-    transition: background-color 0.15s ease;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
-    }
-
-    @include _inline-clear;
-  }
-
-  // why: editor vô hình phủ lên face. Tắt pointer-events CẢ cây con (mat-* tự bật lại ở trigger)
-  // để hover/click rơi xuống .sd-inline-view ở mọi chỗ. Panel mở qua enterInlineEdit() → open().
-  .sd-inline-editor {
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    pointer-events: none;
-
-    ::ng-deep * {
-      pointer-events: none !important;
-    }
-  }
-}
-
-// NOTE: the former `sd-inline-input` mixin (mat-form-field flatten for the input/input-number
-// inline variant) was removed when those controls moved to the <sd-inline-text> primitive
-// (forms/inline-text), which owns its own borderless styling. The panel mixin above stays.
-
-// Multiline input (textarea): no panel, no single-line `<sd-inline-text>` — flatten the
-// mat-form-field so the `<textarea>` reads like text, transparent with a hover/focus affordance.
-@mixin sd-inline-textarea {
-  .sd-inline-textarea {
-    cursor: text;
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.04);
-    transition: background-color 0.15s ease;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
-    }
-
-    &:focus-within {
-      background-color: rgba(0, 0, 0, 0.06);
-      box-shadow: inset 0 0 0 1px var(--sd-primary, #1f6feb);
-    }
-
-    ::ng-deep {
-      .mat-mdc-text-field-wrapper { padding: 0 6px; background: transparent; }
-      .mat-mdc-form-field-flex { padding: 0; }
-      .mdc-notched-outline { display: none; }
-      .mat-mdc-form-field-subscript-wrapper { display: none; }
-      .mat-mdc-form-field-infix { padding: 4px 0; min-height: 0; border: 0; }
-    }
-  }
-}
+// Shared `viewed='inline'` styles for sd-form-controls.
+// why: 1 nguồn cho text-face + editor ẩn (panel control) và input borderless, tránh lặp ~40 dòng/control.
+// Bare-flatten (mat-* internals) KHÔNG nằm ở đây — khác nhau theo control, giữ trong scss riêng.
+
+// Clear-× — hover-gated, đặt cuối "mặt". Include BÊN TRONG rule của phần tử hover (face/input).
+@mixin _inline-clear {
+  .sd-inline-clear {
+    display: none;
+    align-items: center;
+    margin-left: 4px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    line-height: 0;
+    color: var(--sd-text-secondary, #6b7280);
+    transition: color 0.15s ease;
+
+    mat-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    &:hover {
+      color: var(--sd-error, #b32626);
+    }
+  }
+
+  &:hover .sd-inline-clear {
+    display: inline-flex;
+  }
+}
+
+// Panel-based controls (select / date / datetime / date-range / autocomplete):
+// `<sd-view>` text là "mặt" + trigger; editor render ẩn (overlay) chỉ để neo + mở panel.
+@mixin sd-inline-panel {
+  // Neo cho .sd-inline-editor (absolute). Bare flatten + display nằm ở :host(.sd-bare) riêng của control.
+  :host(.sd-bare) {
+    position: relative;
+  }
+
+  .sd-inline-view {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    // why: nền nhẹ + đậm hơn khi hover → tín hiệu "viewed có thể bấm để sửa".
+    padding: 1px 6px;
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.04);
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+
+    @include _inline-clear;
+  }
+
+  // why: editor vô hình phủ lên face. Tắt pointer-events CẢ cây con (mat-* tự bật lại ở trigger)
+  // để hover/click rơi xuống .sd-inline-view ở mọi chỗ. Panel mở qua enterInlineEdit() → open().
+  .sd-inline-editor {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+
+    ::ng-deep * {
+      pointer-events: none !important;
+    }
+  }
+}
+
+// NOTE: the former `sd-inline-input` mixin (mat-form-field flatten for the input/input-number
+// inline variant) was removed when those controls moved to the <sd-inline-text> primitive
+// (forms/inline-text), which owns its own borderless styling. The panel mixin above stays.
+
+// Multiline input (textarea): no panel, no single-line `<sd-inline-text>` — flatten the
+// mat-form-field so the `<textarea>` reads like text, transparent with a hover/focus affordance.
+@mixin sd-inline-textarea {
+  .sd-inline-textarea {
+    cursor: text;
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.04);
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+
+    &:focus-within {
+      background-color: rgba(0, 0, 0, 0.06);
+      box-shadow: inset 0 0 0 1px var(--sd-primary, #1f6feb);
+    }
+
+    ::ng-deep {
+      .mat-mdc-text-field-wrapper { padding: 0 6px; background: transparent; }
+      .mat-mdc-form-field-flex { padding: 0; }
+      .mdc-notched-outline { display: none; }
+      .mat-mdc-form-field-subscript-wrapper { display: none; }
+      .mat-mdc-form-field-infix { padding: 4px 0; min-height: 0; border: 0; }
+    }
+  }
+}