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

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,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"}
+{"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,4BAiDX;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"}

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

@@ -33,6 +33,8 @@ 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;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"}
+{"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"}

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

@@ -6,6 +6,7 @@ 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;IAE9C,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc;IAQzC,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;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"}

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: 0.875rem !important; transition: color 0.15s ease; }
+      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(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, outline-color 0.15s ease;
+        transition: background-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::part(display-input) { color: var(--axebow-gray); }
-      sl-select:hover::part(expand-icon) { color: var(--axebow-gray); border-color: var(--axebow-gray); }
+      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[open]::part(expand-icon) {
         color: white;
@@ -5690,8 +5690,15 @@ 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);
-		else this.style.removeProperty("--axebow-card-version-selector-max-width");
+		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");
 	}
 	_formatRevision(id) {
 		if (!id) return "";
@@ -5723,6 +5730,7 @@ __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
@@ -8680,6 +8688,7 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
 		this.displayedRevision = "";
 		this.revisionsDisabled = false;
 		this.updateWithZipLabel = "";
+		this.versionSelectorMaxWidth = "10.4375rem";
 		this.showActionNeeded = false;
 		this.actionNeededTitle = "";
 		this.deployLabel = "";
@@ -8734,22 +8743,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" size="md"></axebow-icon>
+            <axebow-icon iconName="database" iconColor="var(--axebow-white)" 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" size="md"></axebow-icon>
+            <axebow-icon iconName="subdirectory_arrow_right" iconColor="var(--axebow-white)" 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" size="md"></axebow-icon>
+            <axebow-icon iconName="subdirectory_arrow_right" iconColor="var(--axebow-white)" 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" size="md"></axebow-icon>
+            <axebow-icon iconName="subdirectory_arrow_right" iconColor="var(--axebow-white)" size="md"></axebow-icon>
             <span>${this.persistentRepLabel}</span>
             <span class="ml-auto font-bold">${limits.persistentStorage} ${this.gbLabel}</span>
           </div>
@@ -8793,7 +8802,8 @@ var AxebowServiceDetailHeader = class AxebowServiceDetailHeader extends LitEleme
             .revisions=${this.revisions}
             displayedRevision=${this.displayedRevision}
             ?disabled=${this.revisionsDisabled}
-            maxWidth="8.75rem"
+            maxWidth=${this.versionSelectorMaxWidth}
+            fontSize=${this.versionSelectorFontSize ?? ""}
           ></axebow-card-version-selector>
           <div class="flex items-center gap-1.5">
             <axebow-button
@@ -8864,6 +8874,8 @@ __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);
@@ -9859,13 +9871,30 @@ 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: 0.75rem !important;
+        padding-left: 1rem !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;
@@ -9873,10 +9902,13 @@ var AxebowRoleContainerDropdown = class AxebowRoleContainerDropdown extends LitE
       sl-checkbox::part(control) {
         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);
       }
       .role-container-panel::part(popup) {
         z-index: var(--sl-z-index-dropdown);
@@ -9915,24 +9947,26 @@ var AxebowRoleContainerDropdown = class AxebowRoleContainerDropdown extends LitE
 			instanceIdx
 		})}
       >
-        <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>
-            ` : ""}
+        <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-8 h-8" />
+              <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-menu-item>
     `;
 	}
 	_renderContainer(roleName, instanceIdx, container) {
 		return html`
       <div
-        class="cursor-pointer hover:bg-gray-50 p-1 rounded"
+        class="cursor-pointer hover:bg-gray-50 rounded h-10 box-border flex items-center px-1"
         @click=${(e) => this._handleItemClick(e, {
 			type: "container",
 			role: roleName,