@kumori/aurora-wui-components 0.0.2 → 0.0.3

package/dist/index.js

@@ -1,16 +1,1223 @@
-export * from './components/aurora-button.js';
-export * from './styles/aurora-theme.js';
-export * from './components/cards/card.types.js';
-export * from './components/cards/aurora-more-actions.js';
-export * from './components/cards/aurora-base-card.js';
-export * from './components/cards/aurora-runtime-card.js';
-export * from './components/cards/parts/aurora-card-header.js';
-export * from './components/cards/parts/aurora-card-stat-item.js';
-export * from './components/cards/parts/aurora-card-stats-row.js';
-export * from './components/cards/parts/aurora-card-filter-item.js';
-export * from './components/cards/parts/aurora-card-filter.js';
-export * from './components/cards/parts/aurora-card-resource-table.js';
-export * from './components/cards/parts/aurora-card-attention-banner.js';
-export * from './components/cards/parts/aurora-card-action-banner.js';
-export * from './components/cards/parts/aurora-card-status-bar.js';
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/components/aurora-button.ts
+var AuroraButton = class AuroraButton extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    button {
+      font: inherit;
+      cursor: pointer;
+      border-radius: 6px;
+      border: 1px solid transparent;
+      padding: 0.5em 1.2em;
+      background-color: var(--aurora-button-bg, #1a1a1a);
+      color: var(--aurora-button-color, #ffffff);
+    }
+
+    button:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `;
+	}
+	render() {
+		return html`
+      <button ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], AuroraButton.prototype, "disabled", void 0);
+AuroraButton = __decorate([customElement("aurora-button")], AuroraButton);
+//#endregion
+//#region src/styles/aurora-theme.ts
+var auroraTheme = css`
+  .theme {
+    --axebow-primary: var(--color-primary, #34495e);
+    --axebow-primary-light: var(--color-primary-light, #b4cded);
+    --axebow-tertiary: var(--color-tertiary, #006bff);
+    --axebow-success: var(--color-success, #0ecd9a);
+    --axebow-secondary: var(--color-secondary, #78787a);
+    --axebow-base: var(--color-base, #f0f1f5);
+    --axebow-error: var(--color-error, #e93a3a);
+    --axebow-white: var(--color-white, #ffffff);
+    --axebow-black: var(--color-black, #000000);
+    --axebow-warning: var(--color-warning, #f9cf6c);
+    --axebow-table-border: var(--color-table-border, #ddd);
+    --axebow-gray: var(--color-gray, #8a94ae);
+    --axebow-light-gray: var(--color-light-gray, #d9d9d9);
+
+    --axebow-clickable-blue: var(--color-clickable-blue, #006bff);
+    --axebow-sky-gray: var(--color-sky-gray, #8a94ee);
+    --axebow-rich-black: var(--color-rich-black, #0d1821);
+    --axebow-anti-flash-white: var(--color-anti-flash-white, #f0f1f5);
+    --axebow-strong-gray: var(--color-strong-gray, #78787a);
+
+    --axebow-bg-primary: var(--color-bg-primary, #f0f1f5);
+
+    --axebow-text-gray: var(--color-text-gray, #78787a);
+
+    --axebow-premium-label: var(--color-premium-label, #b9935a33);
+    --axebow-premium-text: var(--color-premium-text, #b9935a);
+    --axebow-deleting-link: var(--color-deleting-link, #a0a0a0);
+    --axebow-border-gray: var(--color-border-gray, #9ca3af);
+  }
+  * {
+    font-family: 'Open Sans', sans-serif;
+  }
+`;
+var STATUS_COLORS = {
+	HEALTHY: "var(--axebow-success)",
+	ERROR: "var(--axebow-error)",
+	WARNING: "var(--axebow-warning)",
+	DEFAULT: "var(--axebow-gray)"
+};
+//#endregion
+//#region src/styles/tailwind.css?inline
+var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    *, :before, :after, ::backdrop {\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n    }\n  }\n}\n\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-100: oklch(96.7% .003 264.542);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: .25rem;\n    --text-xs: .75rem;\n    --text-xs--line-height: calc(1 / .75);\n    --text-sm: .875rem;\n    --text-sm--line-height: calc(1.25 / .875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --font-weight-normal: 400;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --leading-snug: 1.375;\n    --radius-sm: .25rem;\n    --radius-md: .375rem;\n    --radius-lg: .5rem;\n    --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n    --default-transition-duration: .15s;\n    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n\n@layer base {\n  *, :after, :before, ::backdrop {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  ::file-selector-button {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  html, :host {\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    line-height: 1.5;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n\n  b, strong {\n    font-weight: bolder;\n  }\n\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n\n  small {\n    font-size: 80%;\n  }\n\n  sub, sup {\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n  }\n\n  sub {\n    bottom: -.25em;\n  }\n\n  sup {\n    top: -.5em;\n  }\n\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n\n  :-moz-focusring {\n    outline: auto;\n  }\n\n  progress {\n    vertical-align: baseline;\n  }\n\n  summary {\n    display: list-item;\n  }\n\n  ol, ul, menu {\n    list-style: none;\n  }\n\n  img, svg, video, canvas, audio, iframe, embed, object {\n    vertical-align: middle;\n    display: block;\n  }\n\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  button, input, select, optgroup, textarea {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n\n  ::placeholder {\n    opacity: 1;\n  }\n\n  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentColor;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n\n  textarea {\n    resize: vertical;\n  }\n\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n\n  ::-webkit-datetime-edit {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-year-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-month-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-day-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-hour-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-minute-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-second-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-millisecond-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n    appearance: button;\n  }\n\n  ::file-selector-button {\n    appearance: button;\n  }\n\n  ::-webkit-inner-spin-button {\n    height: auto;\n  }\n\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n\n@layer components;\n\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n\n  .absolute {\n    position: absolute;\n  }\n\n  .relative {\n    position: relative;\n  }\n\n  .static {\n    position: static;\n  }\n\n  .top-full {\n    top: 100%;\n  }\n\n  .right-0 {\n    right: 0;\n  }\n\n  .bottom-full {\n    bottom: 100%;\n  }\n\n  .left-0 {\n    left: 0;\n  }\n\n  .z-10 {\n    z-index: 10;\n  }\n\n  .m-0 {\n    margin: 0;\n  }\n\n  .mt-1 {\n    margin-top: var(--spacing);\n  }\n\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n\n  .mb-1 {\n    margin-bottom: var(--spacing);\n  }\n\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n\n  .box-border {\n    box-sizing: border-box;\n  }\n\n  .line-clamp-1 {\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    overflow: hidden;\n  }\n\n  .flex {\n    display: flex;\n  }\n\n  .grid {\n    display: grid;\n  }\n\n  .hidden {\n    display: none;\n  }\n\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n\n  .h-7 {\n    height: calc(var(--spacing) * 7);\n  }\n\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n\n  .h-\\[4\\.5rem\\] {\n    height: 4.5rem;\n  }\n\n  .h-full {\n    height: 100%;\n  }\n\n  .max-h-10 {\n    max-height: calc(var(--spacing) * 10);\n  }\n\n  .max-h-40 {\n    max-height: calc(var(--spacing) * 40);\n  }\n\n  .max-h-full {\n    max-height: 100%;\n  }\n\n  .min-h-10 {\n    min-height: calc(var(--spacing) * 10);\n  }\n\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n\n  .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n\n  .w-full {\n    width: 100%;\n  }\n\n  .max-w-full {\n    max-width: 100%;\n  }\n\n  .min-w-0 {\n    min-width: 0;\n  }\n\n  .min-w-44 {\n    min-width: calc(var(--spacing) * 44);\n  }\n\n  .flex-1 {\n    flex: 1;\n  }\n\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n\n  .transform {\n    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n  }\n\n  .cursor-default {\n    cursor: default;\n  }\n\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .flex-col {\n    flex-direction: column;\n  }\n\n  .flex-row {\n    flex-direction: row;\n  }\n\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n\n  .items-center {\n    align-items: center;\n  }\n\n  .justify-between {\n    justify-content: space-between;\n  }\n\n  .justify-center {\n    justify-content: center;\n  }\n\n  .justify-end {\n    justify-content: flex-end;\n  }\n\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * .5);\n  }\n\n  .gap-1 {\n    gap: var(--spacing);\n  }\n\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n\n  .overflow-hidden {\n    overflow: hidden;\n  }\n\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n\n  .rounded-b-lg {\n    border-bottom-right-radius: var(--radius-lg);\n    border-bottom-left-radius: var(--radius-lg);\n  }\n\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n\n  .border-t-4 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 4px;\n  }\n\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n\n  .border-\\[var\\(--axebow-gray\\)\\] {\n    border-color: var(--axebow-gray);\n  }\n\n  .border-\\[var\\(--axebow-light-gray\\)\\] {\n    border-color: var(--axebow-light-gray);\n  }\n\n  .border-\\[var\\(--axebow-secondary\\)\\] {\n    border-color: var(--axebow-secondary);\n  }\n\n  .border-transparent {\n    border-color: #0000;\n  }\n\n  .bg-\\[var\\(--axebow-anti-flash-white\\)\\] {\n    background-color: var(--axebow-anti-flash-white);\n  }\n\n  .bg-\\[var\\(--axebow-error\\)\\] {\n    background-color: var(--axebow-error);\n  }\n\n  .bg-\\[var\\(--axebow-gray\\)\\] {\n    background-color: var(--axebow-gray);\n  }\n\n  .bg-\\[var\\(--axebow-light-gray\\)\\] {\n    background-color: var(--axebow-light-gray);\n  }\n\n  .bg-\\[var\\(--axebow-white\\)\\] {\n    background-color: var(--axebow-white);\n  }\n\n  .bg-transparent {\n    background-color: #0000;\n  }\n\n  .bg-white {\n    background-color: var(--color-white);\n  }\n\n  .object-contain {\n    object-fit: contain;\n  }\n\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n\n  .px-1 {\n    padding-inline: var(--spacing);\n  }\n\n  .px-1\\.5 {\n    padding-inline: calc(var(--spacing) * 1.5);\n  }\n\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n\n  .px-5 {\n    padding-inline: calc(var(--spacing) * 5);\n  }\n\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * .5);\n  }\n\n  .py-1 {\n    padding-block: var(--spacing);\n  }\n\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n\n  .pt-0\\.5 {\n    padding-top: calc(var(--spacing) * .5);\n  }\n\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n\n  .pl-6 {\n    padding-left: calc(var(--spacing) * 6);\n  }\n\n  .text-center {\n    text-align: center;\n  }\n\n  .text-left {\n    text-align: left;\n  }\n\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n\n  .leading-snug {\n    --tw-leading: var(--leading-snug);\n    line-height: var(--leading-snug);\n  }\n\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n\n  .font-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n\n  .text-\\[var\\(--axebow-error\\)\\] {\n    color: var(--axebow-error);\n  }\n\n  .text-\\[var\\(--axebow-gray\\)\\] {\n    color: var(--axebow-gray);\n  }\n\n  .text-\\[var\\(--axebow-primary\\)\\] {\n    color: var(--axebow-primary);\n  }\n\n  .text-\\[var\\(--axebow-rich-black\\)\\] {\n    color: var(--axebow-rich-black);\n  }\n\n  .text-\\[var\\(--axebow-secondary\\)\\] {\n    color: var(--axebow-secondary);\n  }\n\n  .text-\\[var\\(--axebow-tertiary\\)\\] {\n    color: var(--axebow-tertiary);\n  }\n\n  .italic {\n    font-style: italic;\n  }\n\n  .opacity-50 {\n    opacity: .5;\n  }\n\n  .opacity-100 {\n    opacity: 1;\n  }\n\n  .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n    --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .grayscale {\n    --tw-grayscale: grayscale(100%);\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .duration-200 {\n    --tw-duration: .2s;\n    transition-duration: .2s;\n  }\n\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n\n  @media (hover: hover) {\n    .hover\\:rounded-lg:hover {\n      border-radius: var(--radius-lg);\n    }\n\n    .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n      background-color: var(--axebow-anti-flash-white);\n    }\n\n    .hover\\:bg-\\[var\\(--axebow-light-gray\\)\\]:hover {\n      background-color: var(--axebow-light-gray);\n    }\n\n    .hover\\:bg-gray-100:hover {\n      background-color: var(--color-gray-100);\n    }\n\n    .hover\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n      color: var(--axebow-gray);\n    }\n\n    .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n      --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n\n  .disabled\\:pointer-events-none:disabled {\n    pointer-events: none;\n  }\n\n  .disabled\\:cursor-not-allowed:disabled {\n    cursor: not-allowed;\n  }\n\n  .disabled\\:opacity-50:disabled {\n    opacity: .5;\n  }\n}\n\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false\n}\n";
+//#endregion
+//#region src/components/cards/aurora-more-actions.ts
+var AuroraMoreActions = class AuroraMoreActions extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.placement = "bottom";
+		this.disabled = false;
+		this.options = [];
+		this.title = "";
+		this.iconName = "";
+		this.openToRight = false;
+		this.closeLabel = "Close";
+		this.moreActionsLabel = "More";
+		this._fixedPos = {
+			top: 0,
+			right: 0
+		};
+		this._handleOutsideClick = (e) => {
+			if (this.open && !this.contains(e.target)) {
+				this.open = false;
+				this.dispatchEvent(new CustomEvent("toggled", { detail: { open: false } }));
+			}
+		};
+		this._handleScroll = () => {
+			if (this.open && this.openToRight) {
+				this.open = false;
+				this.dispatchEvent(new CustomEvent("toggled", { detail: { open: false } }));
+			}
+		};
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`:host { display: inline-block; }`];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("click", this._handleOutsideClick);
+		window.addEventListener("scroll", this._handleScroll, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("click", this._handleOutsideClick);
+		window.removeEventListener("scroll", this._handleScroll, true);
+	}
+	_toggle(e) {
+		if (this.disabled) return;
+		e.stopPropagation();
+		if (!this.open && this.openToRight) {
+			const btn = this.shadowRoot?.querySelector(".trigger");
+			if (btn) {
+				const rect = btn.getBoundingClientRect();
+				this._fixedPos = {
+					top: rect.bottom + 8,
+					right: window.innerWidth - rect.right
+				};
+			}
+		}
+		this.open = !this.open;
+		this.dispatchEvent(new CustomEvent("toggled", { detail: { open: this.open } }));
+	}
+	_handleSlotClick() {
+		this.open = false;
+		this.dispatchEvent(new CustomEvent("toggled", { detail: { open: false } }));
+	}
+	render() {
+		const placementClass = this.placement === "top" ? "bottom-full mb-2" : "top-full mt-2";
+		const dropdownStyle = this.openToRight ? `position:fixed;top:${this._fixedPos.top}px;right:${this._fixedPos.right}px;z-index:1000;` : "";
+		return html`
+      <div class="relative w-full h-full flex justify-end">
+        <button
+          class="trigger relative font-semibold text-xs text-[var(--axebow-tertiary)] cursor-pointer py-1 px-2 h-full bg-transparent border-none transition-all duration-200 flex items-center hover:text-[var(--axebow-gray)] hover:bg-[var(--axebow-anti-flash-white)] hover:rounded-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+          ?disabled=${this.disabled}
+          @click=${this._toggle}
+        >
+          ${this.iconName ? html`<axebow-icon iconName=${this.iconName} size="small" iconColor="var(--axebow-tertiary)"></axebow-icon>` : this.open ? this.closeLabel : this.title || this.moreActionsLabel}
+        </button>
+        ${this.open ? html`
+              <div
+                class="absolute right-0 z-10 bg-white border border-[var(--axebow-gray)] rounded-lg shadow-[2px_2px_25px_0px_rgba(0,0,0,0.1)] p-2 min-w-44 flex flex-col ${placementClass}"
+                style=${dropdownStyle}
+                @click=${this._handleSlotClick}
+              >
+                ${this.options?.length ? this.options.map((opt) => html`
+                        <button
+                          class="flex items-center gap-2 text-left py-1 px-2 cursor-pointer rounded-sm border border-transparent bg-transparent w-full hover:bg-gray-100"
+                          @click=${(e) => {
+			e.stopPropagation();
+			opt.onTap(e);
+			this.open = false;
+			this.dispatchEvent(new CustomEvent("toggled", { detail: { open: false } }));
+		}}
+                          @mouseenter=${(e) => e.currentTarget.style.borderColor = `var(--axebow-${opt.type})`}
+                          @mouseleave=${(e) => e.currentTarget.style.borderColor = "transparent"}
+                        >
+                          <axebow-icon iconName=${opt.icon} iconColor="var(--axebow-${opt.type})" size="small"></axebow-icon>
+                          <p class="m-0 whitespace-nowrap" style="color:var(--axebow-${opt.type});">${opt.label}</p>
+                        </button>
+                      `) : html`<slot></slot>`}
+              </div>
+            ` : ""}
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Boolean })], AuroraMoreActions.prototype, "open", void 0);
+__decorate([property({ type: String })], AuroraMoreActions.prototype, "placement", void 0);
+__decorate([property({ type: Boolean })], AuroraMoreActions.prototype, "disabled", void 0);
+__decorate([property({ type: Array })], AuroraMoreActions.prototype, "options", void 0);
+__decorate([property({ type: String })], AuroraMoreActions.prototype, "title", void 0);
+__decorate([property({ type: String })], AuroraMoreActions.prototype, "iconName", void 0);
+__decorate([property({ type: Boolean })], AuroraMoreActions.prototype, "openToRight", void 0);
+__decorate([property({ type: String })], AuroraMoreActions.prototype, "closeLabel", void 0);
+__decorate([property({ type: String })], AuroraMoreActions.prototype, "moreActionsLabel", void 0);
+__decorate([state()], AuroraMoreActions.prototype, "_fixedPos", void 0);
+AuroraMoreActions = __decorate([customElement("aurora-more-actions")], AuroraMoreActions);
+//#endregion
+//#region src/components/cards/parts/aurora-card-header.ts
+var AuroraCardHeader = class AuroraCardHeader extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.logoSrc = null;
+		this.tenantOrAccount = "";
+		this.name = "";
+		this.badge = "none";
+		this.subtitle = "";
+		this.cardType = "account";
+		this.freeIaasLabel = "Free IaaS";
+		this.freeIaasTitle = "Free Infrastructure";
+		this.freeIaasDesc = "This environment uses free infrastructure.";
+		this.haLabel = "Highly Available";
+		this.haTitle = "High Availability enabled";
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`
+      :host { display: block; }
+      sl-badge::part(base) { background-color: var(--axebow-secondary); color: white; }
+    `];
+	}
+	_renderBadge() {
+		if (this.badge === "free-iaas") return html`
+        <sl-tooltip>
+          <div slot="content" style="max-width:300px;">
+            <strong>${this.freeIaasTitle}</strong>
+            <p style="margin-top:0.5rem;">${this.freeIaasDesc}</p>
+          </div>
+          <div class="flex items-center gap-2 cursor-pointer">
+            <axebow-icon iconName="info" iconColor="var(--axebow-gray)" size="small"></axebow-icon>
+            <span class="text-[var(--axebow-rich-black)]">${this.freeIaasLabel}</span>
+          </div>
+        </sl-tooltip>
+      `;
+		if (this.badge === "ha") return html`
+        <sl-tooltip content=${this.haTitle}>
+          <sl-badge variant="neutral" pill size="small" class="cursor-pointer">${this.haLabel}</sl-badge>
+        </sl-tooltip>
+      `;
+		return html``;
+	}
+	render() {
+		const isAccount = this.cardType === "account";
+		const isTenant = this.cardType === "tenant";
+		if (isAccount) return html`
+        <div class="w-full bg-[var(--axebow-anti-flash-white)] rounded-md flex items-center gap-3 py-2 px-3 h-16">
+          ${this.logoSrc ? html`<div class="h-10 w-10 flex items-center justify-center shrink-0"><img src=${this.logoSrc} class="max-h-full max-w-full object-contain" /></div>` : ""}
+          <div class="flex flex-col flex-1 min-w-0">
+            ${this.tenantOrAccount ? html`<span class="font-semibold text-[var(--axebow-primary)] leading-none">${this.tenantOrAccount}</span>` : ""}
+            <div class="flex justify-between items-center">
+              <span class="font-bold text-xl text-[var(--axebow-primary)] leading-snug pt-0.5">${this.name}</span>
+              ${this._renderBadge()}
+            </div>
+            ${this.subtitle ? html`<div class="italic text-[var(--axebow-primary)] flex items-center leading-none">${this.subtitle}<slot name="subtitle-tooltip"></slot></div>` : ""}
+          </div>
+        </div>
+      `;
+		return html`
+      <div class="w-full bg-[var(--axebow-anti-flash-white)] rounded-md flex flex-col justify-center px-5 py-3 h-[4.5rem]">
+        <div class="flex flex-col flex-1 min-w-0">
+          ${this.tenantOrAccount || this.logoSrc ? html`
+                <div class="flex gap-2 items-center leading-none mt-1">
+                  ${this.logoSrc ? html`<div class="h-4 w-4"><img src=${this.logoSrc} class="max-h-full max-w-full object-contain" /></div>` : ""}
+                  <span class="font-semibold ${isTenant ? "text-[var(--axebow-gray)]" : "text-[var(--axebow-primary)]"} leading-none">${this.tenantOrAccount}</span>
+                </div>
+              ` : ""}
+          <div class="flex justify-between items-center">
+            <span class="font-bold text-xl text-[var(--axebow-primary)] leading-snug pt-0.5">${this.name}</span>
+            ${this._renderBadge()}
+          </div>
+          ${this.subtitle ? html`<div class="italic text-[var(--axebow-primary)] flex items-center leading-none">${this.subtitle}<slot name="subtitle-tooltip"></slot></div>` : ""}
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "logoSrc", void 0);
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "tenantOrAccount", void 0);
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "name", void 0);
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "badge", void 0);
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "subtitle", void 0);
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "cardType", void 0);
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "freeIaasLabel", void 0);
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "freeIaasTitle", void 0);
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "freeIaasDesc", void 0);
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "haLabel", void 0);
+__decorate([property({ type: String })], AuroraCardHeader.prototype, "haTitle", void 0);
+AuroraCardHeader = __decorate([customElement("aurora-card-header")], AuroraCardHeader);
+//#endregion
+//#region src/components/cards/parts/aurora-card-stat-item.ts
+var AuroraCardStatItem = class AuroraCardStatItem extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = 0;
+		this.title = "";
+		this.label = "";
+		this.active = true;
+		this.compact = false;
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
+	}
+	render() {
+		return html`
+      <div class="flex flex-col items-center text-center gap-0.5">
+        <h4 class="text-lg text-[var(--axebow-primary)] font-bold leading-snug m-0">${this.value}</h4>
+        <p class="m-0 leading-snug">${this.title}</p>
+        <span
+          class="text-[var(--axebow-gray)] font-semibold text-xs ${this.active ? "cursor-pointer opacity-100" : "cursor-not-allowed opacity-50"}"
+          @click=${this._onClick}
+        >${this.label}</span>
+      </div>
+    `;
+	}
+	_onClick() {
+		if (this.active) this.dispatchEvent(new CustomEvent("label-click", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: Number })], AuroraCardStatItem.prototype, "value", void 0);
+__decorate([property({ type: String })], AuroraCardStatItem.prototype, "title", void 0);
+__decorate([property({ type: String })], AuroraCardStatItem.prototype, "label", void 0);
+__decorate([property({ type: Boolean })], AuroraCardStatItem.prototype, "active", void 0);
+__decorate([property({ type: Boolean })], AuroraCardStatItem.prototype, "compact", void 0);
+AuroraCardStatItem = __decorate([customElement("aurora-card-stat-item")], AuroraCardStatItem);
+//#endregion
+//#region src/components/cards/parts/aurora-card-stats-row.ts
+var AuroraCardStatsRow = class AuroraCardStatsRow extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.stats = [];
+		this.compact = false;
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
+	}
+	render() {
+		return html`
+      <div class="grid grid-cols-3 gap-1 px-2">
+        ${this.stats.map((stat, index) => html`
+            <aurora-card-stat-item
+              .value=${stat.value}
+              .title=${stat.title}
+              .label=${stat.label}
+              .active=${stat.active !== false}
+              .compact=${this.compact}
+              @label-click=${() => this._handleLabelClick(index)}
+            ></aurora-card-stat-item>
+          `)}
+      </div>
+    `;
+	}
+	_handleLabelClick(index) {
+		this.dispatchEvent(new CustomEvent("stat-label-click", {
+			detail: { index },
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: Array })], AuroraCardStatsRow.prototype, "stats", void 0);
+__decorate([property({ type: Boolean })], AuroraCardStatsRow.prototype, "compact", void 0);
+AuroraCardStatsRow = __decorate([customElement("aurora-card-stats-row")], AuroraCardStatsRow);
+//#endregion
+//#region src/components/cards/parts/aurora-card-filter-item.ts
+var AuroraCardFilterItem = class AuroraCardFilterItem extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "";
+		this.showAttention = false;
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
+	}
+	render() {
+		return html`
+      <div
+        class="w-full py-1 px-2 flex justify-between items-center border-t border-[var(--axebow-light-gray)] cursor-pointer hover:bg-[var(--axebow-light-gray)]"
+        @click=${this._onClick}
+      >
+        <p class="m-0">${this.name}</p>
+        ${this.showAttention ? html`<axebow-icon iconName="error" size="small" iconColor="var(--axebow-error)"></axebow-icon>` : ""}
+      </div>
+    `;
+	}
+	_onClick() {
+		this.dispatchEvent(new CustomEvent("item-select", {
+			detail: { name: this.name },
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: String })], AuroraCardFilterItem.prototype, "name", void 0);
+__decorate([property({ type: Boolean })], AuroraCardFilterItem.prototype, "showAttention", void 0);
+AuroraCardFilterItem = __decorate([customElement("aurora-card-filter-item")], AuroraCardFilterItem);
+//#endregion
+//#region src/components/cards/parts/aurora-card-filter.ts
+var AuroraCardFilter = class AuroraCardFilter extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.items = [];
+		this.selected = null;
+		this.emptyLabel = "";
+		this.emptyActionLabel = "";
+		this.attentionLabel = "Attention needed";
+		this.showAttention = false;
+		this.opened = false;
+		this.isPlainRole = false;
+		this.isDisabled = false;
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
+	}
+	render() {
+		return html`
+      <div class="relative">
+        <div class="flex justify-between items-center border-b border-[var(--axebow-light-gray)] w-full px-2 cursor-pointer h-7">
+          ${!this.selected && this.items.length === 0 ? html`
+                <p
+                  class="m-0 ${this.isPlainRole || this.isDisabled ? "text-[var(--axebow-gray)] cursor-default opacity-50" : "text-[var(--axebow-tertiary)] cursor-pointer"}"
+                  @click=${this.isPlainRole || this.isDisabled ? void 0 : this._onEmptyAction}
+                >
+                  ${this.emptyActionLabel}
+                </p>
+              ` : html`
+                <div
+                  class="flex w-full justify-between items-center ${this.isDisabled ? "opacity-50 cursor-not-allowed" : ""}"
+                  @click=${this.isDisabled ? void 0 : this._onToggle}
+                >
+                  <span class="text-[var(--axebow-tertiary)]">${this.selected ?? this.emptyLabel}</span>
+                  <div class="flex items-center gap-2">
+                    ${this.showAttention ? html`<p class="text-[var(--axebow-error)] m-0 text-xs">${this.attentionLabel}</p>` : ""}
+                    <axebow-icon iconName="chevron_right" rotate="90" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
+                  </div>
+                </div>
+              `}
+        </div>
+
+        <div class="${this.opened ? "" : "hidden"} absolute top-full left-0 right-0 z-10 flex flex-col bg-white rounded-b-lg border border-[var(--axebow-light-gray)] shadow-[2px_2px_25px_0px_rgba(0,0,0,0.1)] max-h-40 overflow-y-auto">
+          <p class="w-full p-2 cursor-pointer m-0 hover:bg-[var(--axebow-light-gray)]" @click=${() => this._onSelect(null)}>${this.emptyLabel}</p>
+          ${this.items.map((item) => html`
+              <aurora-card-filter-item
+                .name=${item.name}
+                .showAttention=${item.showAttention}
+                @item-select=${(e) => this._onSelect(e.detail.name)}
+              ></aurora-card-filter-item>
+            `)}
+        </div>
+      </div>
+    `;
+	}
+	_onToggle() {
+		this.dispatchEvent(new CustomEvent("toggle-open", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onSelect(name) {
+		this.dispatchEvent(new CustomEvent("filter-select", {
+			detail: { name },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onEmptyAction() {
+		this.dispatchEvent(new CustomEvent("empty-action-click", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: Array })], AuroraCardFilter.prototype, "items", void 0);
+__decorate([property({ type: String })], AuroraCardFilter.prototype, "selected", void 0);
+__decorate([property({ type: String })], AuroraCardFilter.prototype, "emptyLabel", void 0);
+__decorate([property({ type: String })], AuroraCardFilter.prototype, "emptyActionLabel", void 0);
+__decorate([property({ type: String })], AuroraCardFilter.prototype, "attentionLabel", void 0);
+__decorate([property({ type: Boolean })], AuroraCardFilter.prototype, "showAttention", void 0);
+__decorate([property({ type: Boolean })], AuroraCardFilter.prototype, "opened", void 0);
+__decorate([property({ type: Boolean })], AuroraCardFilter.prototype, "isPlainRole", void 0);
+__decorate([property({ type: Boolean })], AuroraCardFilter.prototype, "isDisabled", void 0);
+AuroraCardFilter = __decorate([customElement("aurora-card-filter")], AuroraCardFilter);
+//#endregion
+//#region src/components/cards/parts/aurora-card-attention-banner.ts
+var AuroraCardAttentionBanner = class AuroraCardAttentionBanner extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.cardType = "account";
+		this.tableStats = [];
+		this.threshold = 90;
+		this.isPlainRole = false;
+		this.invalidCredentials = false;
+		this.manageLabel = "Manage";
+		this.askOwnerLabel = "Ask your owner";
+		this.invalidCredsLabel = "Invalid credentials.";
+		this.limitReachedLabel = "Limit reached.";
+		this.andLabel = "and";
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`
+      :host { display: block; }
+      .error-bg { background-color: color-mix(in srgb, var(--axebow-error) 10%, white); }
+    `];
+	}
+	_getExceeded() {
+		const primary = this.tableStats.slice(0, 3).map((r) => r.title);
+		return this.tableStats.filter((s) => primary.includes(s.title) && s.percentage >= this.threshold).map((s) => s.title);
+	}
+	_formatList(resources) {
+		if (resources.length === 1) return resources[0];
+		if (resources.length === 2) return `${resources[0]} ${this.andLabel} ${resources[1]}`;
+		return `${resources.slice(0, -1).join(", ")} ${this.andLabel} ${resources[resources.length - 1]}`;
+	}
+	render() {
+		const exceeded = this._getExceeded();
+		if (exceeded.length === 0 && !this.invalidCredentials) return html``;
+		return html`
+      <div class="error-bg flex flex-wrap items-center justify-center gap-1 w-full px-1 text-center">
+        ${this.isPlainRole ? html`<span class="text-[var(--axebow-error)]">${this.askOwnerLabel}</span>` : html`
+              <p class="text-[var(--axebow-error)] m-0">
+                ${this.invalidCredentials ? this.invalidCredsLabel : `${this.limitReachedLabel} ${this._formatList(exceeded)}.`}
+                <span class="text-[var(--axebow-error)] cursor-pointer" @click=${this._onManage}>
+                  ${this.manageLabel}
+                  <axebow-icon iconName="arrow_forward" iconColor="var(--axebow-error)" size="small"></axebow-icon>
+                </span>
+              </p>
+            `}
+      </div>
+    `;
+	}
+	_onManage() {
+		this.dispatchEvent(new CustomEvent("manage-click", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: String })], AuroraCardAttentionBanner.prototype, "cardType", void 0);
+__decorate([property({ type: Array })], AuroraCardAttentionBanner.prototype, "tableStats", void 0);
+__decorate([property({ type: Number })], AuroraCardAttentionBanner.prototype, "threshold", void 0);
+__decorate([property({ type: Boolean })], AuroraCardAttentionBanner.prototype, "isPlainRole", void 0);
+__decorate([property({ type: Boolean })], AuroraCardAttentionBanner.prototype, "invalidCredentials", void 0);
+__decorate([property({ type: String })], AuroraCardAttentionBanner.prototype, "manageLabel", void 0);
+__decorate([property({ type: String })], AuroraCardAttentionBanner.prototype, "askOwnerLabel", void 0);
+__decorate([property({ type: String })], AuroraCardAttentionBanner.prototype, "invalidCredsLabel", void 0);
+__decorate([property({ type: String })], AuroraCardAttentionBanner.prototype, "limitReachedLabel", void 0);
+__decorate([property({ type: String })], AuroraCardAttentionBanner.prototype, "andLabel", void 0);
+AuroraCardAttentionBanner = __decorate([customElement("aurora-card-attention-banner")], AuroraCardAttentionBanner);
+//#endregion
+//#region src/components/cards/parts/aurora-card-action-banner.ts
+var AuroraCardActionBanner = class AuroraCardActionBanner extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "View details";
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`
+      :host { display: block; }
+      .tertiary-bg { background-color: color-mix(in srgb, var(--axebow-tertiary) 10%, white); }
+      axebow-button::part(label) { color: var(--axebow-tertiary); font-weight: 600; display: flex; align-items: center; gap: 2px; }
+      axebow-button::part(base) { padding: 0; height: auto; min-height: unset; }
+    `];
+	}
+	render() {
+		return html`
+      <div class="tertiary-bg flex items-center justify-center gap-1 w-full px-3 text-sm text-center">
+        <axebow-button variant="text" size="small" @click=${this._onClick}>
+          ${this.label}
+          <axebow-icon iconName="arrow_forward" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
+        </axebow-button>
+      </div>
+    `;
+	}
+	_onClick() {
+		this.dispatchEvent(new CustomEvent("action-click", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: String })], AuroraCardActionBanner.prototype, "label", void 0);
+AuroraCardActionBanner = __decorate([customElement("aurora-card-action-banner")], AuroraCardActionBanner);
+//#endregion
+//#region src/components/cards/parts/aurora-card-resource-table.ts
+var AuroraCardResourceTable = class AuroraCardResourceTable extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.rows = [];
+		this.attentionThreshold = 90;
+		this.cardType = "account";
+		this.isPlainRole = false;
+		this.showActionBanner = false;
+		this.showWarningBanner = false;
+		this.manageLabel = "Manage";
+		this.askOwnerLabel = "Ask your owner";
+		this.invalidCredsLabel = "Invalid credentials.";
+		this.limitReachedLabel = "Limit reached.";
+		this.andLabel = "and";
+		this.actionBannerLabel = "";
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
+	}
+	_hasAttention() {
+		const primary = this.rows.slice(0, 3).map((r) => r.title);
+		return this.rows.some((s) => primary.includes(s.title) && s.percentage >= this.attentionThreshold);
+	}
+	render() {
+		const showWarning = !this.isPlainRole && this.showWarningBanner;
+		const showAttention = !this.isPlainRole && !showWarning && this.showActionBanner && this._hasAttention();
+		const showAction = !this.isPlainRole && !showWarning && this.showActionBanner && !this._hasAttention();
+		const visibleRows = this.rows.filter((r) => !r.hidden);
+		const lastVisible = visibleRows[visibleRows.length - 1];
+		return html`
+      <div>
+        <div class="flex border-b border-[var(--axebow-light-gray)]">
+          <!-- Icon + title -->
+          <div class="flex flex-col justify-between">
+            ${this.rows.map((stat, i) => html`
+              <div class="flex items-center w-full px-2 h-8 gap-2 ${!stat.hidden && stat !== lastVisible ? "border-b border-[var(--axebow-light-gray)]" : ""}">
+                ${!stat.hidden ? html`
+                  <div class="flex items-center gap-2 ${stat.isSecondary ? "ml-2" : ""}">
+                    <axebow-icon iconName=${stat.icon} size="small" rotate=${stat.iconRotation ?? 0}></axebow-icon>
+                    <span class="text-xs ${stat.isSecondary ? "" : "font-semibold"}">${stat.title}</span>
+                  </div>
+                ` : ""}
+              </div>
+            `)}
+          </div>
+
+          <!-- Current value -->
+          <div class="flex flex-col justify-between">
+            ${this.rows.map((stat, i) => html`
+              <div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${!stat.hidden && stat !== lastVisible ? "border-b border-[var(--axebow-light-gray)]" : ""}">
+                ${!stat.hidden ? html`
+                  <p class="${stat.isSecondary ? "font-normal" : "font-semibold"} m-0">${stat.value ?? "-.-"}</p>
+                ` : ""}
+              </div>
+            `)}
+          </div>
+
+          <!-- Progress bar -->
+          <div class="flex flex-1 flex-col justify-between">
+            ${this.rows.map((stat, i) => html`
+              <div class="flex items-center justify-end w-full px-2 h-8 ${!stat.hidden && stat !== lastVisible ? "border-b border-[var(--axebow-light-gray)]" : ""}">
+                ${!stat.hidden ? html`
+                  <div class="h-2 w-full bg-[var(--axebow-light-gray)] rounded-md relative overflow-hidden">
+                    <div
+                      class="absolute h-full ${stat.percentage >= this.attentionThreshold ? "bg-[var(--axebow-error)]" : "bg-[var(--axebow-gray)]"}"
+                      style="width:${stat.percentage}%;"
+                    ></div>
+                  </div>
+                ` : ""}
+              </div>
+            `)}
+          </div>
+
+          <!-- Max value -->
+          <div class="flex flex-col justify-between">
+            ${this.rows.map((stat, i) => html`
+              <div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${!stat.hidden && stat !== lastVisible ? "border-b border-[var(--axebow-light-gray)]" : ""}">
+                ${!stat.hidden ? html`
+                  <p class="${stat.isSecondary ? "font-normal" : "font-semibold"} m-0">
+                    ${stat.maxValue ?? "-.-"}<span class="font-normal">${stat.tagValue ?? ""}</span>
+                  </p>
+                ` : ""}
+              </div>
+            `)}
+          </div>
+        </div>
+
+        ${showWarning ? html`<aurora-card-attention-banner
+              .invalidCredentials=${true}
+              .isPlainRole=${this.isPlainRole}
+              .manageLabel=${this.manageLabel}
+              .askOwnerLabel=${this.askOwnerLabel}
+              .invalidCredsLabel=${this.invalidCredsLabel}
+              .limitReachedLabel=${this.limitReachedLabel}
+              .andLabel=${this.andLabel}
+            ></aurora-card-attention-banner>` : showAttention ? html`<aurora-card-attention-banner
+                .cardType=${this.cardType}
+                .tableStats=${this.rows}
+                .threshold=${this.attentionThreshold}
+                .isPlainRole=${this.isPlainRole}
+                .manageLabel=${this.manageLabel}
+                .askOwnerLabel=${this.askOwnerLabel}
+                .invalidCredsLabel=${this.invalidCredsLabel}
+                .limitReachedLabel=${this.limitReachedLabel}
+                .andLabel=${this.andLabel}
+              ></aurora-card-attention-banner>` : showAction ? html`<aurora-card-action-banner .label=${this.actionBannerLabel} @action-click=${() => this.dispatchEvent(new CustomEvent("action-click", {
+			bubbles: true,
+			composed: true
+		}))}></aurora-card-action-banner>` : ""}
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Array })], AuroraCardResourceTable.prototype, "rows", void 0);
+__decorate([property({ type: Number })], AuroraCardResourceTable.prototype, "attentionThreshold", void 0);
+__decorate([property({ type: String })], AuroraCardResourceTable.prototype, "cardType", void 0);
+__decorate([property({ type: Boolean })], AuroraCardResourceTable.prototype, "isPlainRole", void 0);
+__decorate([property({ type: Boolean })], AuroraCardResourceTable.prototype, "showActionBanner", void 0);
+__decorate([property({ type: Boolean })], AuroraCardResourceTable.prototype, "showWarningBanner", void 0);
+__decorate([property({ type: String })], AuroraCardResourceTable.prototype, "manageLabel", void 0);
+__decorate([property({ type: String })], AuroraCardResourceTable.prototype, "askOwnerLabel", void 0);
+__decorate([property({ type: String })], AuroraCardResourceTable.prototype, "invalidCredsLabel", void 0);
+__decorate([property({ type: String })], AuroraCardResourceTable.prototype, "limitReachedLabel", void 0);
+__decorate([property({ type: String })], AuroraCardResourceTable.prototype, "andLabel", void 0);
+__decorate([property({ type: String })], AuroraCardResourceTable.prototype, "actionBannerLabel", void 0);
+AuroraCardResourceTable = __decorate([customElement("aurora-card-resource-table")], AuroraCardResourceTable);
+//#endregion
+//#region src/components/cards/parts/aurora-card-status-bar.ts
+var AuroraCardStatusBar = class AuroraCardStatusBar extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.isFreeIaaS = false;
+		this.isPlainRole = false;
+		this.moreActionsOpen = false;
+		this.moreActionsOptions = [];
+		this.closeLabel = "Close";
+		this.moreActionsLabel = "More";
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
+	}
+	render() {
+		return html`
+      <div class="flex justify-between items-center relative h-6 gap-2 text-xs">
+        <div class="flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis"><slot></slot></div>
+        ${!this.isFreeIaaS && !this.isPlainRole && this.moreActionsOptions.length > 0 ? html`
+              <aurora-more-actions
+                class="shrink-0 mr-2"
+                placement="top"
+                .open=${this.moreActionsOpen}
+                .options=${this.moreActionsOptions}
+                .closeLabel=${this.closeLabel}
+                .moreActionsLabel=${this.moreActionsLabel}
+                @toggled=${this._onToggled}
+              ></aurora-more-actions>
+            ` : ""}
+      </div>
+    `;
+	}
+	_onToggled(e) {
+		this.dispatchEvent(new CustomEvent("more-actions-toggled", {
+			detail: { open: e.detail.open },
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: Boolean })], AuroraCardStatusBar.prototype, "isFreeIaaS", void 0);
+__decorate([property({ type: Boolean })], AuroraCardStatusBar.prototype, "isPlainRole", void 0);
+__decorate([property({ type: Boolean })], AuroraCardStatusBar.prototype, "moreActionsOpen", void 0);
+__decorate([property({ type: Array })], AuroraCardStatusBar.prototype, "moreActionsOptions", void 0);
+__decorate([property({ type: String })], AuroraCardStatusBar.prototype, "closeLabel", void 0);
+__decorate([property({ type: String })], AuroraCardStatusBar.prototype, "moreActionsLabel", void 0);
+AuroraCardStatusBar = __decorate([customElement("aurora-card-status-bar")], AuroraCardStatusBar);
+//#endregion
+//#region src/components/cards/aurora-base-card.ts
+var AuroraBaseCard = class AuroraBaseCard extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.cardType = "account";
+		this.name = "";
+		this.logoSrc = null;
+		this.tenantOrAccount = "";
+		this.badge = "none";
+		this.subtitle = "";
+		this.mainStats = [];
+		this.compact = false;
+		this.tableStats = [];
+		this.attentionThreshold = 90;
+		this.filterItems = [];
+		this.selected = null;
+		this.filterOpened = false;
+		this.emptyLabel = "";
+		this.emptyActionLabel = "";
+		this.attentionLabel = "Attention needed";
+		this.showAttention = false;
+		this.isPlainRole = false;
+		this.isDeleting = false;
+		this.isDisabled = false;
+		this.showActionBanner = false;
+		this.showWarningBanner = false;
+		this.manageLabel = "Manage";
+		this.askOwnerLabel = "Ask your owner";
+		this.invalidCredsLabel = "Invalid credentials.";
+		this.limitReachedLabel = "Limit reached.";
+		this.andLabel = "and";
+		this.actionBannerLabel = "";
+		this.moreActionsOpen = false;
+		this.moreActionsOptions = [];
+		this.isFreeIaaS = false;
+		this.closeLabel = "Close";
+		this.moreActionsLabel = "More";
+		this.freeIaasLabel = "Free IaaS";
+		this.freeIaasTitle = "Free Infrastructure";
+		this.freeIaasDesc = "This environment uses free infrastructure.";
+		this.haLabel = "Highly Available";
+		this.haTitle = "High Availability enabled";
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`
+      :host { display: block; width: 450px; max-width: 100%; }
+      sl-badge::part(base) { background-color: var(--axebow-secondary); color: white; }
+      sl-dialog::part(panel) { width: 35vw; }
+      sl-dialog::part(body) { padding-top: 0; }
+      sl-alert::part(base) { border-top: 2px solid var(--axebow-error); }
+      sl-range, sl-range:hover {
+        --sl-color-primary-600: var(--axebow-tertiary);
+        --sl-color-primary-500: var(--axebow-tertiary);
+      }
+    `];
+	}
+	render() {
+		return html`
+      <div class="w-full bg-[var(--axebow-white)] rounded-lg px-2 pt-2 pb-4 flex flex-col justify-between gap-2 h-full transition-shadow duration-200 ease-in-out hover:shadow-[0_4px_12px_0_rgba(13,24,33,0.08)]">
+        <div class="flex flex-col gap-2">
+          <aurora-card-header
+            .cardType=${this.cardType}
+            .logoSrc=${this.logoSrc}
+            .tenantOrAccount=${this.tenantOrAccount}
+            .name=${this.name}
+            .badge=${this.badge}
+            .subtitle=${this.subtitle}
+            .freeIaasLabel=${this.freeIaasLabel}
+            .freeIaasTitle=${this.freeIaasTitle}
+            .freeIaasDesc=${this.freeIaasDesc}
+            .haLabel=${this.haLabel}
+            .haTitle=${this.haTitle}
+          >
+            <slot slot="subtitle-tooltip" name="subtitle-tooltip"></slot>
+          </aurora-card-header>
+
+          <div class="w-full px-2 flex flex-col gap-2">
+            <aurora-card-stats-row
+              .stats=${this.mainStats}
+              .compact=${this.compact}
+              @stat-label-click=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("stat-label-click", {
+			detail: e.detail,
+			bubbles: true,
+			composed: true
+		}))}
+            ></aurora-card-stats-row>
+
+            <div class="w-full h-full border border-[var(--axebow-light-gray)] rounded-md">
+              <aurora-card-filter
+                .items=${this.filterItems}
+                .selected=${this.selected}
+                .emptyLabel=${this.emptyLabel}
+                .emptyActionLabel=${this.emptyActionLabel}
+                .attentionLabel=${this.attentionLabel}
+                .showAttention=${this.showAttention}
+                .opened=${this.filterOpened}
+                .isPlainRole=${this.isPlainRole}
+                .isDisabled=${this.isDeleting || this.isDisabled}
+                @filter-select=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("filter-select", {
+			detail: e.detail,
+			bubbles: true,
+			composed: true
+		}))}
+                @toggle-open=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("toggle-filter", {
+			bubbles: true,
+			composed: true
+		}))}
+                @empty-action-click=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("empty-action-click", {
+			bubbles: true,
+			composed: true
+		}))}
+              ></aurora-card-filter>
+
+              <aurora-card-resource-table
+                .rows=${this.tableStats}
+                .attentionThreshold=${this.attentionThreshold}
+                .cardType=${this.cardType}
+                .isPlainRole=${this.isPlainRole}
+                .showActionBanner=${this.showActionBanner}
+                .showWarningBanner=${this.showWarningBanner}
+                .manageLabel=${this.manageLabel}
+                .askOwnerLabel=${this.askOwnerLabel}
+                .invalidCredsLabel=${this.invalidCredsLabel}
+                .limitReachedLabel=${this.limitReachedLabel}
+                .andLabel=${this.andLabel}
+                .actionBannerLabel=${this.actionBannerLabel}
+                @manage-click=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("manage-click", {
+			bubbles: true,
+			composed: true
+		}))}
+                @action-click=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("action-click", {
+			bubbles: true,
+			composed: true
+		}))}
+              ></aurora-card-resource-table>
+            </div>
+
+            <slot name="extra-features"></slot>
+          </div>
+        </div>
+
+        <aurora-card-status-bar
+          class="mb-1 pl-2"
+          .isFreeIaaS=${this.isFreeIaaS}
+          .isPlainRole=${this.isPlainRole}
+          .moreActionsOpen=${this.moreActionsOpen}
+          .moreActionsOptions=${this.moreActionsOptions}
+          .closeLabel=${this.closeLabel}
+          .moreActionsLabel=${this.moreActionsLabel}
+          @more-actions-toggled=${(e) => this.dispatchEvent(new CustomEvent("more-actions-toggled", {
+			detail: e.detail,
+			bubbles: true,
+			composed: true
+		}))}
+        >
+          <slot name="status-footer"></slot>
+        </aurora-card-status-bar>
+
+        <slot name="dialogs"></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "cardType", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "name", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "logoSrc", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "tenantOrAccount", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "badge", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "subtitle", void 0);
+__decorate([property({ type: Array })], AuroraBaseCard.prototype, "mainStats", void 0);
+__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "compact", void 0);
+__decorate([property({ type: Array })], AuroraBaseCard.prototype, "tableStats", void 0);
+__decorate([property({ type: Number })], AuroraBaseCard.prototype, "attentionThreshold", void 0);
+__decorate([property({ type: Array })], AuroraBaseCard.prototype, "filterItems", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "selected", void 0);
+__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "filterOpened", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "emptyLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "emptyActionLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "attentionLabel", void 0);
+__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "showAttention", void 0);
+__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isPlainRole", void 0);
+__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isDeleting", void 0);
+__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isDisabled", void 0);
+__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "showActionBanner", void 0);
+__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "showWarningBanner", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "manageLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "askOwnerLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "invalidCredsLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "limitReachedLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "andLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "actionBannerLabel", void 0);
+__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "moreActionsOpen", void 0);
+__decorate([property({ type: Array })], AuroraBaseCard.prototype, "moreActionsOptions", void 0);
+__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isFreeIaaS", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "closeLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "moreActionsLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "freeIaasLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "freeIaasTitle", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "freeIaasDesc", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "haLabel", void 0);
+__decorate([property({ type: String })], AuroraBaseCard.prototype, "haTitle", void 0);
+AuroraBaseCard = __decorate([customElement("aurora-base-card")], AuroraBaseCard);
+//#endregion
+//#region src/components/cards/aurora-runtime-card.ts
+var AuroraRuntimeCard = class AuroraRuntimeCard extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "";
+		this.logo = "";
+		this.revisions = [];
+		this.displayedRevision = "";
+		this.lastDeployed = "";
+		this.isDeployed = false;
+		this.tableStats = [];
+		this.attentionThreshold = 90;
+		this.filterOpened = false;
+		this.filterDisplayText = "";
+		this.filterRoles = [];
+		this.showAttention = false;
+		this.borderColor = "";
+		this.statusCode = "";
+		this.statusMessage = "";
+		this.isRemoving = false;
+		this.deployedLabel = "Deployed";
+		this.allLabel = "All Roles & Instances";
+		this.attentionLabel = "Attention needed";
+		this.serviceDetailLabel = "Service detail";
+		this.manageLabel = "Manage";
+		this.askOwnerLabel = "Ask your owner";
+		this.invalidCredsLabel = "Invalid credentials.";
+		this.limitReachedLabel = "Limit reached.";
+		this.andLabel = "and";
+	}
+	static {
+		this.styles = [unsafeCSS(tailwind_default), css`
+      :host { display: block; width: 380px; height: 417px; max-width: 100%; }
+
+      .revision-wrap sl-select {
+        --sl-input-background-color: transparent;
+        --sl-input-border-color: transparent;
+        border: none;
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        min-width: 0;
+        width: 100% !important;
+      }
+      .revision-wrap sl-select::part(base) {
+        border: none;
+        background-color: transparent;
+        padding: 0;
+        min-width: 0;
+        display: inline-block;
+      }
+      sl-select::part(display-input) { padding: 0 8px; }
+      sl-select::part(combobox) { padding: 0; }
+      sl-select sl-option[checked] .revision-ts,
+      sl-select sl-option[current] .revision-ts,
+      sl-select sl-option[aria-selected="true"] .revision-ts { color: white !important; }
+      sl-tooltip::part(base) { max-width: none; white-space: normal; word-break: break-word; }
+      sl-dialog::part(panel) { width: 35vw; min-width: 400px; }
+      sl-dialog::part(body) { padding-top: 0; }
+      .deploy-time {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    `];
+	}
+	render() {
+		return html`
+      <div
+        class="w-full h-full bg-[var(--axebow-white)] rounded-lg px-2 pt-2 pb-4 flex flex-col justify-between gap-2 box-border border-t-4 transition-shadow duration-200 ease-in-out hover:shadow-[0_4px_12px_0_rgba(13,24,33,0.08)] ${this.isRemoving ? "pointer-events-none cursor-not-allowed grayscale" : ""}"
+        style="border-top-color:${this.borderColor};"
+        ?inert=${this.isRemoving}
+      >
+        <div class="flex flex-col gap-2">
+          ${this._renderHeader()}
+          <div class="w-full px-2 flex flex-col gap-2">
+            ${this._renderDeployInfo()}
+            ${this._renderTable()}
+          </div>
+        </div>
+        ${this._renderFooter()}
+        <slot name="dialogs"></slot>
+      </div>
+    `;
+	}
+	_renderHeader() {
+		return html`
+      <div class="w-full bg-[var(--axebow-anti-flash-white)] rounded-md py-2 px-3 h-16 flex items-center gap-3">
+        ${this.logo ? html`<div class="h-10 w-10 flex items-center justify-center shrink-0"><img src=${this.logo} class="max-h-full max-w-full object-contain" /></div>` : ""}
+        <div class="flex flex-col flex-1 min-w-0 justify-center">
+          <div class="flex justify-between items-center">
+            <span class="font-bold text-xl text-[var(--axebow-primary)] leading-snug">${this.name}</span>
+          </div>
+          <div class="revision-wrap italic text-[var(--axebow-primary)] flex items-center">
+            <sl-select style="width:100%;" value=${this.displayedRevision} @sl-change=${this._onRevisionChange}>
+              ${this.revisions.map((rev) => html`<sl-option value=${rev.id}>${this._formatRevision(rev.id)}</sl-option>`)}
+            </sl-select>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	_renderDeployInfo() {
+		return html`
+      <div class="flex flex-row justify-between items-center min-h-10 max-h-10 overflow-hidden">
+        <span class="deploy-time text-[var(--axebow-secondary)]"><slot name="time-elapsed"></slot></span>
+        ${this.isDeployed ? html`<span class="text-[var(--axebow-secondary)] border-2 border-[var(--axebow-secondary)] rounded-lg py-0.5 px-1.5 whitespace-nowrap text-xs">${this.deployedLabel}</span>` : ""}
+      </div>
+    `;
+	}
+	_renderTable() {
+		return html`
+      <div class="w-full border border-[var(--axebow-light-gray)] rounded-md">
+        <div class="relative">
+          <div class="flex justify-between items-center border-b border-[var(--axebow-light-gray)] w-full px-2 cursor-pointer h-7" @click=${this._onToggleFilter}>
+            <span class="text-[var(--axebow-tertiary)]">${this.filterDisplayText || this.allLabel}</span>
+            <div class="flex items-center gap-2">
+              ${this.showAttention ? html`<p class="text-[var(--axebow-error)] m-0 text-xs">${this.attentionLabel}</p>` : ""}
+              <axebow-icon iconName="chevron_right" rotate="90" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
+            </div>
+          </div>
+
+          <div class="${this.filterOpened ? "" : "hidden"} absolute top-full left-0 right-0 z-10 flex flex-col bg-white rounded-b-lg border border-[var(--axebow-light-gray)] shadow-[2px_2px_25px_0px_rgba(0,0,0,0.1)] max-h-40 overflow-y-auto">
+            <p class="w-full p-2 cursor-pointer m-0 hover:bg-[var(--axebow-light-gray)]" @click=${() => this._onFilterChange("", "all")}>${this.allLabel}</p>
+            ${this.filterRoles.map((role) => html`
+                <div
+                  class="w-full py-1 px-2 flex justify-between items-center border-t border-[var(--axebow-light-gray)] cursor-pointer hover:bg-[var(--axebow-light-gray)]"
+                  @click=${() => this._onFilterChange(role.name, "role")}
+                >
+                  <div class="flex items-center gap-2">
+                    ${role.logo ? html`<img src=${role.logo} class="w-5 h-5" />` : ""}
+                    <p class="m-0">${role.name}</p>
+                  </div>
+                </div>
+                ${role.instances.map((inst) => html`
+                    <div
+                      class="w-full py-1 px-2 pl-6 flex justify-between items-center border-t border-[var(--axebow-light-gray)] cursor-pointer hover:bg-[var(--axebow-light-gray)]"
+                      @click=${() => this._onFilterChange(inst.name, "instance")}
+                    >
+                      <div class="flex items-center gap-2">
+                        <axebow-icon iconName="subdirectory_arrow_right" size="small"></axebow-icon>
+                        <p class="m-0">${inst.name}</p>
+                      </div>
+                      ${inst.needsAttention ? html`<axebow-icon iconName="warning" iconColor="var(--axebow-error)" size="small"></axebow-icon>` : ""}
+                    </div>
+                  `)}
+              `)}
+          </div>
+        </div>
+
+        <aurora-card-resource-table
+          .rows=${this.tableStats}
+          .attentionThreshold=${this.attentionThreshold}
+          .manageLabel=${this.manageLabel}
+          .askOwnerLabel=${this.askOwnerLabel}
+          .invalidCredsLabel=${this.invalidCredsLabel}
+          .limitReachedLabel=${this.limitReachedLabel}
+          .andLabel=${this.andLabel}
+        ></aurora-card-resource-table>
+      </div>
+    `;
+	}
+	_renderFooter() {
+		return html`
+      <div class="flex justify-between items-center px-2 gap-4 h-10 overflow-hidden mb-1">
+        <div class="flex items-center gap-1 min-w-0 flex-1">
+          ${this.borderColor === "var(--axebow-gray)" ? html`<sl-spinner style="--indicator-color:${this.borderColor};"></sl-spinner>` : ""}
+          <p class="font-bold text-xs m-0 line-clamp-1" style="color:${this.borderColor};" title=${this.statusCode}>${this.statusCode}</p>
+          ${this.statusCode ? html`
+                <sl-tooltip content=${this.statusMessage}>
+                  <axebow-icon class="cursor-pointer shrink-0" iconColor=${this.borderColor} iconName="info" size="small"></axebow-icon>
+                </sl-tooltip>
+              ` : ""}
+        </div>
+        <axebow-button variant="text" size="medium" @click=${this._onServiceDetail}>${this.serviceDetailLabel}</axebow-button>
+      </div>
+    `;
+	}
+	_formatRevision(id) {
+		if (!id) return "";
+		const parts = id.split("/");
+		return parts[parts.length - 1] ?? id;
+	}
+	_onRevisionChange(e) {
+		const revision = e.target.value;
+		this.dispatchEvent(new CustomEvent("revision-change", {
+			detail: { revision },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onToggleFilter() {
+		this.dispatchEvent(new CustomEvent("toggle-filter", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onFilterChange(selected, type) {
+		this.dispatchEvent(new CustomEvent("filter-change", {
+			detail: {
+				selected,
+				type
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onServiceDetail() {
+		this.dispatchEvent(new CustomEvent("service-detail-click", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "name", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "logo", void 0);
+__decorate([property({ type: Array })], AuroraRuntimeCard.prototype, "revisions", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "displayedRevision", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "lastDeployed", void 0);
+__decorate([property({ type: Boolean })], AuroraRuntimeCard.prototype, "isDeployed", void 0);
+__decorate([property({ type: Array })], AuroraRuntimeCard.prototype, "tableStats", void 0);
+__decorate([property({ type: Number })], AuroraRuntimeCard.prototype, "attentionThreshold", void 0);
+__decorate([property({ type: Boolean })], AuroraRuntimeCard.prototype, "filterOpened", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "filterDisplayText", void 0);
+__decorate([property({ type: Array })], AuroraRuntimeCard.prototype, "filterRoles", void 0);
+__decorate([property({ type: Boolean })], AuroraRuntimeCard.prototype, "showAttention", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "borderColor", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "statusCode", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "statusMessage", void 0);
+__decorate([property({ type: Boolean })], AuroraRuntimeCard.prototype, "isRemoving", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "deployedLabel", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "allLabel", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "attentionLabel", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "serviceDetailLabel", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "manageLabel", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "askOwnerLabel", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "invalidCredsLabel", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "limitReachedLabel", void 0);
+__decorate([property({ type: String })], AuroraRuntimeCard.prototype, "andLabel", void 0);
+AuroraRuntimeCard = __decorate([customElement("aurora-runtime-card")], AuroraRuntimeCard);
+//#endregion
+export { AuroraBaseCard, AuroraButton, AuroraCardActionBanner, AuroraCardAttentionBanner, AuroraCardFilter, AuroraCardFilterItem, AuroraCardHeader, AuroraCardResourceTable, AuroraCardStatItem, AuroraCardStatsRow, AuroraCardStatusBar, AuroraMoreActions, AuroraRuntimeCard, STATUS_COLORS, auroraTheme };
+
 //# sourceMappingURL=index.js.map