@turnipxenon/pineapple 3.0.0 → 3.1.0-alpha.10

package/dist/ui/elements/ImageIcon.svelte

@@ -1,54 +1,54 @@
-<script lang="ts">
-	import type { HTMLImgAttributes } from 'svelte/elements';
-	import type { GeneralUIProps } from './GeneralUIProps';
-	import { ColorScheme } from './ColorScheme';
-
-	type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
-
-	const {
-		colorScheme = ColorScheme.Primary,
-		...props
-	}: PinyaButtonProps = $props();
-
-	const chooseTailwindClass = () => {
-		switch (colorScheme) {
-			case ColorScheme.Warning:
-				return 'btn preset-filled-warning-600-400 text-surface-100 hover:brightness-110';
-			case ColorScheme.Surface:
-				return 'btn preset-filled-surface-800-200 text-surface-100-900 hover:brightness-110';
-			default:
-				console.error('Unimplemented color scheme');
-			// eslint-disable-next-line no-fallthrough
-			case ColorScheme.Primary:
-				return 'icon-filter-on-primary-button';
-		}
-	};
-
-	const tailwindClass = chooseTailwindClass();
-</script>
-
-<img
-	{...props}
-	class={`image-icon ${tailwindClass}`}>
-
-<style>
-		:global(.image-icon) {
-        height: calc(var(--spacing) * 8);
-		}
-
-		:global(.small-icon-button .image-icon) {
-        height: calc(var(--spacing) * 6);
-		}
-
-    :global(.icon-filter-on-primary-button) {
-				/* based on secondary-950 */
-        filter: brightness(0) saturate(100%) invert(18%) sepia(10%) saturate(4620%) hue-rotate(331deg) brightness(90%) contrast(88%);
-    }
-
-    @media (prefers-color-scheme: dark) {
-        :global(.icon-filter-on-primary-button) {
-						/* based on surface-0 */
-            filter: brightness(0) saturate(100%) invert(85%) sepia(3%) saturate(993%) hue-rotate(326deg) brightness(113%) contrast(105%);
-        }
-    }
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import type { GeneralUIProps } from "./GeneralUIProps";
+	import { ColorScheme } from "./ColorScheme";
+
+	type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
+
+	const {
+		colorScheme = ColorScheme.Primary,
+		...props
+	}: PinyaButtonProps = $props();
+
+	const chooseTailwindClass = () => {
+		switch (colorScheme) {
+			case ColorScheme.Warning:
+				return 'btn preset-filled-warning-600-400 text-surface-100 hover:brightness-110';
+			case ColorScheme.Surface:
+				return 'btn preset-filled-surface-800-200 text-surface-100-900 hover:brightness-110';
+			default:
+				console.error('Unimplemented color scheme');
+			// eslint-disable-next-line no-fallthrough
+			case ColorScheme.Primary:
+				return 'icon-filter-on-primary-button';
+		}
+	};
+
+	const tailwindClass = chooseTailwindClass();
+</script>
+
+<img
+	{...props}
+	class={`image-icon ${tailwindClass}`}>
+
+<style>
+		:global(.image-icon) {
+        height: calc(var(--spacing) * 8);
+		}
+
+		:global(.small-icon-button .image-icon) {
+        height: calc(var(--spacing) * 6);
+		}
+
+    :global(.icon-filter-on-primary-button) {
+				/* based on secondary-950 */
+        filter: brightness(0) saturate(100%) invert(18%) sepia(10%) saturate(4620%) hue-rotate(331deg) brightness(90%) contrast(88%);
+    }
+
+    @media (prefers-color-scheme: dark) {
+        :global(.icon-filter-on-primary-button) {
+						/* based on surface-0 */
+            filter: brightness(0) saturate(100%) invert(85%) sepia(3%) saturate(993%) hue-rotate(326deg) brightness(113%) contrast(105%);
+        }
+    }
 </style>

package/dist/ui/elements/ImageIcon.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLImgAttributes } from 'svelte/elements';
-import type { GeneralUIProps } from './GeneralUIProps';
+import type { GeneralUIProps } from "./GeneralUIProps";
 type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
 declare const ImageIcon: import("svelte").Component<PinyaButtonProps, {}, "">;
 type ImageIcon = ReturnType<typeof ImageIcon>;

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { ColorScheme } from "../ColorScheme";
+	import { ButtonVariant } from "../PinyaButtonCommon/ButtonVariant";
+	import { createButtonClass } from "../PinyaButtonCommon/createButtonClass";
+	import type { PinyaAnchorButtonProps } from "./PinyaAnchorButtonProps";
+
+	let {
+		children,
+		colorScheme = ColorScheme.Primary,
+		paddingClass = "",
+		buttonVariant = ButtonVariant.Default,
+		colorClass = "",
+		classes = "",
+		...props
+	}: PinyaAnchorButtonProps = $props();
+
+	let tailwindClass = $derived(createButtonClass({ colorScheme, paddingClass, buttonVariant, colorClass, classes }));
+</script>
+
+<a
+	{...props}
+	class={`a-as-btn ${tailwindClass}}`}
+>
+	{@render children()}
+</a>

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PinyaAnchorButtonProps } from "./PinyaAnchorButtonProps";
+declare const PinyaAnchorButton: import("svelte").Component<PinyaAnchorButtonProps, {}, "">;
+type PinyaAnchorButton = ReturnType<typeof PinyaAnchorButton>;
+export default PinyaAnchorButton;

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButtonProps.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import type { PinyaButtonCommonProps } from "../PinyaButtonCommon/PinyaButtonCommonProps";
+import type { WrapperProps } from "../index";
+export type PinyaAnchorButtonProps = WrapperProps & HTMLAnchorAttributes & PinyaButtonCommonProps;

package/dist/ui/elements/PinyaAnchorButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaAnchorButton } from "./PinyaAnchorButton.svelte";
+export * from "./PinyaAnchorButtonProps";

package/dist/ui/elements/PinyaAnchorButton/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaAnchorButton } from "./PinyaAnchorButton.svelte";
+export * from "./PinyaAnchorButtonProps";

package/dist/ui/elements/PinyaButton/PinyaButton.svelte

@@ -1,48 +1,25 @@
 <script lang="ts">
-	import { ButtonVariant, type PinyaButtonProps } from './PinyaButtonProps';
+	import { type PinyaButtonProps } from "./PinyaButtonProps";
 	import { ColorScheme } from "../ColorScheme";
+	import { ButtonVariant } from "../PinyaButtonCommon/ButtonVariant";
+	import { createButtonClass } from "../PinyaButtonCommon/createButtonClass";
 
 	let {
 		children,
 		colorScheme = ColorScheme.Primary,
-		paddingClass = '',
+		paddingClass = "",
 		buttonVariant = ButtonVariant.Default,
-		colorClass = '',
-		classes = '',
+		colorClass = "",
+		classes = "",
 		...props
 	}: PinyaButtonProps = $props();
 
-	paddingClass = paddingClass
-		? paddingClass
-		: (
-			buttonVariant === ButtonVariant.Image
-				? 'pl-3 pr-3 pt-2 pb-2'
-				: 'pl-3 pr-3'
-		);
-
-	const chooseTailwindClass = () => {
-		switch (colorScheme) {
-			case ColorScheme.Custom:
-				return colorClass;
-			case ColorScheme.Warning:
-				return 'bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110';
-			case ColorScheme.Surface:
-				return 'bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110';
-			default:
-				console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
-			// eslint-disable-next-line no-fallthrough
-			case ColorScheme.Primary:
-				return 'bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110';
-		}
-	};
-
-	const tailwindClass = chooseTailwindClass();
+	let tailwindClass = $derived(createButtonClass({ colorScheme, paddingClass, buttonVariant, colorClass, classes }));
 </script>
 
 <button
 	{...props}
-	class:small-icon-button={buttonVariant === ButtonVariant.SmallIcon}
-	class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass} ${classes}`}
+	class={tailwindClass}
 >
 	{@render children()}
 </button>

package/dist/ui/elements/PinyaButton/PinyaButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PinyaButtonProps } from './PinyaButtonProps';
+import { type PinyaButtonProps } from "./PinyaButtonProps";
 declare const PinyaButton: import("svelte").Component<PinyaButtonProps, {}, "">;
 type PinyaButton = ReturnType<typeof PinyaButton>;
 export default PinyaButton;

package/dist/ui/elements/PinyaButton/PinyaButtonProps.d.ts

@@ -1,14 +1,4 @@
-import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { GeneralUIProps } from '../GeneralUIProps';
-import type { WrapperProps } from '../WrapperProps';
-export declare enum ButtonVariant {
-    Default = 0,
-    Image = 1,
-    SmallIcon = 2
-}
-export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & GeneralUIProps & {
-    paddingClass?: string;
-    buttonVariant?: ButtonVariant;
-    colorClass?: string;
-    classes?: string;
-};
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { PinyaButtonCommonProps } from "../PinyaButtonCommon/PinyaButtonCommonProps";
+import type { WrapperProps } from "../index";
+export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & PinyaButtonCommonProps;

package/dist/ui/elements/PinyaButton/PinyaButtonProps.js

@@ -1,6 +1 @@
-export var ButtonVariant;
-(function (ButtonVariant) {
-    ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
-    ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
-    ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
-})(ButtonVariant || (ButtonVariant = {}));
+export {};

package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.d.ts

@@ -0,0 +1,5 @@
+export declare enum ButtonVariant {
+    Default = 0,
+    Image = 1,
+    SmallIcon = 2
+}

package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.js

@@ -0,0 +1,6 @@
+export var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
+    ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
+    ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
+})(ButtonVariant || (ButtonVariant = {}));

package/dist/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.d.ts

@@ -0,0 +1,8 @@
+import { type GeneralUIProps } from "../index";
+import { ButtonVariant } from "./ButtonVariant";
+export type PinyaButtonCommonProps = GeneralUIProps & {
+    paddingClass?: string;
+    buttonVariant?: ButtonVariant;
+    colorClass?: string;
+    classes?: string;
+};

package/dist/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.js

@@ -0,0 +1,2 @@
+import {} from "../index";
+import { ButtonVariant } from "./ButtonVariant";

package/dist/ui/elements/PinyaButtonCommon/createButtonClass.d.ts

@@ -0,0 +1,2 @@
+import type { PinyaButtonCommonProps } from "./PinyaButtonCommonProps";
+export declare const createButtonClass: (props: PinyaButtonCommonProps) => string;

package/dist/ui/elements/PinyaButtonCommon/createButtonClass.js

@@ -0,0 +1,31 @@
+import { ColorScheme } from "../ColorScheme";
+import { ButtonVariant } from "./ButtonVariant";
+export const createButtonClass = (props) => {
+    let { colorScheme, paddingClass, buttonVariant, colorClass, classes } = props;
+    colorScheme ??= ColorScheme.Primary;
+    buttonVariant ??= ButtonVariant.Default;
+    paddingClass ??= buttonVariant === ButtonVariant.Image
+        ? "pl-3 pr-3 pt-2 pb-2"
+        : "pl-3 pr-3";
+    colorClass ??= "";
+    classes ??= "";
+    const chooseTailwindClass = () => {
+        switch (colorScheme) {
+            case ColorScheme.Custom:
+                return colorClass;
+            case ColorScheme.Warning:
+                return "bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110";
+            case ColorScheme.Surface:
+                return "bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110";
+            default:
+                console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
+            // eslint-disable-next-line no-fallthrough
+            case ColorScheme.Primary:
+                return "bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110";
+        }
+    };
+    const tailwindClass = chooseTailwindClass();
+    return `btn rounded-2xl text-xl font-bold 
+	${buttonVariant === ButtonVariant.SmallIcon ? 'small-icon-button' : ''}
+	${tailwindClass} ${paddingClass} ${classes}`;
+};

package/dist/ui/elements/PinyaButtonCommon/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ButtonVariant";
+export * from "./createButtonClass";
+export * from "./PinyaButtonCommonProps";

package/dist/ui/elements/PinyaButtonCommon/index.js

@@ -0,0 +1,3 @@
+export * from "./ButtonVariant";
+export * from "./createButtonClass";
+export * from "./PinyaButtonCommonProps";

package/dist/ui/elements/PinyaCard/PinyaCard.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">/**
+ * When with texts, wrap the text content inside a div so flex wont apply
+ */
+import type { PinyaCardProps } from "./PinyaCardProps";
+
+let {
+	paddingClass = "pt-[1lh] pb-[1lh] pl-16 pr-16",
+	flexClass = "flex flex-col",
+	widthClass = "w-full max-w-md",
+	borderClass = "border-[2px] border-primary-500 dark:border-0",
+	colorClass = "bg-surface-200 dark:bg-surface-900",
+	marginClass = "",
+	className,
+	includeDataNoSnippet = false,
+	children
+}: PinyaCardProps = $props();
+
+let cardClass = $derived(`card text-start rounded-xl
+	${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass} ${colorClass}`);
+</script>
+
+{#if includeDataNoSnippet}
+	<div data-nosnippet class={cardClass}>
+		{@render children?.()}
+	</div>
+{:else }
+	<div class={cardClass}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/ui/elements/PinyaCard/PinyaCard.svelte.d.ts

@@ -0,0 +1,7 @@
+/**
+ * When with texts, wrap the text content inside a div so flex wont apply
+ */
+import type { PinyaCardProps } from "./PinyaCardProps";
+declare const PinyaCard: import("svelte").Component<PinyaCardProps, {}, "">;
+type PinyaCard = ReturnType<typeof PinyaCard>;
+export default PinyaCard;

package/dist/ui/elements/{pinya-card/props.d.ts → PinyaCard/PinyaCardProps.d.ts}

@@ -6,5 +6,6 @@ export interface PinyaCardProps extends WrapperProps {
     widthClass?: string;
     borderClass?: string;
     marginClass?: string;
+    colorClass?: string;
     includeDataNoSnippet?: boolean;
 }

package/dist/ui/elements/PinyaCard/PinyaCardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/elements/PinyaCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaCard } from "./PinyaCard.svelte";
+export * from "./PinyaCardProps";

package/dist/ui/elements/PinyaCard/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaCard } from "./PinyaCard.svelte";
+export * from "./PinyaCardProps";

package/dist/ui/elements/Placeholder.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-	let {
-		isCircle = false,
-		classes = '',
-	}: {
-		isCircle?: boolean;
-		classes?: string;
-	} = $props();
-</script>
-
-<div
-	class="
-	{isCircle ?'placeholder-circle' : 'placeholder'}
-	animate-pulse bg-surface-600 dark:bg-surface-800
-	{classes}
-"
-></div>
+<script lang="ts">
+	let {
+		isCircle = false,
+		classes = '',
+	}: {
+		isCircle?: boolean;
+		classes?: string;
+	} = $props();
+</script>
+
+<div
+	class="
+	{isCircle ?'placeholder-circle' : 'placeholder'}
+	animate-pulse bg-surface-600 dark:bg-surface-800
+	{classes}
+"
+></div>

package/dist/ui/elements/TextLink.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import { type Snippet } from 'svelte';
-
-	let {
-		children,
-		href
-	}: { href: string, children: Snippet } = $props();
-</script>
-
-<a
-	{href}
-	class="visited:text-surface-950 dark:visited:text-surface-400">
-	{@render children?.()}
-</a>
-
-<style>
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	let {
+		children,
+		href
+	}: { href: string, children: Snippet } = $props();
+</script>
+
+<a
+	{href}
+	class="visited:text-surface-950 dark:visited:text-surface-400">
+	{@render children?.()}
+</a>
+
+<style>
 </style>

package/dist/ui/elements/index.d.ts

@@ -1,11 +1,13 @@
-export { default as ImageIcon } from "./ImageIcon.svelte";
-export { default as TextLink } from "./TextLink.svelte";
-export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
 export * from "./ColorScheme";
 export * from "./GeneralUIProps";
 export * from "./OnBackground";
-export * from "./pinya-card/index";
+export * from "./PinyaButtonCommon";
+export { default as ImageIcon } from "./ImageIcon.svelte";
+export { default as TextLink } from "./TextLink.svelte";
+export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
+export * from "./PinyaCard/index";
 export * from "./WrapperProps";
-export * from "./PinyaButton/index";
+export * from "./PinyaButton";
+export * from "./PinyaAnchorButton";
 export * from "./text-chip";
 export * from "./CodeBlock";

package/dist/ui/elements/index.js

@@ -1,11 +1,15 @@
-export { default as ImageIcon } from "./ImageIcon.svelte";
-export { default as TextLink } from "./TextLink.svelte";
-export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
+// types
 export * from "./ColorScheme";
 export * from "./GeneralUIProps";
 export * from "./OnBackground";
-export * from "./pinya-card/index";
+export * from "./PinyaButtonCommon";
+// components
+export { default as ImageIcon } from "./ImageIcon.svelte";
+export { default as TextLink } from "./TextLink.svelte";
+export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
+export * from "./PinyaCard/index";
 export * from "./WrapperProps";
-export * from "./PinyaButton/index";
+export * from "./PinyaButton";
+export * from "./PinyaAnchorButton";
 export * from "./text-chip";
 export * from "./CodeBlock";

package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte

@@ -1,35 +1,35 @@
-<script lang="ts" generics="T extends string">
-	import { Combobox } from '@skeletonlabs/skeleton-svelte';
-	import { getLocale, localizeHref } from '../../../paraglide/runtime';
-	import type { PinyaComboboxProps, ValueChangeDetails } from "./PinyaComboboxProps";
-
-	let {
-		contentZIndex = 'auto',
-		value = $bindable(),
-		onValueChange = () => {},
-		onValueChangeBase = undefined,
-		...props
-	}: PinyaComboboxProps<T> = $props();
-
-	const onValueChangeBaseImpl = (e: ValueChangeDetails<T>) => {
-		value = e.value as T[];
-		onValueChange(e);
-	};
-</script>
-
-<Combobox
-	width="w-full"
-	labelText="text-md"
-	inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
-	inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
-	inputGroupButton="size-[3rem]"
-	inputGroupArrow="size-[2rem] m-auto"
-	contentBackground="bg-surface-100-900 border-primary-500 border-2"
-	zIndex={contentZIndex}
-	optionActive="bg-secondary-400-600"
-	optionHover="hover:brightness-75 dark:hover:brightness-125"
-	optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
-	onValueChange={onValueChangeBase ?? onValueChangeBaseImpl}
-	{value}
-	{...props}
+<script lang="ts" generics="T extends string">
+	import { Combobox } from '@skeletonlabs/skeleton-svelte';
+	import { getLocale, localizeHref } from '../../../paraglide/runtime';
+	import type { PinyaComboboxProps, ValueChangeDetails } from "./PinyaComboboxProps";
+
+	let {
+		contentZIndex = 'auto',
+		value = $bindable(),
+		onValueChange = () => {},
+		onValueChangeBase = undefined,
+		...props
+	}: PinyaComboboxProps<T> = $props();
+
+	const onValueChangeBaseImpl = (e: ValueChangeDetails<T>) => {
+		value = e.value as T[];
+		onValueChange(e);
+	};
+</script>
+
+<Combobox
+	width="w-full"
+	labelText="text-md"
+	inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
+	inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
+	inputGroupButton="size-[3rem]"
+	inputGroupArrow="size-[2rem] m-auto"
+	contentBackground="bg-surface-100-900 border-primary-500 border-2"
+	zIndex={contentZIndex}
+	optionActive="bg-secondary-400-600"
+	optionHover="hover:brightness-75 dark:hover:brightness-125"
+	optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
+	onValueChange={onValueChangeBase ?? onValueChangeBaseImpl}
+	{value}
+	{...props}
 />

package/dist/ui/elements/text-chip/TextChip.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-	import type { TextChipProps } from "./TextChipProps";
-
-	let { children, queryClass = "" }: TextChipProps = $props();
-</script>
-
-<span class={`chip text-chip font-bold pointer-events-none ${queryClass}`}>{@render children()}</span>
-
-<style>
-    /*noinspection CssUnusedSymbol*/
-    :global(.highlight-chip.text-chip) {
-        background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
-        color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
-    }
+<script lang="ts">
+	import type { TextChipProps } from "./TextChipProps";
+
+	let { children, queryClass = "" }: TextChipProps = $props();
+</script>
+
+<span class={`chip text-chip font-bold pointer-events-none ${queryClass}`}>{@render children()}</span>
+
+<style>
+    /*noinspection CssUnusedSymbol*/
+    :global(.highlight-chip.text-chip) {
+        background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
+        color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
+    }
 </style>