@ukic/web-components 3.0.0-alpha.2 → 3.0.0-alpha.4

package/dist/collection/components/ic-menu/ic-menu.css

@@ -452,22 +452,30 @@ video {
 }
 
 :host {
-  border-radius: var(--ic-border-radius);
   max-height: 0;
-  width: var(--input-width, 20rem);
-  color: var(--ic-color-text-primary);
+  width: var(--menu-width, var(--input-width, 20rem));
+  color: var(--menu-item-text-color, var(--ic-color-text-primary));
 
-  --ic-typography-color: var(--ic-color-text-primary);
+  --ic-typography-color: var(
+    --menu-item-text-color,
+    var(--ic-color-text-primary)
+  );
 
-  background-color: var(--ic-architectural-white);
+  background-color: var(--menu-bg-color, var(--ic-architectural-white));
   position: relative;
   z-index: var(--ic-z-index-menu);
   box-sizing: border-box;
   box-shadow: var(--ic-elevation-overlay);
+  border-radius: var(--ic-border-radius);
 }
 
-:host(:not(.ic-menu-no-focus):focus-within) {
+:host(.ic-menu-open:not(.ic-menu-no-focus):focus-within) {
   box-shadow: var(--ic-border-focus);
+  outline: var(--ic-hc-focus-outline);
+}
+
+:host(.ic-select-select-all-focused) {
+  box-shadow: var(--ic-elevation-overlay) !important;
 }
 
 #retry-button::part(button) {
@@ -485,14 +493,17 @@ video {
 .menu {
   text-decoration: none;
   list-style-type: none;
-  border: var(--ic-border-width) solid var(--ic-architectural-400);
-  border-radius: var(--ic-border-radius);
-  background-color: var(--ic-architectural-white);
+  border-radius: 1px;
+  background-color: var(--menu-bg-color, var(--ic-architectural-white));
   visibility: hidden;
   max-height: 0;
   overflow-y: hidden;
 }
 
+.menu:has(+ .option-bar) {
+  border-radius: 0 0 1px 1px;
+}
+
 .menu-scroll {
   overflow-y: auto;
 }
@@ -503,7 +514,11 @@ video {
 
 :host(.ic-menu-open) {
   max-height: none;
-  display: block;
+  display: flex;
+  flex-direction: column-reverse;
+  border: var(--ic-border-width) solid
+    var(--menu-border-color, var(--ic-architectural-400));
+  transition: box-shadow var(--ic-easing-transition-fast);
 }
 
 :host(.ic-menu-open) .menu {
@@ -511,6 +526,14 @@ video {
   max-height: calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs));
 }
 
+:host(.ic-menu-open) .option-bar {
+  visibility: visible;
+}
+
+:host(.ic-menu-open) .select-all-button {
+  display: block;
+}
+
 :host(.ic-menu-full-width) {
   width: 100%;
 }
@@ -520,7 +543,10 @@ video {
   cursor: pointer;
   display: flex;
   align-items: center;
-  overflow-wrap: anywhere;
+}
+
+.loading-option p {
+  margin-bottom: 0 !important;
 }
 
 .option:not(.loading-option) {
@@ -536,11 +562,11 @@ video {
 }
 
 .option:last-child {
-  border-radius: 0 0 var(--ic-space-1px) var(--ic-space-1px);
+  border-radius: 0 0 1px 1px;
 }
 
-.option:first-child {
-  border-radius: var(--ic-space-1px) var(--ic-space-1px) 0 0;
+:not(.menu:has(+ .option-bar)) .option:first-child {
+  border-radius: 1px 1px 0 0;
 }
 
 .option:not(.disabled-option):hover {
@@ -565,6 +591,11 @@ video {
   align-items: top;
 }
 
+.option .option-label ic-typography {
+  max-width: 100%;
+  word-wrap: break-word;
+}
+
 .option .option-element {
   margin-top: var(--ic-space-xxs);
 }
@@ -578,6 +609,11 @@ video {
 
 .option-text-container {
   pointer-events: none;
+  width: 100%;
+}
+
+.option-text-container.show-check-icon {
+  width: calc(var(--ic-space-lg) * 10 + var(--ic-space-xl));
 }
 
 .option.loading-option .option-text-container {
@@ -602,6 +638,7 @@ video {
 
 .check-icon {
   height: var(--ic-space-lg);
+  min-width: var(--ic-space-lg);
   width: var(--ic-space-lg);
   margin-left: var(--ic-space-xs);
   pointer-events: none;
@@ -652,6 +689,33 @@ video {
   background-color: transparent;
 }
 
+.option-bar {
+  padding: var(--ic-space-xxs) var(--ic-space-xs);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--ic-architectural-40);
+  visibility: hidden;
+  border-bottom: var(--ic-border-width) solid var(--ic-architectural-400);
+  border-radius: 1px 1px 0 0;
+}
+
+.option-bar p {
+  margin-bottom: 0 !important;
+}
+
+:host(.ic-menu-large) .option-bar {
+  padding: var(--ic-space-xs);
+}
+
+.select-all-button {
+  display: none;
+}
+
+.select-all-button:focus {
+  z-index: calc(var(--ic-z-index-menu) + 1);
+}
+
 @media (forced-colors: active) {
   .focused-option:focus {
     outline: none;