@taiga-ui/core 5.0.0-rc.2 → 5.0.0-rc.4

package/styles/components/textfield.less

@@ -1,358 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-tui-textfield:where(*&) {
-    .scrollbar-hidden();
-    .transition(color);
-
-    --t-height: var(--tui-height-l);
-    --t-padding: var(--tui-padding-l);
-    --t-label-y: -0.75rem;
-    --t-label-font: var(--tui-font-body-s);
-    --t-end: ~'0rem';
-    --t-start: ~'0rem';
-
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    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-ui-m);
-    line-height: 1.25rem;
-    box-sizing: border-box;
-    gap: 0 0.25rem;
-    isolation: isolate;
-
-    &[tuiAppearance] {
-        outline: none;
-
-        &[data-appearance=''] {
-            color: var(--tui-text-tertiary);
-
-            &:not([data-mode~='readonly']) {
-                .appearance-hover({
-                    color: var(--tui-text-secondary);
-                });
-            }
-        }
-    }
-
-    &[data-icon-start] {
-        --t-start: 2.25rem;
-    }
-
-    &[data-icon-end] {
-        --t-end: 2.25rem;
-    }
-
-    &[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 {
-        border: 0.25rem solid transparent;
-        inline-size: 0.5rem;
-        block-size: 0.5rem;
-        box-sizing: content-box;
-        color: var(--tui-text-tertiary);
-        background: linear-gradient(
-            -45deg,
-            transparent,
-            transparent 0.125rem,
-            currentColor 0.125rem,
-            currentColor 0.1875rem,
-            transparent 0.1875rem,
-            transparent 0.25rem,
-            currentColor 0.25rem,
-            currentColor 0.3125rem,
-            transparent 0.35rem
-        );
-        background-clip: content-box;
-    }
-
-    [tuiLabel],
-    & > .t-content,
-    & > .t-template {
-        pointer-events: none;
-    }
-
-    &[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-ui-s);
-        line-height: 1rem;
-
-        &[data-icon-start] {
-            --t-start: 1.25rem;
-        }
-
-        &[data-icon-end] {
-            --t-end: 1.25rem;
-        }
-
-        &::before {
-            margin-inline: -0.125rem 0.5rem;
-            font-size: 1rem;
-        }
-
-        &::after {
-            margin-inline-start: calc(0.625rem - var(--t-padding));
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
-            font-size: 1rem;
-        }
-
-        & > .t-content {
-            margin-inline-end: -0.375rem;
-        }
-    }
-
-    &[data-size='m'] {
-        --t-height: var(--tui-height-m);
-        --t-padding: var(--tui-padding-m);
-        --t-label-font: var(--tui-font-body-xs);
-        --t-label-y: -0.5625rem;
-
-        border-radius: var(--tui-radius-m);
-        font: var(--tui-font-ui-s);
-        line-height: 1rem;
-
-        &[data-icon-start] {
-            --t-start: 1.75rem;
-        }
-
-        &[data-icon-end] {
-            --t-end: 1.75rem;
-        }
-
-        &::before {
-            margin-inline: -0.125rem 0.125rem;
-        }
-
-        &::after {
-            margin-inline-start: calc(0.25rem - var(--t-padding));
-            margin-inline-end: calc(-0.125rem - var(--t-padding));
-        }
-
-        & > .t-content {
-            margin-inline-end: -0.125rem;
-        }
-    }
-
-    &[data-size='l'] {
-        --t-label: -0.7rem;
-    }
-
-    &:is(._disabled, [data-state='disabled']) {
-        pointer-events: none;
-        opacity: var(--tui-disabled-opacity);
-
-        [tuiAppearance]:is(._disabled, :disabled, [data-state='disabled']) {
-            opacity: 1;
-        }
-
-        tui-icon {
-            display: none;
-        }
-    }
-
-    &._with-label {
-        & > .t-template,
-        .t-filler,
-        [tuiInput] {
-            padding-block-start: calc(var(--t-height) / 3);
-            padding-block-end: 0;
-        }
-
-        &:is(:not([data-focus='true']), [data-mode~='readonly']) {
-            & > .t-template,
-            [tuiInput] {
-                &::placeholder,
-                &._empty {
-                    color: transparent;
-                }
-            }
-        }
-    }
-
-    & > .t-template,
-    .t-filler,
-    [tuiInput] {
-        position: absolute;
-        inset-block-start: 0;
-        inset-inline: 0;
-        inline-size: auto;
-        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-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;
-    }
-
-    &._with-template [tuiInput]:first-of-type {
-        color: transparent !important;
-    }
-
-    [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));
-        }
-    }
-
-    // Increasing specificity to override all other styles
-    [tuiLabel][tuiLabel][tuiLabel] {
-        .transition(all);
-        .text-overflow();
-
-        position: relative;
-        display: block;
-        flex: 1;
-        align-self: flex-start;
-        font-size: inherit;
-        user-select: none;
-        line-height: var(--t-height);
-        transition-duration: inherit;
-    }
-
-    [tuiLabel],
-    [tuiInput]::placeholder,
-    [tuiInput]._empty {
-        color: var(--tui-text-secondary);
-    }
-
-    select {
-        option[value='']:disabled {
-            // Hide placeholder from native datalist (Windows OS only)
-            color: transparent;
-        }
-
-        optgroup,
-        option {
-            // Windows OS only
-            background-color: var(--tui-background-elevation-3);
-        }
-
-        optgroup,
-        option:not(:disabled) {
-            // In Windows OS native options inherit color of host <select>
-            color: var(--tui-text-primary);
-        }
-    }
-
-    button,
-    a,
-    tui-icon {
-        pointer-events: auto;
-    }
-
-    & > .t-content {
-        z-index: 1;
-        display: flex;
-        block-size: var(--t-height);
-        align-items: center;
-        gap: inherit;
-        margin-inline-start: auto;
-        isolation: isolate;
-        border-radius: inherit;
-    }
-
-    textarea ~ .t-content {
-        min-inline-size: 0.5rem;
-    }
-
-    &:is([data-mode~='readonly'], [data-state='disabled'], ._empty) [tuiButtonX],
-    [tuiInput]._empty ~ .t-content [tuiButtonX],
-    [tuiInput]:disabled ~ .t-content [tuiButtonX] {
-        display: none;
-    }
-
-    .t-filler {
-        pointer-events: none !important;
-        color: var(--tui-text-tertiary);
-    }
-
-    [tuiFluidTypography] {
-        font-weight: bold;
-    }
-
-    [tuiSelectLike]:not(:read-only) {
-        cursor: pointer;
-    }
-
-    &: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));
-            }
-        });
-    }
-}

package/styles/components/title.less

@@ -1,80 +0,0 @@
-/**
- * @name Title
- * @selector [tuiTitle], [tuiSubtitle]
- *
- * @description
- * Basic layout block for titles and subtitles
- * Often used by other more complex elements
- *
- * @attributes
- * data-size — optional size ('s' | 'm' | 'l')
- *
- * @example
- * <h2 tuiTitle>
- *   Title
- *   <span tuiSubtitle>Subtitle</span>
- * </h2>
- *
- * @see-also
- * Label
- */
-[tuiTitle]:where(*&) {
-    position: relative;
-    display: flex;
-    min-inline-size: 0;
-    flex-direction: column;
-    text-align: start;
-    gap: 0.25rem;
-    margin: 0;
-    font: var(--tui-font-ui-m);
-
-    &[data-size='s'] {
-        gap: 0.125rem;
-        font: var(--tui-font-body-s);
-
-        [tuiSubtitle] {
-            font: var(--tui-font-body-xs);
-        }
-    }
-
-    &[data-size='m'] {
-        gap: 0.125rem;
-        font: var(--tui-font-heading-h5);
-
-        [tuiSubtitle] {
-            font: var(--tui-font-body-m);
-        }
-    }
-
-    &[data-size='l'] {
-        gap: 0.5rem;
-        font: var(--tui-font-heading-h3);
-
-        [tuiSubtitle] {
-            font: var(--tui-font-body-m);
-        }
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        margin: 0;
-        font: inherit;
-    }
-
-    [tuiSubtitle] {
-        font: var(--tui-font-ui-s);
-        margin: 0;
-    }
-}
-
-[tuiButton]:where(*&) [tuiTitle] {
-    margin-inline-end: auto;
-
-    [tuiSubtitle] {
-        color: var(--tui-text-secondary);
-    }
-}

package/styles/mixins/appearance.less

@@ -1,56 +0,0 @@
-@import 'mixins.less';
-
-.appearance-hover(@content) {
-    .interactive({
-        @media @tui-mouse {
-            &:hover:not([data-state]) {
-                @content();
-            }
-        }
-    });
-
-    &[data-state='hover'] {
-        @content();
-    }
-}
-
-.appearance-active(@content) {
-    .interactive({
-        &:active:not([data-state]) {
-            @content();
-        }
-    });
-
-    &[data-state='active'] {
-        @content();
-    }
-}
-
-.appearance-disabled(@content) {
-    &:disabled:not([data-state]),
-    &[data-state='disabled'] {
-        @content();
-    }
-}
-
-.appearance-focus(@content) {
-    &:focus-visible:not([data-focus='false']) {
-        @content();
-    }
-
-    &[data-focus='true'] {
-        @content();
-    }
-}
-
-.appearance-invalid(@content) {
-    &:is([data-mode~='invalid'], .tui-invalid, :invalid):not(
-            [data-mode~='readonly'],
-            [data-mode~='valid'],
-            [data-state='disabled'],
-            :disabled,
-            ._disabled
-        ) {
-        @content();
-    }
-}

package/styles/mixins/appearance.scss

@@ -1,57 +0,0 @@
-@import 'mixins.scss';
-@import '../variables/media.scss';
-
-@mixin appearance-hover {
-    @include interactive {
-        @media ($tui-mouse) {
-            &:hover:not([data-state]) {
-                @content;
-            }
-        }
-    }
-
-    &[data-state='hover'] {
-        @content;
-    }
-}
-
-@mixin appearance-active {
-    @include interactive {
-        &:active:not([data-state]) {
-            @content;
-        }
-    }
-
-    &[data-state='active'] {
-        @content;
-    }
-}
-
-@mixin appearance-disabled {
-    &:disabled:not([data-state]),
-    &[data-state='disabled'] {
-        @content;
-    }
-}
-
-@mixin appearance-focus {
-    &:focus-visible:not([data-focus='false']) {
-        @content;
-    }
-
-    &[data-focus='true'] {
-        @content;
-    }
-}
-
-@mixin appearance-invalid {
-    &:is([data-mode~='invalid'], .tui-invalid, :invalid):not(
-            [data-mode~='readonly'],
-            [data-mode~='valid'],
-            [data-state='disabled'],
-            :disabled,
-            ._disabled
-        ) {
-        @content;
-    }
-}

package/styles/mixins/browsers.less

@@ -1,23 +0,0 @@
-.firefox-only(@ruleset) {
-    @supports (-moz-appearance: none) {
-        @ruleset();
-    }
-}
-
-.safari-only(@ruleset) {
-    @supports (-webkit-hyphens: none) {
-        @ruleset();
-    }
-}
-
-.ios-only(@ruleset) {
-    @supports (-webkit-touch-callout: none) {
-        @ruleset();
-    }
-}
-
-.chrome-only(@ruleset) {
-    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
-        @ruleset();
-    }
-}

package/styles/mixins/browsers.scss

@@ -1,23 +0,0 @@
-@mixin firefox-only {
-    @supports (-moz-appearance: none) {
-        @content;
-    }
-}
-
-@mixin safari-only {
-    @supports (-webkit-hyphens: none) {
-        @content;
-    }
-}
-
-@mixin ios-only {
-    @supports (-webkit-touch-callout: none) {
-        @content;
-    }
-}
-
-@mixin chrome-only {
-    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
-        @content;
-    }
-}