@elcrm/form 0.0.73 → 0.0.75

package/src/lib/styles/Field.module.scss

@@ -9,7 +9,6 @@
     & > dt,
     & > dd {
         margin: 0;
-        padding: 0;
     }
     &[data-field="group"] {
         & div {
@@ -22,10 +21,14 @@
             border-bottom: 0;
         }
     }
+    /* contentEditable: псевдо-placeholder — тот же вес и насыщенность, что у нативного ::placeholder */
     & [placeholder]:empty:before {
         content: attr(placeholder);
         display: block;
         color: var(--field-placeholder);
+        font-weight: 400;
+        font-style: normal;
+        opacity: 1;
     }
     & [placeholder]:focus:before {
         display: none;
@@ -42,7 +45,8 @@
     overflow: hidden;
     background: var(--field-background);
     color: var(--field-color);
-    padding: 0 var(--field-side-padding, 14px);
+    /* Внутренний отступ теперь на контейнере dd (.f), а не на дочернем div */
+    padding: var(--control-inner-padding, 0 var(--field-side-padding, 14px));
     transition:
         border-color 0.16s ease,
         box-shadow 0.16s ease,
@@ -78,7 +82,7 @@
         margin: 0;
         min-height: var(--field-height);
         line-height: calc(var(--field-height) - 2px);
-        padding: var(--field-inner-padding, 0 2px);
+        padding: 0;
         font-size: var(--control-font-size, 14px);
         text-wrap: pretty;
 
@@ -98,6 +102,29 @@
             height: 20px;
         }
     }
+
+    /*
+      Нативный placeholder: без UA-«обесцвечивания» (Firefox/WebKit снижают opacity по умолчанию).
+      Цвет = --field-placeholder, как у [placeholder]:empty:before у contentEditable.
+    */
+    input::placeholder,
+    textarea::placeholder {
+        color: var(--field-placeholder);
+        opacity: 1;
+        font-weight: 400;
+    }
+    input::-webkit-input-placeholder,
+    textarea::-webkit-input-placeholder {
+        color: var(--field-placeholder);
+        opacity: 1;
+        font-weight: 400;
+    }
+    input::-moz-placeholder,
+    textarea::-moz-placeholder {
+        color: var(--field-placeholder);
+        opacity: 1;
+        font-weight: 400;
+    }
 }
 
 // textarea
@@ -188,7 +215,8 @@
         &:empty:before {
             content: attr(placeholder);
             color: var(--field-placeholder);
-            opacity: 0.6;
+            font-weight: 400;
+            opacity: 1;
         }
 
         &:focus:empty:before {
@@ -212,6 +240,21 @@
     padding-bottom: 10px;
 }
 
+.affix {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    padding: 0;
+    margin: 0;
+    color: var(--field-icon-color, var(--field-placeholder));
+    font-size: inherit;
+    line-height: 1;
+    user-select: none;
+}
+
+/* Отступ аффиксов от краёв капсулы (как визуально у Password), без увеличения зазора до текста */
+
 .g {
     flex-direction: column;
 }
@@ -267,6 +310,82 @@
     }
 }
 
+// checkbox — капсула с квадратом слева и текстом справа
+.checkbox {
+    & > div {
+        min-height: var(--field-height);
+        display: flex;
+        align-items: flex-start;
+        width: 100%;
+        padding: 0;
+        line-height: normal;
+    }
+}
+
+.checkControl {
+    width: 100%;
+    min-height: var(--field-height);
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    border: 0;
+    margin: 0;
+    padding: 10px 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    outline: none;
+
+    &:focus-visible {
+        box-shadow: 0 0 0 3px var(--field-focus-ring, #0000);
+        border-radius: calc(var(--field-radius) - 2px);
+    }
+
+    &[aria-disabled="true"] {
+        cursor: not-allowed;
+    }
+}
+
+.checkBox {
+    width: 22px;
+    height: 22px;
+    border-radius: 8px;
+    border: var(--field-check-box-border, var(--field-border));
+    background: transparent;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    transition:
+        background-color 0.16s ease,
+        border-color 0.16s ease,
+        opacity 0.16s ease;
+}
+
+.checkMark {
+    width: 11px;
+    height: 6px;
+    border: 2px solid #fcfff4;
+    border-top: none;
+    border-right: none;
+    transform: translateY(-1px) rotate(-45deg);
+}
+
+.checkText {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: inherit;
+    font-size: var(--control-font-size, 14px);
+    line-height: 1.25;
+    padding-top: 2px;
+}
+
+.checkControl[aria-checked="true"] .checkBox {
+    background: var(--field-background-active);
+}
+
 // checkBox
 .h {
     --field-border: 0;

package/src/lib/styles/Select.module.scss

@@ -93,6 +93,12 @@
     top: var(--select-icon-padding);
 }
 
+/** Нет выбранного значения: текст подсказки — цвет placeholder, не --field-color (иначе как обычный label) */
+.placeholderValue {
+    color: var(--field-placeholder);
+    font-weight: 400;
+}
+
 .f {
     cursor: pointer;
     &[aria-disabled="true"] {

package/src/lib/styles/dark.css

@@ -36,7 +36,6 @@
     --field-icon-color: #8e8e93;
     --field-icon-gap: 10px;
     --field-side-padding: var(--control-side-padding);
-    --field-inner-padding: var(--control-inner-padding);
     --field-block-gap: 0;
     --field-note-height: 100px;
     --field-note-line-height: 1.5;

package/src/lib/styles/light.css

@@ -34,7 +34,6 @@
     --field-icon-color: #8e8e93;
     --field-icon-gap: 10px;
     --field-side-padding: var(--control-side-padding);
-    --field-inner-padding: var(--control-inner-padding);
     --field-block-gap: 0;
     --field-note-height: 100px;
     --field-note-line-height: 1.5;