@central-design-system/components 4.0.0-alpha.4 → 4.0.0-alpha.5

package/src/components/CdsDivider/CdsDivider.scss

@@ -0,0 +1,83 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use './styles/CdsDivider.variables' as *;
+
+@include tools.layer('components') {
+  .cds-divider {
+    display: block;
+    flex:  1 1 100%;
+    height: 0;
+    max-height: 0;
+    margin: 0;
+    color: $divider-color;
+    opacity: $divider-opacity;
+    transition: inherit;
+
+    @include tools.border($divider-border...);
+
+    &--vertical {
+      display: inline-flex;
+      align-self: stretch;
+      width: 0;
+      max-width: 0;
+      height: auto;
+      max-height: 100%;
+      margin-left: $divider-vertical-margin-left;
+      vertical-align: text-bottom;
+      border-width: $divider-vertical-border-width;
+    }
+
+    &--inset {
+      &:not(.cds-divider--vertical) {
+        max-width: $divider-inset-max-width;
+        margin-inline-start: $divider-inset-margin;
+      }
+
+      &.cds-divider--vertical {
+        max-height: $divider-vertical-inset-max-height;
+        margin-top: $divider-vertical-inset-margin-top;
+        margin-bottom: $divider-vertical-inset-margin-bottom;
+      }
+    }
+
+    &--gradient {
+      mask-image: $divider-gradient-mask;
+
+      &.cds-divider--vertical {
+        mask-image: $divider-vertical-gradient-mask;
+      }
+    }
+  }
+
+  .cds-divider__content {
+    padding: $divider-content-padding;
+    text-wrap: nowrap;
+
+    .cds-divider__wrapper--vertical & {
+      padding: $divider-content-vertical-padding;
+    }
+  }
+
+  .cds-divider__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--vertical {
+      flex-direction: column;
+      height: 100%;
+
+      .cds-divider {
+        margin: 0 auto;
+      }
+    }
+
+    &--gradient {
+      mask-image: $divider-gradient-mask;
+
+      &.cds-divider__wrapper--vertical {
+        mask-image: $divider-vertical-gradient-mask;
+      }
+    }
+  }
+}

package/src/components/CdsDivider/styles/_CdsDivider.variables.scss

@@ -0,0 +1,28 @@
+@use '../../../styles/settings';
+
+$divider-color: rgb(var(--cds-color-line-tertiary)) !default;
+$divider-margin: var(--cds-spacing-200) !default;
+$divider-opacity: var(--cds-border-opacity) !default;
+$divider-border-color: null !default;
+$divider-border-style: settings.$border-style-root !default;
+$divider-border-width: thin 0 0 0 !default;
+$divider-inset-margin: 72px !default;
+$divider-inset-max-width: calc(100% - #{$divider-inset-margin}) !default;
+$divider-content-padding: 0 var(--cds-spacing-400) !default;
+$divider-gradient-mask: linear-gradient(90deg, transparent, #000, transparent) !default;
+
+// Divider vertical
+$divider-vertical-inset-margin-bottom: $divider-margin !default;
+$divider-vertical-inset-margin-top: $divider-margin !default;
+$divider-vertical-inset-max-height: calc(100% - #{$divider-margin} * 2) !default;
+$divider-vertical-border-width: 0 thin 0 0 !default;
+$divider-vertical-margin-left: -1px !default;
+$divider-content-vertical-padding: var(--cds-spacing-100) 0 !default;
+$divider-vertical-gradient-mask: linear-gradient(0deg, transparent, #000, transparent) !default;
+
+// Lists
+$divider-border: (
+  $divider-border-color,
+  $divider-border-style,
+  $divider-border-width
+) !default;

package/src/components/CdsDrawer/CdsDrawer.scss

@@ -0,0 +1,144 @@
+@use '../../styles/tools';
+@use './styles/CdsDrawer.variables' as *;
+
+$drawer-breakpoint-md: 1056px;
+
+@include tools.layer('components') {
+  .cds-drawer {
+    position: absolute;
+    top: 0;
+    right: auto;
+    left: 0;
+    z-index: tools.z('cds-layer-high');
+    display: flex;
+    visibility: hidden;
+    flex-direction: column;
+    width: $drawer-width;
+    height: 100%;
+    overflow: hidden auto;
+    outline: none;
+    background-color: $drawer-background;
+    border-right: $drawer-border $drawer-shadow-border-color;
+    opacity: 0;
+    transform: translate(-110%);
+
+    @include tools.cds-shadow-right-100;
+    @include tools.cds-animation-motion(tools.$cds-duration-fast, 'ease-in-out', 'basic');
+
+    @media (min-width: $drawer-breakpoint-md) {
+      visibility: visible;
+      opacity: 1;
+      transform: translate(0);
+    }
+
+    &--temporary {
+      visibility: hidden;
+      opacity: 0;
+      transform: translate(-110%);
+    }
+
+    &--active {
+      visibility: visible;
+      opacity: 1;
+      transform: translate(0);
+    }
+
+    &--fixed {
+      position: fixed;
+    }
+
+    &--right {
+      right: 0;
+      left: auto;
+      visibility: hidden;
+      border-right: none;
+      border-left: $drawer-border $drawer-shadow-border-color;
+      opacity: 0;
+      transform: translate(110%);
+
+      @include tools.cds-shadow-left-100;
+
+      @media (min-width: $drawer-breakpoint-md) {
+        visibility: visible;
+        opacity: 1;
+        transform: translate(0);
+      }
+
+      &.cds-drawer--temporary {
+        transform: translate(110%);
+      }
+
+      &.cds-drawer--active {
+        visibility: visible;
+        opacity: 1;
+        transform: translate(0);
+      }
+    }
+
+    &--minified {
+      width: $drawer-width-minified;
+      overflow: hidden;
+
+      &:hover {
+        width: $drawer-width;
+        overflow: auto;
+      }
+    }
+
+    &--border {
+      .cds-drawer__prepend {
+        border-bottom: $drawer-border $drawer-border-color;
+      }
+
+      .cds-drawer__append {
+        border-top: $drawer-border $drawer-border-color;
+      }
+    }
+
+    &--fixed-slots {
+      overflow: hidden;
+
+      .cds-drawer__content {
+        overflow: scroll;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
+      .cds-drawer__prepend {
+        border-bottom: $drawer-border $drawer-border-color;
+      }
+
+      .cds-drawer__append {
+        border-top: $drawer-border $drawer-border-color;
+      }
+    }
+
+    &__prepend {
+      padding: $drawer-prepend-padding;
+    }
+
+    &__content {
+      flex: 1;
+      height: max-content;
+      padding: $drawer-block-padding $drawer-inline-padding;
+    }
+
+    &__append {
+      padding: $drawer-append-padding;
+    }
+
+    &__overlay {
+      position: absolute;
+      inset: 0;
+      z-index: tools.z('cds-layer-middle');
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      background: $drawer-overlay-color;
+    }
+  }
+}

package/src/components/CdsDrawer/styles/_CdsDrawer.variables.scss

@@ -0,0 +1,17 @@
+// Размеры панели — структурные константы макета.
+$drawer-width: 240px !default;
+$drawer-width-minified: 56px !default;
+
+// Отступы секций — на токенах спейсинга.
+$drawer-block-padding: var(--cds-spacing-400) !default;
+$drawer-inline-padding: var(--cds-spacing-100) !default;
+$drawer-prepend-padding: var(--cds-spacing-200)
+  var(--cds-spacing-400) !default;
+$drawer-append-padding: var(--cds-spacing-300) var(--cds-spacing-400) !default;
+
+// Границы и цвета — на CSS-переменных.
+$drawer-border: var(--cds-border-100) solid !default;
+$drawer-background: rgb(var(--cds-color-surface-elevated)) !default;
+$drawer-border-color: rgb(var(--cds-color-line-tertiary)) !default;
+$drawer-overlay-color: rgb(var(--cds-color-surface-overlay)) !default;
+$drawer-shadow-border-color: rgb(var(--cds-color-line-elevated)) !default;

package/src/components/CdsEmptyState/CdsEmptyState.scss

@@ -0,0 +1,103 @@
+@use '../../styles/tools';
+@use './styles/CdsEmptyState.variables' as *;
+
+@include tools.layer('components') {
+  .cds-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: $empty-state-min-height;
+    padding: $empty-state-padding;
+
+    &--start {
+      align-items: flex-start;
+    }
+
+    &--center {
+      align-items: center;
+    }
+
+    &--end {
+      align-items: flex-end;
+    }
+
+    &__media {
+      width: 100%;
+      margin-bottom: $empty-state-gap;
+      text-align: center;
+
+      .cds-icon {
+        color: $empty-state-media-color;
+      }
+    }
+
+    &__illustration {
+      width: $empty-state-illustration-size;
+      height: $empty-state-illustration-size;
+      margin-bottom: $empty-state-gap;
+
+      > img,
+      > .cds-illustration {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &__headline {
+      @include tools.cds-text-regular-800;
+
+      margin-bottom: $empty-state-headline-margin-bottom;
+      color: $empty-state-headline-color;
+      text-align: center;
+    }
+
+    &--mobile .cds-empty-state__headline {
+      font-size: $empty-state-headline-mobile-font-size;
+    }
+
+    &__title {
+      @include tools.cds-text-bold-400;
+
+      margin-bottom: $empty-state-title-margin-bottom;
+      text-align: center;
+    }
+
+    &__text,
+    &__description {
+      @include tools.cds-text-regular-200;
+
+      padding: $empty-state-text-padding;
+      text-align: center;
+    }
+
+    &__content {
+      padding: $empty-state-content-padding;
+    }
+
+    &__actions {
+      display: flex;
+      gap: $empty-state-actions-gap;
+      padding: $empty-state-actions-padding;
+    }
+  }
+}
+
+// Переопределения поверх cds-illustrations.css из пакета
+// @central-design-system/illustrations: его CSS не использует @layer и потому
+// побеждает любой слойный стиль компонента — эти правила намеренно вне @layer.
+.cds-empty-state__illustration {
+  > .cds-illustration > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  &--colored {
+    // stylelint-disable-next-line selector-class-pattern -- .isMono задаёт legacy-пакет иллюстраций
+    .cds-illustration.isMono > svg #mono,
+    .cds-illustration > svg #color-primary {
+      fill: currentcolor;
+    }
+  }
+}

package/src/components/CdsEmptyState/styles/_CdsEmptyState.variables.scss

@@ -0,0 +1,15 @@
+@use '../../../styles/tools';
+
+$empty-state-min-height: 100% !default;
+$empty-state-illustration-size: tools.to-rem(96px) !default;
+$empty-state-padding: var(--cds-spacing-400) !default;
+$empty-state-gap: var(--cds-spacing-400) !default;
+$empty-state-media-color: rgb(var(--cds-color-content-primary)) !default;
+$empty-state-headline-color: rgb(var(--cds-color-content-primary)) !default;
+$empty-state-headline-margin-bottom: var(--cds-spacing-400) !default;
+$empty-state-headline-mobile-font-size: var(--cds-font-size-700) !default;
+$empty-state-title-margin-bottom: var(--cds-spacing-200) !default;
+$empty-state-text-padding: 0 var(--cds-spacing-400) !default;
+$empty-state-content-padding: var(--cds-spacing-600) 0 !default;
+$empty-state-actions-gap: var(--cds-spacing-200) !default;
+$empty-state-actions-padding: var(--cds-spacing-400) !default;

package/src/components/CdsExpandablePanel/CdsExpandablePanel.scss

@@ -0,0 +1,221 @@
+@use '../../styles/tools';
+@use './styles/CdsExpandablePanel.variables' as *;
+
+@include tools.layer('components') {
+  .cds-expandable-panels {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cds-expandable-panels-gap, $expandable-panels-gap);
+    justify-content: center;
+    width: 100%;
+    padding: 0;
+    list-style-type: none;
+
+    &--appearance-primary {
+      .cds-expandable-panel,
+      .cds-expandable-panel-title {
+        background-color: $expandable-panel-background-primary;
+      }
+    }
+
+    &--appearance-secondary {
+      .cds-expandable-panel,
+      .cds-expandable-panel-title {
+        background-color: $expandable-panel-background-secondary;
+      }
+    }
+
+    &--appearance-transparent {
+      .cds-expandable-panel,
+      .cds-expandable-panel-title {
+        background-color: transparent;
+      }
+    }
+
+    &--variant-accordion {
+      gap: 0;
+
+      > :first-child {
+        border-bottom-right-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
+
+      > :last-child {
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+      }
+
+      > :not(:first-child, :last-child) {
+        border-radius: 0 !important;
+      }
+
+      .cds-expandable-panel {
+        &:not(:last-child) {
+          .cds-expandable-panel-title::after {
+            display: block;
+          }
+
+          .cds-expandable-panel-content {
+            border-radius: 0;
+          }
+
+          &.cds-expandable-panel--selected {
+            border-bottom: $expandable-panels-divider-width solid $expandable-panels-divider-color;
+          }
+        }
+      }
+    }
+
+    // stylelint-disable selector-class-pattern -- имена тем в camelCase (cds-theme--cdsDark)
+    &.cds-theme--cdsDark,
+    &.cds-theme--b2bDark,
+    &.cds-theme--promoDark {
+      &:not(.cds-expandable-panels--variant-accordion) {
+        .cds-expandable-panel,
+        .cds-expandable-panel-title {
+          box-shadow: inset 0 0 0 $expandable-panels-shadow-border-width $expandable-panels-shadow-border-color;
+        }
+      }
+
+      &.cds-expandable-panels--variant-accordion {
+        border: $expandable-panels-shadow-border-width solid $expandable-panels-shadow-border-color;
+        border-radius: calc(#{$expandable-panels-border-radius} + 1px);
+      }
+    }
+    // stylelint-enable selector-class-pattern
+  }
+
+  .cds-expandable-panel {
+    position: relative;
+    display: flex;
+    flex: 1 0 100%;
+    flex-direction: column;
+    max-width: 100%;
+    background-color: $expandable-panel-background-primary;
+    border-radius: $expandable-panels-border-radius;
+    transition-property: border-radius, max-width;
+
+    @include tools.cds-shadow-bottom-100;
+
+    &--disabled {
+      .cds-expandable-panel-title {
+        color: $expandable-panel-disabled-color;
+        cursor: not-allowed;
+
+        svg {
+          fill: $expandable-panel-disabled-color;
+        }
+      }
+    }
+
+    &--selected {
+      > .cds-expandable-panel-title {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+        transition-delay: 0ms;
+
+        &::after {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .cds-expandable-panel-title {
+    position: relative;
+    display: flex;
+    gap: $expandable-panel-title-gap;
+    align-items: center;
+    justify-content: space-between;
+    order: 1;
+    width: 100%;
+    padding: $expandable-panel-title-padding;
+    line-height: 1;
+    color: $expandable-panel-color;
+    text-align: start;
+    cursor: pointer;
+    outline: none;
+    background-color: $expandable-panel-background-primary;
+    border: none;
+    border-radius: inherit;
+    transition-delay: #{tools.$cds-duration-very-fast}ms;
+    transition-timing-function: tools.get-motion('ease-in-out', 'basic');
+    transition-duration: #{tools.$cds-duration-very-fast}ms;
+
+    @include tools.cds-text-regular-200;
+
+    // Подчёркивание раскрытой панели
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: none;
+      width: 100%;
+      height: $expandable-panels-divider-width;
+      content: '';
+      background-color: $expandable-panels-divider-color;
+    }
+
+    // Обводка при фокусе
+    &::before {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      outline: $expandable-panel-title-outline transparent;
+      content: '';
+      background-color: transparent;
+      border-radius: inherit;
+
+      @include tools.cds-animation-motion(tools.$cds-duration-very-fast, 'ease-in-out', 'basic');
+    }
+
+    &:focus-visible {
+      &::before {
+        outline-color: $expandable-panel-title-focus-color;
+      }
+    }
+
+    &--hover:not(.cds-expandable-panel-title--disabled):hover {
+      background-color: $expandable-panel-title-hover-color;
+    }
+
+    &--focusable:focus-visible {
+      background-color: $expandable-panel-title-hover-color;
+    }
+
+    &--static {
+      transition: none;
+    }
+
+    &--readonly {
+      pointer-events: none;
+    }
+
+    &__icon {
+      display: inline-flex;
+      user-select: none;
+
+      svg {
+        fill: currentcolor;
+      }
+    }
+  }
+
+  .cds-expandable-panel-content {
+    display: flex;
+    order: 2;
+    color: $expandable-panel-color;
+    border-radius: $expandable-panel-content-border-radius;
+
+    &__wrapper {
+      flex: 1 1 auto;
+      max-width: 100%;
+      padding: $expandable-panel-content-padding;
+    }
+  }
+}

package/src/components/CdsExpandablePanel/styles/_CdsExpandablePanel.variables.scss

@@ -0,0 +1,24 @@
+// CdsExpandablePanels
+$expandable-panels-gap: var(--cds-spacing-400) !default;
+$expandable-panels-border-radius: var(--cds-border-radius-200) !default;
+$expandable-panels-divider-width: var(--cds-border-100) !default;
+$expandable-panels-divider-color: rgb(var(--cds-color-line-tertiary)) !default;
+$expandable-panels-shadow-border-width: var(--cds-border-100) !default;
+$expandable-panels-shadow-border-color: rgb(var(--cds-color-line-elevated)) !default;
+
+// CdsExpandablePanel
+$expandable-panel-background-primary: rgb(var(--cds-color-surface-elevated)) !default;
+$expandable-panel-background-secondary: rgb(var(--cds-color-surface-secondary)) !default;
+$expandable-panel-color: rgb(var(--cds-color-content-primary)) !default;
+$expandable-panel-disabled-color: rgb(var(--cds-color-content-disable)) !default;
+
+// CdsExpandablePanelTitle
+$expandable-panel-title-padding: var(--cds-spacing-200) var(--cds-spacing-400) !default;
+$expandable-panel-title-gap: var(--cds-spacing-200) !default;
+$expandable-panel-title-hover-color: rgb(var(--cds-color-fill-primary-hover)) !default;
+$expandable-panel-title-focus-color: rgb(var(--cds-color-line-focus-outline)) !default;
+$expandable-panel-title-outline: var(--cds-border-200) solid !default;
+
+// CdsExpandablePanelContent
+$expandable-panel-content-border-radius: 0 0 var(--cds-border-radius-200) var(--cds-border-radius-200) !default;
+$expandable-panel-content-padding: var(--cds-spacing-200) var(--cds-spacing-400) !default;