@api-client/ui 0.5.57 → 0.6.0

package/build/src/modeling/internals/styles/DomainTemplateBrowser.styles.js

@@ -0,0 +1,553 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    overflow-y: auto;
+    max-height: 75vh;
+  }
+
+  .search {
+    width: 100%;
+  }
+
+  .empty-list {
+    padding: 12px 0;
+  }
+
+  .controls {
+    display: flex;
+    gap: 12px;
+    padding-top: 12px;
+    flex-direction: column;
+
+    .filters {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .top-row {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .search-group {
+      flex: 1;
+      min-width: 300px;
+    }
+
+    .sort-group {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+
+  .category-tabs {
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    padding-bottom: 8px;
+  }
+
+  .templates-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+    padding: 20px 0;
+  }
+
+  .template-card {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 20px;
+    background: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--md-sys-shape-corner-medium);
+  }
+
+  .template-description {
+    color: var(--md-sys-color-on-surface-variant);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin: 0;
+  }
+
+  .template-stats {
+    display: flex;
+    gap: 16px;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 14px;
+  }
+
+  .stat {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .template-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    flex: 1;
+    align-items: flex-end;
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    padding: 60px 20px;
+    text-align: center;
+  }
+
+  .empty-icon {
+    font-size: 64px;
+    color: var(--md-sys-color-outline);
+    opacity: 0.6;
+    width: 64px;
+    height: 64px;
+  }
+
+  .empty-title {
+    color: var(--md-sys-color-on-surface);
+    margin: 0;
+  }
+
+  .empty-description {
+    color: var(--md-sys-color-on-surface-variant);
+    margin: 0;
+    max-width: 400px;
+  }
+
+  /* Preview Mode Styles */
+  .preview-layout {
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    gap: 24px;
+    height: 100%;
+  }
+
+  .preview-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background: var(--md-sys-color-surface-variant);
+    border-radius: var(--md-sys-shape-corner-large);
+    padding: 20px;
+  }
+
+  .preview-header {
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    padding-bottom: 16px;
+  }
+
+  .compact-template-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border-radius: var(--md-sys-shape-corner-medium);
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background: var(--md-sys-color-surface);
+    }
+
+    &.selected {
+      background: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  }
+
+  .compact-icon {
+    font-size: 20px;
+  }
+
+  .compact-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .compact-title {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1.2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .compact-category {
+    font-size: 12px;
+    opacity: 0.7;
+  }
+
+  .preview-main {
+    background: var(--md-sys-color-surface);
+    border-radius: var(--md-sys-shape-corner-large);
+    overflow-y: auto;
+  }
+
+  .template-details {
+    padding: 24px;
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .template-details-header {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 32px;
+  }
+
+  .template-details-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .template-details-title {
+    margin: 0 0 8px 0;
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .template-details-description {
+    margin: 0 0 16px 0;
+    color: var(--md-sys-color-on-surface-variant);
+    line-height: 1.5;
+  }
+
+  .template-metadata {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .metadata-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .metadata-label {
+    font-size: 12px;
+    color: var(--md-sys-color-on-surface-variant);
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+
+  .metadata-value {
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .template-tags {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .template-tag {
+    padding: 4px 8px;
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+    border-radius: var(--md-sys-shape-corner-small);
+    font-size: 12px;
+  }
+
+  .template-details-actions {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .namespace-item {
+    margin-top: 12px;
+  }
+
+  .namespace-description {
+    margin: 0;
+  }
+
+  .structure-title {
+    margin: 0 0 24px 0;
+    color: var(--md-sys-color-on-surface);
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    padding-bottom: 8px;
+  }
+
+  .domain-overview {
+    margin-bottom: 32px;
+    padding: 20px;
+    background: var(--md-sys-color-surface-variant);
+    border-radius: var(--md-sys-shape-corner-medium);
+  }
+
+  .domain-name {
+    margin: 0 0 8px 0;
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .domain-description {
+    margin: 0 0 16px 0;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .domain-stats {
+    display: flex;
+    gap: 24px;
+  }
+
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .stat-value {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--md-sys-color-primary);
+  }
+
+  .models-section {
+    margin-top: 24px;
+    padding-left: 20px;
+    border-left: 1px solid var(--md-sys-color-outline-variant);
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  .domain-model-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 0;
+  }
+
+  .model-description {
+    margin: 0;
+  }
+
+  .model-entities {
+    margin-top: 20px;
+    padding-left: 20px;
+    border-left: 1px solid var(--md-sys-color-outline-variant);
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  .domain-entity {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .domain-entity:not(:last-child) {
+    border-bottom: 1px solid var(--md-sys-color-outline);
+    padding-bottom: 20px;
+  }
+
+  .entity-header {
+    padding: 8px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .entity-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .entity-name {
+    margin: 0;
+    flex: 1;
+  }
+
+  .deprecated-badge {
+    padding: 2px 6px;
+    background: var(--md-sys-color-error-container);
+    color: var(--md-sys-color-on-error-container);
+    border-radius: var(--md-sys-shape-corner-small);
+    font-size: 10px;
+    text-transform: uppercase;
+  }
+
+  .entity-description {
+    margin: 0;
+  }
+
+  .entity-semantics {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .semantics-label {
+    font-size: 12px;
+    color: var(--md-sys-color-on-surface-variant);
+    font-weight: 500;
+  }
+
+  .semantic-tag {
+    padding: 2px 6px;
+    background: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+    border-radius: var(--md-sys-shape-corner-small);
+    font-size: 10px;
+  }
+
+  .section-title {
+    margin: 0;
+    padding: 12px 0;
+  }
+
+  .properties-list,
+  .associations-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .property-item,
+  .association-item {
+    padding: 20px 0;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &.deprecated {
+      opacity: 0.6;
+      background: var(--md-sys-color-error-container);
+    }
+  }
+
+  .property-header,
+  .association-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .property-type {
+    padding: 4px 8px;
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+    border-radius: var(--md-sys-shape-corner-small);
+  }
+
+  .association-targets,
+  .association-cardinality {
+    padding: 2px 6px;
+    background: var(--md-sys-color-tertiary-container);
+    color: var(--md-sys-color-on-tertiary-container);
+    border-radius: var(--md-sys-shape-corner-small);
+    font-size: 12px;
+  }
+
+  .property-description,
+  .association-description {
+    margin: 0;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .property-badges,
+  .association-badges {
+    display: flex;
+    gap: 4px;
+    margin-top: 8px;
+    flex-wrap: wrap;
+  }
+
+  .property-badge,
+  .association-badge {
+    padding: 2px 6px;
+    background: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+    border-radius: var(--md-sys-shape-corner-small);
+  }
+
+  .property-default,
+  .property-enum {
+    margin-top: 4px;
+    font-size: 12px;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .property-default code,
+  .property-enum code {
+    background: var(--md-sys-color-surface-variant);
+    padding: 2px 4px;
+    border-radius: var(--md-sys-shape-corner-small);
+    margin-right: 8px;
+  }
+
+  .property-semantics,
+  .association-semantics {
+    display: flex;
+    gap: 4px;
+    margin-top: 8px;
+    flex-wrap: wrap;
+  }
+
+  .namespace-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 4px 0px;
+  }
+
+  @media (max-width: 768px) {
+    .templates-grid {
+      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+      gap: 16px;
+    }
+
+    .controls .top-row {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .controls .search-group {
+      min-width: unset;
+    }
+
+    .preview-layout {
+      grid-template-columns: 1fr;
+      gap: 16px;
+    }
+
+    .preview-sidebar {
+      order: 2;
+    }
+
+    .template-details-header {
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .domain-stats {
+      flex-direction: column;
+      gap: 12px;
+    }
+  }
+`;
+//# sourceMappingURL=DomainTemplateBrowser.styles.js.map

package/build/src/modeling/internals/styles/DomainTemplateBrowser.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomainTemplateBrowser.styles.js","sourceRoot":"","sources":["../../../../../src/modeling/internals/styles/DomainTemplateBrowser.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsiBjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    align-self: stretch;\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    overflow-y: auto;\n    max-height: 75vh;\n  }\n\n  .search {\n    width: 100%;\n  }\n\n  .empty-list {\n    padding: 12px 0;\n  }\n\n  .controls {\n    display: flex;\n    gap: 12px;\n    padding-top: 12px;\n    flex-direction: column;\n\n    .filters {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .top-row {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .search-group {\n      flex: 1;\n      min-width: 300px;\n    }\n\n    .sort-group {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n  }\n\n  .category-tabs {\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n    padding-bottom: 8px;\n  }\n\n  .templates-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 20px;\n    padding: 20px 0;\n  }\n\n  .template-card {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    padding: 20px;\n    background: var(--md-sys-color-surface);\n    color: var(--md-sys-color-on-surface);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: var(--md-sys-shape-corner-medium);\n  }\n\n  .template-description {\n    color: var(--md-sys-color-on-surface-variant);\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 0;\n  }\n\n  .template-stats {\n    display: flex;\n    gap: 16px;\n    color: var(--md-sys-color-on-surface-variant);\n    font-size: 14px;\n  }\n\n  .stat {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .template-actions {\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n    flex: 1;\n    align-items: flex-end;\n  }\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n    padding: 60px 20px;\n    text-align: center;\n  }\n\n  .empty-icon {\n    font-size: 64px;\n    color: var(--md-sys-color-outline);\n    opacity: 0.6;\n    width: 64px;\n    height: 64px;\n  }\n\n  .empty-title {\n    color: var(--md-sys-color-on-surface);\n    margin: 0;\n  }\n\n  .empty-description {\n    color: var(--md-sys-color-on-surface-variant);\n    margin: 0;\n    max-width: 400px;\n  }\n\n  /* Preview Mode Styles */\n  .preview-layout {\n    display: grid;\n    grid-template-columns: 300px 1fr;\n    gap: 24px;\n    height: 100%;\n  }\n\n  .preview-sidebar {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    background: var(--md-sys-color-surface-variant);\n    border-radius: var(--md-sys-shape-corner-large);\n    padding: 20px;\n  }\n\n  .preview-header {\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n    padding-bottom: 16px;\n  }\n\n  .compact-template-card {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px;\n    border-radius: var(--md-sys-shape-corner-medium);\n    cursor: pointer;\n    transition: background-color 0.2s ease-in-out;\n\n    &:hover {\n      background: var(--md-sys-color-surface);\n    }\n\n    &.selected {\n      background: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  }\n\n  .compact-icon {\n    font-size: 20px;\n  }\n\n  .compact-info {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .compact-title {\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 1.2;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .compact-category {\n    font-size: 12px;\n    opacity: 0.7;\n  }\n\n  .preview-main {\n    background: var(--md-sys-color-surface);\n    border-radius: var(--md-sys-shape-corner-large);\n    overflow-y: auto;\n  }\n\n  .template-details {\n    padding: 24px;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .template-details-header {\n    display: flex;\n    gap: 20px;\n    margin-bottom: 32px;\n  }\n\n  .template-details-info {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .template-details-title {\n    margin: 0 0 8px 0;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .template-details-description {\n    margin: 0 0 16px 0;\n    color: var(--md-sys-color-on-surface-variant);\n    line-height: 1.5;\n  }\n\n  .template-metadata {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n    margin-bottom: 16px;\n  }\n\n  .metadata-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .metadata-label {\n    font-size: 12px;\n    color: var(--md-sys-color-on-surface-variant);\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n\n  .metadata-value {\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .template-tags {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n\n  .template-tag {\n    padding: 4px 8px;\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    border-radius: var(--md-sys-shape-corner-small);\n    font-size: 12px;\n  }\n\n  .template-details-actions {\n    display: flex;\n    align-items: flex-start;\n  }\n\n  .namespace-item {\n    margin-top: 12px;\n  }\n\n  .namespace-description {\n    margin: 0;\n  }\n\n  .structure-title {\n    margin: 0 0 24px 0;\n    color: var(--md-sys-color-on-surface);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n    padding-bottom: 8px;\n  }\n\n  .domain-overview {\n    margin-bottom: 32px;\n    padding: 20px;\n    background: var(--md-sys-color-surface-variant);\n    border-radius: var(--md-sys-shape-corner-medium);\n  }\n\n  .domain-name {\n    margin: 0 0 8px 0;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .domain-description {\n    margin: 0 0 16px 0;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  .domain-stats {\n    display: flex;\n    gap: 24px;\n  }\n\n  .stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .stat-value {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--md-sys-color-primary);\n  }\n\n  .models-section {\n    margin-top: 24px;\n    padding-left: 20px;\n    border-left: 1px solid var(--md-sys-color-outline-variant);\n    display: flex;\n    flex-direction: column;\n    gap: 40px;\n  }\n\n  .domain-model-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 0;\n  }\n\n  .model-description {\n    margin: 0;\n  }\n\n  .model-entities {\n    margin-top: 20px;\n    padding-left: 20px;\n    border-left: 1px solid var(--md-sys-color-outline-variant);\n    display: flex;\n    flex-direction: column;\n    gap: 40px;\n  }\n\n  .domain-entity {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n\n  .domain-entity:not(:last-child) {\n    border-bottom: 1px solid var(--md-sys-color-outline);\n    padding-bottom: 20px;\n  }\n\n  .entity-header {\n    padding: 8px 0;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .entity-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .entity-name {\n    margin: 0;\n    flex: 1;\n  }\n\n  .deprecated-badge {\n    padding: 2px 6px;\n    background: var(--md-sys-color-error-container);\n    color: var(--md-sys-color-on-error-container);\n    border-radius: var(--md-sys-shape-corner-small);\n    font-size: 10px;\n    text-transform: uppercase;\n  }\n\n  .entity-description {\n    margin: 0;\n  }\n\n  .entity-semantics {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .semantics-label {\n    font-size: 12px;\n    color: var(--md-sys-color-on-surface-variant);\n    font-weight: 500;\n  }\n\n  .semantic-tag {\n    padding: 2px 6px;\n    background: var(--md-sys-color-primary-container);\n    color: var(--md-sys-color-on-primary-container);\n    border-radius: var(--md-sys-shape-corner-small);\n    font-size: 10px;\n  }\n\n  .section-title {\n    margin: 0;\n    padding: 12px 0;\n  }\n\n  .properties-list,\n  .associations-list {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .property-item,\n  .association-item {\n    padding: 20px 0;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n\n    &:last-child {\n      border-bottom: none;\n    }\n\n    &.deprecated {\n      opacity: 0.6;\n      background: var(--md-sys-color-error-container);\n    }\n  }\n\n  .property-header,\n  .association-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .property-type {\n    padding: 4px 8px;\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    border-radius: var(--md-sys-shape-corner-small);\n  }\n\n  .association-targets,\n  .association-cardinality {\n    padding: 2px 6px;\n    background: var(--md-sys-color-tertiary-container);\n    color: var(--md-sys-color-on-tertiary-container);\n    border-radius: var(--md-sys-shape-corner-small);\n    font-size: 12px;\n  }\n\n  .property-description,\n  .association-description {\n    margin: 0;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  .property-badges,\n  .association-badges {\n    display: flex;\n    gap: 4px;\n    margin-top: 8px;\n    flex-wrap: wrap;\n  }\n\n  .property-badge,\n  .association-badge {\n    padding: 2px 6px;\n    background: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n    border-radius: var(--md-sys-shape-corner-small);\n  }\n\n  .property-default,\n  .property-enum {\n    margin-top: 4px;\n    font-size: 12px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  .property-default code,\n  .property-enum code {\n    background: var(--md-sys-color-surface-variant);\n    padding: 2px 4px;\n    border-radius: var(--md-sys-shape-corner-small);\n    margin-right: 8px;\n  }\n\n  .property-semantics,\n  .association-semantics {\n    display: flex;\n    gap: 4px;\n    margin-top: 8px;\n    flex-wrap: wrap;\n  }\n\n  .namespace-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 4px 0px;\n  }\n\n  @media (max-width: 768px) {\n    .templates-grid {\n      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n      gap: 16px;\n    }\n\n    .controls .top-row {\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    .controls .search-group {\n      min-width: unset;\n    }\n\n    .preview-layout {\n      grid-template-columns: 1fr;\n      gap: 16px;\n    }\n\n    .preview-sidebar {\n      order: 2;\n    }\n\n    .template-details-header {\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .domain-stats {\n      flex-direction: column;\n      gap: 12px;\n    }\n  }\n`\n"]}

package/build/src/modeling/internals/styles/DomainValidationReport.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=DomainValidationReport.styles.d.ts.map

package/build/src/modeling/internals/styles/DomainValidationReport.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomainValidationReport.styles.d.ts","sourceRoot":"","sources":["../../../../../src/modeling/internals/styles/DomainValidationReport.styles.ts"],"names":[],"mappings":";AAEA,wBAwEC"}

package/build/src/modeling/internals/styles/DomainValidationReport.styles.js

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+  }
+
+  .report {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    overflow: auto;
+    flex: 1;
+  }
+
+  .validation-report-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-height: inherit;
+  }
+
+  .status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    background-color: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 14px;
+  }
+
+  .filters {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 0;
+    justify-content: space-between;
+  }
+
+  .report > li {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .report > li.warning .report-icon {
+    color: var(--md-sys-color-tertiary);
+    fill: var(--md-sys-color-tertiary);
+  }
+
+  .report > li.error .report-icon {
+    color: var(--md-sys-color-error);
+    fill: var(--md-sys-color-error);
+  }
+
+  .report-details {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+  }
+
+  .report-message {
+    color: var(--md-sys-color-on-surface);
+  }
+
+  .report-help {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+`;
+//# sourceMappingURL=DomainValidationReport.styles.js.map

package/build/src/modeling/internals/styles/DomainValidationReport.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomainValidationReport.styles.js","sourceRoot":"","sources":["../../../../../src/modeling/internals/styles/DomainValidationReport.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .report {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    overflow: auto;\n    flex: 1;\n  }\n\n  .validation-report-content {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    max-height: inherit;\n  }\n\n  .status {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-radius: 8px;\n    background-color: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n    font-size: 14px;\n  }\n\n  .filters {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 0;\n    justify-content: space-between;\n  }\n\n  .report > li {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .report > li.warning .report-icon {\n    color: var(--md-sys-color-tertiary);\n    fill: var(--md-sys-color-tertiary);\n  }\n\n  .report > li.error .report-icon {\n    color: var(--md-sys-color-error);\n    fill: var(--md-sys-color-error);\n  }\n\n  .report-details {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    flex: 1;\n  }\n\n  .report-message {\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .report-help {\n    color: var(--md-sys-color-on-surface-variant);\n  }\n`\n"]}

package/build/src/modeling/internals/styles/EditorCommon.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Common styles for API modeling editors.
+ * These styles define reusable patterns for editor containers, headers,
+ * tabs, sections, descriptions, and help elements.
+ */
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=EditorCommon.styles.d.ts.map

package/build/src/modeling/internals/styles/EditorCommon.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorCommon.styles.d.ts","sourceRoot":"","sources":["../../../../../src/modeling/internals/styles/EditorCommon.styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;;AACH,wBAqIC"}