@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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

@@ -446,25 +446,39 @@ video {
  */
 
 @media (prefers-reduced-motion: no-preference) {
-  :host(.open) .menu {
+  :host(.ic-menu-open) .menu {
     transition: max-height var(--ic-transition-duration-slow);
   }
 }
 
 :host {
-  border-radius: var(--ic-border-radius);
   max-height: 0;
-  width: var(--input-width, 20rem);
-  color: var(--ic-color-primary-text);
-  background-color: var(--ic-architectural-white);
+  width: var(--menu-width, var(--input-width, 20rem));
+  color: var(--menu-item-text-color, var(--ic-menu-list-option-text-color));
+
+  --ic-typography-color: var(
+    --menu-item-text-color,
+    var(--ic-menu-list-option-text-color)
+  );
+
+  background-color: var(
+    --menu-bg-color,
+    var(--ic-menu-list-option-background-color)
+  );
   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(.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) {
@@ -482,14 +496,20 @@ 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-menu-list-option-background-color)
+  );
   visibility: hidden;
   max-height: 0;
   overflow-y: hidden;
 }
 
+.menu:has(+ .option-bar) {
+  border-radius: 0 0 1px 1px;
+}
+
 .menu-scroll {
   overflow-y: auto;
 }
@@ -498,17 +518,29 @@ video {
   outline: none;
 }
 
-:host(.open) {
+: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-menu-border-color));
+  transition: box-shadow var(--ic-easing-transition-fast);
 }
 
-:host(.open) .menu {
+:host(.ic-menu-open) .menu {
   visibility: visible;
   max-height: calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs));
 }
 
-:host(.full-width) {
+:host(.ic-menu-open) .option-bar {
+  visibility: visible;
+}
+
+:host(.ic-menu-open) .select-all-button {
+  display: block;
+}
+
+:host(.ic-menu-full-width) {
   width: 100%;
 }
 
@@ -517,35 +549,38 @@ video {
   cursor: pointer;
   display: flex;
   align-items: center;
-  overflow-wrap: anywhere;
+}
+
+.loading-option p {
+  margin-bottom: 0 !important;
 }
 
 .option:not(.loading-option) {
   justify-content: space-between;
 }
 
-:host(.small) .option {
+:host(.ic-menu-small) .option {
   padding: var(--ic-space-xxs) calc(var(--ic-space-xs) - var(--ic-space-1px));
 }
 
-:host(.large) .option {
+:host(.ic-menu-large) .option {
   padding: var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px));
 }
 
 .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 {
-  background-color: var(--ic-action-dark-bg-hover);
+  background-color: var(--ic-menu-list-option-hover-background-color);
 }
 
 .option:not(.disabled-option):active {
-  background-color: var(--ic-action-dark-bg-active);
+  background-color: var(--ic-menu-list-option-pressed-background-color);
 }
 
 .option:focus-visible {
@@ -553,7 +588,10 @@ video {
 }
 
 .option:not(.disabled-option) .option-description {
-  color: var(--ic-color-secondary-text);
+  --ic-typography-color: var(
+    --menu-item-desc-text-color,
+    var(--ic-menu-list-option-description-text-color)
+  );
 }
 
 .option .option-label {
@@ -562,6 +600,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);
 }
@@ -575,17 +618,24 @@ 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 {
   margin-left: calc(var(--ic-space-xs) + var(--ic-space-xxxs));
-  color: var(--ic-color-secondary-text);
+  color: var(--ic-menu-loading-list-option-text-color);
+
+  --ic-typography-color: var(--ic-menu-loading-list-option-text-color);
 }
 
 .error-icon-svg {
   height: var(--ic-space-md);
   width: var(--ic-space-md);
-  fill: var(--ic-status-error);
+  fill: var(--ic-atoms-status-icon-error);
   align-self: center;
   display: flex;
   margin-right: calc(var(--ic-space-xxs) * 1.2);
@@ -597,6 +647,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;
@@ -609,28 +660,36 @@ video {
 .option-group-title {
   padding: var(--ic-space-lg) calc(var(--ic-space-xs) - var(--ic-space-1px))
     var(--ic-space-xs);
-  color: var(--ic-color-tertiary-text);
+
+  --ic-typography-color: var(--ic-menu-option-group-label-text-color);
 }
 
-:host(.small) .option-group-title {
+:host(.ic-menu-small) .option-group-title {
   padding: var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))
     var(--ic-space-xxs);
 }
 
 .last-recommended-option {
-  border-bottom: var(--ic-border-default);
+  border-bottom: var(--ic-menu-last-recommended-option-border);
 }
 
 .disabled-option {
-  color: var(--ic-architectural-200);
+  color: var(--ic-atoms-list-option-text-disabled-light);
+
+  --ic-typography-color: var(--ic-atoms-list-option-text-disabled-light);
+
   cursor: default;
   pointer-events: none;
 }
 
 .focused-option,
 .focused-option .option-description {
-  background-color: var(--ic-focus-blue) !important;
-  color: var(--ic-color-white-text) !important;
+  background-color: var(--ic-color-focus-inner) !important;
+  color: var(--ic-atoms-list-option-text-focused-light) !important;
+
+  --ic-typography-color: var(
+    --ic-atoms-list-option-text-focused-light
+  ) !important;
 }
 
 :host(.no-results) li {
@@ -641,6 +700,34 @@ 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-menu-option-bar-background-color);
+  visibility: hidden;
+  border-bottom: var(--ic-border-width) solid
+    var(--ic-menu-option-bar-divider-color);
+  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;
@@ -649,5 +736,7 @@ video {
 
   .disabled-option {
     color: GrayText;
+
+    --ic-typography-color: GrayText;
   }
 }