@genexus/mercury 0.12.2 → 0.12.4

package/dist/bundles/css/components/dropdown.css

@@ -0,0 +1 @@
+.dropdown::part(window){background-color:var(--items-container__bg-color);border-color:var(--items-container__border-color);padding-block:var(--items-container__padding-block);padding-inline:var(--items-container__padding-inline);border-style:var(--items-container__border-style);border-width:var(--items-container__border-width);box-shadow:var(--items-container__box-shadow);border-radius:var(--items-container__border-radius);gap:var(--items-container__gap);line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item__font-weight)}.dropdown::part(action){--ch-dropdown-item__image-size: var(--mer-icon__box--md);background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color);border:var(--item__border-width) var(--item__border-style) var(--item__border-color);border-radius:var(--item__border-radius);padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline);gap:var(--item__gap--regular)}.dropdown::part(action):focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.dropdown::part(action):hover{--item__bg-color: var(--item__bg-color--hover);--item__border-color: var(--item__border-color--hover);--item__color: var(--item__color--hover)}.dropdown::part(action):active{--item__bg-color: var(--item__bg-color--selected);--item__border-color: var(--item__border-color--selected);--item__color: var(--item__color--selected)}.dropdown .dropdown-separator{margin-block:var(--spacing--s)}.dropdown::part(action expandable)::after{content:"";border-block-start:4px dashed currentColor;border-inline:4px solid rgba(0,0,0,0);margin-inline-start:4px}.dropdown .header-slot,.dropdown .footer-slot{padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

package/dist/bundles/css/components/list-box.css

@@ -1 +1 @@
-.list-box{--ch-action-list-group__expandable-button-image-size: var( --mer-icon__box--md );--ch-action-list-group__expandable-button-size: var(--mer-icon__box--md);--ch-action-list-item__background-image-size: var(--mer-icon__size--md);--ch-action-list-item__image-size: var(--mer-icon__box--md);border-style:var(--items-container__border-style);border-width:var(--items-container__border-width);border-radius:var(--items-container__border-radius);background-color:var(--items-container__bg-color);border-color:var(--items-container__border-color);gap:var(--items-container__gap);padding-block:var(--items-container__padding-block);padding-inline:var(--items-container__padding-inline)}.list-box::part(item__action),.list-box::part(group__action){background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color);border:var(--item__border-width) var(--item__border-style) var(--item__border-color);border-radius:var(--item__border-radius);line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item__font-weight);padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline);column-gap:var(--item__gap--regular)}.list-box::part(item__action disabled),.list-box::part(group__action disabled),.list-box::part(group__caption disabled){--item__bg-color: var(--item__bg-color--disabled);--item__border-color: var(--item__border-color--disabled);--item__color: var(--item__color--disabled)}.list-box::part(item__action):focus-visible,.list-box::part(group__action):focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.list-box::part(item__action not-selectable):hover,.list-box::part(group__action not-selectable):hover{--item__bg-color: var(--item__bg-color--hover);--item__border-color: var(--item__border-color--hover);--item__color: var(--item__color--hover)}.list-box::part(item__action selectable):hover,.list-box::part(group__action selectable):hover{--item__bg-color: var(--item__bg-color--hover);--item__border-color: var(--item__border-color--hover);--item__color: var(--item__color--hover)}.list-box::part(item__action selectable selected),.list-box::part(group__action selectable selected){--item__bg-color: var(--item__bg-color--selected);--item__border-color: var(--item__border-color--selected);--item__color: var(--item__color--selected)}.list-box::part(item__action selectable selected):hover,.list-box::part(group__action selectable selected):hover{--item__bg-color: var(--item__bg-color--selected-hover);--item__border-color: var(--item__border-color--selected-hover);--item__color: var(--item__color--selected-hover)}.list-box::part(group){gap:var(--items-container__gap)}.list-box::part(group__action){gap:var(--item__gap--regular)}.list-box::part(group__action):hover{--item__bg-color: var(--item__bg-color--hover);--item__border-color: var(--item__border-color--hover);--item__color: var(--item__color--hover);border-color:rgba(0,0,0,0)}.list-box::part(group__action),.list-box::part(group__caption){line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item-header__font-weight);background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color)}.list-box::part(group__caption){padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline);border:var(--item__border-width) var(--item__border-style) var(--item__border-color)}.list-box::part(group__expandable){gap:var(--items-container__gap)}.list-box::part(item__additional-item image):focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.list-box::part(separator){block-size:var(--items-container-separator__block-size);inline-size:var(--items-container-separator__inline-size);background-color:var(--items-container-separator__bg-color)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
+.list-box{--ch-action-list-group__expandable-button-image-size: var( --mer-icon__box--md );--ch-action-list-group__expandable-button-size: var(--mer-icon__box--md);--ch-action-list-item__background-image-size: var(--mer-icon__size--md);--ch-action-list-item__image-size: var(--mer-icon__box--md);border-style:var(--items-container__border-style);border-width:var(--items-container__border-width);border-radius:var(--items-container__border-radius);background-color:var(--items-container__bg-color);border-color:var(--items-container__border-color);gap:var(--items-container__gap);padding-block:var(--items-container__padding-block);padding-inline:var(--items-container__padding-inline)}.list-box::part(item__action),.list-box::part(group__action){background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color);border:var(--item__border-width) var(--item__border-style) var(--item__border-color);border-radius:var(--item__border-radius);line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item__font-weight);padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline)}.list-box::part(item__action disabled),.list-box::part(group__action disabled),.list-box::part(group__caption disabled){--item__bg-color: var(--item__bg-color--disabled);--item__border-color: var(--item__border-color--disabled);--item__color: var(--item__color--disabled)}.list-box::part(item__action):focus-visible,.list-box::part(group__action):focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.list-box::part(item__action not-selectable):hover,.list-box::part(group__action not-selectable):hover{--item__bg-color: var(--item__bg-color--hover);--item__border-color: var(--item__border-color--hover);--item__color: var(--item__color--hover)}.list-box::part(item__action selectable):hover,.list-box::part(group__action selectable):hover{--item__bg-color: var(--item__bg-color--hover);--item__border-color: var(--item__border-color--hover);--item__color: var(--item__color--hover)}.list-box::part(item__action selectable selected),.list-box::part(group__action selectable selected){--item__bg-color: var(--item__bg-color--selected);--item__border-color: var(--item__border-color--selected);--item__color: var(--item__color--selected)}.list-box::part(item__action selectable selected):hover,.list-box::part(group__action selectable selected):hover{--item__bg-color: var(--item__bg-color--selected-hover);--item__border-color: var(--item__border-color--selected-hover);--item__color: var(--item__color--selected-hover)}.list-box::part(item__action nested){margin-inline-start:var(--mer-spacing--lg)}.list-box::part(group){gap:var(--items-container__gap)}.list-box::part(group__action){gap:var(--item__gap--regular)}.list-box::part(group__action):hover{--item__bg-color: var(--item__bg-color--hover);--item__border-color: var(--item__border-color--hover);--item__color: var(--item__color--hover);border-color:rgba(0,0,0,0)}.list-box::part(group__action),.list-box::part(group__caption){line-height:var(--item__line-height);font-size:var(--item__font-size);font-weight:var(--item-header__font-weight);background-color:var(--item__bg-color);border-color:var(--item__border-color);color:var(--item__color)}.list-box::part(group__caption){padding-block:var(--item__padding-block);padding-inline:var(--item__padding-inline);border:var(--item__border-width) var(--item__border-style) var(--item__border-color)}.list-box::part(group__expandable){gap:var(--items-container__gap)}.list-box::part(item__additional-item image){margin-inline-end:var(--item__gap--regular)}.list-box::part(item__additional-item text){margin-inline-start:calc(var(--item__gap--regular)*2);font-style:italic}.list-box::part(separator){block-size:var(--items-container-separator__block-size);inline-size:var(--items-container-separator__inline-size);background-color:var(--items-container-separator__bg-color)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

package/dist/bundles/css/components/tabular-grid.css

@@ -1 +1 @@
-.property-grid-row-actions::part(window),.tabular-grid-row-actions::part(window){border:var(--window__border);border-radius:var(--window__border-radius);padding:var(---window__padding);background-color:var(--window__bg-color);box-shadow:var(--mer-box-shadow--01)}.property-grid-row-actions::part(window),.tabular-grid-row-actions::part(window){border:var(--window__border);border-radius:var(--window__border-radius);padding:var(---window__padding);background-color:var(--window__bg-color);box-shadow:var(--mer-box-shadow--01)}.property-grid-cell::part(node-icon),.property-grid-row:has(>.property-grid-rowset)>.property-grid-cell::part(node-icon),.property-grid-cell::part(drag-icon),.property-grid-cell::part(actions-icon),.property-grid-rowset-legend::part(icon),.property-grid-rowset>.property-grid-rowset-legend::part(caret),.property-grid-cell::part(caret),.property-grid-rowset[collapsed]>.property-grid-rowset-legend::part(caret),.property-grid-row:is([collapsed],[leaf=false]:not(:has(>.property-grid-rowset)))>.property-grid-cell::part(caret),.tabular-grid-cell::part(node-icon),.tabular-grid-row:has(>.tabular-grid-rowset)>.tabular-grid-cell::part(node-icon),.tabular-grid-cell::part(drag-icon),.tabular-grid-cell::part(actions-icon),.tabular-grid-rowset-legend::part(icon),.tabular-grid-rowset>.tabular-grid-rowset-legend::part(caret),.tabular-grid-cell::part(caret),.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend::part(caret),.tabular-grid-row:is([collapsed],[leaf=false]:not(:has(>.tabular-grid-rowset)))>.tabular-grid-cell::part(caret){content:"";display:block;inline-size:var(--mer-icon__box--md);block-size:var(--mer-icon__box--md);background:no-repeat center/var(--mer-icon__size--md) var(--icon-path)}.property-grid-value-edited>.property-grid-cell:nth-child(2){font-weight:var(--mer-font__weight--semi-bold)}.property-grid-value-readonly>.property-grid-cell:nth-child(2),.property-grid-property-readonly>.property-grid-cell:nth-child(1){font-style:italic;color:var(--item__color--disabled)}.property-grid-row-actions::part(window),.tabular-grid-row-actions::part(window){border:var(--window__border);border-radius:var(--window__border-radius);padding:var(---window__padding);background-color:var(--window__bg-color);box-shadow:var(--mer-box-shadow--01)}.property-grid-row-actions::part(window),.tabular-grid-row-actions::part(window){border:var(--window__border);border-radius:var(--window__border-radius);padding:var(---window__padding);background-color:var(--window__bg-color);box-shadow:var(--mer-box-shadow--01)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.property-grid-row>.property-grid-cell:nth-child(1),.property-grid-row>.property-grid-cell:nth-child(2){display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.property-grid-value-editing>.property-grid-cell:nth-child(2){--control__border-width: 0;--control__border-color: transparent;--control__border-radius: 0;padding-block:0;padding-inline:0;--control__padding-inline: var(--grid-cell__padding-inline);display:grid;align-items:stretch;justify-content:stretch}.property-grid-value-editing>.property-grid-cell:nth-child(2):hover{outline:var(--focus__outline-width) var(--focus__outline-style) var(--control__border-color--hover);outline-offset:var(--focus__outline-offset)}.property-grid-column-set{display:none}.property-grid-cell::part(node-icon),.property-grid-row:has(>.property-grid-rowset)>.property-grid-cell::part(node-icon),.property-grid-cell::part(drag-icon),.property-grid-cell::part(actions-icon),.property-grid-rowset-legend::part(icon),.property-grid-rowset>.property-grid-rowset-legend::part(caret),.property-grid-cell::part(caret),.property-grid-rowset[collapsed]>.property-grid-rowset-legend::part(caret),.property-grid-row:is([collapsed],[leaf=false]:not(:has(>.property-grid-rowset)))>.property-grid-cell::part(caret),.tabular-grid-cell::part(node-icon),.tabular-grid-row:has(>.tabular-grid-rowset)>.tabular-grid-cell::part(node-icon),.tabular-grid-cell::part(drag-icon),.tabular-grid-cell::part(actions-icon),.tabular-grid-rowset-legend::part(icon),.tabular-grid-rowset>.tabular-grid-rowset-legend::part(caret),.tabular-grid-cell::part(caret),.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend::part(caret),.tabular-grid-row:is([collapsed],[leaf=false]:not(:has(>.tabular-grid-rowset)))>.tabular-grid-cell::part(caret){margin-inline-end:var(--grid-common__gap);flex-shrink:0}.property-grid-rowset[collapsed]>.property-grid-rowset-legend::part(caret),.property-grid-row:is([collapsed],[leaf=false]:not(:has(>.property-grid-rowset)))>.property-grid-cell::part(caret),.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend::part(caret),.tabular-grid-row:is([collapsed],[leaf=false]:not(:has(>.tabular-grid-rowset)))>.tabular-grid-cell::part(caret){--icon-path: var(--icon__gemini-tools_add_neutral--enabled);cursor:pointer}.property-grid-rowset[collapsed]>.property-grid-rowset-legend::part(caret):hover,.property-grid-row:is([collapsed],[leaf=false]:not(:has(>.property-grid-rowset)))>.property-grid-cell::part(caret):hover,.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend::part(caret):hover,.tabular-grid-row:is([collapsed],[leaf=false]:not(:has(>.tabular-grid-rowset)))>.tabular-grid-cell::part(caret):hover{--icon-path: var(--icon__gemini-tools_add_neutral--hover)}.property-grid-rowset[collapsed]>.property-grid-rowset-legend::part(caret):active,.property-grid-row:is([collapsed],[leaf=false]:not(:has(>.property-grid-rowset)))>.property-grid-cell::part(caret):active,.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend::part(caret):active,.tabular-grid-row:is([collapsed],[leaf=false]:not(:has(>.tabular-grid-rowset)))>.tabular-grid-cell::part(caret):active{--icon-path: var(--icon__gemini-tools_add_neutral--active)}.property-grid-rowset>.property-grid-rowset-legend::part(caret),.property-grid-cell::part(caret),.tabular-grid-rowset>.tabular-grid-rowset-legend::part(caret),.tabular-grid-cell::part(caret){--icon-path: var(--icon__gemini-tools_minus_neutral--enabled);cursor:pointer}.property-grid-rowset>.property-grid-rowset-legend::part(caret):hover,.property-grid-cell::part(caret):hover,.tabular-grid-rowset>.tabular-grid-rowset-legend::part(caret):hover,.tabular-grid-cell::part(caret):hover{--icon-path: var(--icon__gemini-tools_minus_neutral--hover)}.property-grid-rowset>.property-grid-rowset-legend::part(caret):active,.property-grid-cell::part(caret):active,.tabular-grid-rowset>.tabular-grid-rowset-legend::part(caret):active,.tabular-grid-cell::part(caret):active{--icon-path: var(--icon__gemini-tools_minus_neutral--active)}.property-grid-row:has(>.property-grid-rowset)>.property-grid-cell::part(node-icon),.tabular-grid-row:has(>.tabular-grid-rowset)>.tabular-grid-cell::part(node-icon){--icon-path: var(--icon__gemini-tools_folder_on-surface--enabled);display:none}.tabular-grid-show-node-icons .tabular-grid-row:has(>.tabular-grid-rowset)>.tabular-grid-cell::part(node-icon),.tabular-grid-show-node-icons .tabular-grid-cell::part(node-icon){display:block}.property-grid-cell::part(node-icon),.tabular-grid-cell::part(node-icon){--icon-path: var(--icon__gemini-tools_file_on-surface--enabled);display:none}.tabular-grid-show-node-icons .tabular-grid-row:has(>.tabular-grid-rowset)>.tabular-grid-cell::part(node-icon),.tabular-grid-show-node-icons .tabular-grid-cell::part(node-icon){display:block}.property-grid,.tabular-grid{--grid__font-size: var(--mer-font__size--3xs);--focus__outline-offset: -2px;font-size:var(--grid__font-size);--grid-label__gap: var(--mer-spacing--xs);--grid-common__gap: var(--mer-spacing--xs);max-block-size:100%;--indent: 16px;background-color:var(--items-container__bg-color);border-color:var(--items-container__border-color);--item__border-color--enabled: var(--mer-surface__elevation--01);--grid-rowset-legend__font-family: var(--mer-font-family--title);--grid-rowset-legend__font-size: var(--grid-base__font-size);--grid-rowset-legend__color: var(--grid-base__color);--grid-rowset-legend__color--hover: var(--item__color--hover);--grid-rowset-legend__padding-inline: var(--item__padding-inline);--grid-rowset-legend__padding-block: var(--mer-spacing--3xs);--grid-rowset-legend__indent: var(--mer-spacing--md);--grid-row-actions-show-on-row-hover__margin-inline-end: var( --mer-spacing--xs );--grid-column-bar__gap: var(--mer-spacing--xs);--grid-column-bar__bg-color: var(--grid-base__bg-color);--grid-column-bar__color: var(--mer-text__bright);--grid-column-bar__padding-inline: var(--mer-spacing--xs);--grid-column-bar__padding-block: var(--mer-spacing--xs);--grid-column-bar__font-size: var(--grid-base__font-size);--grid-column-bar__font-family: var(--mer-font-family--title);--grid-bar-resize-split__inline-size: var(--mer-spacing--2xs);--grid-bar-resize-split__bg-color: transparent;--grid-bar-resize-split__border-inline-end: var(--mer-border__width--sm) solid transparent;--grid-bar-resize-split__border-inline-end-color--hover: var( --grid-column-bar__color )}.property-grid-column-set,.tabular-grid-column-set{border-block-end:var(--grid-cell__border)}.tabular-grid-column{background-color:var(--items-container__bg-color)}.property-grid-column::part(bar),.tabular-grid-column::part(bar){--grid-label__gap: 0;background-color:var(--item__bg-color);color:var(--item__color);padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);font-weight:var(--control__font-weight--semi-bold);gap:var(--grid-common__gap);width:100%}.property-grid-column::part(bar-resize-split),.tabular-grid-column::part(bar-resize-split){background-color:var(--mer-surface__elevation--01);inline-size:var(--grid-bar-resize-split__inline-size)}.property-grid-column::part(bar-resize-split):hover,.tabular-grid-column::part(bar-resize-split):hover{background-color:var(--mer-accent__primary--hover)}.property-grid-row[highlighted]>.property-grid-cell,.tabular-grid-row[highlighted]>.tabular-grid-cell{--item__bg-color: var(--item__bg-color--hover);--item__color: var(--item__color--hover)}.property-grid-row[selected]>.property-grid-cell,.tabular-grid-row[selected]>.tabular-grid-cell{--item__bg-color: var(--item__bg-color--selected);--item__color: var(--item__color--selected)}.property-grid-row[dragging],.tabular-grid-row[dragging]{box-shadow:var(--mer-box-shadow--01)}.property-grid-rowset[collapsed]>.property-grid-rowset-legend,.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend{border-block-end:var(--grid-cell__border)}.property-grid-rowset-legend,.tabular-grid-rowset-legend{--grid-rowset-legend__bg-color: var(--mer-surface__elevation--02);background-color:var(--grid-rowset-legend__bg-color);padding-block-start:var(--mer-spacing--2xs);padding-block-end:var(--mer-spacing--2xs);display:flex;align-items:center;cursor:pointer;padding-inline-start:var(--grid-common__gap);box-shadow:calc(var(--indent)*(var(--level) - 1)*-1) 0px 0px 0px var(--grid-rowset-legend__bg-color)}.property-grid-rowset-legend:hover,.tabular-grid-rowset-legend:hover{--grid-rowset-legend__bg-color: var(--mer-surface__elevation--03)}.property-grid-rowset-legend:active,.tabular-grid-rowset-legend:active{--grid-rowset-legend__bg-color: var(--mer-surface__elevation--02)}.property-grid-cell,.tabular-grid-cell{box-shadow:var(--grid-cell__box-shadow-inline-block);padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);background-color:var(--item__bg-color);color:var(--item__color);--item__bg-color: var(--items-container__bg-color);--control__font-size--regular: var(--grid-font-size);--control__font-size--small: var(--grid-font-size);--item__font-size: var(--grid-font-size);border:0}.property-grid-cell[focused],.tabular-grid-cell[focused]{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.tabular-grid-align-cells-block-start .tabular-grid-cell{align-items:flex-start}.tabular-grid-align-cells-block-center .tabular-grid-cell{align-items:center}.tabular-grid-align-cells-block-end .tabular-grid-cell{align-items:flex-end}.tabular-grid-align-cells-inline-start .tabular-grid-cell{justify-content:flex-start}.tabular-grid-align-cells-inline-center .tabular-grid-cell{justify-content:center}.tabular-grid-align-cells-inline-end .tabular-grid-cell{justify-content:flex-end}.property-grid-cell::part(selector-label),.property-grid-column::part(selector-label),.tabular-grid-cell::part(selector-label),.tabular-grid-column::part(selector-label){margin-inline-end:var(--grid-label__gap);block-size:var(--control-tiny__size);inline-size:var(--control-tiny__size)}.property-grid-cell::part(selector),.property-grid-column::part(selector),.tabular-grid-cell::part(selector),.tabular-grid-column::part(selector){position:relative;margin:0;width:0;height:0}.property-grid-cell::part(selector)::before,.property-grid-column::part(selector)::before,.tabular-grid-cell::part(selector)::before,.tabular-grid-column::part(selector)::before{content:"";display:inline-block;width:var(--control-tiny__size);height:var(--control-tiny__size);border:var(--mer-form-input__border);border-radius:var(--control-tiny__border-radius);box-sizing:border-box}.property-grid-cell::part(selector)::after,.property-grid-column::part(selector)::after,.tabular-grid-cell::part(selector)::after,.tabular-grid-column::part(selector)::after{position:absolute;content:"";display:inline-block;border-color:var(--mer-form-input-check__border-color);top:calc(var(--control-tiny__size)/4);left:calc(var(--control-tiny__size)/4)}.property-grid-cell::part(selector checked)::after,.property-grid-column::part(selector checked)::after,.tabular-grid-cell::part(selector checked)::after,.tabular-grid-column::part(selector checked)::after{inline-size:calc(var(--control-tiny__size)/2);block-size:calc(var(--control-tiny__size)/2);background-color:currentColor;pointer-events:none;-webkit-mask:no-repeat center/100% var(--mer-checkbox__option-checked-image);color:var(--mer-form-input-check__border-color)}.property-grid-column::part(selector indeterminate)::after,.tabular-grid-column::part(selector indeterminate)::after{inline-size:8px;block-size:var(--mer-form-input-check__border-width);border-radius:2px;background-color:var(--mer-form-input-check__border-color);top:calc(var(--control-tiny__size)/2 - var(--mer-form-input-check__border-width)/2)}.property-grid-row-actions::part(main),.tabular-grid-row-actions::part(main){display:flex;flex-direction:column;gap:var(--window__gap)}.tabular-grid:focus{outline:none}.tabular-grid-column::part(selector):focus{outline:none}.tabular-grid-rowset-legend::part(icon){--icon-path: var(--icon__gemini-tools_category-group_on-surface--enabled)}.tabular-grid-cell::part(selector):focus{outline:none}.tabular-grid-cell::part(actions-icon){width:100%;--icon-path: var( --icon__gemini-tools_show-more-vertical_on-surface--enabled );border:none}.tabular-grid-cell::part(drag-icon){--icon-path: var(--icon__navigation_drag_on-surface--enabled);margin-inline-end:var(--grid-common__gap)}.tabular-grid-row-actions[show-on-row-hover]::part(window){margin-inline-end:var(--mer-spacing--xs)}.tabular-grid ch-tabular-grid-cell{padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start}.property-grid:focus{outline:none}.property-grid-column::part(selector):focus{outline:none}.property-grid-rowset-legend::part(icon){--icon-path: var(--icon__gemini-tools_category-group_on-surface--enabled)}.property-grid-cell::part(selector):focus{outline:none}.property-grid-cell::part(actions-icon){inline-size:100%;--icon-path: var( --icon__gemini-tools_show-more-vertical_on-surface--enabled );border:none}.property-grid-cell::part(drag-icon){--icon-path: var(--icon__navigation_drag_on-surface--enabled);margin-inline-end:var(--grid-common__gap)}.property-grid-row-actions[show-on-row-hover]::part(window){margin-inline-end:var(--mer-spacing--xs)}
+.property-grid-row-actions::part(window),.tabular-grid-row-actions::part(window){border:var(--window__border);border-radius:var(--window__border-radius);padding:var(---window__padding);background-color:var(--window__bg-color);box-shadow:var(--mer-box-shadow--01)}.property-grid-row-actions::part(window),.tabular-grid-row-actions::part(window){border:var(--window__border);border-radius:var(--window__border-radius);padding:var(---window__padding);background-color:var(--window__bg-color);box-shadow:var(--mer-box-shadow--01)}.property-grid-cell::part(node-icon),.property-grid-row:has(>.property-grid-rowset)>.property-grid-cell::part(node-icon),.property-grid-cell::part(drag-icon),.property-grid-cell::part(actions-icon),.property-grid-rowset-legend::part(icon),.property-grid-rowset>.property-grid-rowset-legend::part(caret),.property-grid-cell::part(caret),.property-grid-rowset[collapsed]>.property-grid-rowset-legend::part(caret),.property-grid-row:is([collapsed],[leaf=false]:not(:has(>.property-grid-rowset)))>.property-grid-cell::part(caret),.tabular-grid-cell::part(node-icon),.tabular-grid-row:has(>.tabular-grid-rowset)>.tabular-grid-cell::part(node-icon),.tabular-grid-cell::part(drag-icon),.tabular-grid-cell::part(actions-icon),.tabular-grid-rowset-legend::part(icon),.tabular-grid-rowset>.tabular-grid-rowset-legend::part(caret),.tabular-grid-cell::part(caret),.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend::part(caret),.tabular-grid-row:is([collapsed],[leaf=false]:not(:has(>.tabular-grid-rowset)))>.tabular-grid-cell::part(caret){content:"";display:block;inline-size:var(--mer-icon__box--md);block-size:var(--mer-icon__box--md);background:no-repeat center/var(--mer-icon__size--md) var(--icon-path)}.property-grid-value-edited>.property-grid-cell:nth-child(2){font-weight:var(--mer-font__weight--semi-bold)}.property-grid-value-readonly>.property-grid-cell:nth-child(2),.property-grid-property-readonly>.property-grid-cell:nth-child(1){font-style:italic;color:var(--item__color--disabled)}.property-grid-row-actions::part(window),.tabular-grid-row-actions::part(window){border:var(--window__border);border-radius:var(--window__border-radius);padding:var(---window__padding);background-color:var(--window__bg-color);box-shadow:var(--mer-box-shadow--01)}.property-grid-row-actions::part(window),.tabular-grid-row-actions::part(window){border:var(--window__border);border-radius:var(--window__border-radius);padding:var(---window__padding);background-color:var(--window__bg-color);box-shadow:var(--mer-box-shadow--01)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.property-grid-row>.property-grid-cell:nth-child(1),.property-grid-row>.property-grid-cell:nth-child(2){display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.property-grid-value-editing>.property-grid-cell:nth-child(2){--control__border-width: 0;--control__border-color: transparent;--control__border-radius: 0;padding-block:0;padding-inline:0;--control__padding-inline: var(--grid-cell__padding-inline);display:grid;align-items:stretch;justify-content:stretch}.property-grid-value-editing>.property-grid-cell:nth-child(2):hover{outline:var(--focus__outline-width) var(--focus__outline-style) var(--control__border-color--hover);outline-offset:var(--focus__outline-offset)}.property-grid-column-set{display:none}.property-grid-cell::part(node-icon),.property-grid-row:has(>.property-grid-rowset)>.property-grid-cell::part(node-icon),.property-grid-cell::part(drag-icon),.property-grid-cell::part(actions-icon),.property-grid-rowset-legend::part(icon),.property-grid-rowset>.property-grid-rowset-legend::part(caret),.property-grid-cell::part(caret),.property-grid-rowset[collapsed]>.property-grid-rowset-legend::part(caret),.property-grid-row:is([collapsed],[leaf=false]:not(:has(>.property-grid-rowset)))>.property-grid-cell::part(caret),.tabular-grid-cell::part(node-icon),.tabular-grid-row:has(>.tabular-grid-rowset)>.tabular-grid-cell::part(node-icon),.tabular-grid-cell::part(drag-icon),.tabular-grid-cell::part(actions-icon),.tabular-grid-rowset-legend::part(icon),.tabular-grid-rowset>.tabular-grid-rowset-legend::part(caret),.tabular-grid-cell::part(caret),.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend::part(caret),.tabular-grid-row:is([collapsed],[leaf=false]:not(:has(>.tabular-grid-rowset)))>.tabular-grid-cell::part(caret){margin-inline-end:var(--grid-common__gap);flex-shrink:0}.property-grid-rowset[collapsed]>.property-grid-rowset-legend::part(caret),.property-grid-row:is([collapsed],[leaf=false]:not(:has(>.property-grid-rowset)))>.property-grid-cell::part(caret),.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend::part(caret),.tabular-grid-row:is([collapsed],[leaf=false]:not(:has(>.tabular-grid-rowset)))>.tabular-grid-cell::part(caret){--icon-path: var(--icon__gemini-tools_add_neutral--enabled);cursor:pointer}.property-grid-rowset[collapsed]>.property-grid-rowset-legend::part(caret):hover,.property-grid-row:is([collapsed],[leaf=false]:not(:has(>.property-grid-rowset)))>.property-grid-cell::part(caret):hover,.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend::part(caret):hover,.tabular-grid-row:is([collapsed],[leaf=false]:not(:has(>.tabular-grid-rowset)))>.tabular-grid-cell::part(caret):hover{--icon-path: var(--icon__gemini-tools_add_neutral--hover)}.property-grid-rowset[collapsed]>.property-grid-rowset-legend::part(caret):active,.property-grid-row:is([collapsed],[leaf=false]:not(:has(>.property-grid-rowset)))>.property-grid-cell::part(caret):active,.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend::part(caret):active,.tabular-grid-row:is([collapsed],[leaf=false]:not(:has(>.tabular-grid-rowset)))>.tabular-grid-cell::part(caret):active{--icon-path: var(--icon__gemini-tools_add_neutral--active)}.property-grid-rowset>.property-grid-rowset-legend::part(caret),.property-grid-cell::part(caret),.tabular-grid-rowset>.tabular-grid-rowset-legend::part(caret),.tabular-grid-cell::part(caret){--icon-path: var(--icon__gemini-tools_minus_neutral--enabled);cursor:pointer}.property-grid-rowset>.property-grid-rowset-legend::part(caret):hover,.property-grid-cell::part(caret):hover,.tabular-grid-rowset>.tabular-grid-rowset-legend::part(caret):hover,.tabular-grid-cell::part(caret):hover{--icon-path: var(--icon__gemini-tools_minus_neutral--hover)}.property-grid-rowset>.property-grid-rowset-legend::part(caret):active,.property-grid-cell::part(caret):active,.tabular-grid-rowset>.tabular-grid-rowset-legend::part(caret):active,.tabular-grid-cell::part(caret):active{--icon-path: var(--icon__gemini-tools_minus_neutral--active)}.property-grid-row:has(>.property-grid-rowset)>.property-grid-cell::part(node-icon),.tabular-grid-row:has(>.tabular-grid-rowset)>.tabular-grid-cell::part(node-icon){--icon-path: var(--icon__gemini-tools_folder_on-surface--enabled);display:none}.tabular-grid-show-node-icons .tabular-grid-row:has(>.tabular-grid-rowset)>.tabular-grid-cell::part(node-icon),.tabular-grid-show-node-icons .tabular-grid-cell::part(node-icon){display:block}.property-grid-cell::part(node-icon),.tabular-grid-cell::part(node-icon){--icon-path: var(--icon__gemini-tools_file_on-surface--enabled);display:none}.tabular-grid-show-node-icons .tabular-grid-row:has(>.tabular-grid-rowset)>.tabular-grid-cell::part(node-icon),.tabular-grid-show-node-icons .tabular-grid-cell::part(node-icon){display:block}.property-grid,.tabular-grid{--grid__font-size: var(--mer-font__size--3xs);--focus__outline-offset: -2px;font-size:var(--grid__font-size);--grid-label__gap: var(--mer-spacing--xs);--grid-common__gap: var(--mer-spacing--xs);max-block-size:100%;--indent: 16px;background-color:var(--items-container__bg-color);border-color:var(--items-container__border-color);--item__border-color--enabled: var(--mer-surface__elevation--01);--grid-rowset-legend__font-family: var(--mer-font-family--title);--grid-rowset-legend__font-size: var(--grid-base__font-size);--grid-rowset-legend__color: var(--grid-base__color);--grid-rowset-legend__color--hover: var(--item__color--hover);--grid-rowset-legend__padding-inline: var(--item__padding-inline);--grid-rowset-legend__padding-block: var(--mer-spacing--3xs);--grid-rowset-legend__indent: var(--mer-spacing--md);--grid-row-actions-show-on-row-hover__margin-inline-end: var( --mer-spacing--xs );--grid-column-bar__gap: var(--mer-spacing--xs);--grid-column-bar__bg-color: var(--grid-base__bg-color);--grid-column-bar__color: var(--mer-text__bright);--grid-column-bar__padding-inline: var(--mer-spacing--xs);--grid-column-bar__padding-block: var(--mer-spacing--xs);--grid-column-bar__font-size: var(--grid-base__font-size);--grid-column-bar__font-family: var(--mer-font-family--title);--grid-bar-resize-split__inline-size: var(--mer-spacing--2xs);--grid-bar-resize-split__bg-color: transparent;--grid-bar-resize-split__border-inline-end: var(--mer-border__width--sm) solid transparent;--grid-bar-resize-split__border-inline-end-color--hover: var( --grid-column-bar__color )}.property-grid-column-set,.tabular-grid-column-set{border-block-end:var(--grid-cell__border)}.tabular-grid-column{background-color:var(--items-container__bg-color)}.property-grid-column::part(bar),.tabular-grid-column::part(bar){--grid-label__gap: 0;--grid-row__bg-color: var(--item__bg-color);--grid-row__color: var(--item__color);background-color:var(--grid-row__bg-color);color:var(--grid-row__color);padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);font-weight:var(--control__font-weight--semi-bold);gap:var(--grid-common__gap);width:100%}.property-grid-column::part(bar-resize-split),.tabular-grid-column::part(bar-resize-split){background-color:var(--mer-surface__elevation--01);inline-size:var(--grid-bar-resize-split__inline-size)}.property-grid-column::part(bar-resize-split):hover,.tabular-grid-column::part(bar-resize-split):hover{background-color:var(--mer-accent__primary--hover)}.property-grid-row[highlighted]>.property-grid-cell,.tabular-grid-row[highlighted]>.tabular-grid-cell{--grid-row__bg-color: var(--item__bg-color--hover);--grid-row__color: var(--item__color--hover)}.property-grid-row[selected]>.property-grid-cell,.tabular-grid-row[selected]>.tabular-grid-cell{--grid-row__bg-color: var(--item__bg-color--selected);--grid-row__color: var(--item__color--selected)}.property-grid-row[dragging],.tabular-grid-row[dragging]{box-shadow:var(--mer-box-shadow--01)}.property-grid-rowset[collapsed]>.property-grid-rowset-legend,.tabular-grid-rowset[collapsed]>.tabular-grid-rowset-legend{border-block-end:var(--grid-cell__border)}.property-grid-rowset-legend,.tabular-grid-rowset-legend{--grid-rowset-legend__bg-color: var(--mer-surface__elevation--02);background-color:var(--grid-rowset-legend__bg-color);padding-block-start:var(--mer-spacing--2xs);padding-block-end:var(--mer-spacing--2xs);display:flex;align-items:center;cursor:pointer;padding-inline-start:var(--grid-common__gap);box-shadow:calc(var(--indent)*(var(--level) - 1)*-1) 0px 0px 0px var(--grid-rowset-legend__bg-color)}.property-grid-rowset-legend:hover,.tabular-grid-rowset-legend:hover{--grid-rowset-legend__bg-color: var(--mer-surface__elevation--03)}.property-grid-rowset-legend:active,.tabular-grid-rowset-legend:active{--grid-rowset-legend__bg-color: var(--mer-surface__elevation--02)}.property-grid-cell,.tabular-grid-cell{box-shadow:var(--grid-cell__box-shadow-inline-block);padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);--grid-row__bg-color: var(--item__bg-color);--grid-row__color: var(--item__color);background-color:var(--grid-row__bg-color);color:var(--grid-row__color);--item__bg-color: var(--items-container__bg-color);--control__font-size--regular: var(--grid-font-size);--control__font-size--small: var(--grid-font-size);--item__font-size: var(--grid-font-size);border:0}.property-grid-cell[focused],.tabular-grid-cell[focused]{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.tabular-grid-align-cells-block-start .tabular-grid-cell{align-items:flex-start}.tabular-grid-align-cells-block-center .tabular-grid-cell{align-items:center}.tabular-grid-align-cells-block-end .tabular-grid-cell{align-items:flex-end}.tabular-grid-align-cells-inline-start .tabular-grid-cell{justify-content:flex-start}.tabular-grid-align-cells-inline-center .tabular-grid-cell{justify-content:center}.tabular-grid-align-cells-inline-end .tabular-grid-cell{justify-content:flex-end}.property-grid-cell::part(selector-label),.property-grid-column::part(selector-label),.tabular-grid-cell::part(selector-label),.tabular-grid-column::part(selector-label){margin-inline-end:var(--grid-label__gap);block-size:var(--control-tiny__size);inline-size:var(--control-tiny__size)}.property-grid-cell::part(selector),.property-grid-column::part(selector),.tabular-grid-cell::part(selector),.tabular-grid-column::part(selector){position:relative;margin:0;width:0;height:0}.property-grid-cell::part(selector)::before,.property-grid-column::part(selector)::before,.tabular-grid-cell::part(selector)::before,.tabular-grid-column::part(selector)::before{content:"";display:inline-block;width:var(--control-tiny__size);height:var(--control-tiny__size);border:var(--mer-form-input__border);border-radius:var(--control-tiny__border-radius);box-sizing:border-box}.property-grid-cell::part(selector)::after,.property-grid-column::part(selector)::after,.tabular-grid-cell::part(selector)::after,.tabular-grid-column::part(selector)::after{position:absolute;content:"";display:inline-block;border-color:var(--mer-form-input-check__border-color);top:calc(var(--control-tiny__size)/4);left:calc(var(--control-tiny__size)/4)}.property-grid-cell::part(selector checked)::after,.property-grid-column::part(selector checked)::after,.tabular-grid-cell::part(selector checked)::after,.tabular-grid-column::part(selector checked)::after{inline-size:calc(var(--control-tiny__size)/2);block-size:calc(var(--control-tiny__size)/2);background-color:currentColor;pointer-events:none;-webkit-mask:no-repeat center/100% var(--mer-checkbox__option-checked-image);color:var(--mer-form-input-check__border-color)}.property-grid-column::part(selector indeterminate)::after,.tabular-grid-column::part(selector indeterminate)::after{inline-size:8px;block-size:var(--mer-form-input-check__border-width);border-radius:2px;background-color:var(--mer-form-input-check__border-color);top:calc(var(--control-tiny__size)/2 - var(--mer-form-input-check__border-width)/2)}.property-grid-row-actions::part(main),.tabular-grid-row-actions::part(main){display:flex;flex-direction:column;gap:var(--window__gap)}.tabular-grid:focus{outline:none}.tabular-grid-column::part(selector):focus{outline:none}.tabular-grid-rowset-legend::part(icon){--icon-path: var(--icon__gemini-tools_category-group_on-surface--enabled)}.tabular-grid-cell::part(selector):focus{outline:none}.tabular-grid-cell::part(actions-icon){width:100%;--icon-path: var( --icon__gemini-tools_show-more-vertical_on-surface--enabled );border:none}.tabular-grid-cell::part(drag-icon){--icon-path: var(--icon__navigation_drag_on-surface--enabled);margin-inline-end:var(--grid-common__gap)}.tabular-grid-row-actions[show-on-row-hover]::part(window){margin-inline-end:var(--mer-spacing--xs)}.tabular-grid ch-tabular-grid-cell{padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start}.property-grid:focus{outline:none}.property-grid-column::part(selector):focus{outline:none}.property-grid-rowset-legend::part(icon){--icon-path: var(--icon__gemini-tools_category-group_on-surface--enabled)}.property-grid-cell::part(selector):focus{outline:none}.property-grid-cell::part(actions-icon){inline-size:100%;--icon-path: var( --icon__gemini-tools_show-more-vertical_on-surface--enabled );border:none}.property-grid-cell::part(drag-icon){--icon-path: var(--icon__navigation_drag_on-surface--enabled);margin-inline-end:var(--grid-common__gap)}.property-grid-row-actions[show-on-row-hover]::part(window){margin-inline-end:var(--mer-spacing--xs)}

package/dist/bundles/scss/components/dropdown.scss

@@ -0,0 +1,3 @@
+@import "../../../mercury.scss";
+
+@include mercury-only($components: true, $dropdown: true);

package/dist/mercury.scss

@@ -522,16 +522,22 @@
 
 // Row
 @mixin grid-row-colors-enabled() {
-  background-color: var(--item__bg-color);
-  color: var(--item__color);
+  // Some controls using --item__** variables inside the tabular grid inherit
+  // unwanted styles. For example, when a row is selected, controls like a
+  // list-box inherit the selected background color. To prevent this, these
+  // properties cannot be directly applied to the tabular grid.
+  --grid-row__bg-color: var(--item__bg-color);
+  --grid-row__color: var(--item__color);
+  background-color: var(--grid-row__bg-color);
+  color: var(--grid-row__color);
 }
 @mixin grid-row-colors-highlighted() {
-  --item__bg-color: var(--item__bg-color--hover);
-  --item__color: var(--item__color--hover);
+  --grid-row__bg-color: var(--item__bg-color--hover);
+  --grid-row__color: var(--item__color--hover);
 }
 @mixin grid-row-colors-selected() {
-  --item__bg-color: var(--item__bg-color--selected);
-  --item__color: var(--item__color--selected);
+  --grid-row__bg-color: var(--item__bg-color--selected);
+  --grid-row__color: var(--item__color--selected);
 }
 @mixin grid-row-dragging() {
   box-shadow: var(--mer-box-shadow--01);
@@ -2163,16 +2169,22 @@
 
 // Row
 @mixin grid-row-colors-enabled() {
-  background-color: var(--item__bg-color);
-  color: var(--item__color);
+  // Some controls using --item__** variables inside the tabular grid inherit
+  // unwanted styles. For example, when a row is selected, controls like a
+  // list-box inherit the selected background color. To prevent this, these
+  // properties cannot be directly applied to the tabular grid.
+  --grid-row__bg-color: var(--item__bg-color);
+  --grid-row__color: var(--item__color);
+  background-color: var(--grid-row__bg-color);
+  color: var(--grid-row__color);
 }
 @mixin grid-row-colors-highlighted() {
-  --item__bg-color: var(--item__bg-color--hover);
-  --item__color: var(--item__color--hover);
+  --grid-row__bg-color: var(--item__bg-color--hover);
+  --grid-row__color: var(--item__color--hover);
 }
 @mixin grid-row-colors-selected() {
-  --item__bg-color: var(--item__bg-color--selected);
-  --item__color: var(--item__color--selected);
+  --grid-row__bg-color: var(--item__bg-color--selected);
+  --grid-row__color: var(--item__color--selected);
 }
 @mixin grid-row-dragging() {
   box-shadow: var(--mer-box-shadow--01);
@@ -4793,16 +4805,22 @@
 
 // Row
 @mixin grid-row-colors-enabled() {
-  background-color: var(--item__bg-color);
-  color: var(--item__color);
+  // Some controls using --item__** variables inside the tabular grid inherit
+  // unwanted styles. For example, when a row is selected, controls like a
+  // list-box inherit the selected background color. To prevent this, these
+  // properties cannot be directly applied to the tabular grid.
+  --grid-row__bg-color: var(--item__bg-color);
+  --grid-row__color: var(--item__color);
+  background-color: var(--grid-row__bg-color);
+  color: var(--grid-row__color);
 }
 @mixin grid-row-colors-highlighted() {
-  --item__bg-color: var(--item__bg-color--hover);
-  --item__color: var(--item__color--hover);
+  --grid-row__bg-color: var(--item__bg-color--hover);
+  --grid-row__color: var(--item__color--hover);
 }
 @mixin grid-row-colors-selected() {
-  --item__bg-color: var(--item__bg-color--selected);
-  --item__color: var(--item__color--selected);
+  --grid-row__bg-color: var(--item__bg-color--selected);
+  --grid-row__color: var(--item__color--selected);
 }
 @mixin grid-row-dragging() {
   box-shadow: var(--mer-box-shadow--01);
@@ -5521,6 +5539,194 @@
   }
 }
 
+%dropdown-window {
+  @include items-container-colors();
+  @include items-container-padding();
+  @include items-container-border();
+  @include items-container-dropdown();
+  @include items-container-border-radius();
+  @include items-container-gap();
+  @include item-font();
+}
+
+// Primary
+%dropdown-item-action {
+  --ch-dropdown-item__image-size: var(--mer-icon__box--md);
+  @include item-colors-enabled();
+  @include item-border();
+  @include item-border-radius();
+  @include item-padding();
+  @include item-gap();
+
+  &--focus {
+    // @include focus-style($outline: true);
+    @include focus-outline();
+  }
+
+  &--hover {
+    @include item-colors-hover();
+  }
+
+  &--active {
+    @include item-colors-selected();
+  }
+}
+
+%dropdown-separator {
+  margin-block: var(--spacing--s);
+}
+
+%dropdown-expandable-action-chevron {
+  content: "";
+  border-block-start: 4px dashed currentColor;
+  border-inline: 4px solid transparent;
+  margin-inline-start: 4px;
+}
+
+%dropdown-header-slot,
+%dropdown-footer-slot {
+  @include item-padding();
+}
+
+/// @group Dropdown
+/// @param {String} $dropdown__expandable-button-selector [".dropdown::part(expandable-button)"] -
+/// @param {String} $dropdown__window-selector [".dropdown::part(window)"] -
+/// @param {String} $dropdown__action-selector [".dropdown::part(action)"] -
+/// @param {String} $dropdown__expandable-action-selector [".dropdown::part(action expandable)"] -
+/// @param {String} $dropdown-separator-selector [".dropdown .dropdown-separator"] -
+/// @param {String} $dropdown-slot-header-selector [".dropdown::slotted([slot="header"])"] -
+/// @param {Boolean} $add-separator [true] -
+@mixin dropdown(
+  $dropdown__expandable-button-selector: ".dropdown::part(expandable-button)",
+
+  $dropdown__window-selector: ".dropdown::part(window)",
+
+  $dropdown__action-selector: ".dropdown::part(action)",
+
+  $dropdown__expandable-action-selector: ".dropdown::part(action expandable)",
+
+  $dropdown-separator-selector: ".dropdown .dropdown-separator",
+
+  $dropdown__slot-header-selector: ".dropdown .header-slot",
+
+  $dropdown__slot-footer-selector: ".dropdown .footer-slot",
+
+  $add-separator: true
+) {
+  // @include button-tertiary(
+  //   $selector: #{$dropdown__expandable-button-selector},
+  //   $add--disabled: false,
+  //   $add--error: false
+  // );
+
+  #{$dropdown__window-selector} {
+    @extend %dropdown-window;
+  }
+
+  #{$dropdown__action-selector} {
+    @extend %dropdown-item-action;
+
+    &:hover {
+      @extend %dropdown-item-action--hover;
+    }
+
+    &:active {
+      @extend %dropdown-item-action--active;
+    }
+
+    &:focus-visible {
+      @extend %dropdown-item-action--focus;
+    }
+  }
+
+  #{$dropdown__expandable-action-selector}::after {
+    @extend %dropdown-expandable-action-chevron;
+  }
+
+  #{$dropdown__slot-header-selector} {
+    @extend %dropdown-header-slot;
+  }
+  #{$dropdown__slot-footer-selector} {
+    @extend %dropdown-footer-slot;
+  }
+
+  @if $add-separator {
+    #{$dropdown-separator-selector} {
+      @extend %dropdown-separator;
+    }
+  }
+}
+
+// @mixin dropdown() {
+//   /* .action-group::part(more-actions-window),
+//       .action-group-item::part(window), */
+
+//   .dropdown::part(window),
+//   .dropdown .dropdown-item::part(window) {
+//     @extend %dropdown-window;
+//   }
+
+//   .dropdown-secondary::part(window),
+//   .dropdown-secondary .dropdown-item::part(window) {
+//     @extend %dropdown-window-secondary;
+//   }
+
+//   .dropdown-item::part(action) {
+//     @extend %dropdown-item-action;
+//   }
+
+//   .dropdown-separator {
+//     @extend %dropdown-separator;
+//   }
+
+//   /* .dropdown::part(expandable-button) {
+//               padding-inline: $spacing.inset-m;
+//               color: $colors.primary;
+//               font-family: $fonts.primary-semibold;
+//               font-size: $fontSizes.s;
+//               letter-spacing: 0.25px;
+//             } */
+
+//   .action-group::part(more-actions-button):hover,
+//   .action-group .action-group-item::part(action):hover,
+//   .dropdown .dropdown-item::part(action):hover {
+//     @extend %dropdown-item-action--hover;
+//   }
+
+//   .action-group::part(more-actions-button):active,
+//   .action-group .action-group-item::part(action):active,
+//   .dropdown .dropdown-item::part(action):active {
+//     @extend %dropdown-item-action--active;
+//   }
+
+//   .action-group-secondary::part(more-actions-button):hover,
+//   .action-group-secondary .action-group-item::part(action):hover,
+//   .dropdown-secondary .dropdown-item::part(action):hover {
+//     @extend %dropdown-item-action-secondary--hover;
+//   }
+
+//   .action-group-secondary::part(more-actions-button):active,
+//   .action-group-secondary .action-group-item::part(action):active,
+//   .dropdown-secondary .dropdown-item::part(action):active {
+//     @extend %dropdown-item-action-secondary--active;
+//   }
+
+//   .action-group::part(more-actions-button):focus-visible,
+//   .action-group-item::part(action):focus-visible,
+//   .dropdown::part(expandable-button):focus-visible,
+//   .dropdown-item::part(action):focus-visible {
+//     @extend %dropdown-item-action;
+//   }
+
+//   .action-group-item::part(expandable-action)::after,
+//   .dropdown-item::part(expandable-action)::after {
+//     content: "";
+//     border-block-start: 4px dashed currentColor;
+//     border-inline: 4px solid transparent;
+//     margin-inline-start: 4px;
+//   }
+// }
+
 %flexible-layout {
   --flexible-layout--tab-list-block__background-color: var(
     --mer-surface__elevation--01
@@ -6060,7 +6266,9 @@
     @include item-border-radius();
     @include item-font();
     @include item-padding();
-    @include item-column-gap();
+    // @include item-column-gap(); // TODO: uncomment when '.action' class on Chameleon fixes the grid-template.
+    // Explanation: At the time of writting Chameleon is applying a grid-template that consists on three columns.
+    // As a side effect, if we apply column-gap an inline-start gap will be applied, even tough is not intended.
 
     &--disabled {
       @include item-colors-disabled();
@@ -6092,6 +6300,9 @@
       }
     }
 
+    &--nested {
+      margin-inline-start: var(--mer-spacing--lg);
+    }
     &--nested-expandable {
     }
   }
@@ -6121,16 +6332,14 @@
     }
   }
 
-  &-additional-item--action {
-    // to be defined later
-
-    &--hover {
-      // to be defined later
-    }
-
-    &--focus-visible {
-      @include focus-outline();
-    }
+  &-additional-item--image {
+    // TODO: uncomment when '.action' class on Chameleon fixes the grid-template, and use back item-column-gap() instead.
+    margin-inline-end: var(--item__gap--regular);
+  }
+  &-additional-item--text {
+    // TODO: uncomment when '.action' class on Chameleon fixes the grid-template, and use back item-column-gap() instead.
+    margin-inline-start: calc(var(--item__gap--regular) * 2);
+    font-style: italic;
   }
 
   &-separator {
@@ -6148,6 +6357,7 @@
   $group-action-selector: ".list-box::part(group__action)",
   $group-caption-selector: ".list-box::part(group__caption)",
 
+  $item-action--nested-selector: ".list-box::part(item__action nested)",
   $item-action--nested-expandable-selector:
     ".list-box::part(item__action nested-expandable)",
 
@@ -6177,6 +6387,7 @@
     ".list-box::part(item__additional-item image)",
   $additional-item--action-selector:
     ".list-box::part(item__additional-item action)",
+  $additional-item--text-selector: ".list-box::part(item__additional-item text)",
 
   $separator-selector: ".list-box::part(separator)",
 
@@ -6234,7 +6445,10 @@
     }
   }
 
-  // Nested expandable
+  // Nested
+  #{$item-action--nested-selector} {
+    @extend %list-box-item-action--nested;
+  }
   #{$item-action--nested-expandable-selector} {
     @extend %list-box-item-action--nested-expandable;
   }
@@ -6242,7 +6456,6 @@
   // - - - - - - - - - - - - - - - - - - - -
   //                  Group
   // - - - - - - - - - - - - - - - - - - - -
-
   #{$group-selector} {
     @extend %list-box-group;
   }
@@ -6280,15 +6493,10 @@
 
   @if $add--additional-item {
     #{$additional-item--image-selector} {
-      @extend %list-box-additional-item--action;
-
-      &:hover {
-        @extend %list-box-additional-item--action--hover;
-      }
-
-      &:focus-visible {
-        @extend %list-box-additional-item--action--focus-visible;
-      }
+      @extend %list-box-additional-item--image;
+    }
+    #{$additional-item--text-selector} {
+      @extend %list-box-additional-item--text;
     }
   }
 }
@@ -7045,16 +7253,22 @@
 
 // Row
 @mixin grid-row-colors-enabled() {
-  background-color: var(--item__bg-color);
-  color: var(--item__color);
+  // Some controls using --item__** variables inside the tabular grid inherit
+  // unwanted styles. For example, when a row is selected, controls like a
+  // list-box inherit the selected background color. To prevent this, these
+  // properties cannot be directly applied to the tabular grid.
+  --grid-row__bg-color: var(--item__bg-color);
+  --grid-row__color: var(--item__color);
+  background-color: var(--grid-row__bg-color);
+  color: var(--grid-row__color);
 }
 @mixin grid-row-colors-highlighted() {
-  --item__bg-color: var(--item__bg-color--hover);
-  --item__color: var(--item__color--hover);
+  --grid-row__bg-color: var(--item__bg-color--hover);
+  --grid-row__color: var(--item__color--hover);
 }
 @mixin grid-row-colors-selected() {
-  --item__bg-color: var(--item__bg-color--selected);
-  --item__color: var(--item__color--selected);
+  --grid-row__bg-color: var(--item__bg-color--selected);
+  --grid-row__color: var(--item__color--selected);
 }
 @mixin grid-row-dragging() {
   box-shadow: var(--mer-box-shadow--01);
@@ -10968,6 +11182,7 @@
   $code: true,
   $combo-box: true,
   $dialog: true,
+  $dropdown: true,
   $edit: true,
   $flexible-layout: true,
   $icon: true,
@@ -19288,6 +19503,10 @@
     @include dialog();
   }
 
+  @if $dropdown {
+    @include dropdown();
+  }
+
   @if $edit {
     @include input();
   }
@@ -19422,6 +19641,7 @@
   $code: false,
   $combo-box: false,
   $dialog: false,
+  $dropdown: false,
   $edit: false,
   $flexible-layout: false,
   $icon: false,
@@ -19496,6 +19716,7 @@
     $code: $code,
     $combo-box: $combo-box,
     $dialog: $dialog,
+    $dropdown: $dropdown,
     $edit: $edit,
     $flexible-layout: $flexible-layout,
     $icon: $icon,

package/dist/types.d.ts

@@ -2,7 +2,7 @@ export type MercuryBundles = [MercuryBundleReset, ...MercuryBundleOptimized[]] |
 export type MercuryBundleOptimized = MercuryBundleComponent | MercuryBundleComponentForm | MercuryBundleUtil;
 export type MercuryBundleFull = MercuryBundleComponent | MercuryBundleUtil | MercuryBundleUtilFormFull;
 export type MercuryBundleBase = "base/base" | "base/icons";
-export type MercuryBundleComponent = "components/accordion" | "components/chat" | "components/code" | "components/dialog" | "components/flexible-layout" | "components/layout-splitter" | "components/list-box" | "components/markdown-viewer" | "components/navigation-list" | "components/pills" | "components/segmented-control" | "components/sidebar" | "components/tab" | "components/tabular-grid" | "components/ticket-list" | "components/tooltip" | "components/tree-view" | "components/widget";
+export type MercuryBundleComponent = "components/accordion" | "components/chat" | "components/code" | "components/dialog" | "components/dropdown" | "components/flexible-layout" | "components/layout-splitter" | "components/list-box" | "components/markdown-viewer" | "components/navigation-list" | "components/pills" | "components/segmented-control" | "components/sidebar" | "components/tab" | "components/tabular-grid" | "components/ticket-list" | "components/tooltip" | "components/tree-view" | "components/widget";
 export type MercuryBundleComponentForm = "components/button" | "components/checkbox" | "components/combo-box" | "components/edit" | "components/icon" | "components/radio-group" | "components/slider" | "components/toggle";
 export type MercuryBundleReset = "resets/box-sizing";
 export type MercuryBundleUtil = "utils/elevation" | "utils/form" | "utils/layout" | "utils/spacing" | "utils/typography" | "chameleon/scrollbar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -55,7 +55,7 @@
   "license": "MIT",
   "devDependencies": {
     "@atao60/fse-cli": "^0.1.9",
-    "@genexus/chameleon-controls-library": "6.0.0-next.47",
+    "@genexus/chameleon-controls-library": "6.0.0-next.55",
     "@genexus/svg-sass-generator": "1.1.24",
     "chokidar": "^3.6.0",
     "chokidar-cli": "^3.0.0",