@grove-dev/starlight 0.6.0 → 0.7.0

package/core/i18n.ts

@@ -0,0 +1,175 @@
+export type LocaleLookup = {
+    /** BCP-47 tag from the active locale (`locales[x].lang`), e.g. `en`. */
+    lang?: string;
+    /** Locale path key (`Astro.currentLocale`), e.g. `en`. */
+    locale?: string;
+    /** Default locale BCP-47 tag or path used as fallback. */
+    defaultLang: string;
+    /** Default locale path key, e.g. `en`. */
+    defaultLocale?: string;
+};
+
+/**
+ * Pick a value from a locale dictionary.
+ *
+ * Tries exact then case-insensitive matches for active locale candidates first,
+ * then the same for fallback/default candidates. This covers Starlight setups
+ * where config keys are BCP-47 (`es-ES`) but `Astro.currentLocale` is the path
+ * (`es-es`), without letting the default locale shadow an active case-insensitive hit.
+ */
+export function pickLocalized(
+    dictionary: Record<string, string> | undefined,
+    candidates: Array<string | undefined>,
+    fallbacks: Array<string | undefined> = []
+): string | undefined {
+    if (!dictionary) {
+        return undefined;
+    }
+
+    const lowerMap = Object.fromEntries(
+        Object.entries(dictionary).map(([key, value]) => [key.toLowerCase(), value])
+    );
+
+    const pickExact = (keys: Array<string | undefined>) => {
+        for (const key of keys) {
+            if (key && dictionary[key]) {
+                return dictionary[key];
+            }
+        }
+        return undefined;
+    };
+
+    const pickCaseInsensitive = (keys: Array<string | undefined>) => {
+        for (const key of keys) {
+            if (!key) {
+                continue;
+            }
+
+            const match = lowerMap[key.toLowerCase()];
+            if (match) {
+                return match;
+            }
+        }
+        return undefined;
+    };
+
+    return (
+        pickExact(candidates) ??
+        pickCaseInsensitive(candidates) ??
+        pickExact(fallbacks) ??
+        pickCaseInsensitive(fallbacks)
+    );
+}
+
+/** @deprecated Prefer `pickLocalized`. Kept for existing call sites/tests. */
+export function pickLang(
+    dictionary: Record<string, string> | undefined,
+    lang: string
+): string | undefined {
+    return pickLocalized(dictionary, [lang]);
+}
+
+function activeKeys({ lang, locale }: LocaleLookup): Array<string | undefined> {
+    return [lang, locale];
+}
+
+function fallbackKeys({ defaultLang, defaultLocale }: LocaleLookup): Array<string | undefined> {
+    return [defaultLang, defaultLocale];
+}
+
+/**
+ * Resolve a nav link label.
+ *
+ * Supports both APIs:
+ * - Starlight sidebar style: `label: string` + optional `translations`
+ * - Locale map style: `label: Record<BCP-47 | locale-path, string>`
+ */
+export function resolveNavLabel(
+    label: string | Record<string, string>,
+    translations: Record<string, string> | undefined,
+    keys: LocaleLookup
+): string {
+    const primary = activeKeys(keys);
+    const fallback = fallbackKeys(keys);
+
+    if (typeof label === 'string') {
+        return pickLocalized(translations, primary, fallback) || label;
+    }
+
+    const resolved = pickLocalized(label, primary, fallback);
+    if (resolved) {
+        return resolved;
+    }
+
+    throw new Error(
+        `Localized label must include a key for the default language "${keys.defaultLang}".`
+    );
+}
+
+/**
+ * Resolve a sidebar-style label: `translations[lang] ?? label`.
+ * Accepts a LocaleLookup or a bare lang string for convenience.
+ */
+export function resolveLabel(
+    label: string,
+    translations: Record<string, string> | undefined,
+    langOrKeys: string | LocaleLookup
+): string {
+    if (typeof langOrKeys === 'string') {
+        return pickLocalized(translations, [langOrKeys]) || label;
+    }
+
+    return resolveNavLabel(label, translations, langOrKeys);
+}
+
+/**
+ * Resolve a title-style localized string (`string | Record<string, string>`).
+ * Prefers the active language/locale, then falls back to the default language.
+ */
+export function resolveLocalizedString(
+    value: string | Record<string, string>,
+    langOrKeys: string | LocaleLookup,
+    defaultLang?: string
+): string {
+    if (typeof value === 'string') {
+        return value;
+    }
+
+    const keys: LocaleLookup =
+        typeof langOrKeys === 'string'
+            ? { lang: langOrKeys, defaultLang: defaultLang ?? langOrKeys }
+            : langOrKeys;
+
+    const resolved = pickLocalized(value, activeKeys(keys), fallbackKeys(keys));
+    if (resolved) {
+        return resolved;
+    }
+
+    throw new Error(
+        `Localized string must include a key for the default language "${keys.defaultLang}".`
+    );
+}
+
+/** Build a LocaleLookup from Starlight + Astro locale values. */
+export function createLocaleLookup(options: {
+    lang?: string;
+    locale?: string;
+    defaultLang?: string;
+    defaultLocale?: string;
+}): LocaleLookup {
+    const result: LocaleLookup = {
+        defaultLang: options.defaultLang || options.defaultLocale || 'en',
+    };
+
+    if (options.lang !== undefined) {
+        result.lang = options.lang;
+    }
+    if (options.locale !== undefined) {
+        result.locale = options.locale;
+    }
+    if (options.defaultLocale !== undefined) {
+        result.defaultLocale = options.defaultLocale;
+    }
+
+    return result;
+}

package/core/plugin.ts

@@ -3,30 +3,32 @@ import { override, COMPONENT_OVERRIDES } from './config/override';
 import { expressiveCode } from './config/expresive-code';
 import { vitePlugin } from './config/vite';
 import {
-    LucodeStarlightConfigSchema,
-    type LucodeStarlightConfig,
-    type LucodeStarlightUserConfig,
+    GroveStarlightConfigSchema,
+    type GroveStarlightConfig,
+    type GroveStarlightUserConfig,
 } from './config/schemas';
 
-const parseConfig = (userConfig?: LucodeStarlightUserConfig): LucodeStarlightConfig => {
-    const parsedConfig = LucodeStarlightConfigSchema.safeParse(userConfig ?? {});
+const parseConfig = (userConfig?: GroveStarlightUserConfig): GroveStarlightConfig => {
+    const parsedConfig = GroveStarlightConfigSchema.safeParse(userConfig ?? {});
 
     if (!parsedConfig.success) {
         throw new Error(
-            `The provided plugin configuration for @grove-dev/starlight is invalid.\n${parsedConfig.error.issues.map((issue) => issue.message).join('\n')}`
+            `The provided plugin configuration for grove-starlight is invalid.\n${parsedConfig.error.issues.map((issue) => issue.message).join('\n')}`
         );
     }
 
     return parsedConfig.data;
 };
 
-const plugin = (userConfig?: LucodeStarlightUserConfig): StarlightPlugin =>
+const plugin = (userConfig: GroveStarlightUserConfig = {}): StarlightPlugin =>
     ({
-        name: '@grove-dev/starlight',
+        name: 'grove-starlight',
         hooks: {
             'config:setup': ({ config, logger, updateConfig, addIntegration }) => {
+                const pluginConfig = parseConfig(userConfig);
+
                 updateConfig({
-                    components: override(config, COMPONENT_OVERRIDES, logger),
+                    components: override(config, pluginConfig, COMPONENT_OVERRIDES, logger),
                     customCss: [
                         ...(config.customCss ?? []),
                         '@grove-dev/starlight/styles/layers',
@@ -37,11 +39,11 @@ const plugin = (userConfig?: LucodeStarlightUserConfig): StarlightPlugin =>
                 });
 
                 addIntegration({
-                    name: '@grove-dev/starlight/integration',
+                    name: 'grove-starlight-integration',
                     hooks: {
                         'astro:config:setup': ({ updateConfig }) => {
                             updateConfig({
-                                vite: { plugins: [vitePlugin(parseConfig(userConfig))] },
+                                vite: { plugins: [vitePlugin(pluginConfig)] },
                             });
                         },
                     },

package/core/sidebar.ts

@@ -0,0 +1,22 @@
+import type { StarlightRouteData } from '@astrojs/starlight/route-data';
+
+export type SidebarEntry = StarlightRouteData['sidebar'][number];
+export type SidebarGroup = Extract<SidebarEntry, { type: 'group' }>;
+export type SidebarLink = Extract<SidebarEntry, { type: 'link' }>;
+
+/** Every link reachable from `entries`, at any depth. */
+export function flattenSidebar(entries: SidebarEntry[]): SidebarLink[] {
+    return entries.flatMap((entry) =>
+        entry.type === 'group' ? flattenSidebar(entry.entries) : [entry]
+    );
+}
+
+/**
+ * Whether a group renders expanded.
+ *
+ * `collapsed` is the author's default, but a group holding the current page always opens, otherwise
+ * the reader would land on a page with no idea where they are in the tree.
+ */
+export function isSidebarGroupOpen(group: SidebarGroup): boolean {
+    return !group.collapsed || flattenSidebar(group.entries).some((link) => link.isCurrent);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grove-dev/starlight",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "description": "Grove's theme for Starlight (the Astro native documentation site generator)",
   "author": "grove-dev",
@@ -9,7 +9,7 @@
     "node": ">=22.12.0"
   },
   "readme": "README.md",
-  "homepage": "https://grove.dev.mn/",
+  "homepage": "https://withgrove.dev/",
   "repository": {
     "type": "git",
     "url": "https://github.com/tortuvshin/grove.git",
@@ -21,18 +21,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": [
-    "components",
-    "core",
-    "styles",
-    "global.d.ts",
-    "index.ts",
-    "schema.ts",
-    "user-components.ts",
-    "virtual.d.ts",
-    "README.md",
-    "THIRD_PARTY_LICENSES.md"
-  ],
   "exports": {
     ".": "./index.ts",
     "./schema": "./schema.ts",
@@ -59,14 +47,10 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.38.3",
-    "astro": ">=5.0.0"
+    "@astrojs/starlight": ">=0.41.4"
   },
   "dependencies": {
     "@pagefind/default-ui": "^1.5.2",
     "marked": "^18.0.2"
-  },
-  "scripts": {
-    "test": "cd ../.. && pnpm exec vitest run --project starlight"
   }
 }

package/schema.ts

@@ -1,4 +1,9 @@
 import { z } from 'astro/zod';
+import { markDocsSchemaLoaded } from './core/config/docs-schema';
+
+// Lets `Hero.astro` tell "the user never wired up the schema" apart from "this page has no extra
+// hero fields", so it only warns in the first case. See `core/config/docs-schema.ts`.
+markDocsSchemaLoaded();
 
 export const heroLayoutSchema = z
     .enum(['centered', 'centered-top', 'split-left', 'split-right', 'banner'])
@@ -19,6 +24,32 @@ export const ExtendDocsSchema = z.object({
                     link: z.string(),
                 })
                 .optional(),
+            actions: z
+                .array(
+                    z.object({
+                        /**
+                         * Button style to use. Starlight's own `primary` and `minimal` are accepted
+                         * as aliases of `default` and `ghost` so existing frontmatter keeps working.
+                         *
+                         * Requires `@astrojs/starlight >= 0.41.4`, which is the first version whose
+                         * `docsSchema({ extend })` deep-merges instead of intersecting — an
+                         * intersection cannot widen an enum Starlight already declares.
+                         */
+                        variant: z
+                            .enum([
+                                'default',
+                                'link',
+                                'secondary',
+                                'outline',
+                                'ghost',
+                                'destructive',
+                                'primary',
+                                'minimal',
+                            ])
+                            .default('default'),
+                    })
+                )
+                .default([]),
         })
         .optional(),
 });

package/styles/base.css

@@ -1,4 +1,4 @@
-@layer lucode {
+@layer grove {
     /* theme */
     :root {
         --tracking-tight: -0.025em;
@@ -10,6 +10,7 @@
         --radius: 0.625rem;
         --header-height: calc(var(--spacing) * 14);
         --sidebar-width: 18rem;
+        --content-max-width: 40rem;
         --container-max-width: 1600px;
 
         /* starlight color mappings */
@@ -54,6 +55,7 @@
         --muted-foreground: var(--gray-3);
         --accent: var(--gray-5);
         --accent-foreground: var(--foreground);
+        --destructive: var(--red);
         --border: var(--gray-6);
         --input: var(--gray-8);
         --ring: var(--gray-4);
@@ -330,11 +332,24 @@
     /* built-in Starlight Cards and LinkCards */
     .sl-markdown-content .card-grid {
         gap: 1rem;
-        grid-auto-rows: 1fr;
     }
 
-    .sl-markdown-content .card-grid > * {
-        height: 100%;
+    /* Starlight sizes the two-up grid as `1fr 1fr`, which is really
+       `minmax(auto, 1fr)`: a track can never shrink below the min-content
+       width of what it holds. A card full of long inline code -- file paths
+       like `data/generated/records.full.json` -- therefore pushes its track
+       past half the content column, and the second card lands outside the
+       article, on top of the table of contents. `minmax(0, 1fr)` lets the
+       tracks shrink, and `anywhere` (not `break-word`, which does not affect
+       intrinsic sizing) lets the code inside them wrap to fit. */
+    @media (min-width: 50rem) {
+        .sl-markdown-content .card-grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+    }
+
+    .sl-markdown-content :is(.card, .sl-link-card) :is(code, a) {
+        overflow-wrap: anywhere;
     }
 
     .sl-markdown-content :is(.card, .sl-link-card) {
@@ -344,7 +359,6 @@
         background-color: var(--code-background);
         box-shadow: none;
         transition: background-color 0.15s;
-        height: 100%;
     }
 
     .sl-markdown-content :is(.card, .sl-link-card):hover {
@@ -736,21 +750,35 @@
         display: none;
     }
 
+    /* A step's heading sits on the same line as its number bullet. The wrapper
+     * only sets a *minimum* height: a fixed `height` clips any heading that is
+     * taller than the bullet (an `h2` step title) or wraps to a second line on
+     * narrow viewports, and the following block — usually a code frame — then
+     * paints over the overflowing text. */
     .sl-markdown-content .sl-steps > li > .sl-heading-wrapper {
         display: flex;
         align-items: center;
         gap: 0.5rem;
-        height: var(--bullet-size);
+        /* Matches the h3/h4 anchor icon: the level-h2 default (1.25rem) is
+         * sized for a full-size heading, not a step title. */
+        --sl-anchor-icon-size: 0.875rem;
         min-height: var(--bullet-size);
         transform: none;
         margin-bottom: 0;
     }
 
-    .sl-markdown-content .sl-steps > li > .sl-heading-wrapper :is(h3, h4) {
+    /* Step titles render at one size whatever heading level the page picked,
+     * so `## Step` and `### Step` look the same inside <Steps>. */
+    .sl-markdown-content .sl-steps > li > .sl-heading-wrapper :is(h1, h2, h3, h4, h5, h6) {
         font-size: 1rem;
         line-height: 1.75rem;
         font-weight: 500;
         margin: 0;
+        /* `h2` carries a `padding-top` for section spacing further up this file;
+         * inside a step it would push the title off the number bullet's line.
+         * Only the block padding is reset — the inline padding is the room
+         * Starlight reserves for the anchor-link icon. */
+        padding-block: 0;
     }
 
     .sl-markdown-content .sl-steps > li > .sl-heading-wrapper .sl-anchor-link {

package/styles/layers.css

@@ -1 +1 @@
-@layer starlight, lucode;
+@layer starlight, grove;

package/styles/theme.css

@@ -1,4 +1,4 @@
-@layer lucode {
+@layer grove {
     :root[data-theme='dark'] {
         /* starlight gray scale */
         --foreground: oklch(98.5% 0 0); /* neutral-50 */
@@ -16,7 +16,7 @@
         --orange: oklch(83.7% 0.128 66.29);
         --orange-high: oklch(90.1% 0.076 70.697);
         --green-low: oklch(26.6% 0.065 152.934);
-        --green: oklch(78% 0.19 152);
+        --green: oklch(79.2% 0.209 151.711);
         --green-high: oklch(87.1% 0.15 154.449);
         --blue-low: oklch(29.3% 0.066 243.157);
         --blue: oklch(70.7% 0.165 254.624);

package/user-components.ts

@@ -1,4 +1,3 @@
-export { default as Card } from './components/custom/Card.astro';
 export { default as ContainerSection } from './components/custom/ContainerSection.astro';
 export { default as LinkButton } from './components/custom/LinkButton.astro';
 export { default as Dropdown } from './components/custom/dropdown';

package/virtual.d.ts

@@ -1,6 +1,6 @@
-declare module 'virtual:lucode-starlight-config' {
-    const LucodeStarlightConfig: import('./core/config/schemas').LucodeStarlightConfig;
-    export default LucodeStarlightConfig;
+declare module 'virtual:grove-starlight-config' {
+    const GroveStarlightConfig: import('./core/config/schemas').GroveStarlightConfig;
+    export default GroveStarlightConfig;
 }
 
 declare module 'virtual:starlight/user-config' {

package/THIRD_PARTY_LICENSES.md

@@ -1,68 +0,0 @@
-# Third-party attributions — `@grove-dev/starlight`
-
-This package incorporates design and code from upstream projects. The
-contributions are credited below; reproduction of the upstream license
-texts follows the attribution block. The Grove project ships
-`@grove-dev/starlight` under the same MIT license that the rest of the
-monorepo uses; the third-party license texts below are reproduced here
-to satisfy the upstream attribution requirements.
-
-> **⚠️ TODO(decision): license compatibility check.**
-> The audit and the project's own README credit the upstream work as
-> "lucode / lucas-labs" and reference
-> `https://github.com/lucas-labs/@grove-dev/starlight-theme`. Before the
-> first publish of `@grove-dev/starlight` to npm, the project owner
-> must:
->
-> 1. Confirm the exact upstream repo URL (the `lucas-labs/...` path
->    in the README is a placeholder; the real upstream is
->    `lucode-labs/lucode` or similar — verify on GitHub).
-> 2. Verify the upstream license (MIT? Apache-2.0? something else?)
->    and confirm it is compatible with the Grove monorepo's MIT
->    distribution.
-> 3. If compatible, replace the `<!-- TODO LICENSE TEXT -->` block
->    below with the verbatim upstream license text (most MIT projects
->    use the standard MIT text — the canonical version is at
->    <https://opensource.org/licenses/MIT>).
-> 4. If not compatible, either obtain a written license grant from
->    the upstream maintainer OR replace the derivative design with
->    original work before publishing.
->
-> Tracking issue:
-> <https://github.com/tortuvshin/grove/issues/new?title=starlight%3A+verify+third-party+license+compatibility>
-
-## Upstream credits
-
-The design and component overrides in this package derive from:
-
-- **[lucode](https://github.com/lucas-labs/@grove-dev/starlight-theme)** by the
-  **lucas-labs** organization (also referenced as "Lucode" in the
-  package's `user-components.ts` and component overrides). The theme
-  recreates the design of [shadcn/ui](https://ui.shadcn.com/) (MIT)
-  for use inside Astro Starlight, with custom overrides for the
-  header, sidebar, page frame, hero, footer, search, table of
-  contents, pagination, and Markdown content. See the package
-  `README.md` (the "Attribution" and "Usage" sections) for the
-  in-code pointers.
-- **[adrian-ub/starlight-theme-black](https://github.com/adrian-ub/starlight-theme-black)**
-  — the earlier shadcn/ui-inspired Starlight theme that
-  `lucas-labs/@grove-dev/starlight-theme` was based on (per the
-  upstream README).
-- **[shadcn/ui](https://ui.shadcn.com/)** — the original design
-  language that the upstream work and this package both target.
-
-## Upstream license
-
-<!-- TODO LICENSE TEXT: paste the verbatim upstream license (typically
-the standard MIT text with copyright line) here once the license
-compatibility check above is complete. Until then this section is
-intentionally empty so the file can ship without misrepresenting the
-upstream license. -->
-
-## License for this package
-
-`@grove-dev/starlight` is distributed under the **MIT License** — see
-[`../core/LICENSE`](../../LICENSE) at the monorepo root for the
-canonical text. The third-party attributions above are reproduced for
-compliance with the upstream license terms; they do not change the
-license of the rest of the package.

package/components/custom/Card.astro

@@ -1,118 +0,0 @@
----
-/**
- * Starlight `<Card>` override that adds an optional `href` prop.
- *
- * The upstream `Card.astro` in `@astrojs/starlight@0.40` only accepts
- * `icon` and `title`, so a `<Card title="..." href="...">` call silently
- * dropped the link and rendered a non-clickable `<article>`. We wrap the
- * inner content in an `<a>` when `href` is present so the entire card
- * surface is interactive (the same affordance the `LinkCard` component
- * uses, but with our visual `Card` styling).
- *
- * Visual styles are identical to upstream — only the structure gains a
- * single `<a>` wrapper when `href` is set.
- */
-import { Icon } from '@astrojs/starlight/components';
-import type { StarlightIcon } from '@astrojs/starlight/components-internals/Icons';
-
-interface Props {
-  icon?: StarlightIcon;
-  title: string;
-  href?: string;
-}
-
-const { icon, title, href } = Astro.props;
----
-
-<article class="card sl-flex">
-    <p class="title sl-flex">
-        {icon && <Icon name={icon} class="icon" size="1.333em" />}
-        <span>{title}</span>
-    </p>
-    <div class="body">
-        {href ? <a {href} class="sl-card-link"><slot /></a> : <slot />}
-    </div>
-</article>
-
-<style>
-    @layer starlight.components {
-        .card {
-            --sl-card-border: var(--sl-color-purple);
-            --sl-card-bg: var(--sl-color-purple-low);
-            border: 1px solid var(--sl-color-gray-5);
-            background-color: var(--sl-color-black);
-            padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
-            flex-direction: column;
-            gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
-            transition: border-color 0.15s ease, transform 0.15s ease;
-        }
-        .card:nth-child(4n + 1) {
-            --sl-card-border: var(--sl-color-orange);
-            --sl-card-bg: var(--sl-color-orange-low);
-        }
-        .card:nth-child(4n + 3) {
-            --sl-card-border: var(--sl-color-green);
-            --sl-card-bg: var(--sl-color-green-low);
-        }
-        .card:nth-child(4n + 4) {
-            --sl-card-border: var(--sl-color-red);
-            --sl-card-bg: var(--sl-color-red-low);
-        }
-        .card:nth-child(4n + 5) {
-            --sl-card-border: var(--sl-color-blue);
-            --sl-card-bg: var(--sl-color-blue-low);
-        }
-        .title {
-            font-weight: 600;
-            font-size: var(--sl-text-h4);
-            color: var(--sl-color-white);
-            line-height: var(--sl-line-height-headings);
-            gap: 1rem;
-            align-items: center;
-        }
-        .card .icon {
-            border: 1px solid var(--sl-card-border);
-            background-color: var(--sl-card-bg);
-            padding: 0.2em;
-            border-radius: 0.25rem;
-            flex-shrink: 0;
-        }
-        .card .body {
-            margin: 0;
-            font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
-        }
-        .card .body .sl-card-link {
-            /* The link is invisible text-decoration-wise; the card itself
-             * is the click target thanks to the ::before pseudo-element
-             * below. Display:contents lets the link wrap the body text
-             * without breaking the flex/grid layout. */
-            display: contents;
-            color: inherit;
-        }
-        .card:has(.sl-card-link) {
-            position: relative;
-            cursor: pointer;
-        }
-        .card:has(.sl-card-link):hover {
-            border-color: var(--sl-color-gray-2);
-        }
-        .card:has(.sl-card-link):hover .title {
-            color: var(--sl-color-accent-high);
-        }
-        /* a11y: a transparent overlay makes the whole card clickable
-         * without changing layout. Same trick Starlight's LinkCard uses. */
-        .card:has(.sl-card-link) .sl-card-link::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-        }
-        /* Focus-visible ring anchored to the card surface so keyboard
-         * users see a clear focus indicator (otherwise the transparent
-         * overlay hides the default link outline). */
-        .card:has(.sl-card-link:focus-visible) {
-            outline: 2px solid var(--sl-color-accent);
-            outline-offset: 2px;
-        }
-    }
-</style>