@eui/base 23.0.0-alpha.1 → 23.0.0-alpha.3

package/docs/styles/compodoc.css

@@ -2,64 +2,77 @@ body {
     position: absolute;
     width: 100%;
     height: 100%;
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
     --bs-body-font-size: 0.9rem;
 }
 
 /* roboto-300 - latin */
 
 @font-face {
-    font-family: 'Roboto';
+    font-family: "Roboto";
     font-style: normal;
     font-weight: 300;
-    src: url('../fonts/roboto-v15-latin-300.eot');
+    src: url("../fonts/roboto-v15-latin-300.eot");
     /* IE9 Compat Modes */
     src:
-        local('Roboto Light'),
-        local('Roboto-Light'),
-        url('../fonts/roboto-v15-latin-300.eot?#iefix') format('embedded-opentype'),
-        /* IE6-IE8 */ url('../fonts/roboto-v15-latin-300.woff2') format('woff2'),
-        /* Super Modern Browsers */ url('../fonts/roboto-v15-latin-300.woff') format('woff'),
-        /* Modern Browsers */ url('../fonts/roboto-v15-latin-300.ttf') format('truetype'),
-        /* Safari, Android, iOS */ url('../fonts/roboto-v15-latin-300.svg#Roboto') format('svg');
+        local("Roboto Light"),
+        local("Roboto-Light"),
+        url("../fonts/roboto-v15-latin-300.eot?#iefix")
+            format("embedded-opentype"),
+        /* IE6-IE8 */ url("../fonts/roboto-v15-latin-300.woff2") format("woff2"),
+        /* Super Modern Browsers */ url("../fonts/roboto-v15-latin-300.woff")
+            format("woff"),
+        /* Modern Browsers */ url("../fonts/roboto-v15-latin-300.ttf")
+            format("truetype"),
+        /* Safari, Android, iOS */
+            url("../fonts/roboto-v15-latin-300.svg#Roboto") format("svg");
     /* Legacy iOS */
 }
 
 /* roboto-regular - latin */
 
 @font-face {
-    font-family: 'Roboto';
+    font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
-    src: url('../fonts/roboto-v15-latin-regular.eot');
+    src: url("../fonts/roboto-v15-latin-regular.eot");
     /* IE9 Compat Modes */
     src:
-        local('Roboto'),
-        local('Roboto-Regular'),
-        url('../fonts/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
-        /* IE6-IE8 */ url('../fonts/roboto-v15-latin-regular.woff2') format('woff2'),
-        /* Super Modern Browsers */ url('../fonts/roboto-v15-latin-regular.woff') format('woff'),
-        /* Modern Browsers */ url('../fonts/roboto-v15-latin-regular.ttf') format('truetype'),
-        /* Safari, Android, iOS */ url('../fonts/roboto-v15-latin-regular.svg#Roboto') format('svg');
+        local("Roboto"),
+        local("Roboto-Regular"),
+        url("../fonts/roboto-v15-latin-regular.eot?#iefix")
+            format("embedded-opentype"),
+        /* IE6-IE8 */ url("../fonts/roboto-v15-latin-regular.woff2")
+            format("woff2"),
+        /* Super Modern Browsers */
+            url("../fonts/roboto-v15-latin-regular.woff") format("woff"),
+        /* Modern Browsers */ url("../fonts/roboto-v15-latin-regular.ttf")
+            format("truetype"),
+        /* Safari, Android, iOS */
+            url("../fonts/roboto-v15-latin-regular.svg#Roboto") format("svg");
     /* Legacy iOS */
 }
 
 /* roboto-700 - latin */
 
 @font-face {
-    font-family: 'Roboto';
+    font-family: "Roboto";
     font-style: normal;
     font-weight: 700;
-    src: url('../fonts/roboto-v15-latin-700.eot');
+    src: url("../fonts/roboto-v15-latin-700.eot");
     /* IE9 Compat Modes */
     src:
-        local('Roboto Bold'),
-        local('Roboto-Bold'),
-        url('../fonts/roboto-v15-latin-700.eot?#iefix') format('embedded-opentype'),
-        /* IE6-IE8 */ url('../fonts/roboto-v15-latin-700.woff2') format('woff2'),
-        /* Super Modern Browsers */ url('../fonts/roboto-v15-latin-700.woff') format('woff'),
-        /* Modern Browsers */ url('../fonts/roboto-v15-latin-700.ttf') format('truetype'),
-        /* Safari, Android, iOS */ url('../fonts/roboto-v15-latin-700.svg#Roboto') format('svg');
+        local("Roboto Bold"),
+        local("Roboto-Bold"),
+        url("../fonts/roboto-v15-latin-700.eot?#iefix")
+            format("embedded-opentype"),
+        /* IE6-IE8 */ url("../fonts/roboto-v15-latin-700.woff2") format("woff2"),
+        /* Super Modern Browsers */ url("../fonts/roboto-v15-latin-700.woff")
+            format("woff"),
+        /* Modern Browsers */ url("../fonts/roboto-v15-latin-700.ttf")
+            format("truetype"),
+        /* Safari, Android, iOS */
+            url("../fonts/roboto-v15-latin-700.svg#Roboto") format("svg");
     /* Legacy iOS */
 }
 
@@ -217,6 +230,10 @@ a[href] {
     display: flex;
     flex-direction: column;
     height: 100%;
+    width: 100%;
+    max-width: 860px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .content-data .tab-content {
@@ -236,6 +253,15 @@ a[href] {
     width: 100%;
 }
 
+.relationships-list {
+    list-style: none;
+    padding-left: 0 !important;
+}
+
+.relationships-list li {
+    list-style: none;
+}
+
 /**
  * Icons
  */
@@ -250,6 +276,7 @@ a[href] {
  */
 
 #book-search-input {
+    position: relative;
     padding: 6px;
     transition: top 0.5s ease;
     background: #fff;
@@ -268,10 +295,30 @@ a[href] {
     box-shadow: none;
     outline: 0;
     line-height: 22px;
-    padding: 7px 7px;
+    padding: 7px 30px 7px 7px;
     color: inherit;
 }
 
+#book-search-input .search-input-clear {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    color: #6c757d;
+    opacity: 0;
+    pointer-events: none;
+}
+
+#book-search-input .search-input-clear.is-visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
 .panel-body {
     padding: 0px;
 }
@@ -477,7 +524,23 @@ ol.breadcrumb {
 }
 
 .io-file {
-    margin: 20px 0;
+    margin-bottom: 20px;
+}
+
+.io-file-path {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.io-file-path .icon {
+    font-size: 16px;
+    opacity: 0.8;
+}
+
+.io-file-path code {
+    white-space: normal;
+    word-break: break-word;
 }
 
 .navbar .btn-menu {
@@ -678,7 +741,7 @@ thead.coverage-header > tr > th {
     border-bottom-width: 0;
 }
 
-th[role='columnheader'].statements:not(.no-sort):after {
+th[role="columnheader"].statements:not(.no-sort):after {
     margin-left: 10px;
 }
 
@@ -723,6 +786,96 @@ th[role='columnheader'].statements:not(.no-sort):after {
     background: #4dc71f;
 }
 
+.coverage-summary {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: center;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    padding: 12px;
+    border: 1px solid var(--bs-border-color, #dee2e6);
+    background: var(--bs-body-bg, #fff);
+}
+
+.coverage-donut {
+    width: 120px;
+    height: 120px;
+    flex: 0 0 auto;
+}
+
+.coverage-donut-pct {
+    font-size: 22px;
+    font-weight: 600;
+    fill: currentColor;
+}
+
+.coverage-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 12px;
+    flex: 1 1 280px;
+}
+
+.coverage-stat-value {
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+.coverage-stat-value--documented {
+    color: #4dc71f;
+}
+
+.coverage-stat-value--partial {
+    color: #dab226;
+}
+
+.coverage-stat-value--undocumented {
+    color: #d8624c;
+}
+
+.coverage-stat-label {
+    font-size: 13px;
+    color: #6c757d;
+}
+
+.coverage-stat-sub {
+    font-size: 12px;
+    color: #6c757d;
+}
+
+.coverage-filter {
+    position: relative;
+    margin-bottom: 12px;
+}
+
+.coverage-filter-input {
+    width: 100%;
+    padding: 8px 34px 8px 10px;
+    border: 1px solid var(--bs-border-color, #dee2e6);
+}
+
+.coverage-filter-clear {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    color: #6c757d;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.coverage-filter-clear.is-visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
 .content ol {
     list-style-type: decimal;
     margin-top: 0;
@@ -772,6 +925,99 @@ th[role='columnheader'].statements:not(.no-sort):after {
     display: none;
 }
 
+.reference-badge {
+    --reference-color-ts: #9600ff;
+    --reference-color-ts-interface: #647f1b;
+    --reference-color-ts-enum: #937210;
+    --reference-color-ts-class: #0672de;
+    --reference-color-angular: #dd0031;
+    --reference-color-ts-private: #707070;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75em;
+    height: 1.75em;
+    border-radius: 999px;
+    background: #6f7b88;
+    color: #fff;
+    font-size: 0.72em;
+    font-weight: 700;
+    line-height: 1;
+    margin-right: 0.5em;
+    vertical-align: middle;
+}
+
+a .reference-badge {
+    text-decoration: none;
+}
+
+.reference-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.28em;
+}
+
+.reference-link-label {
+    line-height: 1.2;
+}
+
+.reference-badge--method {
+    background: var(--reference-color-ts-class);
+}
+
+.reference-badge--property {
+    background: var(--reference-color-ts-class);
+}
+
+.reference-badge--constructor {
+    background: var(--reference-color-ts-class);
+}
+
+.reference-badge--accessor {
+    background: var(--reference-color-ts-class);
+}
+
+.reference-badge--variable {
+    background: var(--reference-color-ts);
+}
+
+.reference-badge--interface {
+    background: var(--reference-color-ts-interface);
+}
+
+.reference-badge--function {
+    background: var(--reference-color-ts);
+}
+
+.reference-badge--enum {
+    background: var(--reference-color-ts-enum);
+}
+
+.reference-badge--typealias {
+    background: var(--reference-color-ts);
+}
+
+.reference-badge--class {
+    background: var(--reference-color-ts-class);
+}
+
+.reference-badge--angular {
+    background: var(--reference-color-angular);
+}
+
+.dark .reference-badge {
+    --reference-color-ts: #c97dff;
+    --reference-color-ts-interface: #9cbe3c;
+    --reference-color-ts-enum: #d6ab29;
+    --reference-color-ts-class: #3695f3;
+    --reference-color-angular: #dd0031;
+    --reference-color-ts-private: #e2e2e2;
+}
+
+.dark .reference-badge--enum {
+    color: #2f3136;
+}
+
 .modifier-icon {
     color: #c7254e;
 }
@@ -860,7 +1106,11 @@ path.link {
 /* highlight line */
 
 .line-highlight {
-    background: linear-gradient(to right, hsla(0, 0%, 100%, 0.1) 70%, hsla(24, 20%, 50%, 0));
+    background: linear-gradient(
+        to right,
+        hsla(0, 0%, 100%, 0.1) 70%,
+        hsla(24, 20%, 50%, 0)
+    );
 }
 
 #tree-container {
@@ -913,6 +1163,74 @@ path.link {
     height: 100%;
 }
 
+#architecture-graph {
+    width: 100%;
+    height: 68vh;
+    min-height: 460px;
+    border: 1px solid rgba(0, 0, 0, 0.07);
+    background: #fafafa;
+}
+
+.architecture-graph-wrapper .size-buttons {
+    margin-top: 12px;
+}
+
+.architecture-legend {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    margin: 0 0 14px;
+    padding: 0;
+    background: transparent;
+    border: none;
+}
+
+.architecture-legend-item {
+    border: 1px solid #d6d6d6;
+    border-radius: 16px;
+    background: #fff;
+    font-size: 12px;
+    color: #2f2f2f;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    cursor: pointer;
+}
+
+.architecture-legend-item.is-disabled {
+    opacity: 0.45;
+    text-decoration: line-through;
+}
+
+.architecture-legend-color {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.architecture-component {
+    background: #10b39c;
+}
+
+.architecture-directive {
+    background: #6747dd;
+}
+
+.architecture-pipe {
+    background: #de3b91;
+}
+
+.architecture-module {
+    background: #2973f0;
+}
+
+.architecture-injectable {
+    background: #b77006;
+}
+
 .content ul.type-parameters {
     margin-bottom: 5px;
 }
@@ -951,12 +1269,16 @@ table.params td p {
 ul.index-list {
     list-style: none;
     padding: 0;
-    column-gap: 20px;
-    column-count: 3;
+    column-gap: 0;
+    column-count: 1;
     line-height: 25px;
     margin-bottom: 0;
 }
 
+section[data-compodoc="block-index"] + section {
+    margin-top: 50px;
+}
+
 .no-graph {
     text-align: center;
     height: 175px;
@@ -973,6 +1295,10 @@ ul.index-list {
     display: inline-block;
 }
 
+.link-to-prism {
+    opacity: 0.9;
+}
+
 .accessor b {
     color: #808080;
     margin-right: 8px;
@@ -998,13 +1324,8 @@ ul.index-list {
  * Dependencies
  */
 
-.package-dependencies ul {
-    list-style: none;
-    margin: 0;
-}
-
-.package-dependencies li {
-    margin: 5px 0;
+.package-dependencies .dependencies-table {
+    width: inherit;
 }
 
 .deprecated {
@@ -1029,7 +1350,7 @@ ul.index-list {
 .dark-mode-switch {
     position: absolute;
     top: 70px;
-    right: 15px;
+    right: calc(15px + var(--content-scrollbar-width, 0px));
     display: inline-block;
     width: 60px;
     height: 34px;
@@ -1055,7 +1376,7 @@ ul.index-list {
 
 .dark-mode-switch .slider:before {
     position: absolute;
-    content: '';
+    content: "";
     height: 26px;
     width: 26px;
     left: 4px;
@@ -1104,7 +1425,7 @@ ul.properties-list {
 }
 
 .nav-tabs ::marker {
-    content: '';
+    content: "";
 }
 
 .content {

package/docs/styles/dark.css

@@ -76,6 +76,11 @@ body.dark {
     fill: #212121 !important;
 }
 
+.dark #module-graph-svg svg text,
+.dark #module-graph-svg svg a {
+    fill: #f0f0f0;
+}
+
 .dark .navbar-default,
 .dark .btn-default {
     background-color: black;
@@ -119,3 +124,14 @@ body.dark {
 .dark .content table {
     --bs-table-color: #fafafa;
 }
+
+.dark #architecture-graph {
+    border-color: rgba(0, 0, 0, 0.07);
+    background: #fafafa;
+}
+
+.dark .architecture-legend-item {
+    background: #262626;
+    border-color: #4a4a4a;
+    color: #f0f0f0;
+}

package/docs/template-playground/hbs-render.service.ts

@@ -82,6 +82,7 @@ export class HbsRenderService {
       // Simple translation mapping for preview
       const translations: { [key: string]: string } = {
         'info': 'Information',
+        'api': 'API',
         'source': 'Source',
         'example': 'Example',
         'template': 'Template',
@@ -97,7 +98,10 @@ export class HbsRenderService {
         'properties': 'Properties',
         'methods': 'Methods',
         'inputs': 'Inputs',
-        'outputs': 'Outputs'
+        'outputs': 'Outputs',
+        'relationships': 'Relationships',
+        'relationships-used-by': 'Used by',
+        'relationships-depends-on': 'Depends on'
       };
       return translations[key] || key;
     });
@@ -204,6 +208,7 @@ export class HbsRenderService {
       ],
       navTabs: [
         { id: 'info', label: 'Info', href: '#info' },
+        { id: 'api', label: 'API', href: '#api' },
         { id: 'source', label: 'Source', href: '#source' },
         { id: 'example', label: 'Example', href: '#example' }
       ]

package/fesm2022/eui-base.mjs

@@ -119,6 +119,7 @@ class UxErrorOutput {
                         return true;
                     }
                 }
+                return null;
             })
                 .map((err) => ({
                 msgId: err.msgId,