@x-plat/design-system 0.5.2 → 0.5.3

package/dist/components/index.css

@@ -1083,6 +1083,7 @@
 
 /* src/components/Accordion/accordion.scss */
 .lib-xplat-accordion {
+  contain: content;
   border: 1px solid var(--semantic-border-default);
   border-radius: var(--spacing-radius-md);
   overflow: hidden;
@@ -1138,6 +1139,7 @@
 
 /* src/components/Alert/alert.scss */
 .lib-xplat-alert {
+  width: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -1340,6 +1342,9 @@
 }
 
 /* src/components/Breadcrumb/breadcrumb.scss */
+.lib-xplat-breadcrumb {
+  width: 100%;
+}
 .lib-xplat-breadcrumb ol {
   display: flex;
   align-items: center;
@@ -1379,6 +1384,7 @@
 
 /* src/components/Button/button.scss */
 .lib-xplat-button {
+  width: 100%;
   border-radius: var(--spacing-radius-md);
   font-weight: 500;
   cursor: pointer;
@@ -1467,6 +1473,7 @@
 
 /* src/components/Calendar/calendar.scss */
 .lib-xplat-calendar {
+  contain: content;
   width: 100%;
   min-width: 200px;
   user-select: none;
@@ -1652,6 +1659,8 @@
 
 /* src/components/Card/card.scss */
 .lib-xplat-card {
+  contain: content;
+  width: 100%;
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -1679,6 +1688,7 @@
 
 /* src/components/CardTab/cardTab.scss */
 .lib-xplat-card-tab {
+  width: 100%;
   display: flex;
   flex-direction: column;
 }
@@ -1757,6 +1767,7 @@
 
 /* src/components/Chart/chart.scss */
 .lib-xplat-chart {
+  contain: content;
   width: 100%;
   position: relative;
 }
@@ -2066,6 +2077,7 @@
 
 /* src/components/DatePicker/datepicker.scss */
 .lib-xplat-datepicker {
+  contain: content;
   user-select: none;
   min-width: 200px;
   width: 100%;
@@ -2498,6 +2510,7 @@
 
 /* src/components/EmptyState/emptystate.scss */
 .lib-xplat-empty-state {
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2530,6 +2543,8 @@
 
 /* src/components/FileUpload/fileupload.scss */
 .lib-xplat-file-upload {
+  contain: content;
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2572,6 +2587,7 @@
 
 /* src/components/HtmlTypeWriter/htmlTypeWriter.scss */
 .lib-xplat-htmlTypewriter {
+  width: 100%;
   font-size: 16px;
 }
 .lib-xplat-htmlTypewriter h1,
@@ -2749,24 +2765,24 @@
   color: var(--semantic-text-inverse);
   font-weight: 600;
 }
-.lib-xplat-pagination.brand .lib-xplat-pagination .page-btn.active {
+.lib-xplat-pagination .page-btn svg {
+  font-size: 16px;
+}
+.lib-xplat-pagination.brand .page-btn.active {
   background-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-pagination.success .lib-xplat-pagination .page-btn.active {
+.lib-xplat-pagination.success .page-btn.active {
   background-color: var(--semantic-surface-success-default);
 }
-.lib-xplat-pagination.error .lib-xplat-pagination .page-btn.active {
+.lib-xplat-pagination.error .page-btn.active {
   background-color: var(--semantic-surface-error-default);
 }
-.lib-xplat-pagination.warning .lib-xplat-pagination .page-btn.active {
+.lib-xplat-pagination.warning .page-btn.active {
   background-color: var(--semantic-surface-warning-default);
 }
-.lib-xplat-pagination.info .lib-xplat-pagination .page-btn.active {
+.lib-xplat-pagination.info .page-btn.active {
   background-color: var(--semantic-surface-info-default);
 }
-.lib-xplat-pagination .page-btn svg {
-  font-size: 16px;
-}
 
 /* src/components/PopOver/popOver.scss */
 .lib-xplat-pop-over {
@@ -3156,10 +3172,15 @@
   width: var(--spacing-space-9);
   height: var(--spacing-space-9);
 }
+.lib-xplat-spinner {
+  contain: strict;
+}
 .lib-xplat-spinner svg {
   width: 100%;
   height: 100%;
   animation: lib-xplat-spin 0.8s linear infinite;
+  will-change: transform;
+  backface-visibility: hidden;
 }
 .lib-xplat-spinner .track {
   stroke: var(--semantic-border-default);
@@ -3185,10 +3206,10 @@
 }
 @keyframes lib-xplat-spin {
   from {
-    transform: rotate(0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
   }
   to {
-    transform: rotate(360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
   }
 }
 
@@ -3202,16 +3223,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-}
-.lib-xplat-steps .step-item:last-child .step-line {
-  display: none;
-}
-.lib-xplat-steps .step-indicator {
-  display: flex;
-  align-items: center;
-  width: 100%;
   position: relative;
 }
+.lib-xplat-steps .step-item:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: 16px;
+  left: calc(50% + 20px);
+  right: calc(-50% + 20px);
+  height: 2px;
+  background-color: var(--semantic-surface-neutral-disabled);
+  transition: background-color 0.2s;
+}
 .lib-xplat-steps .step-circle {
   width: var(--spacing-control-height-sm);
   height: var(--spacing-control-height-sm);
@@ -3228,11 +3251,6 @@
 .lib-xplat-steps .step-circle svg {
   font-size: 16px;
 }
-.lib-xplat-steps .step-line {
-  flex: 1;
-  height: 2px;
-  transition: background-color 0.2s;
-}
 .lib-xplat-steps .step-content {
   display: flex;
   flex-direction: column;
@@ -3254,79 +3272,61 @@
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-steps.brand .step-item.completed .step-line {
+.lib-xplat-steps.brand .step-item.completed::after {
   background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-steps.brand .step-item.active .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-steps.brand .step-item.active .step-line {
-  background-color: var(--semantic-surface-neutral-disabled);
-}
 .lib-xplat-steps.success .step-item.completed .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-success-default);
 }
-.lib-xplat-steps.success .step-item.completed .step-line {
+.lib-xplat-steps.success .step-item.completed::after {
   background-color: var(--semantic-surface-success-default);
 }
 .lib-xplat-steps.success .step-item.active .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-success-default);
 }
-.lib-xplat-steps.success .step-item.active .step-line {
-  background-color: var(--semantic-surface-neutral-disabled);
-}
 .lib-xplat-steps.error .step-item.completed .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-error-default);
 }
-.lib-xplat-steps.error .step-item.completed .step-line {
+.lib-xplat-steps.error .step-item.completed::after {
   background-color: var(--semantic-surface-error-default);
 }
 .lib-xplat-steps.error .step-item.active .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-error-default);
 }
-.lib-xplat-steps.error .step-item.active .step-line {
-  background-color: var(--semantic-surface-neutral-disabled);
-}
 .lib-xplat-steps.warning .step-item.completed .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-warning-default);
 }
-.lib-xplat-steps.warning .step-item.completed .step-line {
+.lib-xplat-steps.warning .step-item.completed::after {
   background-color: var(--semantic-surface-warning-default);
 }
 .lib-xplat-steps.warning .step-item.active .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-warning-default);
 }
-.lib-xplat-steps.warning .step-item.active .step-line {
-  background-color: var(--semantic-surface-neutral-disabled);
-}
 .lib-xplat-steps.info .step-item.completed .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-info-default);
 }
-.lib-xplat-steps.info .step-item.completed .step-line {
+.lib-xplat-steps.info .step-item.completed::after {
   background-color: var(--semantic-surface-info-default);
 }
 .lib-xplat-steps.info .step-item.active .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-info-default);
 }
-.lib-xplat-steps.info .step-item.active .step-line {
-  background-color: var(--semantic-surface-neutral-disabled);
-}
 .lib-xplat-steps .step-item.pending .step-circle {
   background-color: var(--semantic-surface-neutral-disabled);
   color: var(--semantic-text-muted);
 }
-.lib-xplat-steps .step-item.pending .step-line {
-  background-color: var(--semantic-surface-neutral-disabled);
-}
 .lib-xplat-steps .step-item.pending .step-title {
   color: var(--semantic-text-disabled);
 }
@@ -3336,6 +3336,7 @@
 
 /* src/components/Swiper/swiper.scss */
 .lib-xplat-swiper {
+  contain: content;
   width: 100%;
   position: relative;
 }
@@ -3410,43 +3411,44 @@
   position: relative;
   border-radius: var(--spacing-radius-full);
   cursor: pointer;
+  box-sizing: border-box;
   transition: background-color 0.2s, border-color 0.2s;
   border: 1px solid transparent;
   background-color: var(--semantic-border-default);
   border-color: var(--semantic-border-default);
 }
 .lib-xplat-switch.sm {
-  width: var(--spacing-space-8);
-  height: var(--spacing-space-4);
+  width: 34px;
+  height: 20px;
 }
 .lib-xplat-switch.sm > .knob {
-  width: var(--spacing-space-4);
-  height: var(--spacing-space-4);
+  width: 16px;
+  height: 16px;
 }
 .lib-xplat-switch.sm > .knob.checked {
-  transform: translateY(-50%) translateX(14px);
+  left: calc(100% - 16px - 2px);
 }
 .lib-xplat-switch.md {
-  width: var(--spacing-space-11);
-  height: var(--spacing-space-6);
+  width: 42px;
+  height: 24px;
 }
 .lib-xplat-switch.md > .knob {
-  width: var(--spacing-space-6);
-  height: var(--spacing-space-6);
+  width: 20px;
+  height: 20px;
 }
 .lib-xplat-switch.md > .knob.checked {
-  transform: translateY(-50%) translateX(22px);
+  left: calc(100% - 20px - 2px);
 }
 .lib-xplat-switch.lg {
-  width: var(--spacing-space-11);
-  height: var(--spacing-space-8);
+  width: 50px;
+  height: 28px;
 }
 .lib-xplat-switch.lg > .knob {
-  width: var(--spacing-space-6);
-  height: var(--spacing-space-6);
+  width: 24px;
+  height: 24px;
 }
 .lib-xplat-switch.lg > .knob.checked {
-  transform: translateY(-50%) translateX(26px);
+  left: calc(100% - 24px - 2px);
 }
 .lib-xplat-switch.disabled {
   opacity: 0.5;
@@ -3500,21 +3502,27 @@
 .lib-xplat-switch > .knob {
   position: absolute;
   top: 50%;
-  left: 0;
+  left: 2px;
+  transform: translateY(-50%);
   background-color: var(--semantic-surface-neutral-default);
   border-radius: var(--spacing-radius-full);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  transform: translateY(-50%);
-  transition: transform 0.25s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: left 0.25s;
 }
 
 /* src/components/Tab/tab.scss */
 .lib-xplat-tab {
   position: relative;
   display: flex;
-  width: fit-content;
-  overflow: hidden;
+  width: 100%;
+  min-width: 0;
   align-items: center;
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.lib-xplat-tab::-webkit-scrollbar {
+  display: none;
 }
 .lib-xplat-tab.sm {
   height: var(--spacing-control-height-sm);
@@ -3529,15 +3537,19 @@
   font-size: 18px;
 }
 .lib-xplat-tab.type-default {
+  width: 100%;
   background-color: var(--semantic-surface-neutral-strong);
   border-radius: var(--spacing-radius-md);
 }
 .lib-xplat-tab.type-default > .tab-item {
+  flex: 1;
   padding: var(--spacing-space-1) var(--spacing-space-6);
   height: 100%;
   display: flex;
   align-items: center;
+  justify-content: center;
   cursor: pointer;
+  white-space: nowrap;
   border-right: 1px solid var(--semantic-border-strong);
   color: var(--semantic-text-inverse);
 }
@@ -3548,13 +3560,17 @@
   background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-tab.type-toggle {
+  width: 100%;
   border-bottom: 1px solid var(--semantic-border-default);
   gap: var(--spacing-space-6);
 }
 .lib-xplat-tab.type-toggle > .tab-item {
   position: relative;
+  flex: 1;
   display: flex;
   align-items: center;
+  justify-content: center;
+  white-space: nowrap;
   padding: 0 var(--spacing-space-3);
   font-size: 16px;
   font-weight: 500;
@@ -3581,6 +3597,7 @@
 
 /* src/components/Table/table.scss */
 .lib-xplat-table-wrapper {
+  contain: content;
   width: 100%;
   position: relative;
 }
@@ -4086,10 +4103,10 @@
   opacity: 0;
   pointer-events: none;
 }
-.lib-xplat-video.custom-overlay > .play-overlay.is-playing:hover {
-  opacity: 1;
-  pointer-events: auto;
-}
 .lib-xplat-video.custom-overlay > .play-overlay.is-loading .play-icon {
   opacity: 0.6;
 }
+.lib-xplat-video.custom-overlay:hover > .play-overlay.is-playing {
+  opacity: 1;
+  pointer-events: auto;
+}