@dynamic-framework/ui-react 1.2.2 → 1.3.0

package/src/style/components/_d-collapse.scss

@@ -0,0 +1,54 @@
+.collapse-container {
+  // Container
+  --#{$prefix}collapse-bg: var(--#{$prefix}white);
+  --#{$prefix}collapse-border-radius: var(--#{$prefix}ref-spacer-1);
+  --#{$prefix}collapse-box-shadow: var(--#{$prefix}box-shadow-sm);
+  // Button
+  --#{$prefix}collapse-button-padding-x: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}collapse-button-padding-y: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}collapse-button-gap: var(--#{$prefix}ref-spacer-3);
+  // Body
+  --#{$prefix}collapse-body-padding-x: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}collapse-body-padding-y: var(--#{$prefix}ref-spacer-3);
+  // Separator
+  --#{$prefix}collapse-separator-display: none;
+  --#{$prefix}collapse-separator-height: 1px;
+  --#{$prefix}collapse-separator-bg: var(--#{$prefix}gray-200);
+
+  background-color: var(--#{$prefix}collapse-bg);
+  border-radius: var(--#{$prefix}collapse-border-radius);
+  box-shadow: var(--#{$prefix}collapse-box-shadow);
+
+  .collapse-button {
+    display: flex;
+    gap: var(--#{$prefix}collapse-button-gap);
+    align-items: center;
+    width: 100%;
+    padding: var(--#{$prefix}collapse-button-padding-y) var(--#{$prefix}collapse-button-padding-x);
+    text-align: left;
+    user-select: none;
+    background: transparent;
+    border: 0;
+
+    &:focus,
+    &:focus-visible {
+      outline: 0;
+    }
+  }
+
+  .collapse-body {
+    position: relative;
+    padding: var(--#{$prefix}collapse-body-padding-y) var(--#{$prefix}collapse-body-padding-x);
+    padding-top: 0;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      display: var(--#{$prefix}collapse-separator-display);
+      width: calc(100% - (var(--#{$prefix}collapse-body-padding-x) * 2));
+      height: var(--#{$prefix}collapse-separator-height);
+      content: " ";
+      background-color: var(--#{$prefix}collapse-separator-bg);
+    }
+  }
+}

package/src/style/components/_d-datepicker.scss

@@ -0,0 +1,224 @@
+@import "react-datepicker/src/stylesheets/datepicker";
+
+// stylelint-disable selector-class-pattern
+
+.react-datepicker {
+  --#{$prefix}datepicker-font-family: var(--#{$prefix}font-sans-serif);
+  --#{$prefix}datepicker-border: 0px;
+  --#{$prefix}datepicker-box-shadow: var(--#{$prefix}box-shadow);
+  --#{$prefix}datepicker-font-size: var(--#{$prefix}ref-spacer-3);
+
+  // Header variables
+  --#{$prefix}datepicker-header-gap: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}datepicker-header-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}datepicker-header-background-color: var(--#{$prefix}indigo-soft);
+  --#{$prefix}datepicker-header-border: 0;
+  --#{$prefix}datepicker-header-font-size: var(--#{$prefix}ref-fs-6);
+
+  --#{$prefix}datepicker-day-names-margin: 0;
+  --#{$prefix}datepicker-day-names-font-size: var(--#{$prefix}ref-spacer-3);
+
+  --#{$prefix}datepicker-day-name-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}datepicker-day-name-margin: 0;
+  --#{$prefix}datepicker-day-name-size: 20px;
+  --#{$prefix}datepicker-day-name-color: var(--#{$prefix}gray-500);
+
+  // Calendar variables
+  --#{$prefix}datepicker-month-gap: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}datepicker-month-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}datepicker-month-margin: 0;
+
+  --#{$prefix}datepicker-week-gap: 1.875rem;
+
+  // Day variables
+  --#{$prefix}datepicker-day-margin: 0;
+  --#{$prefix}datepicker-day-font-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}datepicker-day-size: 20px;
+  --#{$prefix}datepicker-day-radius: 100%;
+
+  --#{$prefix}datepicker-day-bg-hover: var(--#{$prefix}body);
+  --#{$prefix}datepicker-day-color-hover: var(--#{$prefix}info-100);
+
+  --#{$prefix}datepicker-day-selected-color: var(--#{$prefix}white);
+  --#{$prefix}datepicker-day-selected-bg: var(--#{$prefix}secondary-500);
+
+  --#{$prefix}datepicker-day-in-range-color: var(--#{$prefix}dark);
+  --#{$prefix}datepicker-day-in-range-bg: var(--#{$prefix}secondary-100);
+
+  --#{$prefix}datepicker-day-outside-month-color: var(--#{$prefix}gray-400);
+
+  --#{$prefix}datepicker-day-today-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}datepicker-day-today-box-shadow: 0 0 0 2px inset var(--#{$prefix}secondary);
+
+  // Time variables
+  --#{$prefix}datepicker-time-container-margin: 0;
+  --#{$prefix}datepicker-time-container-align: center;
+  --#{$prefix}datepicker-time-input-width: 50%;
+  --#{$prefix}datepicker-time-input-margin: 0;
+  --#{$prefix}datepicker-time-input-align: center;
+
+  --#{$prefix}datepicker-time-input-padding: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}datepicker-time-input-gap: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}datepicker-time-input-label-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}datepicker-time-input-label-color: var(--#{$prefix}gray-700);
+  --#{$prefix}datepicker-time-input-label-size: var(--#{$prefix}ref-fs-small);
+
+  font-family: var(--#{$prefix}datepicker-font-family);
+  font-size: var(--#{$prefix}datepicker-font-size);
+  border: var(--#{$prefix}datepicker-border);
+  box-shadow: var(--#{$prefix}datepicker-box-shadow);
+
+  .react-datepicker__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}datepicker-header-gap);
+    padding: var(--#{$prefix}datepicker-header-padding);
+    font-size: var(--#{$prefix}datepicker-header-font-size);
+    background-color: var(--#{$prefix}datepicker-header-background-color);
+    border: var(--#{$prefix}datepicker-header-border);
+
+    .react-datepicker__day-names {
+      display: flex;
+      justify-content: space-between;
+      margin: var(--#{$prefix}datepicker-day-names-margin);
+      font-size: var(--#{$prefix}datepicker-day-names-font-size);
+    }
+    .react-datepicker__day-name {
+      width: var(--#{$prefix}datepicker-day-name-size);
+      height: var(--#{$prefix}datepicker-day-name-size);
+      margin: var(--#{$prefix}datepicker-day-name-margin);
+      font-weight: var(--#{$prefix}datepicker-day-name-weight);
+      line-height: var(--#{$prefix}datepicker-day-name-size);
+      color: var(--#{$prefix}datepicker-day-name-color);
+    }
+  }
+
+  .react-datepicker__month {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}datepicker-month-gap);
+    padding: var(--#{$prefix}datepicker-month-padding);
+    margin: var(--#{$prefix}datepicker-month-margin);
+
+    .react-datepicker__week {
+      display: flex;
+      gap: var(--#{$prefix}datepicker-week-gap);
+    }
+
+    .react-datepicker__day {
+      width: var(--#{$prefix}datepicker-day-size);
+      height: var(--#{$prefix}datepicker-day-size);
+      margin: var(--#{$prefix}datepicker-day-margin);
+      font-size: var(--#{$prefix}datepicker-day-font-size);
+      line-height: var(--#{$prefix}datepicker-day-size);
+    }
+  }
+
+  // Hover state
+  .react-datepicker__day,
+  .react-datepicker__month-text,
+  .react-datepicker__quarter-text,
+  .react-datepicker__year-text {
+    &:not(
+    .react-datepicker__day--selected,
+    .react-datepicker__month-text--selected,
+    .react-datepicker__quarter-text--selected,
+    .react-datepicker__year-text--selected):hover {
+      color: var(--#{$prefix}datepicker-day-bg-hover);
+      background-color: var(--#{$prefix}datepicker-day-color-hover);
+      border-radius: var(--#{$prefix}datepicker-day-radius);
+    }
+  }
+
+  // Selected single item
+  .react-datepicker__day--selected,
+  .react-datepicker__month--selected,
+  .react-datepicker__quarter--selected,
+  .react-datepicker__year--selected {
+    color: var(--#{$prefix}datepicker-day-selected-color);
+    background-color: var(--#{$prefix}datepicker-day-selected-bg);
+    border-radius: var(--#{$prefix}datepicker-day-radius);
+  }
+
+  .react-datepicker__day--selected {
+    &.react-datepicker__day--in-range.react-datepicker__day--range-start,
+    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
+      color: var(--#{$prefix}datepicker-day-selected-color);
+      background-color: var(--#{$prefix}datepicker-day-selected-bg);
+    }
+  }
+  .react-datepicker__day {
+    &.react-datepicker__day--in-range.react-datepicker__day--range-end,
+    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
+      color: var(--#{$prefix}datepicker-day-selected-color);
+      background-color: var(--#{$prefix}datepicker-day-selected-bg);
+    }
+  }
+
+  .react-datepicker__day--in-range,
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__quarter-text--in-range,
+  .react-datepicker__year-text--in-range,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__quarter-text--in-selecting-range,
+  .react-datepicker__year-text--in-selecting-range,
+  .react-datepicker__day--keyboard-selected,
+  .react-datepicker__month-text--keyboard-selected,
+  .react-datepicker__quarter-text--keyboard-selected,
+  .react-datepicker__year-text--keyboard-selected {
+    color: var(--#{$prefix}datepicker-day-in-range-color);
+    background-color: var(--#{$prefix}datepicker-day-in-range-bg);
+    border-radius: var(--#{$prefix}datepicker-day-radius);
+  }
+
+  .react-datepicker__day--outside-month {
+    color: var(--#{$prefix}datepicker-day-outside-month-color);
+  }
+
+  /* Start time selector */
+  .react-datepicker__input-time-container {
+    width: 100%;
+    margin: var(--#{$prefix}datepicker-time-container-margin);
+    text-align: var(--#{$prefix}datepicker-time-container-align);
+    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}light);
+
+    .react-datepicker-time__caption {
+      display: none;
+    }
+
+    .react-datepicker-time__input-container {
+      width: 100%;
+
+      .react-datepicker-time__input {
+        width: var(--#{$prefix}datepicker-time-input-width);
+        margin: var(--#{$prefix}datepicker-time-input-margin);
+        text-align: var(--#{$prefix}datepicker-time-input-align);
+        outline: 0;
+      }
+    }
+  }
+
+  /* End time selector */
+
+  .react-datepicker__day--today {
+    font-weight: var(--#{$prefix}datepicker-day-today-font-weight);
+    border-radius: var(--#{$prefix}datepicker-day-radius);
+    box-shadow: var(--#{$prefix}datepicker-day-today-box-shadow);
+  }
+
+  .d-datepicker-time {
+    gap: var(--#{$prefix}datepicker-time-input-gap);
+    padding: var(--#{$prefix}datepicker-time-input-padding);
+    .d-datepicker-time-label {
+      font-size: var(--#{$prefix}datepicker-time-input-label-size);
+      font-weight: var(--#{$prefix}datepicker-time-input-label-weight);
+      color: var(--#{$prefix}datepicker-time-input-label-color);
+    }
+  }
+  .d-datepicker-header {
+    font-size: var(--#{$prefix}ref-fs-6);
+  }
+}
+
+// stylelint-enable selector-class-pattern

package/src/style/components/_d-monthpicker.scss

@@ -0,0 +1,90 @@
+// stylelint-disable selector-class-pattern
+
+.react-datepicker.d-month-picker {
+  // Month variables
+  --#{$prefix}monthpicker-header-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-2) 0;
+  --#{$prefix}monthpicker-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}monthpicker-header-color: var(--#{$prefix}white);
+  --#{$prefix}monthpicker-header-bg: var(--#{$prefix}dark);
+
+  --#{$prefix}monthpicker-month-gap: 0;
+  --#{$prefix}monthpicker-month-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}monthpicker-month-color: var(--#{$prefix}white);
+  --#{$prefix}monthpicker-month-bg: var(--#{$prefix}dark);
+
+  --#{$prefix}monthpicker-month-today-color: var(--#{$prefix}white);
+  --#{$prefix}monthpicker-month-selected-bg: var(--#{$prefix}gray-500);
+  --#{$prefix}monthpicker-month-selected-box-shadow: 0 0 0 1px inset var(--#{$prefix}gray-100);
+
+  --#{$prefix}monthpicker-month-hover-bg: var(--#{$prefix}gray-700);
+
+  --#{$prefix}monthpicker-month-wrapper-gap: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}monthpicker-month-wrapper-font-size: var(--#{$prefix}ref-fs-small);
+
+  --#{$prefix}monthpicker-single-month-width: 46px;
+  --#{$prefix}monthpicker-single-month-padding: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}monthpicker-single-month-margin: 0;
+  --#{$prefix}monthpicker-single-month-text-transform: capitalize;
+  --#{$prefix}monthpicker-single-month-radius: var(--#{$prefix}ref-spacer-4);
+
+  --#{$prefix}monthpicker-single-month-after-display: inline;
+  --#{$prefix}monthpicker-single-month-after-content: ".";
+
+  --#{$prefix}datepicker-triangle-color: var(--#{$prefix}dark);
+
+  font-family: var(--#{$prefix}datepicker-font-family);
+  border: var(--#{$prefix}datepicker-border);
+  box-shadow: var(--#{$prefix}datepicker-box-shadow);
+
+  .react-datepicker__header {
+    padding: var(--#{$prefix}monthpicker-header-padding);
+    font-weight: var(--#{$prefix}monthpicker-font-weight);
+    color: var(--#{$prefix}monthpicker-header-color);
+    background-color: var(--#{$prefix}monthpicker-header-bg);
+  }
+
+  .react-datepicker__month.react-datepicker__monthPicker,
+  .react-datepicker__header.react-datepicker-year-header {
+    gap: var(--#{$prefix}monthpicker-month-gap);
+    padding: var(--#{$prefix}monthpicker-month-padding);
+    color: var(--#{$prefix}monthpicker-month-color);
+    background-color: var(--#{$prefix}monthpicker-month-bg);
+
+  }
+  .react-datepicker__month--selected,
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__month-text--keyboard-selected {
+    color: var(--#{$prefix}monthpicker-month-today-color);
+    background-color: var(--#{$prefix}monthpicker-month-selected-bg);
+    box-shadow: var(--#{$prefix}monthpicker-month-selected-box-shadow);
+  }
+  .react-datepicker__month-text:hover {
+    background-color: var(--#{$prefix}monthpicker-month-hover-bg);
+  }
+  .react-datepicker__month-wrapper {
+    display: flex;
+    gap: var(--#{$prefix}monthpicker-month-wrapper-gap);
+    font-size: var(--#{$prefix}monthpicker-month-wrapper-font-size);
+    .react-datepicker__month-text {
+      width: var(--#{$prefix}monthpicker-single-month-width);
+      padding: var(--#{$prefix}monthpicker-single-month-padding);
+      margin: var(--#{$prefix}monthpicker-single-month-margin);
+      text-transform: var(--#{$prefix}monthpicker-single-month-text-transform);
+      border-radius: var(--#{$prefix}monthpicker-single-month-radius);
+      &::after {
+        display: var(--#{$prefix}monthpicker-single-month-after-display);
+        content: var(--#{$prefix}monthpicker-single-month-after-content);
+      }
+    }
+  }
+  .react-datepicker__triangle {
+    &::after,
+    &::before {
+      top: 0;
+      border-bottom-color: var(--#{$prefix}datepicker-triangle-color);
+    }
+  }
+}
+
+// stylelint-enable selector-class-pattern

package/src/style/components/_d-paginator.scss

@@ -0,0 +1,98 @@
+.pagination {
+  // Page link
+  --#{$prefix}pagination-page-item-size: 2.125rem;
+  --#{$prefix}pagination-page-link-bg: transparent;
+  --#{$prefix}pagination-page-border-radius: 50%;
+  // Arrow
+  --#{$prefix}pagination-arrow-font-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}pagination-arrow-padding-y: var(--#{$prefix}ref-spacer-1);
+  --#{$prefix}pagination-arrow-padding-x: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}pagination-arrow-border-radius: var(--#{$prefix}border-radius);
+  --#{$prefix}pagination-arrow-color: var(--#{$prefix}secondary);
+  // Arrow :focus
+  --#{$prefix}pagination-focus-arrow-bg: var(--#{$prefix}secondary-100);
+  // Arrow previous
+  --#{$prefix}pagination-arrow-prev-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234848b7" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
+  --#{$prefix}pagination-disabled-arrow-prev-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a1a1b5" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
+  // Arrow next
+  --#{$prefix}pagination-arrow-next-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234848b7" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
+  --#{$prefix}pagination-disabled-arrow-next-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a1a1b5" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
+  margin: 0;
+
+  .page-item {
+    min-width: var(--#{$prefix}pagination-page-item-size);
+    min-height: var(--#{$prefix}pagination-page-item-size);
+
+    &:not(.active, :hover) .page-link {
+      background-color: var(--#{$prefix}pagination-page-link-bg);
+    }
+  }
+
+  .arrow .page-link {
+    min-width: fit-content;
+    padding: var(--#{$prefix}pagination-arrow-padding-y) var(--#{$prefix}pagination-arrow-padding-x);
+    font-size: var(--#{$prefix}pagination-arrow-font-size);
+    border-radius: var(--#{$prefix}pagination-arrow-border-radius);
+
+    &:focus {
+      background-color: var(--#{$prefix}pagination-focus-arrow-bg);
+    }
+
+    &::after,
+    &::before {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-repeat: no-repeat;
+      background-size: var(--#{$prefix}pagination-arrow-font-size);
+    }
+  }
+
+  .arrow:is(.arrow-prev, .arrow-next):not(.disabled) .page-link {
+    color: var(--#{$prefix}pagination-arrow-color);
+  }
+
+  // Arrow prev
+  .arrow.arrow-prev .page-link::before {
+    min-width: var(--#{$prefix}pagination-arrow-font-size);
+    min-height: var(--#{$prefix}pagination-arrow-font-size);
+    margin-right: var(--#{$prefix}ref-spacer-1);
+    content: "";
+    background-image: var(--#{$prefix}pagination-arrow-prev-icon-bg-image);
+    background-position: center left;
+  }
+
+  // Arrow next
+  .arrow.arrow-next .page-link::after {
+    width: var(--#{$prefix}pagination-arrow-font-size);
+    height: var(--#{$prefix}pagination-arrow-font-size);
+    margin-left: var(--#{$prefix}ref-spacer-1);
+    content: "";
+    background-image: var(--#{$prefix}pagination-arrow-next-icon-bg-image);
+    background-position: center right;
+  }
+
+  // Hide default icon
+  .arrow:is(.arrow-next, .arrow-prev).no-label .page-link > span {
+    display: none;
+  }
+
+  .arrow-prev.disabled .page-link::before {
+    background-image: var(--#{$prefix}pagination-disabled-arrow-prev-icon-bg-image);
+  }
+
+  .arrow-next.disabled .page-link::after {
+    background-image: var(--#{$prefix}pagination-disabled-arrow-next-icon-bg-image);
+  }
+
+  .page-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border-radius: var(--#{$prefix}pagination-page-border-radius);
+  }
+}

package/src/style/components/_d-permission-group.scss

@@ -0,0 +1,39 @@
+.operation-group {
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--#{$prefix}gray-300);
+  }
+}
+
+.permission-item {
+  padding: 8px 0;
+  .form-switch-box {
+    width: auto;
+  }
+  .label {
+    font-size: .875rem;
+  }
+  &:hover {
+    background: #f7f7ff;
+  }
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--#{$prefix}gray-300);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .permission-item {
+    padding: 8px 10px;
+  }
+  .permission-item .label {
+    font-size: 1rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .operation-group  {
+    border-top: 1px solid var(--#{$prefix}gray-300);
+    &:not(:last-child) {
+      border-bottom: none;
+    }
+  }
+}

package/src/style/components/{_m-popover.scss → _d-popover.scss}

@@ -1,8 +1,8 @@
-.m-popover {
+.d-popover {
   position: relative;
   width: 100%;
 
-  .m-popover-content {
+  .d-popover-content {
     width: 100%;
 
     &:focus-visible {

package/src/style/components/_d-stepper.scss

@@ -0,0 +1,156 @@
+.d-stepper {
+  /* Icon container */
+  --#{$prefix}step-icon-container-color: var(--#{$prefix}secondary);
+  --#{$prefix}step-icon-container-background-color: var(--#{$prefix}white);
+  --#{$prefix}step-icon-container-size: 34px;
+  --#{$prefix}step-icon-container-border-width: 1px;
+  --#{$prefix}step-icon-container-border-color: var(--#{$prefix}secondary);
+  --#{$prefix}step-icon-container-border-radius: 100%;
+  --#{$prefix}step-icon-container-z-index: 3;
+
+  /* Base step */
+  --#{$prefix}step-label-height: 3rem;
+  --#{$prefix}step-icon-size: 1.125rem;
+  --#{$prefix}step-gap: .5rem;
+  --#{$prefix}step-z-index: 2;
+
+  /* Checked step */
+  --#{$prefix}step-check-text-color: var(--#{$prefix}white);
+  --#{$prefix}step-check-background-color: var(--#{$prefix}success);
+  --#{$prefix}step-check-border-color: var(--#{$prefix}success);
+
+  /* Current step */
+  --#{$prefix}step-current-text-color: var(--#{$prefix}white);
+  --#{$prefix}step-current-background-color: var(--#{$prefix}secondary);
+
+  /* Step line */
+  --#{$prefix}step-line-stroke: 1px;
+  --#{$prefix}step-line-color: var(--#{$prefix}secondary);
+
+  /* Step label */
+  --#{$prefix}step-label-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}step-vertical-label-padding: var(--#{$prefix}ref-spacer-3);
+
+
+  position: relative;
+  display: flex;
+
+  .d-step {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: var(--#{$prefix}step-gap);
+
+    .d-step-value {
+      position: relative;
+      display: flex;
+      justify-content: center;
+    }
+
+    .d-step-icon-container {
+      position: relative;
+      z-index: var(--#{$prefix}step-icon-container-z-index);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--#{$prefix}step-icon-container-size);
+      height: var(--#{$prefix}step-icon-container-size);
+
+      color: var(--#{$prefix}step-icon-container-color);
+      background-color: var(--#{$prefix}step-icon-container-background-color);
+      border: var(--#{$prefix}step-icon-container-border-width) solid var(--#{$prefix}step-icon-container-border-color);
+      border-radius: var(--#{$prefix}step-icon-container-border-radius);
+    }
+
+    .d-step-check {
+      color: var(--#{$prefix}step-check-text-color);
+      background-color: var(--#{$prefix}step-check-background-color);
+      border-color: var(--#{$prefix}step-check-border-color);
+    }
+
+    .d-step-current {
+      color: var(--#{$prefix}step-current-text-color);
+      background-color: var(--#{$prefix}step-current-background-color);
+    }
+
+    .d-step-value::after {
+      position: absolute;
+      top: 50%;
+      z-index: var(--#{$prefix}step-z-index);
+      width: 100%;
+      height: var(--#{$prefix}step-line-stroke);
+      content: "";
+      background-color: var(--#{$prefix}step-line-color);
+    }
+
+    &:first-child .d-step-value::after {
+      left: 50%;
+      z-index: var(--#{$prefix}step-z-index);
+      width: 50%;
+    }
+
+    &:last-child .d-step-value::after {
+      right: 50%;
+      z-index: var(--#{$prefix}step-z-index);
+      width: 50%;
+    }
+
+    .d-step-label {
+      padding-right: var(--#{$prefix}step-label-padding);
+      padding-left: var(--#{$prefix}step-label-padding);
+      text-align: center;
+    }
+  }
+
+  &.is-vertical {
+    flex-direction: column;
+
+    .d-step {
+      flex-direction: row;
+      align-items: center;
+
+      .d-step-value {
+        align-items: center;
+        height: 100%;
+      }
+
+      .d-step-label {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        min-height: var(--#{$prefix}step-label-height);
+        padding: var(--#{$prefix}step-vertical-label-padding);
+        text-align: left;
+      }
+
+      .d-step-value::after {
+        position: absolute;
+        top: 0;
+        left: calc(50% - var(--#{$prefix}step-line-stroke));
+        z-index: var(--#{$prefix}step-z-index);
+        width: 0;
+        height: 100%;
+        content: "";
+        border: var(--#{$prefix}step-icon-container-border-width) solid var(--#{$prefix}step-icon-container-border-color);
+      }
+
+      &:first-child .d-step-value::after {
+        top: 50%;
+        z-index: var(--#{$prefix}step-z-index);
+        width: 0;
+        height: 50%;
+      }
+
+      &:last-child .d-step-value::after {
+        z-index: var(--#{$prefix}step-z-index);
+        width: 0;
+        height: 50%;
+      }
+    }
+  }
+
+  .d-step-icon {
+    display: flex;
+    font-size: var(--#{$prefix}step-icon-size);
+  }
+}