Merge branch 'main' into add-llmstxt-template

Author: theletterf

docs/syntax/admonitions.md

@@ -150,38 +150,53 @@ It can *span* multiple lines and supports inline formatting.
 
 :::::
 
-## Collapsible admonitions
+## Applies to information
 
-:::{warning}
-Collapsible admonitions are deprecated. Do not use them. Use [dropdowns](./dropdowns.md) instead.
-:::
-
-Use `:open: <bool>` to make an admonition collapsible.
+Admonitions support the `applies_to` property to indicate which products or versions the information applies to.
 
 :::::{tab-set}
 
 ::::{tab-item} Output
 
 :::{note}
-:open:
+:applies_to: stack: ga 9.1.0
+
+This note applies to the Elastic Stack GA version 9.1.0.
+:::
 
-Longer content can be collapsed to take less space.
+:::{warning}
+:applies_to: serverless: ga
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+This warning applies to serverless GA.
 :::
 
+:::{tip}
+:applies_to: { ess:, ece: }
+
+This tip applies to ECH and ECE.
+:::
 
 ::::
 
 ::::{tab-item} Markdown
 
 ```markdown
 :::{note}
-:open:
+:applies_to: stack: ga 9.1.0
+
+This note applies to the Elastic Stack GA version 9.1.0.
+:::
+
+:::{warning}
+:applies_to: serverless: ga
+
+This warning applies to serverless GA.
+:::
 
-Longer content can be collapsed to take less space.
+:::{tip}
+:applies_to: { ess:, ece: }
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+This tip applies to ECH and ECE.
 :::
 ```
 

docs/syntax/dropdowns.md

@@ -50,3 +50,55 @@ Dropdown content
 ::::
 
 :::::
+
+## With applies_to badge
+
+You can add an applies_to badge to the dropdown title by specifying the `:applies_to:` option. This displays a badge indicating which deployment types, versions, or other applicability criteria the dropdown content applies to.
+
+:::::{tab-set}
+
+::::{tab-item} Output
+
+:::{dropdown} Dropdown Title
+:applies_to: stack: ga 9.0
+Dropdown content for Stack GA 9.0
+:::
+
+::::
+
+::::{tab-item} Markdown
+```markdown
+:::{dropdown} Dropdown Title
+:applies_to: stack: ga 9.0
+Dropdown content for Stack GA 9.0
+:::
+```
+::::
+
+:::::
+
+## Multiple applies_to definitions
+
+You can specify multiple `applies_to` definitions using YAML object notation with curly braces `{}`. This is useful when content applies to multiple deployment types or versions simultaneously.
+
+:::::{tab-set}
+
+::::{tab-item} Output
+
+:::{dropdown} Dropdown Title
+:applies_to: { ece:, ess: }
+Dropdown content for ECE and ECH
+:::
+
+::::
+
+::::{tab-item} Markdown
+```markdown
+:::{dropdown} Dropdown Title
+:applies_to: { ece:, ess: }
+Dropdown content for ECE and ECH
+:::
+```
+::::
+
+:::::

src/Elastic.Documentation.Site/Assets/markdown/admonition.css

@@ -2,10 +2,22 @@
 	.admonition {
 		@apply mt-4 rounded-sm border-1 pb-4;
 
+		.admonition-header {
+			@apply flex items-center gap-3 rounded-t-sm px-4 py-2 font-bold;
+		}
+
 		.admonition-title {
-			@apply flex items-center gap-2 rounded-t-sm px-4 py-2 font-bold;
-			svg {
-				@apply size-6;
+			@apply text-sm tracking-wider uppercase;
+		}
+
+		.applies-admonition {
+			@apply flex items-center gap-1 font-normal;
+			.applicable-name,
+			.applicable-meta {
+				@apply text-xs;
+			}
+			.applicable-separator {
+				mix-blend-mode: multiply;
 			}
 		}
 		.admonition-content {
@@ -18,39 +30,57 @@
 
 		&.note {
 			@apply border-blue-elastic-40 bg-blue-elastic-10;
-			.admonition-title {
+
+			.admonition-header {
 				@apply text-blue-elastic-110 bg-blue-elastic-20;
+
+				.applicable-info {
+					@apply border-blue-elastic-40;
+				}
 			}
 		}
 
 		&.tip {
 			@apply border-teal-40 bg-teal-10;
-			.admonition-title {
+			.admonition-header {
 				@apply text-teal-110 bg-teal-20;
+
+				.applicable-info {
+					@apply border-teal-40;
+				}
 			}
 		}
 
 		&.warning {
 			@apply border-yellow-40 bg-yellow-10;
 
-			.admonition-title {
+			.admonition-header {
 				@apply text-yellow-110 bg-yellow-20;
+				.applicable-info {
+					@apply border-yellow-40;
+				}
 			}
 		}
 
 		&.important {
 			@apply border-purple-40 bg-purple-10;
 
-			.admonition-title {
+			.admonition-header {
 				@apply text-purple-110 bg-purple-20;
+				.applicable-info {
+					@apply border-purple-40;
+				}
 			}
 		}
 
 		&.plain {
 			@apply border-grey-40 bg-grey-10;
 
-			.admonition-title {
+			.admonition-header {
 				@apply text-grey-110 bg-grey-20;
+				.applicable-info {
+					@apply border-grey-40;
+				}
 			}
 		}
 	}

src/Elastic.Documentation.Site/Assets/markdown/dropdown.css

@@ -7,7 +7,7 @@
 		details.dropdown {
 			@apply border-grey-20 mt-4 block rounded-sm border-1 shadow-xs;
 			summary.dropdown-title {
-				@apply text-ink-dark flex cursor-pointer items-center justify-between px-4 py-2 font-sans font-bold;
+				@apply text-ink-dark flex cursor-pointer items-stretch justify-between font-sans font-bold;
 			}
 
 			&[open] .dropdown-title {
@@ -20,6 +20,37 @@
 			.dropdown-content {
 				@apply px-4 pb-4;
 			}
+
+			.dropdown-title__container {
+				@apply flex items-stretch;
+			}
+
+			.dropdown-title__separator {
+				@apply bg-grey-20 block w-[1px];
+			}
+
+			.dropdown-title__icon {
+				@apply flex items-center justify-center px-4 py-2;
+			}
+
+			.dropdown-title__summary-text {
+				@apply flex items-center px-4 py-2;
+			}
+
+			.applies-dropdown {
+				@apply flex cursor-pointer items-center gap-1 p-2 px-4 font-normal;
+				.applicable-info {
+					@apply cursor-pointer border-none bg-transparent p-0;
+					&:not(:last-child):after {
+						@apply text-sm;
+						content: ',';
+					}
+				}
+				.applicable-name,
+				.applicable-meta {
+					@apply text-sm;
+				}
+			}
 		}
 	}
 }