@genexus/mercury 0.12.3 → 0.12.5

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/scss/components/dropdown.scss

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

package/dist/bundles.d.ts

@@ -81,6 +81,14 @@ export declare const getThemeBundles: (basePath: string) => [{
     readonly name: BundleNames;
     readonly url: `${string}components/dialog.css`;
     readonly attachStyleSheet: boolean;
+}, {
+    readonly name: BundleNames;
+    readonly url: `${string}components/dropdown.css`;
+    readonly attachStyleSheet?: undefined;
+} | {
+    readonly name: BundleNames;
+    readonly url: `${string}components/dropdown.css`;
+    readonly attachStyleSheet: boolean;
 }, {
     readonly name: BundleNames;
     readonly url: `${string}components/icon.css`;

package/dist/bundles.js

@@ -1 +1 @@
-"use strict";const n=(o,c,p=void 0)=>p===void 0?{name:c,url:`${o}${c}.css`}:{name:c,url:`${o}${c}.css`,attachStyleSheet:p};export const getThemeBundles=o=>[n(o,"components/accordion"),n(o,"components/button"),n(o,"components/chat"),n(o,"components/checkbox"),n(o,"components/code"),n(o,"components/combo-box"),n(o,"components/flexible-layout"),n(o,"components/dialog"),n(o,"components/icon"),n(o,"components/edit"),n(o,"components/layout-splitter"),n(o,"components/list-box"),n(o,"components/markdown-viewer",!1),n(o,"components/navigation-list"),n(o,"components/pills"),n(o,"components/radio-group"),n(o,"components/segmented-control"),n(o,"components/sidebar"),n(o,"components/slider"),n(o,"components/tab"),n(o,"components/tabular-grid"),n(o,"components/ticket-list"),n(o,"components/toggle"),n(o,"components/tooltip"),n(o,"components/tree-view"),n(o,"components/widget"),n(o,"resets/box-sizing"),n(o,"utils/form"),n(o,"utils/elevation"),n(o,"utils/form--full"),n(o,"utils/layout"),n(o,"utils/spacing"),n(o,"utils/typography"),n(o,"chameleon/scrollbar")],getBundles=(o,c)=>c?o.map(p=>n(c,p)):o;
+"use strict";const n=(o,c,p=void 0)=>p===void 0?{name:c,url:`${o}${c}.css`}:{name:c,url:`${o}${c}.css`,attachStyleSheet:p};export const getThemeBundles=o=>[n(o,"components/accordion"),n(o,"components/button"),n(o,"components/chat"),n(o,"components/checkbox"),n(o,"components/code"),n(o,"components/combo-box"),n(o,"components/flexible-layout"),n(o,"components/dialog"),n(o,"components/dropdown"),n(o,"components/icon"),n(o,"components/edit"),n(o,"components/layout-splitter"),n(o,"components/list-box"),n(o,"components/markdown-viewer",!1),n(o,"components/navigation-list"),n(o,"components/pills"),n(o,"components/radio-group"),n(o,"components/segmented-control"),n(o,"components/sidebar"),n(o,"components/slider"),n(o,"components/tab"),n(o,"components/tabular-grid"),n(o,"components/ticket-list"),n(o,"components/toggle"),n(o,"components/tooltip"),n(o,"components/tree-view"),n(o,"components/widget"),n(o,"resets/box-sizing"),n(o,"utils/form"),n(o,"utils/elevation"),n(o,"utils/form--full"),n(o,"utils/layout"),n(o,"utils/spacing"),n(o,"utils/typography"),n(o,"chameleon/scrollbar")],getBundles=(o,c)=>c?o.map(p=>n(c,p)):o;

package/dist/mercury.scss

@@ -5539,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
@@ -10994,6 +11182,7 @@
   $code: true,
   $combo-box: true,
   $dialog: true,
+  $dropdown: true,
   $edit: true,
   $flexible-layout: true,
   $icon: true,
@@ -19314,6 +19503,10 @@
     @include dialog();
   }
 
+  @if $dropdown {
+    @include dropdown();
+  }
+
   @if $edit {
     @include input();
   }
@@ -19448,6 +19641,7 @@
   $code: false,
   $combo-box: false,
   $dialog: false,
+  $dropdown: false,
   $edit: false,
   $flexible-layout: false,
   $icon: false,
@@ -19522,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.3",
+  "version": "0.12.5",
   "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",