@useblu/ocean-core 1.117.0 → 1.118.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.118.0](https://github.com/ocean-ds/ocean-web/compare/v1.117.0...v1.118.0) (2025-12-08)
+
+### Features
+
+- card list expandable ([#1197](https://github.com/ocean-ds/ocean-web/issues/1197)) ([3016461](https://github.com/ocean-ds/ocean-web/commit/3016461f3a408dafb3645e53a00d2ce769e60691))
+
 # [1.117.0](https://github.com/ocean-ds/ocean-web/compare/v1.116.0...v1.117.0) (2025-12-08)
 
 ### Features

package/ocean.css

@@ -2783,9 +2783,10 @@
   box-shadow: none;
   display: flex;
   flex-direction: row;
-  left: 0;
+  left: auto;
   margin: 0;
   max-height: none;
+  max-width: 100%;
   min-width: auto;
   overflow-x: auto;
   overflow-y: hidden;
@@ -2793,7 +2794,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  width: 100%;
+  width: auto;
   z-index: 102;
   /* stylelint-disable-next-line order/properties-alphabetical-order */
   -webkit-overflow-scrolling: touch;
@@ -2804,7 +2805,7 @@
 }
 .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu--bottom-left, .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu--bottom-right, .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu--top-left, .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu--top-right {
   bottom: 0;
-  left: 0;
+  left: auto;
   right: 0;
   top: 0;
 }
@@ -2815,9 +2816,6 @@
   margin: 0;
   padding: 0;
 }
-.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu li:first-of-type {
-  margin-left: auto;
-}
 .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item {
   align-items: center;
   border-radius: 0;
@@ -2843,6 +2841,9 @@
   background: #2da94f;
   color: white;
 }
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--positive:hover:not(.ods-internal-list-actions__menu-item--disabled) {
+  background: #7adc94;
+}
 .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--positive .ods-internal-list-actions__menu-item-icon {
   color: white;
 }
@@ -2850,6 +2851,9 @@
   background: #ff8a14;
   color: white;
 }
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--warning:hover:not(.ods-internal-list-actions__menu-item--disabled) {
+  background: #ffbd7a;
+}
 .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--warning .ods-internal-list-actions__menu-item-icon {
   color: white;
 }
@@ -2857,6 +2861,9 @@
   background: #f5456e;
   color: white;
 }
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--negative:hover:not(.ods-internal-list-actions__menu-item--disabled) {
+  background: #d31441;
+}
 .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--negative .ods-internal-list-actions__menu-item-icon {
   color: white;
 }
@@ -2864,6 +2871,9 @@
   background: #aaadc0;
   color: white;
 }
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--neutral:hover:not(.ods-internal-list-actions__menu-item--disabled) {
+  background: #67697a;
+}
 .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--neutral .ods-internal-list-actions__menu-item-icon {
   color: white;
 }
@@ -2871,57 +2881,44 @@
   background: #f3f5fe;
   color: #393b47;
 }
+.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--default:hover:not(.ods-internal-list-actions__menu-item--disabled), .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item:not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--positive):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--warning):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--negative):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--neutral):hover:not(.ods-internal-list-actions__menu-item--disabled) {
+  background: #e0e2ee;
+}
 .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--default .ods-internal-list-actions__menu-item-icon, .ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item:not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--positive):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--warning):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--negative):not(.ods-internal-list-actions--force-swipe .ods-internal-list-actions__menu-item--neutral).ods-internal-list-actions__menu-item-icon {
   color: #393b47;
 }
 
 @-webkit-keyframes slideInFromRight {
   from {
-    opacity: 0;
-    transform: scaleX(0);
-    transform-origin: right center;
+    transform: translateX(100%);
   }
   to {
-    opacity: 1;
-    transform: scaleX(1);
-    transform-origin: right center;
+    transform: translateX(0);
   }
 }
 
 @keyframes slideInFromRight {
   from {
-    opacity: 0;
-    transform: scaleX(0);
-    transform-origin: right center;
+    transform: translateX(100%);
   }
   to {
-    opacity: 1;
-    transform: scaleX(1);
-    transform-origin: right center;
+    transform: translateX(0);
   }
 }
 @-webkit-keyframes slideOutToRight {
   from {
-    opacity: 1;
-    transform: scaleX(1);
-    transform-origin: right center;
+    transform: translateX(0);
   }
   to {
-    opacity: 0;
-    transform: scaleX(0);
-    transform-origin: right center;
+    transform: translateX(100%);
   }
 }
 @keyframes slideOutToRight {
   from {
-    opacity: 1;
-    transform: scaleX(1);
-    transform-origin: right center;
+    transform: translateX(0);
   }
   to {
-    opacity: 0;
-    transform: scaleX(0);
-    transform-origin: right center;
+    transform: translateX(100%);
   }
 }
 .ods-link {
@@ -3016,6 +3013,13 @@
 .ods-list .ods-list-action__container:not(:last-of-type) > .ods-list-action--card {
   border-bottom: 1px solid #e0e2ee;
 }
+.ods-list .ods-list-expandable--card {
+  border: 0;
+  border-radius: 0;
+}
+.ods-list .ods-list-expandable--card:not(:last-of-type) {
+  border-bottom: 1px solid #e0e2ee;
+}
 .ods-list .ods-list-selectable__root:last-of-type .ods-list-selectable__root--text--divider {
   display: none;
 }
@@ -5958,6 +5962,7 @@
   cursor: pointer;
   display: flex;
   gap: 12px;
+  overflow: hidden;
   padding: 16px 8px 16px 16px;
   position: relative;
   text-align: left;
@@ -5967,6 +5972,14 @@
 .ods-list-action__container {
   width: 100%;
 }
+.ods-list-action__content {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: 12px;
+  min-width: 0;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 .ods-list-action--card {
   border-color: #ced1e1;
 }
@@ -5978,14 +5991,14 @@
   border-bottom: 1px solid #e0e2ee;
   margin: 0 16px;
 }
-.ods-list-action:hover:not(.ods-list-action--disabled):not(.ods-list-action--loading) {
+.ods-list-action:hover:not(.ods-list-action--disabled):not(.ods-list-action--loading):not(.ods-list-action--swipe-open) {
   background-color: #f3f5fe;
 }
 .ods-list-action:focus-visible {
   outline: 2px solid #0025e0;
   outline-offset: 2px;
 }
-.ods-list-action:active:not(.ods-list-action--disabled):not(.ods-list-action--loading) {
+.ods-list-action:active:not(.ods-list-action--disabled):not(.ods-list-action--loading):not(.ods-list-action--swipe-open) {
   background-color: #ced1e1;
 }
 .ods-list-action__icon {
@@ -6012,6 +6025,9 @@
 .ods-list-action__action svg {
   color: #aaadc0;
 }
+.ods-list-action__indicator {
+  flex-shrink: 0;
+}
 .ods-list-action__skeleton {
   display: flex;
   flex-direction: column;
@@ -6031,10 +6047,116 @@
   opacity: 0.6;
 }
 
+.ods-list-action--swipe-mode .ods-list-action__content:not(:has(.ods-list-action__indicator)) {
+  margin-right: 24px;
+}
 .ods-list-action--swipe-mode .ods-list-action__indicator {
   margin-right: 24px;
 }
 
+.ods-list-expandable {
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.ods-list-expandable--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.ods-list-expandable__divider {
+  border-bottom: 1px solid #e0e2ee;
+  margin: 0 16px;
+}
+.ods-list-expandable--card {
+  border: 1px solid #e0e2ee;
+  border-radius: 8px;
+}
+.ods-list-expandable--text {
+  border: 0;
+  border-radius: 0;
+}
+.ods-list-expandable__main {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  gap: 12px;
+  min-width: 0;
+  padding: 16px 8px 16px 16px;
+  text-align: left;
+  transition: background-color 0.2s ease;
+  width: 100%;
+}
+.ods-list-expandable__main:hover:not(.ods-card-list-expandable--loading .ods-list-expandable__main) {
+  background-color: #f3f5fe;
+}
+.ods-list-expandable__main:focus-visible {
+  outline: 2px solid #0025e0;
+  outline-offset: -2px;
+}
+.ods-list-expandable__icon {
+  align-items: center;
+  color: #5872f5;
+  display: flex;
+  flex-shrink: 0;
+}
+.ods-list-expandable__icon--inactive svg {
+  color: #ced1e1;
+}
+.ods-list-expandable__trailing {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  margin-left: auto;
+}
+.ods-list-expandable__indicator {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+}
+.ods-list-expandable__action {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+}
+.ods-list-expandable__action svg {
+  color: #aaadc0;
+  transition: transform 0.2s ease;
+}
+.ods-list-expandable__content {
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+  word-wrap: break-word;
+}
+.ods-list-expandable__skeleton {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0;
+  width: 100%;
+}
+.ods-list-expandable__skeleton .ods-skeleton-bar {
+  max-width: 100%;
+  width: 100%;
+}
+.ods-list-expandable--loading .ods-list-expandable__main {
+  box-sizing: border-box;
+  cursor: default;
+  overflow: hidden;
+  pointer-events: none;
+}
+.ods-list-expandable--expanded .ods-list-expandable__main:hover {
+  background-color: #f3f5fe;
+}
+
 .ods-list-selectable__indicator {
   margin-left: 12px;
 }