@useblu/ocean-core 1.116.0 → 1.118.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 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
+
+- create list action ([#1204](https://github.com/ocean-ds/ocean-web/issues/1204)) ([e1ccd7e](https://github.com/ocean-ds/ocean-web/commit/e1ccd7ed29bf4da881081db93123d19ec1cc5511))
+
 # [1.116.0](https://github.com/ocean-ds/ocean-web/compare/v1.115.0...v1.116.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 {
@@ -2999,13 +2996,28 @@
 .ods-list .ods-transaction-list-item__sub-itens .ods-transaction-list-item {
   border: 0;
 }
-.ods-list .ods-card-list-item,
-.ods-list .ods-card-list-action {
+.ods-list .ods-card-list-item {
   border: 0;
   border-radius: 0;
 }
-.ods-list .ods-card-list-item:not(:last-of-type),
-.ods-list .ods-card-list-action:not(:last-of-type) {
+.ods-list .ods-card-list-item:not(:last-of-type) {
+  border-bottom: 1px solid #e0e2ee;
+}
+.ods-list .ods-list-action__container .ods-list-action {
+  border: 0;
+  border-radius: 0;
+}
+.ods-list .ods-list-action__container:last-of-type > .ods-list-action__divider {
+  border: 0;
+}
+.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 {
@@ -5942,138 +5954,271 @@
   text-decoration: line-through;
 }
 
-.ods-list-selectable__indicator {
-  margin-left: 12px;
+.ods-list-action {
+  align-items: center;
+  background-color: white;
+  border: 1px solid #ced1e1;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  gap: 12px;
+  overflow: hidden;
+  padding: 16px 8px 16px 16px;
+  position: relative;
+  text-align: left;
+  transition: background-color 0.2s ease;
+  width: 100%;
 }
-.ods-list-selectable__indicator--app {
-  margin-right: 8px;
+.ods-list-action__container {
+  width: 100%;
 }
-.ods-list-selectable .ods-checkbox__root,
-.ods-list-selectable .ods-radio__root {
+.ods-list-action__content {
   align-items: center;
-  background-color: white;
-  padding: 16px;
+  display: flex;
+  flex: 1;
+  gap: 12px;
+  min-width: 0;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.ods-list-selectable .ods-checkbox__root:hover, .ods-list-selectable .ods-checkbox__root:focus,
-.ods-list-selectable .ods-radio__root:hover,
-.ods-list-selectable .ods-radio__root:focus {
+.ods-list-action--card {
+  border-color: #ced1e1;
+}
+.ods-list-action--text {
+  border: 0;
+  border-radius: 0;
+}
+.ods-list-action__divider {
+  border-bottom: 1px solid #e0e2ee;
+  margin: 0 16px;
+}
+.ods-list-action:hover:not(.ods-list-action--disabled):not(.ods-list-action--loading):not(.ods-list-action--swipe-open) {
   background-color: #f3f5fe;
-  cursor: pointer;
 }
-.ods-list-selectable .ods-checkbox__label,
-.ods-list-selectable .ods-radio__label {
+.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):not(.ods-list-action--swipe-open) {
+  background-color: #ced1e1;
+}
+.ods-list-action__icon {
   align-items: center;
+  color: #5872f5;
   display: flex;
-  padding-left: 16px;
-  width: 100%;
+  flex-shrink: 0;
 }
-.ods-list-selectable--loading {
-  cursor: default;
+.ods-list-action__icon--inactive svg {
+  color: #ced1e1;
+}
+.ods-list-action__trailing {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  margin-left: auto;
+}
+.ods-list-action__action {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+}
+.ods-list-action__action svg {
+  color: #aaadc0;
+}
+.ods-list-action__indicator {
+  flex-shrink: 0;
+}
+.ods-list-action__skeleton {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 100%;
+}
+.ods-list-action__skeleton .ods-skeleton-bar {
+  max-width: 100%;
+}
+.ods-list-action--loading {
+  cursor: default;
+  padding-right: 16px;
   pointer-events: none;
 }
-.ods-list-selectable--app .ods-checkbox__root,
-.ods-list-selectable--app .ods-radio__root {
-  display: flex;
-  flex-direction: row-reverse;
+.ods-list-action--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.ods-list-selectable--disabled {
-  background-color: transparent;
-  cursor: not-allowed;
+.ods-list-action--swipe-mode .ods-list-action__content:not(:has(.ods-list-action__indicator)) {
+  margin-right: 24px;
 }
-.ods-list-selectable--disabled .ods-checkbox__root:hover, .ods-list-selectable--disabled .ods-checkbox__root:focus,
-.ods-list-selectable--disabled .ods-radio__root:hover,
-.ods-list-selectable--disabled .ods-radio__root:focus {
-  background-color: transparent;
-  cursor: not-allowed;
+.ods-list-action--swipe-mode .ods-list-action__indicator {
+  margin-right: 24px;
 }
 
-.ods-list-selectable__root {
+.ods-list-expandable {
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
   overflow: hidden;
+  position: relative;
+  width: 100%;
 }
-.ods-list-selectable__root--card {
+.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-selectable__root--card--error {
-  border-color: #f5456e;
-}
-.ods-list-selectable__root--text--divider {
-  background-color: #e0e2ee;
-  height: 1px;
-  margin: 0 16px;
+.ods-list-expandable--text {
+  border: 0;
+  border-radius: 0;
 }
-
-.ods-card-list-action {
+.ods-list-expandable__main {
   align-items: center;
-  background-color: white;
-  border: 1px solid #ced1e1;
-  border-radius: 8px;
+  background-color: transparent;
+  border: 0;
   cursor: pointer;
   display: flex;
   gap: 12px;
+  min-width: 0;
   padding: 16px 8px 16px 16px;
-  position: relative;
   text-align: left;
   transition: background-color 0.2s ease;
   width: 100%;
 }
-.ods-card-list-action:hover:not(.ods-card-list-action--disabled):not(.ods-card-list-action--loading) {
+.ods-list-expandable__main:hover:not(.ods-card-list-expandable--loading .ods-list-expandable__main) {
   background-color: #f3f5fe;
 }
-.ods-card-list-action:focus-visible {
+.ods-list-expandable__main:focus-visible {
   outline: 2px solid #0025e0;
-  outline-offset: 2px;
+  outline-offset: -2px;
 }
-.ods-card-list-action:active:not(.ods-card-list-action--disabled):not(.ods-card-list-action--loading) {
-  background-color: #ced1e1;
-}
-.ods-card-list-action__icon {
+.ods-list-expandable__icon {
   align-items: center;
   color: #5872f5;
   display: flex;
   flex-shrink: 0;
 }
-.ods-card-list-action__icon--inactive svg {
+.ods-list-expandable__icon--inactive svg {
   color: #ced1e1;
 }
-.ods-card-list-action__trailing {
+.ods-list-expandable__trailing {
   align-items: center;
   display: flex;
   flex-shrink: 0;
   gap: 8px;
   margin-left: auto;
 }
-.ods-card-list-action__action {
+.ods-list-expandable__indicator {
   align-items: center;
   display: flex;
   flex-shrink: 0;
 }
-.ods-card-list-action__action svg {
+.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-card-list-action__skeleton {
+.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-card-list-action__skeleton .ods-skeleton-bar {
+.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;
+}
+.ods-list-selectable__indicator--app {
+  margin-right: 8px;
+}
+.ods-list-selectable .ods-checkbox__root,
+.ods-list-selectable .ods-radio__root {
+  align-items: center;
+  background-color: white;
+  padding: 16px;
+}
+.ods-list-selectable .ods-checkbox__root:hover, .ods-list-selectable .ods-checkbox__root:focus,
+.ods-list-selectable .ods-radio__root:hover,
+.ods-list-selectable .ods-radio__root:focus {
+  background-color: #f3f5fe;
+  cursor: pointer;
 }
-.ods-card-list-action--loading {
+.ods-list-selectable .ods-checkbox__label,
+.ods-list-selectable .ods-radio__label {
+  align-items: center;
+  display: flex;
+  padding-left: 16px;
+  width: 100%;
+}
+.ods-list-selectable--loading {
   cursor: default;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   pointer-events: none;
 }
-.ods-card-list-action--disabled {
+.ods-list-selectable--app .ods-checkbox__root,
+.ods-list-selectable--app .ods-radio__root {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.ods-list-selectable--disabled {
+  background-color: transparent;
+  cursor: not-allowed;
+}
+.ods-list-selectable--disabled .ods-checkbox__root:hover, .ods-list-selectable--disabled .ods-checkbox__root:focus,
+.ods-list-selectable--disabled .ods-radio__root:hover,
+.ods-list-selectable--disabled .ods-radio__root:focus {
+  background-color: transparent;
   cursor: not-allowed;
-  opacity: 0.6;
 }
 
-.ods-card-list-action--swipe-mode .ods-card-list-action__indicator {
-  margin-right: 24px;
+.ods-list-selectable__root {
+  overflow: hidden;
+}
+.ods-list-selectable__root--card {
+  border: 1px solid #e0e2ee;
+  border-radius: 8px;
+}
+.ods-list-selectable__root--card--error {
+  border-color: #f5456e;
+}
+.ods-list-selectable__root--text--divider {
+  background-color: #e0e2ee;
+  height: 1px;
+  margin: 0 16px;
 }
 /*# sourceMappingURL=ocean.css.map */