@taiga-ui/kit 5.0.0-canary.ba4fa64 → 5.0.0-canary.bf29cbb

package/styles/components/chip.less

@@ -1,131 +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]:where(*&) {
-    --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;
-        }
-    }
-}
-
-input[tuiChip]:where(*&) {
-    .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]:where(*&) {
-    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)));
-        }
-    }
-}

package/styles/components/compass.less

@@ -1,49 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Compass
- * @selector tui-compass
- *
- * @description
- * A compass arrow for the map
- *
- * @vars
- * --t-degrees — rotation
- *
- * @example
- * <tui-compass style="--t-degrees: 45deg"></tui-compass>
- *
- * @see-also
- * Pin
- */
-tui-compass:where(*&) {
-    position: relative;
-    display: inline-block;
-    color: var(--tui-background-accent-1);
-    border-radius: 50%;
-    inline-size: 1rem;
-    block-size: 1rem;
-    border: 0.1875rem solid var(--tui-background-base);
-    box-shadow: 0 0 0.1875rem rgba(0, 0, 0, 0.3);
-    transform-style: preserve-3d; // z-index doesn't work on pseudo-element
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0.125rem;
-        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path d="M0 8.99993C4 8 8 8 12 8.99993C9.91509 5.73239 8.5 3 6 0C3.5 3 2 5.5 0 8.99993Z"/></svg>');
-        transform: rotate(var(--t-degrees)) translateY(-0.625rem) translateZ(-1rem);
-        inline-size: 0.75rem;
-        block-size: 1rem;
-        background: currentColor;
-    }
-
-    &::after {
-        .fullsize(absolute, inset);
-
-        content: '';
-        border-radius: inherit;
-        background: currentColor linear-gradient(-45deg, rgba(0, 0, 0, 0.2), transparent);
-    }
-}

package/styles/components/like.less

@@ -1,67 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Like
- * @selector [tuiLike]
- *
- * @description
- * A stylized input type="checkbox"
- *
- * @attributes
- * data-size — size (default: 'm') ('s' | 'm')
- *
- * @vars
- * --t-icon-color — custom color for `:checked` state
- * --t-icon-start — default state icon
- * --t-icon-end — checkmark icon
- *
- * @example
- * <input tuiLike tuiIcons tuiAppearance data-appearance="secondary" />
- *
- * @see-also
- * Checkbox, Switch, Radio, Appearance
- */
-[tuiLike]:where(*&) {
-    inline-size: 1em;
-    block-size: 1em;
-    font-size: var(--tui-height-m);
-    border-radius: 100%;
-    cursor: pointer;
-    margin: 0;
-    flex-shrink: 0;
-
-    &::before,
-    &::after {
-        .fullsize();
-
-        font-size: 1.25rem;
-        transition-property: transform, opacity;
-    }
-
-    &::after {
-        opacity: 0;
-        color: var(--t-icon-color, inherit);
-        transform: scale(0);
-    }
-
-    &:checked {
-        &::before {
-            opacity: 0;
-        }
-
-        &::after {
-            opacity: 1;
-            transform: scale(1);
-            transition-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1.8), ease-in-out;
-        }
-    }
-
-    &[data-size='s'] {
-        font-size: var(--tui-height-s);
-
-        &::before,
-        &::after {
-            font-size: 1rem;
-        }
-    }
-}

package/styles/components/message.less

@@ -1,33 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Message
- * @selector [tuiMessage]
- *
- * @description
- * A message component that can be used on buttons/links/inputs
- *
- * @example
- * <span tuiMessage>Message text</span>
- *
- * @see-also
- * Chip, Badge, Block
- */
-[tuiMessage]:where(*&) {
-    display: inline-flex;
-    padding: 0.5rem 0.625rem;
-    min-block-size: 2.25rem;
-    block-size: auto;
-    box-sizing: border-box;
-    inline-size: fit-content;
-    isolation: isolate;
-    white-space: nowrap;
-    text-align: start;
-    font: var(--tui-font-ui-m);
-    border-radius: var(--tui-radius-l);
-
-    > [tuiLink] {
-        color: inherit !important;
-        text-decoration: underline solid !important;
-    }
-}

package/styles/components/pin.less

@@ -1,164 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Pin
- * @selector tui-pin,[tuiPin]
- *
- * @description
- * A toggleable pin to be used on maps
- *
- * @example
- * <button tuiPin><img src="avatar.jpg" /></button>
- *
- * @see-also
- * Compass
- */
-[tuiPin]:where(*&) {
-    --t-size: 2rem;
-
-    .transition(~'width, height, border, margin');
-    .button-clear();
-
-    position: relative;
-    display: flex;
-    inline-size: var(--t-size);
-    block-size: var(--t-size);
-    align-items: stretch;
-    flex-direction: column;
-    justify-content: center;
-    text-align: center;
-    border-radius: 100%;
-    font: var(--tui-font-body-s);
-    font-weight: bold;
-    box-sizing: border-box;
-    color: var(--tui-text-primary-on-accent-2);
-    background: var(--tui-background-accent-2);
-    box-shadow: 0 0 0 0.125rem var(--tui-background-elevation-2);
-    border: 0 solid var(--tui-background-accent-2);
-    transform: translate(-50%, -50%);
-
-    .interactive({
-        cursor: pointer;
-    });
-
-    &:empty {
-        --t-size: 0.75rem;
-
-        &::before {
-            display: none;
-        }
-    }
-
-    > input {
-        .fullsize();
-
-        appearance: none;
-        border-radius: 100%;
-    }
-
-    > img {
-        max-block-size: 100%;
-        box-sizing: border-box;
-        border-radius: 100%;
-        background: var(--tui-background-base);
-    }
-
-    > tui-icon {
-        .transition(~'width, height');
-
-        font-size: 1.25rem;
-        align-self: center;
-    }
-
-    &:has(:checked) {
-        --t-size: 3.5rem;
-
-        font: var(--tui-font-body-m);
-        font-weight: bold;
-        border-width: 0;
-        margin-block-start: -2.75rem;
-
-        > img {
-            padding: 0.125rem;
-        }
-
-        > tui-icon {
-            font-size: 2.125rem;
-        }
-
-        &::before {
-            transform: scale(0.99) translate(-1.875rem, -1.875rem);
-            opacity: 1;
-        }
-
-        &::after {
-            top: 4.5rem;
-            opacity: 1;
-        }
-    }
-
-    // TODO: Fallback until Safari 15.4
-    &._open {
-        --t-size: 3.5rem;
-
-        font: var(--tui-font-body-m);
-        font-weight: bold;
-        border-width: 0;
-        margin-block-start: -2.75rem;
-
-        > img {
-            padding: 0.125rem;
-        }
-
-        > tui-icon {
-            font-size: 2.125rem;
-        }
-
-        &::before {
-            transform: scale(0.99) translate(-1.875rem, -1.875rem);
-            opacity: 1;
-        }
-
-        &::after {
-            top: 4.5rem;
-            opacity: 1;
-        }
-    }
-
-    &::before {
-        .transition(~'transform, opacity');
-
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        right: -0.25rem;
-        bottom: -0.625rem;
-        box-sizing: border-box;
-        border-width: 2.2rem 2rem;
-        border-style: solid;
-        border-color: inherit;
-        opacity: 0;
-        transform: scale(0.57) translate(-1.875rem, -1.875rem);
-        transform-origin: top left;
-        pointer-events: none;
-        mask: url('data:image/svg+xml,<svg width="60" height="66" viewBox="0 0 60 66" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z" /></svg>')
-            no-repeat;
-    }
-
-    &::after {
-        .transition(~'top, opacity');
-
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        border: 0.1875rem solid currentColor;
-        border-color: inherit;
-        border-radius: 100%;
-        box-sizing: border-box;
-        box-shadow: inherit;
-        transform: translate(-50%, -50%);
-        opacity: 0;
-    }
-}

package/styles/components/progress-bar.less

@@ -1,117 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name ProgressBar
- * @selector [tuiProgressBar]
- *
- * @description
- * A stylized native progress element
- *
- * @attributes
- * data-size — size (default: 'm') ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' )
- *
- * @example
- * <progress tuiProgressBar value="33"></progress>
- */
-.clearProgress() {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border: none;
-}
-
-/* used to style inner value bar */
-.progressValue(@ruleset) {
-    &::-webkit-progress-value {
-        @ruleset(); // Chromium Edge | Chrome | Opera | Safari
-    }
-
-    &::-moz-progress-bar {
-        @ruleset(); // Mozilla
-    }
-}
-
-/*
-* Edge and IE animate the progress bar right out of the box
-* Chrome | Opera | Safari animation is controlled by its mixins
-* No possibility for firefox animation (https://snook.ca/archives/html_and_css/animating-progress)
-*/
-.progressAnimation() {
-    &::-webkit-progress-value {
-        transition: inline-size var(--tui-duration) linear;
-    }
-}
-
-@keyframes tuiIndeterminateAnimation {
-    50% {
-        background-position: left;
-    }
-}
-
-[tuiProgressBar]:where(*&) {
-    @track-color: var(--tui-background-neutral-2);
-    @progress-color: var(--tui-progress-color, currentColor);
-
-    .clearProgress();
-    .progressAnimation();
-    .progressValue({ background: @progress-color; border-radius: inherit });
-
-    --t-height: 0.75rem;
-
-    display: block;
-    inline-size: 100%;
-    block-size: var(--t-height);
-    color: var(--tui-background-accent-1);
-    background: @track-color;
-    clip-path: inset(0 0.5px round var(--tui-radius-m)); // 0.5px is a hack to prevent jagged edges on low dpi screens
-    overflow: hidden;
-    border-radius: 1rem;
-    flex-shrink: 0;
-
-    &[data-size='xxs'] {
-        --t-height: 0.125rem;
-    }
-
-    &[data-size='xs'] {
-        --t-height: 0.25rem;
-    }
-
-    &[data-size='s'] {
-        --t-height: 0.5rem;
-    }
-
-    &[data-size='l'] {
-        --t-height: 1rem;
-    }
-
-    &[data-size='xl'] {
-        --t-height: 1.25rem;
-    }
-
-    &[data-size='xxl'] {
-        --t-height: 1.5rem;
-    }
-
-    &:indeterminate {
-        .progressValue({ background: transparent });
-
-        background: linear-gradient(to right, @track-color 0 45%, @progress-color 45% 55%, @track-color 55% 100%) right;
-        background-size: 225%;
-        animation: tuiIndeterminateAnimation 3s infinite ease-in-out;
-    }
-
-    &::-webkit-progress-inner-element {
-        border-radius: inherit;
-    }
-
-    &::-webkit-progress-bar {
-        background: transparent;
-        border-radius: inherit;
-    }
-
-    label[tuiProgressLabel] &:not(:first-child) {
-        .fullsize();
-
-        background: transparent;
-    }
-}

package/styles/components/radio.less

@@ -1,59 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Radio
- * @selector [tuiRadio]
- *
- * @description
- * A stylized input type="radio"
- *
- * @attributes
- * data-size — size (default: 'm') ('s' | 'm')
- *
- * @example
- * <input type="radio" tuiRadio />
- *
- * @see-also
- * Checkbox, Switch, Appearance
- */
-[tuiRadio]:where(*&) {
-    --t-size: 1.5rem;
-
-    .transition(~'background, box-shadow');
-
-    inline-size: var(--t-size);
-    block-size: var(--t-size);
-    cursor: pointer;
-    margin: 0;
-    flex-shrink: 0;
-    border-radius: 100%;
-    color: var(--tui-text-primary-on-accent-1);
-
-    &:disabled._readonly._readonly {
-        opacity: 1;
-    }
-
-    &::before {
-        .fullsize(absolute, inset);
-
-        content: '';
-        margin: auto;
-        border-radius: 100%;
-        background: currentColor;
-        transform: scale(0);
-        transition-property: transform;
-    }
-
-    &:checked::before {
-        transform: scale(0.5);
-    }
-
-    &[data-size='s'] {
-        --t-size: 1rem;
-    }
-
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'] {
-        color: #fff;
-    }
-}