@taiga-ui/kit 5.0.0-canary.26e65fa → 5.0.0-canary.2da416d

package/styles/components/avatar.less

@@ -1,188 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Avatar
- * @selector [tuiAvatar]
- *
- * @description
- * An avatar component which can be used with icons, text or images
- * and is applicable to static elements as well as buttons and links
- *
- * @attributes
- * data-size — size (default: 'l') ('xs' | 's' | 'm' | 'l' | 'xl' | 'xxl')
- * data-shape — shape (default: 'round') ('round' | 'square')
- *
- * @example
- * <span tuiAvatar tuiIcons style="--t-icon-start: url('icon.svg')"></span>
- * <button tuiAvatar>
- *   <img src="path/to/image" alt="Avatar" />
- * </button>
- *
- * @see-also
- * Icons, Icon, Appearance
- */
-[tuiAvatar] {
-    --t-size: var(--tui-height-l);
-    --t-radius: 0.75rem;
-    --t-corner-offset: calc((var(--t-radius) * 1.4142 - var(--t-radius)) * 1 / 1.4142);
-
-    position: relative;
-    display: inline-flex;
-    flex-shrink: 0;
-    inline-size: var(--t-size);
-    block-size: var(--t-size);
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    border-radius: var(--t-radius);
-    border: none;
-    background: var(--tui-background-neutral-1);
-    color: var(--tui-text-secondary);
-    vertical-align: middle;
-    box-sizing: border-box;
-    padding: 0.25rem;
-    font: var(--tui-font-body-l);
-    font-weight: bold;
-    opacity: 0.999; // Kick in hardware rendering layer to avoid artifacts on the edges
-
-    &::before {
-        inline-size: auto;
-        block-size: auto;
-    }
-
-    &:not(._initials)::before {
-        position: absolute;
-        inset: 0;
-        font-size: calc(var(--t-size) * 0.6);
-    }
-
-    &[data-size='xs'] {
-        --t-size: var(--tui-height-xs);
-        --t-radius: 0.5rem;
-
-        font: var(--tui-font-ui-xs);
-        font-size: 0.5625rem;
-
-        &._initials::before {
-            font: var(--tui-font-ui-xs);
-            font-weight: bold;
-        }
-    }
-
-    &[data-size='s'] {
-        --t-size: var(--tui-height-s);
-        --t-radius: 0.5rem;
-
-        font: var(--tui-font-ui-xs);
-        font-weight: bold;
-
-        &._initials::before {
-            font: var(--tui-font-body-s);
-            font-weight: bold;
-        }
-    }
-
-    &[data-size='m'] {
-        --t-size: calc(var(--tui-height-m) - 0.25rem);
-        --t-radius: 0.75rem;
-
-        font: var(--tui-font-ui-m);
-        font-weight: bold;
-
-        &._initials::before {
-            font: var(--tui-font-body-m);
-            font-weight: bold;
-        }
-    }
-
-    &[data-size='xl'] {
-        --t-size: 5rem;
-        --t-radius: 0.75rem;
-
-        font: var(--tui-font-heading-h4);
-
-        &._initials::before {
-            font: var(--tui-font-heading-h3);
-        }
-    }
-
-    &[data-size='xxl'] {
-        --t-size: 6rem;
-        --t-radius: 1rem;
-
-        font: var(--tui-font-heading-h3);
-
-        &._initials::before {
-            font: var(--tui-font-heading-h3);
-        }
-    }
-
-    &[data-size='xxxl'] {
-        --t-size: 8rem;
-        --t-radius: 1.25rem;
-
-        font: var(--tui-font-heading-h3);
-
-        &._initials::before {
-            font: var(--tui-font-heading-h2);
-        }
-    }
-
-    &:not([data-shape='square']) {
-        --t-radius: calc(var(--t-size) / 2);
-    }
-
-    &._initials {
-        &::before {
-            content: attr(data-icon-start);
-            mask: none;
-            background: none;
-            font: var(--tui-font-heading-h6);
-        }
-    }
-
-    &._badge {
-        mask: radial-gradient(
-            circle at calc(100% - var(--t-corner-offset)) calc(100% - var(--t-corner-offset)),
-            black 0.23rem,
-            transparent 0.25rem,
-            transparent 0.375rem,
-            black 0.39rem
-        );
-        mask-clip: no-clip;
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: calc(100% - var(--t-corner-offset));
-            left: calc(100% - var(--t-corner-offset));
-            display: block;
-            inline-size: 0.55rem;
-            block-size: 0.55rem;
-            border-radius: 100%;
-            background: var(--t-badge);
-            transform: translate3d(-50%, -50%, 0);
-        }
-    }
-
-    &._fallback {
-        img,
-        video {
-            display: none;
-        }
-    }
-
-    img,
-    video,
-    picture {
-        .fullsize();
-
-        object-fit: cover;
-        box-sizing: border-box;
-        border-radius: inherit;
-    }
-
-    &:has(img, video):not(._fallback) {
-        background: none;
-    }
-}

package/styles/components/badge.less

@@ -1,127 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Badge
- * @selector [tuiBadge]
- *
- * @description
- * A basic badge that can be used on it's own or on buttons/links
- *
- * @attributes
- * data-size — size (default: 'l') ('s' | 'm' | 'l' | 'xl')
- *
- * @example
- * <div[tuiBadge]>99+</div>
- *
- * @see-also
- * Icons, Appearance, Chip, Block
- */
-[tuiBadge] {
-    --t-icon-size: 1rem;
-    --t-padding: 0 0.5rem;
-    --t-size: var(--tui-height-xs);
-    --t-margin: -0.25rem;
-
-    .button-base();
-
-    border-radius: 6rem;
-    justify-content: center;
-    background: #959595;
-    color: var(--tui-background-base);
-    padding: var(--t-padding);
-    block-size: var(--t-size);
-    min-inline-size: var(--t-size);
-    inline-size: fit-content;
-    font: var(--tui-font-body-s);
-
-    &[tuiStatus]::before {
-        inline-size: 0.375rem;
-        block-size: 0.375rem;
-        margin: 0;
-    }
-
-    > tui-icon,
-    &[tuiIcons]::before,
-    &[tuiIcons]::after {
-        font-size: var(--t-icon-size) !important;
-    }
-
-    &[data-appearance='error'], /* TODO @deprecated remove in v5 */
-    &[data-appearance='negative'] {
-        --t-status: var(--tui-status-negative);
-    }
-
-    &[data-appearance='success'], /* TODO @deprecated remove in v5 */
-    &[data-appearance='positive'] {
-        --t-status: var(--tui-status-positive);
-    }
-
-    &[data-appearance='warning'] {
-        --t-status: var(--tui-status-warning);
-    }
-
-    &[data-appearance='info'] {
-        --t-status: var(--tui-status-info);
-    }
-
-    &[data-appearance='neutral'] {
-        --t-status: var(--tui-status-neutral);
-    }
-
-    &[data-size='s'] {
-        --t-padding: 0 0.3125rem;
-        --t-size: 1rem;
-        --t-icon-size: 0.625rem;
-        --t-margin: -0.125rem;
-
-        font: var(--tui-font-body-xs);
-
-        &[tuiStatus]::before {
-            inline-size: 0.25rem;
-            block-size: 0.25rem;
-            margin-inline-end: -0.125rem;
-        }
-    }
-
-    &[data-size='m'] {
-        --t-padding: 0 0.375rem;
-        --t-size: 1.25rem;
-        --t-icon-size: 0.75rem;
-        --t-margin: -0.125rem;
-    }
-
-    &[data-size='xl'] {
-        --t-margin: -0.25rem;
-        --t-padding: 0 0.75rem;
-        --t-size: var(--tui-height-s);
-
-        font: var(--tui-font-body-m);
-
-        &[tuiStatus]::before {
-            inline-size: 0.5rem;
-            block-size: 0.5rem;
-            margin-inline-end: -0.125rem;
-        }
-    }
-
-    &[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
-    &[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
-    &[tuiAppearance][data-appearance='negative'],
-    &[tuiAppearance][data-appearance='positive'],
-    &[tuiAppearance][data-appearance='warning'],
-    &[tuiAppearance][data-appearance='info'],
-    &[tuiAppearance][data-appearance='neutral'] {
-        color: var(--tui-text-primary);
-    }
-}
-
-img[tuiBadge] {
-    padding: 0;
-    inline-size: var(--t-size);
-}
-
-tui-icon[tuiBadge]::before {
-    .fullsize();
-
-    --t-margin: 0;
-}

package/styles/components/block.less

@@ -1,118 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Block
- * @selector [tuiBlock]
- *
- * @description
- * A general purpose container, typically used for labels and inputs
- *
- * @attributes
- * data-size — size (default: 'l') ('s' | 'm' | 'l')
- *
- * @example
- * <label tuiBlock>
- *   Click me
- *   <input tuiBlock />
- * </label>
- *
- * @see-also
- * Icons, Appearance, Link, Button
- */
-[tuiBlock] {
-    --t-height: var(--tui-height-l);
-    --t-radius: var(--tui-radius-l);
-
-    position: relative;
-    display: inline-flex;
-    gap: 0.75rem;
-    color: var(--tui-text-primary);
-    border-radius: var(--t-radius);
-    min-block-size: var(--t-height);
-    margin: 0;
-    box-sizing: border-box;
-    cursor: pointer;
-    overflow: hidden;
-    font: var(--tui-font-body-m);
-    padding: var(--tui-padding-l);
-    isolation: isolate;
-
-    &[data-size='s'] {
-        gap: 0.5rem;
-        font: var(--tui-font-ui-s);
-        padding: 0.5rem;
-
-        --t-height: var(--tui-height-s);
-        --t-radius: var(--tui-radius-m);
-
-        [tuiSubtitle] {
-            font: var(--tui-font-ui-xs);
-        }
-
-        [tuiTooltip] {
-            margin: 0 0.125rem;
-        }
-    }
-
-    &[data-size='m'] {
-        gap: 0.625rem;
-        font: var(--tui-font-ui-m);
-        padding: var(--tui-padding-m);
-
-        --t-height: var(--tui-height-m);
-        --t-radius: var(--tui-radius-m);
-
-        input:not([tuiBlock]) {
-            margin: 0.125rem;
-        }
-
-        [tuiTooltip] {
-            margin: 0.125rem;
-        }
-    }
-
-    &._disabled {
-        pointer-events: none;
-        opacity: var(--tui-disabled-opacity);
-
-        :focus {
-            visibility: hidden;
-        }
-    }
-
-    &[data-appearance=''] {
-        justify-content: center;
-    }
-
-    input[tuiBlock] {
-        .fullsize();
-
-        z-index: -1;
-        min-block-size: 0;
-        pointer-events: none;
-        border-radius: inherit;
-        padding: 0;
-    }
-
-    [tuiAvatar] {
-        margin: -0.25rem;
-    }
-
-    [tuiTitle] {
-        flex: 1;
-        gap: 0;
-        font: inherit;
-        color: var(--tui-text-primary);
-    }
-
-    [tuiSubtitle] {
-        color: var(--tui-text-secondary);
-    }
-
-    [tuiTooltip] {
-        vertical-align: bottom;
-        margin: 0.25rem;
-        font-size: 1rem;
-        border: none;
-    }
-}

package/styles/components/checkbox.less

@@ -1,84 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Checkbox
- * @selector [tuiCheckbox]
- *
- * @description
- * A stylized input type="checkbox"
- *
- * @attributes
- * data-size — size (default: 'm') ('s' | 'm')
- *
- * @vars
- * --t-icon-start — checkmark icon
- * --t-icon-end — indeterminate state icon
- *
- * @example
- * <input type="checkbox" tuiCheckbox tuiIcons tuiAppearance data-appearance='secondary' />
- *
- * @see-also
- * Switch, Radio, Appearance
- */
-[tuiCheckbox] {
-    --t-size: 1.5rem;
-    --t-radius: var(--tui-radius-s);
-
-    inline-size: var(--t-size);
-    block-size: var(--t-size);
-    border-radius: var(--t-radius);
-    cursor: pointer;
-    margin: 0;
-    flex-shrink: 0;
-
-    &::before {
-        position: absolute;
-        block-size: 100%;
-        inline-size: 100%;
-        font-size: 1rem;
-        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
-        transform: scale(0);
-        transition:
-            transform var(--tui-duration) ease-in-out,
-            mask 0s var(--tui-duration) ease-in-out;
-    }
-
-    &::after {
-        display: none;
-    }
-
-    &:disabled._readonly._readonly {
-        opacity: 1;
-        pointer-events: none;
-    }
-
-    &:checked,
-    &:indeterminate {
-        &::before {
-            mask-image: var(--t-icon-start);
-            transform: scale(1);
-            transition:
-                transform var(--tui-duration) ease-in-out,
-                mask 0s ease-in-out;
-            transition-duration: inherit;
-        }
-    }
-
-    &:indeterminate::before {
-        mask-image: var(--t-icon-end);
-    }
-
-    &[data-size='s'] {
-        --t-size: 1rem;
-        --t-radius: var(--tui-radius-xs);
-
-        &::before {
-            font-size: 0.875rem;
-        }
-    }
-
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'] {
-        color: #fff;
-    }
-}

package/styles/components/chip.less

@@ -1,139 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Chip
- * @selector [tuiChip]
- *
- * @description
- * A chip component that can be used on it's own or on buttons/links/inputs
- *
- * @attributes
- * data-size — size (default: 's') ('xxs' | 'xs' | 's' | 'm')
- *
- * @example
- * <span tuiChip>Sale</span>
- *
- * @see-also
- * Icons, Appearance, Badge, Block
- */
-[tuiChip] {
-    --t-gap: 0.125rem;
-    --t-margin: -0.125rem;
-    --t-icon-size: 1rem;
-    --t-padding: 0 0.625rem;
-    --t-size: var(--tui-height-s);
-
-    .button-base();
-
-    font: var(--tui-font-body-s);
-    border-radius: var(--tui-radius-m);
-    padding: var(--t-padding);
-    block-size: var(--t-size);
-    inline-size: fit-content;
-    max-inline-size: 100%;
-    isolation: isolate;
-
-    .interactive({
-        cursor: pointer;
-    });
-
-    > tui-icon,
-    &[tuiIcons]::before,
-    &[tuiIcons]::after {
-        font-size: var(--t-icon-size) !important;
-    }
-
-    & > [tuiIconButton] {
-        margin: -0.375rem;
-    }
-
-    > [tuiBadge] {
-        margin-inline-end: 0;
-    }
-
-    &[data-size='xxs'] {
-        // StackBlitz changes "0rem" to "0" breaking calc
-        --t-gap: ~'0rem';
-        --t-padding: 0 0.25rem;
-        --t-size: 1rem;
-        --t-icon-size: 0.75rem;
-
-        font: var(--tui-font-body-xs);
-        border-radius: var(--tui-radius-xs);
-
-        & > [tuiIconButton] {
-            margin: -0.5rem;
-            transform: scale(0.75);
-        }
-    }
-
-    &[data-size='xs'] {
-        --t-padding: 0 0.375rem;
-        --t-size: var(--tui-height-xs);
-
-        border-radius: var(--tui-radius-xs);
-
-        & > [tuiIconButton] {
-            margin: -0.375rem;
-        }
-    }
-
-    &[data-size='m'] {
-        --t-margin: -0.375rem;
-        --t-icon-size: 1.5rem;
-        --t-padding: 0 1rem;
-        --t-size: var(--tui-height-m);
-
-        font: var(--tui-font-body-m);
-
-        & > [tuiIconButton] {
-            margin: -0.75rem;
-        }
-
-        & > [tuiBadge] {
-            margin-inline-start: -0.375rem;
-        }
-    }
-
-    & > img,
-    [tuiAvatar] {
-        inline-size: 1.5rem;
-        margin-inline-start: -0.375rem;
-    }
-
-    & > [tuiFade] {
-        &:first-of-type {
-            flex: 1 0 30%;
-            max-inline-size: fit-content;
-        }
-
-        &:last-of-type {
-            flex: 0 1 auto;
-        }
-    }
-
-    & > input[tuiChip] {
-        .fullsize();
-
-        margin: 0;
-
-        &[type='checkbox'],
-        &[type='radio'] {
-            z-index: -1;
-        }
-    }
-
-    &[tuiAppearance][data-appearance='negative'],
-    &[tuiAppearance][data-appearance='positive'],
-    &[tuiAppearance][data-appearance='warning'],
-    &[tuiAppearance][data-appearance='info'],
-    &[tuiAppearance][data-appearance='neutral'] {
-        color: var(--tui-text-primary);
-    }
-}
-
-input[tuiChip] {
-    .interactive({
-        cursor: text;
-    });
-}

package/styles/components/comment.less

@@ -1,64 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Comment
- * @selector [tuiComment]
- *
- * @description
- * A comment bubble with an arrow
- *
- * @attributes
- * data-direction — arrow direction (default: 'top') ('top' | 'bottom' | 'start' | 'end')
- *
- * @example
- * <label data-direction="top" tuiComment>Amazing product!</label>
- */
-[tuiComment] {
-    position: relative;
-    display: inline-flex;
-    font: var(--tui-font-body-m);
-    color: #fff;
-    padding: 0.5rem 0.75rem;
-    min-inline-size: 2.5rem;
-    border-radius: 1rem;
-    line-height: 1.125rem;
-    background: var(--tui-background-accent-2);
-    align-items: center;
-    justify-content: center;
-
-    &::before {
-        content: '';
-        position: absolute;
-        inset-block-end: 100%;
-        inset-inline-start: 50%;
-        inline-size: 1.5625rem;
-        block-size: 0.5625rem;
-        background: inherit;
-        transform: translate(calc(-50% * var(--tui-inline)));
-        mask: url("data:image/svg+xml,%3Csvg width='25' height='9' viewBox='0 0 25 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.23309 6.67813L7.56191 3.83178C9.4546 1.5185 10.4009 0.361853 11.5998 0.10488C12.0834 0.00123882 12.5834 0.00123882 13.0669 0.10488C14.2658 0.361853 15.2121 1.5185 17.1048 3.83178L19.4337 6.67813C20.636 8.14771 22.4346 9 24.3334 9H0.333374C2.23217 9 4.0307 8.14772 5.23309 6.67813Z' fill='black'/%3E%3C/svg%3E%0A")
-            no-repeat;
-    }
-
-    &[data-direction='bottom'] {
-        &::before {
-            inset-block: 100% auto;
-            transform: translate(calc(-50% * var(--tui-inline))) rotate(180deg);
-        }
-    }
-
-    &[data-direction='start'] {
-        &::before {
-            inset-block: 50% 100%;
-            inset-inline: auto 100%;
-            transform: translate(calc(0.785rem * var(--tui-inline)), -50%) rotate(calc(-90deg * var(--tui-inline)));
-        }
-    }
-
-    &[data-direction='end'] {
-        &::before {
-            inset-block: 50% 100%;
-            inset-inline: 100% auto;
-            transform: translate(calc(-0.785rem * var(--tui-inline)), -50%) rotate(calc(90deg * var(--tui-inline)));
-        }
-    }
-}