@kumori/aurora-wui-components 0.0.274-dev41142.11 → 0.0.274-dev4142.1

package/dist/components/axebow-role-container-dropdown/axebow-role-container-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-role-container-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-role-container-dropdown/axebow-role-container-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAa,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,+DAA+D,CAAC;AACvE,OAAO,uDAAuD,CAAC;AAC/D,OAAO,iEAAiE,CAAC;AACzE,OAAO,+DAA+D,CAAC;AAIvE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,iBAAiB,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,yBAAyB,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,KAAK,GAAG,UAAU,GAAG,WAAW,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qBACa,2BAA4B,SAAQ,UAAU;IACzD,MAAM,CAAC,MAAM,4BAoDX;IAE0B,KAAK,SAAM;IACX,UAAU,SAAM;IAChB,kBAAkB,SAAM;IACvB,qBAAqB,UAAS;IAC3B,KAAK,EAAE,qBAAqB,EAAE,CAAM;IACxC,aAAa,SAAM;IACnB,gBAAgB,SAAM;IAElD,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,0BAA0B;IAUlC,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,aAAa;IAsBrB,MAAM;CAyBP"}
+{"version":3,"file":"axebow-role-container-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-role-container-dropdown/axebow-role-container-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAa,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,+DAA+D,CAAC;AACvE,OAAO,uDAAuD,CAAC;AAC/D,OAAO,iEAAiE,CAAC;AACzE,OAAO,+DAA+D,CAAC;AAIvE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,iBAAiB,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,yBAAyB,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,KAAK,GAAG,UAAU,GAAG,WAAW,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qBACa,2BAA4B,SAAQ,UAAU;IACzD,MAAM,CAAC,MAAM,4BA6BX;IAE0B,KAAK,SAAM;IACX,UAAU,SAAM;IAChB,kBAAkB,SAAM;IACvB,qBAAqB,UAAS;IAC3B,KAAK,EAAE,qBAAqB,EAAE,CAAM;IACxC,aAAa,SAAM;IACnB,gBAAgB,SAAM;IAElD,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,0BAA0B;IAUlC,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,aAAa;IAsBrB,MAAM;CAyBP"}

package/dist/components/axebow-service-detail-header/axebow-service-detail-header.d.ts

@@ -33,8 +33,6 @@ export declare class AxebowServiceDetailHeader extends LitElement {
     displayedRevision: string;
     revisionsDisabled: boolean;
     updateWithZipLabel: string;
-    versionSelectorMaxWidth: string;
-    versionSelectorFontSize?: string;
     showActionNeeded: boolean;
     actionNeededTitle: string;
     deployLabel: string;

package/dist/components/axebow-service-detail-header/axebow-service-detail-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-service-detail-header.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-service-detail-header/axebow-service-detail-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAa,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,gDAAgD,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIvD,MAAM,WAAW,2BAA2B;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,qBACa,yBAA0B,SAAQ,UAAU;IACvD,MAAM,CAAC,MAAM,4BASX;IAE0B,aAAa,SAAM;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,SAAM;IAC3B,mBAAmB,SAAM;IACzB,eAAe,SAAM;IAErB,eAAe,SAAM;IACjB,UAAU,EAAG,2BAA2B,CAAC;IAC7C,eAAe,SAAM;IACjB,UAAU,EAAG,2BAA2B,CAAC;IAC7C,UAAU,SAAM;IAChB,UAAU,SAAM;IAChB,OAAO,SAAM;IACb,cAAc,SAAM;IACpB,YAAY,SAAM;IAClB,aAAa,SAAM;IACnB,eAAe,SAAM;IACrB,kBAAkB,SAAM;IAExB,mBAAmB,SAAM;IACzB,gBAAgB,SAAM;IACvB,SAAS,EAAE,YAAY,EAAE,CAAM;IAC9B,iBAAiB,SAAM;IACtB,iBAAiB,UAAS;IAC3B,kBAAkB,SAAM;IACxB,uBAAuB,SAAgB;IACvC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEhC,gBAAgB,UAAS;IAC1B,iBAAiB,SAAM;IACvB,WAAW,SAAM;IAE7C,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,oBAAoB;IA8B5B,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,qBAAqB;IAkC7B,OAAO,CAAC,mBAAmB;IAgB3B,MAAM;CASP"}
+{"version":3,"file":"axebow-service-detail-header.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-service-detail-header/axebow-service-detail-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAa,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,gDAAgD,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIvD,MAAM,WAAW,2BAA2B;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,qBACa,yBAA0B,SAAQ,UAAU;IACvD,MAAM,CAAC,MAAM,4BASX;IAE0B,aAAa,SAAM;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,SAAM;IAC3B,mBAAmB,SAAM;IACzB,eAAe,SAAM;IAErB,eAAe,SAAM;IACjB,UAAU,EAAG,2BAA2B,CAAC;IAC7C,eAAe,SAAM;IACjB,UAAU,EAAG,2BAA2B,CAAC;IAC7C,UAAU,SAAM;IAChB,UAAU,SAAM;IAChB,OAAO,SAAM;IACb,cAAc,SAAM;IACpB,YAAY,SAAM;IAClB,aAAa,SAAM;IACnB,eAAe,SAAM;IACrB,kBAAkB,SAAM;IAExB,mBAAmB,SAAM;IACzB,gBAAgB,SAAM;IACvB,SAAS,EAAE,YAAY,EAAE,CAAM;IAC9B,iBAAiB,SAAM;IACtB,iBAAiB,UAAS;IAC3B,kBAAkB,SAAM;IAEvB,gBAAgB,UAAS;IAC1B,iBAAiB,SAAM;IACvB,WAAW,SAAM;IAE7C,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,oBAAoB;IA8B5B,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,qBAAqB;IAiC7B,OAAO,CAAC,mBAAmB;IAgB3B,MAAM;CASP"}

package/dist/components/cards/parts/axebow-card-version-selector.d.ts

@@ -6,7 +6,6 @@ export declare class AxebowCardVersionSelector extends LitElement {
     displayedRevision: string;
     disabled: boolean;
     maxWidth?: string;
-    fontSize?: string;
     protected updated(changed: PropertyValues): void;
     private _formatRevision;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/cards/parts/axebow-card-version-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-card-version-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/parts/axebow-card-version-selector.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,cAAc,EAAE,MAAM,KAAK,CAAC;AAEvE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AAEnE,qBACa,yBAA0B,SAAQ,UAAU;IACvD,MAAM,CAAC,MAAM,4BA+FX;IAEyB,SAAS,EAAE,YAAY,EAAE,CAAM;IAC9B,iBAAiB,SAAM;IACtB,QAAQ,UAAS;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE9C,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc;IAiBzC,OAAO,CAAC,eAAe;IAMvB,MAAM;IAiBN,OAAO,CAAC,SAAS;CAIlB"}
+{"version":3,"file":"axebow-card-version-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/parts/axebow-card-version-selector.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,cAAc,EAAE,MAAM,KAAK,CAAC;AAEvE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AAEnE,qBACa,yBAA0B,SAAQ,UAAU;IACvD,MAAM,CAAC,MAAM,4BA+FX;IAEyB,SAAS,EAAE,YAAY,EAAE,CAAM;IAC9B,iBAAiB,SAAM;IACtB,QAAQ,UAAS;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE9C,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc;IAQzC,OAAO,CAAC,eAAe;IAMvB,MAAM;IAiBN,OAAO,CAAC,SAAS;CAIlB"}

package/dist/index.js

@@ -5635,7 +5635,7 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
         display: inline-block;
         width: fit-content;
       }
-      sl-select::part(display-input) { padding: 0; color: var(--axebow-tertiary); font-size: var(--axebow-card-version-selector-font-size, 0.75rem) !important; transition: color 0.15s ease; }
+      sl-select::part(display-input) { padding: 0; color: var(--axebow-tertiary); font-size: 0.875rem !important; transition: color 0.15s ease; }
       sl-select::part(combobox) {
         padding-inline-start: 0.25rem !important;
         padding-block: 0.125rem !important;
@@ -5647,7 +5647,7 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
         outline-offset: -1px;
         border-radius: 0.375rem;
         background-color: transparent;
-        transition: background-color 0.15s ease;
+        transition: background-color 0.15s ease, outline-color 0.15s ease;
       }
       sl-select[open]::part(combobox) {
         outline-color: var(--axebow-tertiary);
@@ -5673,13 +5673,13 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
         border-radius: 0 0 0.375rem 0.375rem;
         box-shadow: none;
         margin-top: -1px;
-        width: var(--axebow-card-version-selector-listbox-width) !important;
       }
       sl-option::part(base) { font-size: 0.75rem; padding-inline-start: 0.25rem !important; }
       sl-option::part(checked-icon) { display: none; }
+      sl-option[aria-selected='true']::part(label) { color: var(--axebow-tertiary) !important; }
 
-      sl-select:hover:not([open])::part(display-input) { color: var(--axebow-gray); }
-      sl-select:hover:not([open])::part(expand-icon) { color: var(--axebow-gray); border-color: var(--axebow-gray); }
+      sl-select:hover::part(display-input) { color: var(--axebow-gray); }
+      sl-select:hover::part(expand-icon) { color: var(--axebow-gray); border-color: var(--axebow-gray); }
 
       sl-select[open]::part(expand-icon) {
         color: white;
@@ -5690,15 +5690,8 @@ var AxebowCardVersionSelector = class AxebowCardVersionSelector extends LitEleme
 	}
 	updated(changed) {
 		super.updated(changed);
-		if (changed.has("maxWidth")) if (this.maxWidth) {
-			this.style.setProperty("--axebow-card-version-selector-max-width", this.maxWidth);
-			this.style.setProperty("--axebow-card-version-selector-listbox-width", this.maxWidth);
-		} else {
-			this.style.removeProperty("--axebow-card-version-selector-max-width");
-			this.style.removeProperty("--axebow-card-version-selector-listbox-width");
-		}
-		if (changed.has("fontSize")) if (this.fontSize) this.style.setProperty("--axebow-card-version-selector-font-size", this.fontSize);
-		else this.style.removeProperty("--axebow-card-version-selector-font-size");
+		if (changed.has("maxWidth")) if (this.maxWidth) this.style.setProperty("--axebow-card-version-selector-max-width", this.maxWidth);
+		else this.style.removeProperty("--axebow-card-version-selector-max-width");
 	}
 	_formatRevision(id) {
 		if (!id) return "";
@@ -5730,7 +5723,6 @@ __decorate([property({ type: Array })], AxebowCardVersionSelector.prototype, "re
 __decorate([property({ type: String })], AxebowCardVersionSelector.prototype, "displayedRevision", void 0);
 __decorate([property({ type: Boolean })], AxebowCardVersionSelector.prototype, "disabled", void 0);
 __decorate([property({ type: String })], AxebowCardVersionSelector.prototype, "maxWidth", void 0);
-__decorate([property({ type: String })], AxebowCardVersionSelector.prototype, "fontSize", void 0);
 AxebowCardVersionSelector = __decorate([customElement("axebow-card-version-selector")], AxebowCardVersionSelector);
 //#endregion
 //#region src/components/cards/parts/axebow-role-tooltip.ts
@@ -8688,7 +8680,6 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
 		this.displayedRevision = "";
 		this.revisionsDisabled = false;
 		this.updateWithZipLabel = "";
-		this.versionSelectorMaxWidth = "10.4375rem";
 		this.showActionNeeded = false;
 		this.actionNeededTitle = "";
 		this.deployLabel = "";
@@ -8743,22 +8734,22 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
       <axebow-tooltip class="p-0" placement="right">
         <div slot="content">
           <div class="flex items-center gap-1">
-            <axebow-icon iconName="database" iconColor="var(--axebow-white)" size="md"></axebow-icon>
+            <axebow-icon iconName="database" size="md"></axebow-icon>
             <span>${this.storageLabel}</span>
             <span class="ml-auto font-bold">${limits.storage} ${this.gbLabel}</span>
           </div>
           <div class="flex items-center gap-1">
-            <axebow-icon iconName="subdirectory_arrow_right" iconColor="var(--axebow-white)" size="md"></axebow-icon>
+            <axebow-icon iconName="subdirectory_arrow_right" size="md"></axebow-icon>
             <span>${this.volatileLabel}</span>
             <span class="ml-auto font-bold">${limits.volatileStorage} ${this.gbLabel}</span>
           </div>
           <div class="flex items-center gap-1">
-            <axebow-icon iconName="subdirectory_arrow_right" iconColor="var(--axebow-white)" size="md"></axebow-icon>
+            <axebow-icon iconName="subdirectory_arrow_right" size="md"></axebow-icon>
             <span>${this.nonRepPersLabel}</span>
             <span class="ml-auto font-bold">${limits.nonReplicatedStorage} ${this.gbLabel}</span>
           </div>
           <div class="flex items-center gap-1">
-            <axebow-icon iconName="subdirectory_arrow_right" iconColor="var(--axebow-white)" size="md"></axebow-icon>
+            <axebow-icon iconName="subdirectory_arrow_right" size="md"></axebow-icon>
             <span>${this.persistentRepLabel}</span>
             <span class="ml-auto font-bold">${limits.persistentStorage} ${this.gbLabel}</span>
           </div>
@@ -8802,8 +8793,7 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
             .revisions=${this.revisions}
             displayedRevision=${this.displayedRevision}
             ?disabled=${this.revisionsDisabled}
-            maxWidth=${this.versionSelectorMaxWidth}
-            fontSize=${this.versionSelectorFontSize ?? ""}
+            maxWidth="8.75rem"
           ></axebow-card-version-selector>
           <div class="flex items-center gap-1.5">
             <axebow-button
@@ -8874,8 +8864,6 @@ __decorate([property({ type: Array })], AxebowServiceDetailHeader.prototype, "re
 __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "displayedRevision", void 0);
 __decorate([property({ type: Boolean })], AxebowServiceDetailHeader.prototype, "revisionsDisabled", void 0);
 __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "updateWithZipLabel", void 0);
-__decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "versionSelectorMaxWidth", void 0);
-__decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "versionSelectorFontSize", void 0);
 __decorate([property({ type: Boolean })], AxebowServiceDetailHeader.prototype, "showActionNeeded", void 0);
 __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "actionNeededTitle", void 0);
 __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "deployLabel", void 0);
@@ -9871,47 +9859,24 @@ var AxebowRoleContainerDropdown = class AxebowRoleContainerDropdown extends LitE
 			css`
       :host {
         display: block;
-        width: 17.625rem;
       }
       sl-menu-item::part(base) {
-        min-height: 2.5rem !important;
         padding-top: 0.71875rem !important;
         padding-bottom: 0.71875rem !important;
-        padding-left: 1rem !important;
+        padding-left: 0.75rem !important;
         padding-right: 0.75rem !important;
       }
-      sl-menu-item::part(checked-icon) {
-        display: none;
-      }
-      sl-menu {
-        display: flex !important;
-        flex-direction: column;
-        gap: 0.25rem;
-      }
-      axebow-button[slot='trigger']::part(label) {
-        display: block;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
       sl-checkbox::part(base) {
         display: flex;
         align-items: center;
       }
       sl-checkbox::part(control) {
-        width: 1rem !important;
-        height: 1rem !important;
         margin-top: 0 !important;
         margin-bottom: 0 !important;
-        border-radius: 0.25rem !important;
       }
       sl-checkbox::part(label) {
         display: flex;
         align-items: center;
-        font-size: var(--text-base, 0.875rem);
-        color: var(--axebow-black, #000000);
-        margin-inline-start: 0.5rem !important;
       }
       .role-container-panel::part(popup) {
         z-index: var(--sl-z-index-dropdown);
@@ -9950,26 +9915,24 @@ var AxebowRoleContainerDropdown = class AxebowRoleContainerDropdown extends LitE
 			instanceIdx
 		})}
       >
-        <div class="flex flex-col gap-1">
-          <sl-checkbox .checked=${instance.selected} @sl-change=${(e) => e.stopPropagation()}>
-            <div class="flex items-center gap-2">
-              <img src="${instance.logoUrl}" alt="role-logo" class="w-4.5 h-4.5" />
-              <p><span class="text-(--axebow-primary)">${role.name}</span>::${instance.name}</p>
-            </div>
-          </sl-checkbox>
-          ${instance.containers.length ? html`
-                <div class="flex flex-col gap-1 ml-4">
-                  ${instance.containers.map((container) => this._renderContainer(role.name, instanceIdx, container))}
-                </div>
-              ` : ""}
-        </div>
+        <sl-checkbox .checked=${instance.selected} @sl-change=${(e) => e.stopPropagation()}>
+          <div class="flex items-center gap-2">
+            <img src="${instance.logoUrl}" alt="role-logo" class="w-8 h-8" />
+            <p>${instance.name}</p>
+          </div>
+        </sl-checkbox>
+        ${instance.containers.length ? html`
+              <div class="flex flex-col ml-4">
+                ${instance.containers.map((container) => this._renderContainer(role.name, instanceIdx, container))}
+              </div>
+            ` : ""}
       </sl-menu-item>
     `;
 	}
 	_renderContainer(roleName, instanceIdx, container) {
 		return html`
       <div
-        class="cursor-pointer hover:bg-gray-50 rounded h-10 box-border flex items-center px-1"
+        class="cursor-pointer hover:bg-gray-50 p-1 rounded"
         @click=${(e) => this._handleItemClick(e, {
 			type: "container",
 			role: roleName,
@@ -9979,7 +9942,7 @@ var AxebowRoleContainerDropdown = class AxebowRoleContainerDropdown extends LitE
       >
         <sl-checkbox .checked=${container.selected} @sl-change=${(e) => e.stopPropagation()}>
           <div class="flex items-center gap-2">
-            <axebow-icon class="font-light" iconName="subdirectory_arrow_right" size="lg"></axebow-icon>
+            <axebow-icon class="font-light" iconName="subdirectory_arrow_right" size="base"></axebow-icon>
             <p>${container.name}</p>
           </div>
         </sl-checkbox>