@taiga-ui/core 4.52.0-canary.763e67d → 4.52.0-canary.7c53ccc

package/styles/components/notification.less

@@ -2,7 +2,7 @@
 
 /**
  * @name Notification
- * @selector tui-notification, [tuiNotification]
+ * @selector [tuiNotification]
  *
  * @description
  * A colored rounded block of information with optional icon, title, subtitle and actions
@@ -11,17 +11,16 @@
  * data-size — size (default: 'l') ('s' | 'm' | 'l')
  *
  * @example
- * <tui-notification tuiAppearance data-appearance="negative">
+ * <div tuiNotification tuiAppearance data-appearance="negative">
  *   <span tuiTitle>
  *     Error
  *     <span tuiSubtitle>Something went wrong</span>
  *   </span>
- * </tui-notification>
+ * </div>
  *
  * @see-also
  * Icons, Appearance
  */
-tui-notification,
 [tuiNotification] {
     .button-clear();
 
@@ -30,7 +29,7 @@ tui-notification,
     max-block-size: 100%;
     color: var(--tui-text-primary);
     padding: 1rem;
-    font: var(--tui-font-text-m);
+    font: var(--tui-font-body-m);
     line-height: 1.5rem;
     border-radius: var(--tui-radius-l);
     box-sizing: border-box;
@@ -39,6 +38,10 @@ tui-notification,
     border-inline-start: var(--t-start) solid transparent;
     border-inline-end: var(--t-end) solid transparent;
 
+    .interactive({
+        cursor: pointer;
+    });
+
     --t-start: 0;
     --t-end: 0;
 
@@ -52,29 +55,23 @@ tui-notification,
 
     &::before {
         position: absolute;
-        left: -1rem;
         inset-inline-start: -1rem;
     }
 
     &::after {
         .center-top();
 
-        right: -0.5rem;
+        inset-inline-end: -0.5rem;
         font-size: 1rem;
         margin: 0;
         margin-inline-end: -0.25rem;
         margin-inline-start: auto;
         color: var(--tui-text-tertiary) !important;
-
-        @supports (inset-inline-end: 0) {
-            right: unset;
-            inset-inline-end: -0.5rem;
-        }
     }
 
     &[data-size='s'] {
         padding: 0.375rem 0.625rem;
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
@@ -83,19 +80,13 @@ tui-notification,
         }
 
         &::before {
-            top: 0.5rem;
-            left: -0.875rem;
+            inset-block-start: 0.5rem;
             inset-inline-start: -0.875rem;
             font-size: 1rem;
         }
 
         &::after {
-            right: -0.875rem;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: -0.875rem;
-            }
+            inset-inline-end: -0.875rem;
         }
 
         tui-icon {
@@ -103,12 +94,12 @@ tui-notification,
         }
 
         [tuiTitle] {
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
             font-weight: bold;
         }
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
         }
 
         [tuiSubtitle] + * {
@@ -117,19 +108,14 @@ tui-notification,
         }
 
         > [tuiIconButton] {
-            top: 0;
-            right: 0;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: 0;
-            }
+            inset-block-start: 0;
+            inset-inline-end: 0;
         }
     }
 
     &[data-size='m'] {
         padding: 0.75rem;
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
@@ -138,18 +124,12 @@ tui-notification,
         }
 
         &::before {
-            left: -0.875rem;
             inset-inline-start: -0.875rem;
             font-size: 1.25rem;
         }
 
         &::after {
-            right: -0.75rem;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: -0.75rem;
-            }
+            inset-inline-end: -0.75rem;
         }
 
         tui-icon {
@@ -157,12 +137,12 @@ tui-notification,
         }
 
         [tuiTitle] {
-            font: var(--tui-font-text-ui-m);
+            font: var(--tui-font-ui-m);
             font-weight: bold;
         }
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
         }
 
         [tuiSubtitle] + * {
@@ -171,48 +151,34 @@ tui-notification,
         }
 
         > [tuiIconButton] {
-            top: 0.375rem;
-            right: 0.5rem;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: 0.5rem;
-            }
+            inset-block-start: 0.375rem;
+            inset-inline-end: 0.5rem;
         }
     }
 
     [tuiTitle] {
         gap: 0.125rem;
-        font: var(--tui-font-text-ui-l);
+        font: var(--tui-font-ui-l);
         font-weight: bold;
     }
 
     [tuiSubtitle] {
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
 
         + * {
             display: flex;
             align-items: center;
             gap: 1.25rem;
             margin-block-start: 0.625rem;
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
         }
     }
 
     > [tuiIconButton] {
         position: absolute;
-        top: 0.75rem;
-        right: 0.75rem;
+        inset-block-start: 0.75rem;
+        inset-inline-end: 0.75rem;
         box-shadow: none !important;
         background: transparent !important;
-
-        @supports (inset-inline-end: 0) {
-            right: unset;
-            inset-inline-end: 0.75rem;
-        }
     }
 }
-
-[tuiNotification] {
-    cursor: pointer;
-}

package/styles/components/textfield.less

@@ -7,27 +7,35 @@ tui-textfield {
     --t-height: var(--tui-height-l);
     --t-padding: var(--tui-padding-l);
     --t-label-y: -0.75rem;
-    --t-label-font: var(--tui-font-text-s);
+    --t-label-font: var(--tui-font-body-s);
     --t-end: ~'0rem';
     --t-start: ~'0rem';
 
     position: relative;
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
-    cursor: pointer;
+    align-items: flex-start;
     min-block-size: var(--t-height);
     padding: 0 var(--t-padding);
     border-radius: var(--tui-radius-l);
-    font: var(--tui-font-text-ui-m);
+    font: var(--tui-font-ui-m);
     line-height: 1.25rem;
     box-sizing: border-box;
     gap: 0 0.25rem;
     isolation: isolate;
 
-    // Increasing specificity to override custom appearance
-    &[tuiIcons]:read-only {
-        color: var(--tui-text-tertiary);
+    &[tuiAppearance] {
+        outline: none;
+
+        &[data-appearance=''] {
+            color: var(--tui-text-tertiary);
+
+            &:not([data-mode~='readonly']) {
+                .appearance-hover({
+                    color: var(--tui-text-secondary);
+                });
+            }
+        }
     }
 
     &[data-icon-start] {
@@ -38,12 +46,21 @@ tui-textfield {
         --t-end: 2.25rem;
     }
 
-    &[tuiIcons]::after {
-        position: relative;
-        block-size: auto;
-        align-self: stretch;
-        border-inline: var(--t-padding) solid transparent;
-        margin: 0 calc(-1 * var(--t-padding));
+    &[tuiIcons] {
+        &::before {
+            z-index: 1;
+            block-size: var(--t-height);
+            margin-inline-end: 0.5rem;
+            pointer-events: none;
+        }
+
+        &::after {
+            position: relative;
+            block-size: var(--t-height);
+            cursor: pointer;
+            border-inline: var(--t-padding) solid transparent;
+            margin: 0 calc(-1 * var(--t-padding));
+        }
     }
 
     &::-webkit-resizer {
@@ -67,33 +84,19 @@ tui-textfield {
         background-clip: content-box;
     }
 
-    label,
+    [tuiLabel],
     & > .t-content,
     & > .t-template {
         pointer-events: none;
     }
 
-    input,
-    select,
-    textarea {
-        font: inherit;
-        resize: none;
-        outline: none;
-        padding-block: 1.125rem;
-        color: var(--tui-text-primary);
-
-        &[inputmode='none'] {
-            caret-color: transparent;
-        }
-    }
-
     &[data-size='s'] {
         --t-height: var(--tui-height-s);
         --t-padding: var(--tui-padding-s);
 
         border-radius: var(--tui-radius-m);
         gap: 0;
-        font: var(--tui-font-text-ui-s);
+        font: var(--tui-font-ui-s);
         line-height: 1rem;
 
         &[data-icon-start] {
@@ -110,16 +113,11 @@ tui-textfield {
         }
 
         &::after {
-            margin-inline: calc(0.625rem - var(--t-padding)) calc(-0.125rem - var(--t-padding));
+            margin-inline-start: calc(0.625rem - var(--t-padding));
+            margin-inline-end: calc(-0.125rem - var(--t-padding));
             font-size: 1rem;
         }
 
-        input,
-        select,
-        textarea {
-            padding-block: 0.5rem;
-        }
-
         & > .t-content {
             margin-inline-end: -0.375rem;
         }
@@ -128,11 +126,11 @@ tui-textfield {
     &[data-size='m'] {
         --t-height: var(--tui-height-m);
         --t-padding: var(--tui-padding-m);
-        --t-label-font: var(--tui-font-text-xs);
+        --t-label-font: var(--tui-font-body-xs);
         --t-label-y: -0.5625rem;
 
         border-radius: var(--tui-radius-m);
-        font: var(--tui-font-text-ui-s);
+        font: var(--tui-font-ui-s);
         line-height: 1rem;
 
         &[data-icon-start] {
@@ -148,13 +146,8 @@ tui-textfield {
         }
 
         &::after {
-            margin-inline: calc(0.25rem - var(--t-padding)) calc(-0.125rem - var(--t-padding));
-        }
-
-        input,
-        select,
-        textarea {
-            padding-block: 0.875rem;
+            margin-inline-start: calc(0.25rem - var(--t-padding));
+            margin-inline-end: calc(-0.125rem - var(--t-padding));
         }
 
         & > .t-content {
@@ -166,149 +159,92 @@ tui-textfield {
         --t-label: -0.7rem;
     }
 
-    /*
-    TODO: refactor to the following way after Chrome 105+ & Safari 15.4+
-    &:hover:has(input:not(:read-only)),
-    &:hover:has(textarea:not(:read-only)),
-    &:hover:has(select:not([data-mode='readonly'])) {
-        color: var(--tui-text-secondary);
-    }
-    */
-    &[tuiIcons]:hover {
-        color: var(--tui-text-secondary);
-
-        &:has(input:read-only):not([multi]),
-        &:has(textarea:read-only),
-        &:has(select[data-mode~='readonly']) {
-            color: var(--tui-text-tertiary);
-        }
-    }
-
-    &::before {
-        z-index: 1;
-        margin-inline-end: 0.5rem;
+    &:is(._disabled, [data-state='disabled']) {
         pointer-events: none;
-    }
-
-    &:has(:disabled:not(.t-filler, button, option, [tuiChip]))::before,
-    &:has(:disabled:not(.t-filler, button, option, [tuiChip]))::after,
-    &:has(:disabled:not(.t-filler, button, option, [tuiChip])) > .t-template {
         opacity: var(--tui-disabled-opacity);
-    }
 
-    // TODO: Fallback until Safari 15.4
-    &._disabled::before,
-    &._disabled::after,
-    &._disabled > .t-template {
-        opacity: var(--tui-disabled-opacity);
+        [tuiAppearance]:is(._disabled, :disabled, [data-state='disabled']) {
+            opacity: 1;
+        }
+
+        tui-icon {
+            display: none;
+        }
     }
 
     &._with-label {
         & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
-            padding-block: calc(var(--t-height) / 3) 0;
+        .t-filler,
+        [tuiInput] {
+            padding-block-start: calc(var(--t-height) / 3);
+            padding-block-end: 0;
         }
-    }
 
-    &:not([data-focus='true'])._with-label {
-        & > .t-template,
-        input:not([type='range']),
-        select:defined,
-        textarea:defined {
-            &::placeholder,
-            &._empty {
-                color: transparent;
+        &:is(:not([data-focus='true']), [data-mode~='readonly']) {
+            & > .t-template,
+            [tuiInput] {
+                &::placeholder,
+                &._empty {
+                    color: transparent;
+                }
             }
         }
     }
 
     & > .t-template,
-    input:defined,
-    select:defined,
-    textarea:defined {
-        .fullsize();
-
+    .t-filler,
+    [tuiInput] {
+        position: absolute;
+        inset: 0 auto auto 0;
+        inline-size: stretch;
+        block-size: 100%;
         appearance: none;
+        background: none;
+        font: inherit;
+        resize: none;
+        outline: none;
+        color: var(--tui-text-primary);
         box-sizing: border-box;
         border-radius: inherit;
         border-width: 0;
         overscroll-behavior: none;
         // StackBlitz changes "0rem" to "0" breaking calc
-        padding-inline: calc(var(--t-start, ~'0rem') + var(--t-padding))
-            calc(var(--t-end, ~'0rem') + var(--t-side, ~'0rem') + var(--t-padding));
+        padding-inline-start: calc(var(--t-start, ~'0rem') + var(--t-padding));
+        padding-inline-end: calc(var(--t-end, ~'0rem') + var(--t-side, ~'0rem') + var(--t-padding));
+
+        &:is(input, textarea):read-only ~ .t-filler {
+            display: none;
+        }
 
         &:disabled {
             animation: tuiPresent 1s infinite;
+            opacity: 1;
+        }
+
+        &[inputmode='none'] {
+            caret-color: transparent;
         }
     }
 
     & > .t-template {
         display: flex;
+        block-size: 100%;
         align-items: center;
-        color: var(--tui-text-primary);
     }
 
-    &._with-template input:first-of-type,
-    &._with-template select,
-    &._with-template textarea {
+    &._with-template [tuiInput] {
         color: transparent !important;
     }
 
-    input:not([type='range']),
-    select:defined,
-    textarea:defined {
-        pointer-events: auto;
-        background: none;
-
-        &:not(select):read-only ~ .t-filler {
-            display: none;
-        }
-
-        &:disabled {
-            & ~ label,
-            & ~ .t-content {
-                opacity: var(--tui-disabled-opacity);
-
-                > tui-icon {
-                    display: none;
-                }
-            }
-        }
-
-        &:-webkit-autofill,
-        &:not(._empty):not(:placeholder-shown) {
-            & ~ label {
-                font: var(--t-label-font);
-                line-height: var(--t-height);
-                transform: translateY(var(--t-label-y));
-            }
-
-            &:not(:disabled)[data-mode~='invalid'] ~ label,
-            &:invalid:not(:disabled):not([data-mode]) ~ label {
-                color: var(--tui-text-negative);
-            }
-
-            &:not(:disabled):not([data-mode~='readonly']) ~ .t-content .t-clear {
-                display: flex;
-            }
-        }
-
-        &:not([data-mode~='readonly']) {
-            .appearance-focus({
-                &::placeholder,
-                &._empty {
-                    color: var(--tui-text-tertiary);
-                }
-
-                & ~ label {
-                    color: var(--tui-text-primary) !important;
-                    font: var(--t-label-font);
-                    line-height: var(--t-height);
-                    transform: translateY(var(--t-label-y));
-                }
-            });
+    [tuiInput]:-webkit-autofill,
+    [tuiInput][chrome-autofilled], /* Chrome on IOS */
+    [tuiInput]:not(._empty, :placeholder-shown),
+    &[multi][multi]:not(._empty) {
+        [tuiLabel],
+        &:not(tui-textfield) ~ [tuiLabel] {
+            font: var(--t-label-font);
+            line-height: var(--t-height);
+            transform: translateY(var(--t-label-y));
         }
     }
 
@@ -322,22 +258,18 @@ tui-textfield {
         flex: 1;
         align-self: flex-start;
         font-size: inherit;
+        user-select: none;
         line-height: var(--t-height);
         transition-duration: inherit;
     }
 
-    label:defined,
-    input:defined::placeholder,
-    textarea:defined::placeholder,
-    select:defined._empty {
+    [tuiLabel],
+    [tuiInput]::placeholder,
+    [tuiInput]._empty {
         color: var(--tui-text-secondary);
     }
 
     select {
-        &:not([data-mode~='readonly']) {
-            cursor: pointer;
-        }
-
         option[value='']:disabled {
             // Hide placeholder from native datalist (Windows OS only)
             color: transparent;
@@ -357,7 +289,8 @@ tui-textfield {
     }
 
     button,
-    a {
+    a,
+    tui-icon {
         pointer-events: auto;
     }
 
@@ -370,26 +303,21 @@ tui-textfield {
         margin-inline-start: auto;
         isolation: isolate;
         border-radius: inherit;
-
-        > tui-icon {
-            pointer-events: auto;
-        }
     }
 
     textarea ~ .t-content {
         min-inline-size: 0.5rem;
     }
 
-    .t-clear {
-        z-index: 1;
+    &:is([data-mode~='readonly'], [data-state='disabled'], ._empty) .t-clear,
+    [tuiInput]._empty ~ .t-content .t-clear,
+    [tuiInput]:disabled ~ .t-content .t-clear {
         display: none;
-        pointer-events: auto;
     }
 
-    & > .t-filler:defined {
+    .t-filler {
         pointer-events: none !important;
         color: var(--tui-text-tertiary);
-        opacity: 1;
     }
 
     [tuiFluidTypography] {
@@ -403,4 +331,27 @@ tui-textfield {
     &:has(input[type='tel']) {
         direction: ltr;
     }
+
+    .appearance-invalid({
+        [tuiInput]:not(._empty) ~ [tuiLabel],
+        &[multi]:not(._empty) [tuiLabel] {
+            color: var(--tui-text-negative);
+        }
+    });
+
+    &:not([data-mode~='readonly']) {
+        .appearance-focus({
+            [tuiInput]::placeholder,
+            [tuiInput]._empty {
+                color: var(--tui-text-tertiary);
+            }
+
+            [tuiLabel] {
+                color: var(--tui-text-primary) !important;
+                font: var(--t-label-font);
+                line-height: var(--t-height);
+                transform: translateY(var(--t-label-y));
+            }
+        });
+    }
 }