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

package/styles/components/status.less

@@ -1,40 +0,0 @@
-/**
- * @name Status
- * @selector [tuiStatus]
- *
- * @description
- * An indicator of a status with a color dot
- *
- * @vars
- * --t-status — color of the dot
- *
- * @example
- * <span tuiStatus style="--t-status: green">Success</span>
- *
- * @see-also
- * Badge, Chip
- */
-[tuiStatus]:where(*&) {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-
-    &::before {
-        content: '';
-        display: var(--t-status, none);
-        inline-size: 0.5rem;
-        block-size: 0.5rem;
-        border-radius: 100%;
-        background: var(--t-status);
-    }
-
-    &[data-size='s'],
-    &[data-size='m'],
-    &[data-size='l'] {
-        gap: 0.25rem;
-    }
-
-    &[data-size='xl'] {
-        gap: 0.375rem;
-    }
-}

package/styles/components/switch.less

@@ -1,103 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-/**
- * @name Switch
- * @selector [tuiSwitch]
- *
- * @description
- * A stylized input type="checkbox" switch
- *
- * @attributes
- * data-size — size (default: 'm') ('s' | 'm')
- *
- * @vars
- * --t-icon-start — checkmark icon
- *
- * @example
- * <input type="checkbox" tuiSwitch tuiAppearance data-appearance="primary" />
- *
- * @see-also
- * Checkbox, Radio
- */
-[tuiSwitch]:where(*&) {
-    .transition(~'background, box-shadow');
-
-    display: inline-block;
-    inline-size: 3rem;
-    block-size: 1.5rem;
-    border-radius: 2rem;
-    overflow: hidden;
-    cursor: pointer;
-    margin: 0;
-    flex-shrink: 0;
-    color: #fff !important;
-
-    &[data-size='s'] {
-        block-size: 1rem;
-        inline-size: 2rem;
-
-        &::before {
-            inline-size: 1rem;
-            transform: translateX(-1rem);
-            font-size: 0.75rem;
-        }
-
-        &::after {
-            inline-size: 1rem;
-            box-shadow: -2.625rem 0 0 0.5rem var(--tui-background-base);
-            outline-width: 0.167rem;
-            transform: scale(0.375);
-        }
-
-        &:checked::after {
-            transform: scale(0.375) translateX(2.625rem);
-        }
-    }
-
-    &:checked {
-        &::before {
-            transform: none;
-        }
-
-        &::after {
-            transform: scale(0.33333) translateX(4.5rem);
-        }
-    }
-
-    &:disabled._readonly._readonly {
-        opacity: 1;
-    }
-
-    &::before,
-    &::after {
-        position: absolute;
-        block-size: 100%;
-        inline-size: 1.5rem;
-        transition-property: transform;
-    }
-
-    &::before {
-        left: 0.125rem;
-        font-size: 1rem;
-        transform: translateX(-1.5rem);
-    }
-
-    &::after {
-        right: 0;
-        display: block;
-        border-radius: 100%;
-        background: none;
-        transform: scale(0.33333);
-        box-shadow: -4.5rem 0 0 0.75rem var(--tui-background-base);
-        outline: 0.375rem solid var(--tui-background-neutral-2-pressed);
-    }
-
-    &:not([data-icon-start])::after {
-        outline-offset: 20rem;
-    }
-
-    &:invalid:not([data-mode]),
-    &[data-mode~='invalid'] {
-        color: #fff;
-    }
-}

package/styles/components/toast.less

@@ -1,44 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local.less';
-
-[tuiToast]:where(*&) {
-    .transition(transform);
-
-    display: flex;
-    grid-row: 1 / span 2;
-    box-sizing: border-box;
-    gap: 0.75rem;
-    color: var(--tui-text-primary);
-    background: var(--tui-background-elevation-3);
-    min-block-size: 3.5rem;
-    border-radius: 1rem;
-    padding: 0.75rem 1rem;
-    box-shadow: var(--tui-shadow-medium);
-    align-items: center;
-    justify-content: center;
-    inline-size: max-content;
-    font: var(--tui-font-ui-s);
-    max-inline-size: ~'min(calc(100vw - 2rem), 25rem)';
-    border: inherit;
-    text-decoration: none;
-    overflow: hidden;
-
-    .interactive({
-        cursor: pointer;
-    });
-
-    > *,
-    &::after,
-    &::before {
-        max-inline-size: 50%;
-        margin: 0 -0.25rem;
-    }
-
-    &::after {
-        font-size: 1rem;
-        color: var(--tui-text-tertiary);
-    }
-
-    [tuiAvatar] {
-        margin-inline-end: 0;
-    }
-}