@api-client/ui 0.6.9 → 0.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.6.9",
+  "version": "0.6.11",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/md/button/internals/group.styles.ts

@@ -4,6 +4,7 @@ import { css } from 'lit'
 export default css`
   :host {
     display: flex;
+    flex-wrap: wrap;
 
     --_gap: 8px;
     --_xs-radius: 16px;

package/src/modeling/domain-template-browser.ts

@@ -1,6 +1,7 @@
 import { customElement } from 'lit/decorators.js'
 import Element from './internals/DomainTemplateBrowser.js'
 import styles from './internals/styles/DomainTemplateBrowser.styles.js'
+import typography from '../styles/m3/typography.module.js'
 
 import '../md/button/ui-button.js'
 import '../md/button/ui-button-group.js'
@@ -9,7 +10,7 @@ import '../md/text-field/ui-outlined-text-field.js'
 
 @customElement('domain-template-browser')
 export class DomainTemplateBrowserElement extends Element {
-  static override styles = [styles]
+  static override styles = [styles, typography]
 }
 
 declare global {

package/src/modeling/internals/DomainTemplateBrowser.ts

@@ -94,6 +94,27 @@ function searchTemplates(query: string): DomainTemplateMetadata[] {
     )
 }
 
+function getVerticalName(id: string): string {
+  switch (id) {
+    case 'businessServices':
+      return 'Business Services'
+    case 'educationTraining':
+      return 'Education & Training'
+    case 'healthcareLifeSciences':
+      return 'Healthcare & Life Sciences'
+    case 'manufacturingLogistics':
+      return 'Manufacturing & Logistics'
+    case 'publicSector':
+      return 'Public Sector'
+    case 'realEstateConstruction':
+      return 'Real Estate & Construction'
+    case 'technologyMedia':
+      return 'Technology & Media'
+    default:
+      return id
+  }
+}
+
 /**
  * A browser component for exploring and selecting domain templates.
  * It provides the UI for searching, filtering, previewing, and selecting data domain templates.
@@ -266,7 +287,7 @@ export default class DomainTemplateBrowser extends LitElement {
               ?selected="${isSelected}"
               @click="${this.handleFilterClick}"
             >
-              ${category}
+              ${getVerticalName(category)}
             </ui-button>`
           })}
         </ui-button-group>
@@ -287,6 +308,10 @@ export default class DomainTemplateBrowser extends LitElement {
 
     return html`
       <div class="template-card">
+        <div class="meta">
+          <span class="value body-small" title="Updated at">${new Date(template.updatedAt).toLocaleDateString()}</span>
+          <span class="value body-small" title="Version">v${template.version}</span>
+        </div>
         <h3 class="template-title display-small">${templateName}</h3>
         <p class="template-description body-medium">${templateDescription}</p>
 

package/src/modeling/internals/styles/DomainTemplateBrowser.styles.ts

@@ -71,6 +71,18 @@ export default css`
     color: var(--md-sys-color-on-surface);
     border: 1px solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
+
+    .meta {
+      display: flex;
+      gap: 8px;
+
+      .value {
+        color: var(--md-sys-color-on-surface-variant);
+        border: 1px var(--md-sys-color-outline-variant) solid;
+        border-radius: 8px;
+        padding: 0 4px;
+      }
+    }
   }
 
   .template-description {

package/src/styles/m3/tokens.ts

@@ -15,10 +15,10 @@ export default css`
     --md-sys-color-on-primary-light: rgb(255 255 255);
     --md-sys-color-primary-container-light: rgb(158 239 254);
     --md-sys-color-on-primary-container-light: rgb(0 79 88);
-    --md-sys-color-secondary-light: rgb(0 104 116);
+    --md-sys-color-secondary-light: rgb(74 98 103);
     --md-sys-color-on-secondary-light: rgb(255 255 255);
-    --md-sys-color-secondary-container-light: rgb(158 239 253);
-    --md-sys-color-on-secondary-container-light: rgb(0 79 87);
+    --md-sys-color-secondary-container-light: rgb(205 231 236);
+    --md-sys-color-on-secondary-container-light: rgb(51 75 79);
     --md-sys-color-tertiary-light: rgb(83 94 125);
     --md-sys-color-on-tertiary-light: rgb(255 255 255);
     --md-sys-color-tertiary-container-light: rgb(218 226 255);
@@ -44,10 +44,10 @@ export default css`
     --md-sys-color-on-primary-fixed-light: rgb(0 31 36);
     --md-sys-color-primary-fixed-dim-light: rgb(130 211 225);
     --md-sys-color-on-primary-fixed-variant-light: rgb(0 79 88);
-    --md-sys-color-secondary-fixed-light: rgb(158 239 253);
-    --md-sys-color-on-secondary-fixed-light: rgb(0 31 36);
-    --md-sys-color-secondary-fixed-dim-light: rgb(129 211 224);
-    --md-sys-color-on-secondary-fixed-variant-light: rgb(0 79 87);
+    --md-sys-color-secondary-fixed-light: rgb(205 231 236);
+    --md-sys-color-on-secondary-fixed-light: rgb(5 31 35);
+    --md-sys-color-secondary-fixed-dim-light: rgb(177 203 208);
+    --md-sys-color-on-secondary-fixed-variant-light: rgb(51 75 79);
     --md-sys-color-tertiary-fixed-light: rgb(218 226 255);
     --md-sys-color-on-tertiary-fixed-light: rgb(15 26 55);
     --md-sys-color-tertiary-fixed-dim-light: rgb(187 198 234);
@@ -73,9 +73,9 @@ export default css`
     --md-sys-color-on-primary-light-hc: rgb(255 255 255);
     --md-sys-color-primary-container-light-hc: rgb(0 81 91);
     --md-sys-color-on-primary-container-light-hc: rgb(255 255 255);
-    --md-sys-color-secondary-light-hc: rgb(0 50 55);
+    --md-sys-color-secondary-light-hc: rgb(23 48 52);
     --md-sys-color-on-secondary-light-hc: rgb(255 255 255);
-    --md-sys-color-secondary-container-light-hc: rgb(0 81 90);
+    --md-sys-color-secondary-container-light-hc: rgb(53 77 81);
     --md-sys-color-on-secondary-container-light-hc: rgb(255 255 255);
     --md-sys-color-tertiary-light-hc: rgb(32 43 72);
     --md-sys-color-on-tertiary-light-hc: rgb(255 255 255);
@@ -102,9 +102,9 @@ export default css`
     --md-sys-color-on-primary-fixed-light-hc: rgb(255 255 255);
     --md-sys-color-primary-fixed-dim-light-hc: rgb(0 57 64);
     --md-sys-color-on-primary-fixed-variant-light-hc: rgb(255 255 255);
-    --md-sys-color-secondary-fixed-light-hc: rgb(0 81 90);
+    --md-sys-color-secondary-fixed-light-hc: rgb(53 77 81);
     --md-sys-color-on-secondary-fixed-light-hc: rgb(255 255 255);
-    --md-sys-color-secondary-fixed-dim-light-hc: rgb(0 57 63);
+    --md-sys-color-secondary-fixed-dim-light-hc: rgb(30 54 58);
     --md-sys-color-on-secondary-fixed-variant-light-hc: rgb(255 255 255);
     --md-sys-color-tertiary-fixed-light-hc: rgb(61 72 103);
     --md-sys-color-on-tertiary-fixed-light-hc: rgb(255 255 255);
@@ -130,9 +130,9 @@ export default css`
     --md-sys-color-on-primary-light-mc: rgb(255 255 255);
     --md-sys-color-primary-container-light-mc: rgb(25 120 133);
     --md-sys-color-on-primary-container-light-mc: rgb(255 255 255);
-    --md-sys-color-secondary-light-mc: rgb(0 61 68);
+    --md-sys-color-secondary-light-mc: rgb(34 58 62);
     --md-sys-color-on-secondary-light-mc: rgb(255 255 255);
-    --md-sys-color-secondary-container-light-mc: rgb(24 120 132);
+    --md-sys-color-secondary-container-light-mc: rgb(89 113 118);
     --md-sys-color-on-secondary-container-light-mc: rgb(255 255 255);
     --md-sys-color-tertiary-light-mc: rgb(42 53 83);
     --md-sys-color-on-tertiary-light-mc: rgb(255 255 255);
@@ -159,9 +159,9 @@ export default css`
     --md-sys-color-on-primary-fixed-light-mc: rgb(255 255 255);
     --md-sys-color-primary-fixed-dim-light-mc: rgb(0 94 105);
     --md-sys-color-on-primary-fixed-variant-light-mc: rgb(255 255 255);
-    --md-sys-color-secondary-fixed-light-mc: rgb(24 120 132);
+    --md-sys-color-secondary-fixed-light-mc: rgb(89 113 118);
     --md-sys-color-on-secondary-fixed-light-mc: rgb(255 255 255);
-    --md-sys-color-secondary-fixed-dim-light-mc: rgb(0 94 104);
+    --md-sys-color-secondary-fixed-dim-light-mc: rgb(65 89 93);
     --md-sys-color-on-secondary-fixed-variant-light-mc: rgb(255 255 255);
     --md-sys-color-tertiary-fixed-light-mc: rgb(97 108 141);
     --md-sys-color-on-tertiary-fixed-light-mc: rgb(255 255 255);
@@ -189,10 +189,10 @@ export default css`
     --md-sys-color-on-primary-dark: rgb(0 54 61);
     --md-sys-color-primary-container-dark: rgb(0 79 88);
     --md-sys-color-on-primary-container-dark: rgb(158 239 254);
-    --md-sys-color-secondary-dark: rgb(129 211 224);
-    --md-sys-color-on-secondary-dark: rgb(0 54 61);
-    --md-sys-color-secondary-container-dark: rgb(0 79 87);
-    --md-sys-color-on-secondary-container-dark: rgb(158 239 253);
+    --md-sys-color-secondary-dark: rgb(177 203 208);
+    --md-sys-color-on-secondary-dark: rgb(28 52 56);
+    --md-sys-color-secondary-container-dark: rgb(51 75 79);
+    --md-sys-color-on-secondary-container-dark: rgb(205 231 236);
     --md-sys-color-tertiary-dark: rgb(187 198 234);
     --md-sys-color-on-tertiary-dark: rgb(36 48 77);
     --md-sys-color-tertiary-container-dark: rgb(59 70 101);
@@ -218,10 +218,10 @@ export default css`
     --md-sys-color-on-primary-fixed-dark: rgb(0 31 36);
     --md-sys-color-primary-fixed-dim-dark: rgb(130 211 225);
     --md-sys-color-on-primary-fixed-variant-dark: rgb(0 79 88);
-    --md-sys-color-secondary-fixed-dark: rgb(158 239 253);
-    --md-sys-color-on-secondary-fixed-dark: rgb(0 31 36);
-    --md-sys-color-secondary-fixed-dim-dark: rgb(129 211 224);
-    --md-sys-color-on-secondary-fixed-variant-dark: rgb(0 79 87);
+    --md-sys-color-secondary-fixed-dark: rgb(205 231 236);
+    --md-sys-color-on-secondary-fixed-dark: rgb(5 31 35);
+    --md-sys-color-secondary-fixed-dim-dark: rgb(177 203 208);
+    --md-sys-color-on-secondary-fixed-variant-dark: rgb(51 75 79);
     --md-sys-color-tertiary-fixed-dark: rgb(218 226 255);
     --md-sys-color-on-tertiary-fixed-dark: rgb(15 26 55);
     --md-sys-color-tertiary-fixed-dim-dark: rgb(187 198 234);
@@ -247,9 +247,9 @@ export default css`
     --md-sys-color-on-primary-dark-hc: rgb(0 0 0);
     --md-sys-color-primary-container-dark-hc: rgb(126 207 221);
     --md-sys-color-on-primary-container-dark-hc: rgb(0 14 16);
-    --md-sys-color-secondary-dark-hc: rgb(205 248 255);
+    --md-sys-color-secondary-dark-hc: rgb(218 245 250);
     --md-sys-color-on-secondary-dark-hc: rgb(0 0 0);
-    --md-sys-color-secondary-container-dark-hc: rgb(126 207 220);
+    --md-sys-color-secondary-container-dark-hc: rgb(173 199 204);
     --md-sys-color-on-secondary-container-dark-hc: rgb(0 14 16);
     --md-sys-color-tertiary-dark-hc: rgb(237 239 255);
     --md-sys-color-on-tertiary-dark-hc: rgb(0 0 0);
@@ -276,9 +276,9 @@ export default css`
     --md-sys-color-on-primary-fixed-dark-hc: rgb(0 0 0);
     --md-sys-color-primary-fixed-dim-dark-hc: rgb(130 211 225);
     --md-sys-color-on-primary-fixed-variant-dark-hc: rgb(0 20 23);
-    --md-sys-color-secondary-fixed-dark-hc: rgb(158 239 253);
+    --md-sys-color-secondary-fixed-dark-hc: rgb(205 231 236);
     --md-sys-color-on-secondary-fixed-dark-hc: rgb(0 0 0);
-    --md-sys-color-secondary-fixed-dim-dark-hc: rgb(129 211 224);
+    --md-sys-color-secondary-fixed-dim-dark-hc: rgb(177 203 208);
     --md-sys-color-on-secondary-fixed-variant-dark-hc: rgb(0 20 23);
     --md-sys-color-tertiary-fixed-dark-hc: rgb(218 226 255);
     --md-sys-color-on-tertiary-fixed-dark-hc: rgb(0 0 0);
@@ -305,9 +305,9 @@ export default css`
     --md-sys-color-on-primary-dark-mc: rgb(0 42 48);
     --md-sys-color-primary-container-dark-mc: rgb(73 156 169);
     --md-sys-color-on-primary-container-dark-mc: rgb(0 0 0);
-    --md-sys-color-secondary-dark-mc: rgb(152 233 246);
-    --md-sys-color-on-secondary-dark-mc: rgb(0 42 48);
-    --md-sys-color-secondary-container-dark-mc: rgb(72 156 169);
+    --md-sys-color-secondary-dark-mc: rgb(199 225 230);
+    --md-sys-color-on-secondary-dark-mc: rgb(16 41 45);
+    --md-sys-color-secondary-container-dark-mc: rgb(124 149 154);
     --md-sys-color-on-secondary-container-dark-mc: rgb(0 0 0);
     --md-sys-color-tertiary-dark-mc: rgb(209 219 255);
     --md-sys-color-on-tertiary-dark-mc: rgb(25 37 65);
@@ -334,10 +334,10 @@ export default css`
     --md-sys-color-on-primary-fixed-dark-mc: rgb(0 20 23);
     --md-sys-color-primary-fixed-dim-dark-mc: rgb(130 211 225);
     --md-sys-color-on-primary-fixed-variant-dark-mc: rgb(0 60 68);
-    --md-sys-color-secondary-fixed-dark-mc: rgb(158 239 253);
+    --md-sys-color-secondary-fixed-dark-mc: rgb(205 231 236);
     --md-sys-color-on-secondary-fixed-dark-mc: rgb(0 20 23);
-    --md-sys-color-secondary-fixed-dim-dark-mc: rgb(129 211 224);
-    --md-sys-color-on-secondary-fixed-variant-dark-mc: rgb(0 61 68);
+    --md-sys-color-secondary-fixed-dim-dark-mc: rgb(177 203 208);
+    --md-sys-color-on-secondary-fixed-variant-dark-mc: rgb(34 58 62);
     --md-sys-color-tertiary-fixed-dark-mc: rgb(218 226 255);
     --md-sys-color-on-tertiary-fixed-dark-mc: rgb(4 16 44);
     --md-sys-color-tertiary-fixed-dim-dark-mc: rgb(187 198 234);