@refrakt-md/lumina 0.4.0

package/dist/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,MAAM,WAAW,aAAa;IAC7B,QAAQ,EAAE,KAAK,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,QAAQ,EAAE,YAAY,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,YAAY,EAAE,CAAC;AAE/F,2DAA2D;AAC3D,MAAM,WAAW,UAAU;IAC1B,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IAEd,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAC1B,uCAAuC;QACvC,MAAM,EAAE,MAAM,GAAG,WAAW,CAAC;QAC7B,iCAAiC;QACjC,OAAO,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IAEH,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAE3C,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEnC,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAExC,6DAA6D;IAC7D,cAAc,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAED,MAAM,WAAW,cAAc;IAC9B,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,kEAAkE;IAClE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACvC,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1D,2DAA2D;IAC3D,SAAS,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC;IACpD,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,oCAAoC;AACpC,MAAM,WAAW,WAAW;IAC3B,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IAEf,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAC;IAEpB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9C,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;CAClC"}

package/dist/lib/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":""}

package/dist/transform.d.ts

@@ -0,0 +1,5 @@
+export { createTransform } from '@refrakt-md/transform';
+export type { ThemeConfig, RuneConfig, SerializedTag, RendererNode } from '@refrakt-md/transform';
+/** Lumina identity transform — adds BEM classes, consumes meta tags, enhances structure */
+export declare const identityTransform: (tree: import("@refrakt-md/transform").RendererNode) => import("@refrakt-md/transform").RendererNode;
+//# sourceMappingURL=transform.d.ts.map

package/dist/transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../src/transform.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAElG,2FAA2F;AAC3F,eAAO,MAAM,iBAAiB,sGAAgC,CAAC"}

package/dist/transform.js

@@ -0,0 +1,7 @@
+import { createTransform } from '@refrakt-md/transform';
+import { luminaConfig } from './config.js';
+// Re-export everything from @refrakt-md/transform for backward compat
+export { createTransform } from '@refrakt-md/transform';
+/** Lumina identity transform — adds BEM classes, consumes meta tags, enhances structure */
+export const identityTransform = createTransform(luminaConfig);
+//# sourceMappingURL=transform.js.map

package/dist/transform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform.js","sourceRoot":"","sources":["../src/transform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,sEAAsE;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,2FAA2F;AAC3F,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC"}

package/index.css

@@ -0,0 +1,57 @@
+/* Lumina Theme Identity — CSS Barrel */
+
+/* Design Tokens */
+@import './tokens/base.css';
+@import './tokens/dark.css';
+
+/* Global Styles */
+@import './styles/global.css';
+
+/* Element Overrides */
+@import './styles/elements/table.css';
+@import './styles/elements/blockquote.css';
+
+/* Layouts */
+@import './styles/layouts/default.css';
+@import './styles/layouts/docs.css';
+
+/* Runes */
+@import './styles/runes/accordion.css';
+@import './styles/runes/annotate.css';
+@import './styles/runes/api.css';
+@import './styles/runes/bento.css';
+@import './styles/runes/breadcrumb.css';
+@import './styles/runes/cast.css';
+@import './styles/runes/changelog.css';
+@import './styles/runes/chart.css';
+@import './styles/runes/compare.css';
+@import './styles/runes/comparison.css';
+@import './styles/runes/conversation.css';
+@import './styles/runes/cta.css';
+@import './styles/runes/datatable.css';
+@import './styles/runes/details.css';
+@import './styles/runes/diagram.css';
+@import './styles/runes/diff.css';
+@import './styles/runes/codegroup.css';
+@import './styles/runes/embed.css';
+@import './styles/runes/event.css';
+@import './styles/runes/feature.css';
+@import './styles/runes/figure.css';
+@import './styles/runes/form.css';
+@import './styles/runes/grid.css';
+@import './styles/runes/hero.css';
+@import './styles/runes/hint.css';
+@import './styles/runes/howto.css';
+@import './styles/runes/nav.css';
+@import './styles/runes/organization.css';
+@import './styles/runes/page-section.css';
+@import './styles/runes/pricing.css';
+@import './styles/runes/recipe.css';
+@import './styles/runes/reveal.css';
+@import './styles/runes/sidenote.css';
+@import './styles/runes/steps.css';
+@import './styles/runes/storyboard.css';
+@import './styles/runes/tabs.css';
+@import './styles/runes/testimonial.css';
+@import './styles/runes/timeline.css';
+@import './styles/runes/toc.css';

package/manifest.json

@@ -0,0 +1,13 @@
+{
+  "name": "Lumina",
+  "description": "A clean, light documentation theme for refrakt.md",
+  "version": "0.3.0",
+  "author": "refrakt.md",
+  "prefix": "rf",
+  "tokenPrefix": "--rf",
+  "darkMode": {
+    "attribute": "data-theme",
+    "values": { "dark": "dark", "light": "light" },
+    "systemPreference": true
+  }
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@refrakt-md/lumina",
+  "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and framework adapters",
+  "version": "0.4.0",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/refrakt-md/refrakt.git",
+    "directory": "packages/lumina"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/transform.js",
+  "types": "dist/transform.d.ts",
+  "exports": {
+    ".": "./index.css",
+    "./transform": {
+      "types": "./dist/transform.d.ts",
+      "default": "./dist/transform.js"
+    },
+    "./manifest": "./manifest.json",
+    "./contracts": "./contracts/structures.json",
+    "./sveltekit": {
+      "types": "./sveltekit/index.ts",
+      "svelte": "./sveltekit/index.ts",
+      "default": "./sveltekit/index.ts"
+    },
+    "./sveltekit/tokens.css": "./sveltekit/tokens.css",
+    "./sveltekit/manifest": "./sveltekit/manifest.json"
+  },
+  "files": [
+    "dist",
+    "index.css",
+    "tokens",
+    "styles",
+    "contracts",
+    "manifest.json",
+    "sveltekit"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@refrakt-md/transform": "0.4.0",
+    "@refrakt-md/types": "0.4.0",
+    "@refrakt-md/svelte": "0.4.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "@sveltejs/kit": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    },
+    "@sveltejs/kit": {
+      "optional": true
+    }
+  }
+}

package/styles/elements/blockquote.css

@@ -0,0 +1,22 @@
+/* Blockquote */
+.rf-blockquote {
+	position: relative;
+	border-left: 3px solid var(--rf-color-primary);
+	margin: 1.5rem 0;
+	padding: 1rem 1.25rem 1rem 2.75rem;
+	color: var(--rf-color-muted);
+	background: var(--rf-color-surface);
+	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
+}
+.rf-blockquote__mark {
+	position: absolute;
+	left: 0.75rem;
+	top: 1rem;
+	width: 18px;
+	height: 18px;
+	color: var(--rf-color-primary);
+	opacity: 0.4;
+}
+.rf-blockquote p:last-child {
+	margin-bottom: 0;
+}

package/styles/elements/table.css

@@ -0,0 +1,26 @@
+/* Table wrapper */
+.rf-table-wrapper {
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+	margin: 1.5rem 0;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+}
+.rf-table-wrapper table {
+	margin: 0;
+	border-collapse: collapse;
+	width: 100%;
+	min-width: 100%;
+}
+.rf-table-wrapper th {
+	background: var(--rf-color-surface);
+}
+.rf-table-wrapper th:first-child {
+	border-top-left-radius: var(--rf-radius-md);
+}
+.rf-table-wrapper th:last-child {
+	border-top-right-radius: var(--rf-radius-md);
+}
+.rf-table-wrapper tr:last-child td {
+	border-bottom: none;
+}

package/styles/global.css

@@ -0,0 +1,138 @@
+/* Lumina Theme — Global Base Styles */
+
+/* Reset */
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+html {
+	font-family: var(--rf-font-sans);
+	color: var(--rf-color-text);
+	background: var(--rf-color-bg);
+	line-height: 1.7;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	transition: background-color 200ms ease, color 200ms ease;
+}
+
+body {
+	margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1.25;
+	margin-top: 2em;
+	margin-bottom: 0.5em;
+	font-weight: 650;
+	letter-spacing: -0.015em;
+}
+
+h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.25rem; }
+h4 { font-size: 1.1rem; }
+
+p {
+	margin-top: 0;
+	margin-bottom: 1rem;
+}
+
+a {
+	color: var(--rf-color-primary);
+	text-decoration: none;
+	transition: color 150ms ease;
+}
+a:hover {
+	color: var(--rf-color-primary-hover);
+	text-decoration: underline;
+}
+
+strong { font-weight: 600; }
+
+code {
+	font-family: var(--rf-font-mono);
+	font-size: 0.875em;
+	background: var(--rf-color-inline-code-bg);
+	padding: 0.15rem 0.4rem;
+	border-radius: var(--rf-radius-sm);
+	font-variant-ligatures: none;
+}
+
+pre {
+	background: var(--rf-color-code-bg);
+	color: var(--rf-color-code-text);
+	padding: 1.25rem 1.5rem;
+	border-radius: var(--rf-radius-md);
+	overflow-x: auto;
+	margin: 1.5rem 0;
+	font-size: 0.875rem;
+	line-height: 1.7;
+	border: 1px solid var(--rf-color-border);
+}
+
+pre code {
+	background: none;
+	padding: 0;
+	font-size: inherit;
+	border-radius: 0;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+hr {
+	border: none;
+	border-top: 1px solid var(--rf-color-border);
+	margin: 2rem 0;
+}
+
+ul, ol {
+	padding-left: 1.5rem;
+	margin-top: 0;
+	margin-bottom: 1rem;
+}
+
+li {
+	margin-bottom: 0.25rem;
+}
+
+li > p {
+	margin-bottom: 0.5rem;
+}
+
+blockquote {
+	border-left: 3px solid var(--rf-color-border);
+	margin: 1.5rem 0;
+	padding: 0.5rem 1rem;
+	color: var(--rf-color-muted);
+}
+
+table {
+	width: 100%;
+	border-collapse: collapse;
+	margin: 1.5rem 0;
+	font-size: 0.9rem;
+}
+
+th {
+	text-align: left;
+	font-weight: 600;
+	padding: 0.625rem 1rem;
+	border-bottom: 2px solid var(--rf-color-border);
+	font-size: 0.8rem;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--rf-color-muted);
+}
+
+td {
+	padding: 0.625rem 1rem;
+	border-bottom: 1px solid var(--rf-color-border);
+}
+
+meta {
+	display: none;
+}
+

package/styles/layouts/default.css

@@ -0,0 +1,45 @@
+/* Default layout */
+.rf-header {
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-header__inner {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.875rem 1.5rem;
+}
+.rf-header p {
+	margin: 0;
+	line-height: 1;
+}
+.rf-header a {
+	display: inline-block;
+	color: inherit;
+	text-decoration: none;
+}
+.rf-header a:hover {
+	text-decoration: none;
+}
+.rf-header img {
+	display: block;
+	height: 1.5rem;
+	width: auto;
+}
+.rf-header__inner p:last-child:not(:first-child) {
+	font-size: 0.85rem;
+}
+.rf-header__inner p:last-child:not(:first-child) a {
+	margin-left: 1.5rem;
+	color: var(--rf-color-muted);
+}
+.rf-header__inner p:last-child:not(:first-child) a:hover {
+	color: var(--rf-color-text);
+}
+.rf-page-content {
+	padding-top: 2.5rem;
+	padding-bottom: 4rem;
+	max-width: 64rem;
+	margin: 0 auto;
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+}

package/styles/layouts/docs.css

@@ -0,0 +1,94 @@
+/* Docs layout */
+.rf-docs-header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 10;
+	background: var(--rf-color-bg);
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-docs-header__inner {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.875rem 1.5rem;
+}
+.rf-docs-header p {
+	margin: 0;
+	line-height: 1;
+}
+.rf-docs-header a {
+	display: inline-block;
+	color: inherit;
+	text-decoration: none;
+}
+.rf-docs-header a:hover {
+	text-decoration: none;
+}
+.rf-docs-header img {
+	display: block;
+	height: 1.5rem;
+	width: auto;
+}
+.rf-docs-header__inner p:last-child:not(:first-child) {
+	font-size: 0.85rem;
+}
+.rf-docs-header__inner p:last-child:not(:first-child) a {
+	margin-left: 1.5rem;
+	color: var(--rf-color-muted);
+}
+.rf-docs-header__inner p:last-child:not(:first-child) a:hover {
+	color: var(--rf-color-text);
+}
+/* Sidebar */
+.rf-docs-sidebar {
+	position: fixed;
+	left: 0;
+	top: 3.375rem;
+	bottom: 0;
+	width: 240px;
+	overflow-y: auto;
+	padding: 1.5rem;
+	border-right: 1px solid var(--rf-color-border);
+	background: var(--rf-color-bg);
+	z-index: 5;
+}
+.rf-docs-sidebar::-webkit-scrollbar {
+	width: 0;
+}
+/* Content area */
+.rf-docs-content {
+	padding-top: 5rem;
+	padding-bottom: 4rem;
+}
+.rf-docs-content--has-nav {
+	margin-left: 240px;
+}
+.rf-docs-content__inner {
+	max-width: 60rem;
+	margin: 0 auto;
+	padding: 0 2.5rem;
+}
+/* Mobile */
+@media (max-width: 768px) {
+	.rf-docs-header {
+		position: static;
+	}
+	.rf-docs-sidebar {
+		position: static;
+		width: auto;
+		border-right: none;
+		border-bottom: 1px solid var(--rf-color-border);
+		padding: 1rem 1.5rem;
+	}
+	.rf-docs-content {
+		padding-top: 2rem;
+	}
+	.rf-docs-content--has-nav {
+		margin-left: 0;
+	}
+	.rf-docs-content__inner {
+		padding: 0 1.5rem;
+	}
+}

package/styles/runes/accordion.css

@@ -0,0 +1,55 @@
+/* Accordion */
+.rf-accordion {
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	overflow: hidden;
+	margin: 1.5rem 0;
+}
+.rf-accordion__items {
+	display: contents;
+}
+.rf-accordion-item {
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-accordion-item:last-child {
+	border-bottom: none;
+}
+.rf-accordion-item__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.875rem 1.25rem;
+	font-weight: 600;
+	font-size: 0.95rem;
+	cursor: pointer;
+	user-select: none;
+	transition: background-color 200ms ease;
+	list-style: none;
+}
+.rf-accordion-item__header::-webkit-details-marker { display: none; }
+.rf-accordion-item__header::marker { display: none; content: ''; }
+.rf-accordion-item__header:hover {
+	background: var(--rf-color-surface);
+}
+.rf-accordion-item__header::after {
+	content: '▾';
+	flex-shrink: 0;
+	color: var(--rf-color-muted);
+	transition: transform 200ms ease;
+}
+.rf-accordion-item[open] .rf-accordion-item__header::after {
+	transform: rotate(180deg);
+}
+.rf-accordion-item__title {
+	flex: 1;
+	min-width: 0;
+}
+.rf-accordion-item__body {
+	padding: 0 1.25rem 1rem;
+	font-size: 0.925rem;
+	line-height: 1.65;
+	color: var(--rf-color-muted);
+}
+.rf-accordion-item__body p:last-child {
+	margin-bottom: 0;
+}

package/styles/runes/annotate.css

@@ -0,0 +1,87 @@
+/* Annotate */
+.rf-annotate {
+	margin: 1.5rem 0;
+}
+.rf-annotate__body {
+	display: contents;
+}
+/* Margin style */
+.rf-annotate--margin {
+	position: relative;
+}
+.rf-annotate--margin .rf-annotate-note {
+	float: right;
+	clear: right;
+	width: 40%;
+	margin: 0 -44% 0.5rem 1rem;
+	padding: 0.75rem 1rem;
+	font-size: 0.8125rem;
+	color: var(--rf-color-muted);
+	border-left: 2px solid var(--rf-color-border);
+}
+/* Inline style */
+.rf-annotate--inline .rf-annotate-note {
+	margin: 0.5rem 0 1rem;
+	padding: 0.75rem 1rem;
+	font-size: 0.875rem;
+	color: var(--rf-color-muted);
+	background: var(--rf-color-surface);
+	border-radius: var(--rf-radius-md);
+	border-left: 3px solid var(--rf-color-primary);
+}
+/* Tooltip style */
+.rf-annotate--tooltip .rf-annotate-note {
+	display: inline-block;
+	position: relative;
+	margin: 0 0.25rem;
+	padding: 0;
+	font-size: 0;
+	vertical-align: super;
+}
+.rf-annotate--tooltip .rf-annotate-note::before {
+	content: '?';
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1rem;
+	height: 1rem;
+	font-size: 0.625rem;
+	font-weight: 700;
+	color: var(--rf-color-primary);
+	border: 1px solid var(--rf-color-primary);
+	border-radius: var(--rf-radius-full, 50%);
+	cursor: help;
+}
+.rf-annotate--tooltip .rf-annotate-note__body {
+	display: none;
+	position: absolute;
+	bottom: 100%;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 16rem;
+	padding: 0.75rem;
+	font-size: 0.8125rem;
+	color: var(--rf-color-text);
+	background: var(--rf-color-bg);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	margin-bottom: 0.5rem;
+	z-index: 10;
+}
+.rf-annotate--tooltip .rf-annotate-note:hover .rf-annotate-note__body {
+	display: block;
+}
+.rf-annotate-note__body p:last-child { margin-bottom: 0; }
+.rf-annotate-note__body span[property],
+.rf-annotate-note__body meta { display: none; }
+@media (max-width: 768px) {
+	.rf-annotate--margin .rf-annotate-note {
+		float: none;
+		width: 100%;
+		margin: 0.5rem 0 1rem;
+		padding: 0.75rem 1rem;
+		background: var(--rf-color-surface);
+		border-radius: var(--rf-radius-md);
+	}
+}