@eui/core 23.0.0-alpha.2 → 23.0.0-alpha.3

package/docs/properties.html

@@ -85,7 +85,14 @@
         </div>
 
         <div class="xs-menu menu" id="mobile-menu">
-                <div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div>            <compodoc-menu></compodoc-menu>
+                <div id="book-search-input" role="search">
+    <input type="text" placeholder="Type to search">
+    <button type="button"
+        class="search-input-clear"
+        aria-label="Clear search"
+        data-search-input-clear>&times;</button>
+</div>
+            <compodoc-menu></compodoc-menu>
         </div>
 
         <div class="container-fluid main">
@@ -121,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 23.0.0-alpha.2</li>
+            <b>Version</b> : 23.0.0-alpha.3</li>
     </ul>
 
 
@@ -160,6 +167,24 @@
 
        <script>
                $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var updateDarkModeSwitchOffset = function () {
+                    var content = document.querySelector('.content');
+                    var scrollbarWidth = 0;
+
+                    if (content) {
+                         scrollbarWidth = Math.max(0, content.offsetWidth - content.clientWidth);
+                    }
+
+                    document.documentElement.style.setProperty(
+                         '--content-scrollbar-width',
+                         scrollbarWidth + 'px'
+                    );
+               };
+
+               updateDarkModeSwitchOffset();
+               requestAnimationFrame(updateDarkModeSwitchOffset);
+               window.addEventListener('resize', updateDarkModeSwitchOffset);
+
                checkToggle(darkModeState);
                if ($darkModeToggleSwitchers.length > 0) {
                     for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
@@ -175,7 +200,6 @@
        <script src="./js/libs/lit-html.js"></script>
 
        <script src="./js/menu-wc.js" defer></script>
-       <script nomodule src="./js/menu-wc_es5.js" defer></script>
 
        <script src="./js/libs/bootstrap-native.js"></script>
 

package/docs/routes.html

@@ -85,7 +85,14 @@
         </div>
 
         <div class="xs-menu menu" id="mobile-menu">
-                <div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div>            <compodoc-menu></compodoc-menu>
+                <div id="book-search-input" role="search">
+    <input type="text" placeholder="Type to search">
+    <button type="button"
+        class="search-input-clear"
+        aria-label="Clear search"
+        data-search-input-clear>&times;</button>
+</div>
+            <compodoc-menu></compodoc-menu>
         </div>
 
         <div class="container-fluid main">
@@ -163,6 +170,24 @@
 
        <script>
                $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var updateDarkModeSwitchOffset = function () {
+                    var content = document.querySelector('.content');
+                    var scrollbarWidth = 0;
+
+                    if (content) {
+                         scrollbarWidth = Math.max(0, content.offsetWidth - content.clientWidth);
+                    }
+
+                    document.documentElement.style.setProperty(
+                         '--content-scrollbar-width',
+                         scrollbarWidth + 'px'
+                    );
+               };
+
+               updateDarkModeSwitchOffset();
+               requestAnimationFrame(updateDarkModeSwitchOffset);
+               window.addEventListener('resize', updateDarkModeSwitchOffset);
+
                checkToggle(darkModeState);
                if ($darkModeToggleSwitchers.length > 0) {
                     for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
@@ -178,7 +203,6 @@
        <script src="./js/libs/lit-html.js"></script>
 
        <script src="./js/menu-wc.js" defer></script>
-       <script nomodule src="./js/menu-wc_es5.js" defer></script>
 
        <script src="./js/libs/bootstrap-native.js"></script>
 

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;
+}