@useblu/ocean-core 1.117.0 → 1.119.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.119.0](https://github.com/ocean-ds/ocean-web/compare/v1.118.0...v1.119.0) (2025-12-08)
+
+### Features
+
+- style cancel button on input search ([#1202](https://github.com/ocean-ds/ocean-web/issues/1202)) ([221d12c](https://github.com/ocean-ds/ocean-web/commit/221d12c519dcaf24af4f1be573c0559403719f0b))
+
+# [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

@@ -1356,6 +1356,27 @@
   color: #ced1e1;
   font-weight: 400;
 }
+.ods-input [type=search i] {
+  padding: 0 4px 0 16px;
+}
+.ods-input [type=search i]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+          appearance: none;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjAwNzggNC40ODc2N0MxNS4wNzQxIDQuNDg3MTEgMTUuMTM5OCA0LjQ5OTcyIDE1LjIwMTIgNC41MjQ3OEMxNS4yNjI1IDQuNTQ5ODkgMTUuMzE4MyA0LjU4NzI5IDE1LjM2NTIgNC42MzQxNkMxNS40MTIxIDQuNjgxMDUgMTUuNDQ5NSA0LjczNjg0IDE1LjQ3NDYgNC43OTgyMkMxNS40OTk3IDQuODU5NTMgMTUuNTEyMiA0LjkyNTM0IDE1LjUxMTcgNC45OTE1OEMxNS41MTExIDUuMDU3OTIgMTUuNDk3OCA1LjEyMzk3IDE1LjQ3MTcgNS4xODQ5NEMxNS40NTg2IDUuMjE1NDEgMTUuNDQyNiA1LjI0NDY5IDE1LjQyMzggNS4yNzE4NUwxNS4zNTM1IDUuMzUzODhMMTAuNzA3IDEwLjAwMDRMMTUuMzQ2NyAxNC42NEMxNS40Mzc3IDE0LjczNDIgMTUuNDg4MyAxNC44NjA2IDE1LjQ4NzMgMTQuOTkxNkMxNS40ODYyIDE1LjEyMjcgMTUuNDMzNSAxNS4yNDg1IDE1LjM0MDggMTUuMzQxMkMxNS4yNDgyIDE1LjQzMzcgMTUuMTIzMSAxNS40ODY0IDE0Ljk5MjIgMTUuNDg3N0MxNC44NjExIDE1LjQ4ODggMTQuNzMzOSAxNS40MzgxIDE0LjYzOTYgMTUuMzQ3TDEwLjM1MzUgMTEuMDU5OUwxMCAxMC43MDY0TDUuMzU5MzggMTUuMzQ3QzUuMjY1MDkgMTUuNDM4MSA1LjEzODg4IDE1LjQ4ODggNS4wMDc4MSAxNS40ODc3QzQuODc2NzEgMTUuNDg2NSA0Ljc1MDkxIDE1LjQzMzkgNC42NTgyIDE1LjM0MTJDNC41NjU2MSAxNS4yNDg1IDQuNTEyODYgMTUuMTIyNiA0LjUxMTcyIDE0Ljk5MTZDNC41MTA3MiAxNC44NjM2IDQuNTU5MzUgMTQuNzQwMyA0LjY0NjQ4IDE0LjY0NjlMOS4yOTI5NyAxMC4wMDA0TDQuNjQ2NDggNS4zNTM4OEM0LjU1Mjg0IDUuMjYwMjEgNC41MDAxMSA1LjEzMjggNC41IDUuMDAwMzdDNC41IDQuODY3ODYgNC41NTI4NCA0Ljc0MDYgNC42NDY0OCA0LjY0Njg1QzQuNzQwMjUgNC41NTMxMSA0Ljg2NzQyIDQuNTAwMzcgNSA0LjUwMDM3QzUuMTMyNSA0LjUwMDQyIDUuMjU5OCA0LjU1MzE3IDUuMzUzNTIgNC42NDY4NUwxMCA5LjI5MzMzTDE0LjY0NjUgNC42NDY4NUwxNC42NTIzIDQuNjQwMDFDMTQuNjk4MyA0LjU5MjQxIDE0Ljc1MzcgNC41NTQ4NyAxNC44MTQ1IDQuNTI4NjlDMTQuODc1NSA0LjUwMjQ4IDE0Ljk0MTQgNC40ODgyNSAxNS4wMDc4IDQuNDg3NjdaIiBmaWxsPSIjMzkzQjQ3IiBzdHJva2U9IiNBQUFEQzAiLz4KPC9zdmc+Cgo=");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  height: 20px;
+  padding: 6px;
+  -webkit-transition: background-color 250ms ease-out;
+  transition: background-color 250ms ease-out;
+  width: 20px;
+}
+.ods-input [type=search i]::-webkit-search-cancel-button:hover {
+  background-color: #e0e2ee;
+}
 .ods-input__number-controls {
   cursor: pointer;
 }
@@ -2783,9 +2804,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 +2815,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 +2826,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 +2837,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 +2862,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 +2872,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 +2882,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 +2892,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 +2902,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 +3034,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 +5983,7 @@
   cursor: pointer;
   display: flex;
   gap: 12px;
+  overflow: hidden;
   padding: 16px 8px 16px 16px;
   position: relative;
   text-align: left;
@@ -5967,6 +5993,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 +6012,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 +6046,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 +6068,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;
 }