picocrank 1.25.0 → 1.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.25.0",
+  "version": "1.25.2",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -23,7 +23,7 @@
     "@hugeicons/core-free-icons": "^4.3.0",
     "@hugeicons/vue": "^1.0.8",
     "@vitejs/plugin-vue": "^6.0.8",
-    "femtocrank": "^2.6.0",
+    "femtocrank": "^2.6.1",
     "unplugin-vue-components": "^32.1.0",
     "vite": "^8.2.2",
     "vue": "^3.5.41",

package/public/themes/README.md

@@ -44,3 +44,18 @@ Use `ThemeSwitcher` or `useCustomTheme()`:
 - `VITE_INCLUDE_SUPPLEMENTAL_THEMES=false` — omit supplemental theme files from `dist` (`npm run build:minimal`).
 
 Light/dark mode (header sun/moon) is separate from drop-in themes.
+
+## PicoCrank component tokens
+
+Sortable/filterable `Table` headers and `Tabs` active labels use PicoCrank aliases that point at Femtocrank semantic variables. Override the underlying Femtocrank tokens in `theme.css` rather than the aliases when possible:
+
+| PicoCrank alias | Femtocrank source |
+| --- | --- |
+| `--table-header-fg` | `--text-color` |
+| `--table-header-active-fg` | `--link-color` |
+| `--table-header-active-bg` | `--hover-background-color` |
+| `--tab-fg` | `--muted-text-color` |
+| `--tab-active-fg` | `--link-color` |
+| `--tab-focus-outline-color` | `--tab-active-fg` |
+
+Defaults are defined in `styles/picocrank-extensions.css`. Built-in dark mode and supplemental themes set Femtocrank variables (`--link-color`, `--header-fg-color`, `--input-bg-color`, etc.) so tables, tabs, forms, and chrome pick up the palette automatically.

package/styles/dark-theme.css

@@ -1,219 +1,63 @@
+/* Built-in dark mode — variable overrides only (mirrors femtocrank/dark.css). */
 @layer components {
 html[data-theme="dark"] {
-  color-scheme: dark;
+	color-scheme: dark;
 
-  --border-color: #595959;
-  --hover-background-color: #1d345c;
-  --hover-text-color: #fff;
-  --text-color: #ddd;
-  --header-hover-background-color: #1d345c;
-  --standout-bg-color: #1f1f1f;
-  --disabled-background-color: #333;
-  --disabled-text-color: #999;
+	--body-bg-color: #262626;
+	--surface-bg-color: #343434;
+	--standout-bg-color: #1f1f1f;
+	--section-header-bg-color: var(--surface-bg-color);
 
-  & header {
-    background-color: black;
-    box-shadow: 0px 0px 1em #1c1c1c;
-    border-bottom: 1px solid #222;
-  }
+	--header-bg-color: #000;
+	--header-border-color: #222;
+	--header-shadow: 0px 0px 1em #1c1c1c;
+	--header-hover-background-color: #1d345c;
 
-  & body {
-    background-color: #262626;
-    color: #ddd;
-  }
+	--sidebar-bg-color: #000;
+	--sidebar-link-color: var(--link-color);
+	--sidebar-hover-bg-color: var(--hover-background-color);
 
-  & section {
-    background-color: #343434;
-    color: #ddd;
-    box-shadow: 0 0 .5em #121212;
-  }
+	--footer-chip-bg-color: #444;
 
-  & section .section-header {
-    background-color: #343434;
-    border-bottom-color: var(--border-color);
-  }
+	--text-color: #ddd;
+	--link-color: lightblue;
+	--annotation-key-color: #aaa;
+	--focus-outline-color: #fff;
 
-  & section .section-subheader {
-    border-bottom-color: var(--border-color);
-  }
+	--border-color: #595959;
+	--shadow-color: #121212;
 
-  & button,
-  & .button {
-    color: #ddd;
-    border: 1px solid var(--border-color);
-  }
+	--hover-background-color: #1d345c;
+	--hover-text-color: var(--on-accent-fg);
 
-  & button:hover,
-  & .button:hover,
-  & .button:visited {
-    background-color: var(--hover-background-color);
-    color: white;
-  }
+	--disabled-background-color: #333;
+	--disabled-text-color: #999;
 
-  & footer a,
-  & footer a:visited {
-    color: lightblue;
-  }
+	--input-bg-color: #4e4e4e;
+	--input-fg-color: var(--text-color);
+	--control-option-bg-color: #555;
+	--control-hover-bg-color: var(--hover-background-color);
 
-  & header ul[role="menubar"] a,
-  & header ul[role="menubar"] a:visited {
-    background-color: black;
-  }
+	--menu-item-hover-background-color: var(--hover-background-color);
+	--menu-dropdown-background-color: var(--surface-bg-color);
+	--menu-dropdown-shadow: 0 0 .5em var(--shadow-color);
+	--menu-dropdown-link-hover-background-color: var(--hover-background-color);
+	--header-menu-dropdown-link-hover-background-color: var(--header-hover-background-color);
 
-  & header ul[role="menubar"] a:hover {
-    background-color: var(--hover-background-color);
-  }
+	--table-sticky-bg: var(--surface-bg-color);
+	--table-row-hover-bg: var(--hover-background-color);
+	--table-row-hover-fg: var(--on-accent-fg);
+	--table-sticky-hover-bg: var(--table-row-hover-bg);
+	--table-uneditable-bg: #555;
+	--table-sticky-uneditable-bg: var(--table-uneditable-bg);
 
-  & header div > ul > li > a {
-    background-color: black;
-    color: white;
-  }
+	--progress-track-bg-color: var(--table-uneditable-bg);
 
-  & ul[role="menubar"] div ul a:hover {
-    background-color: var(--hover-background-color);
-    color: white;
-  }
-
-  & ul[role="menubar"] li:hover {
-    background-color: var(--hover-background-color);
-  }
-
-  & label:has(input[type="checkbox"]):hover,
-  & label:has(input[type="radio"]):hover {
-    background-color: var(--hover-background-color);
-    color: white;
-  }
-
-  & label:has(input:checked) {
-    background-color: #488448;
-    color: white;
-  }
-
-  & label:has(input:checked):hover {
-    background-color: #3a6f3a;
-    color: white;
-  }
-
-  & a,
-  & a:visited,
-  & aside a,
-  & aside a:visited {
-    color: lightblue;
-  }
-
-  & table,
-  & th,
-  & td {
-    border-color: var(--border-color) !important;
-  }
-
-  & table.row-hover tr:hover td {
-    background-color: var(--hover-background-color);
-    color: white;
-  }
-
-  & table thead th.sortable:hover,
-  & table thead th.filtered,
-  & table thead th.menu-open {
-    color: var(--text-color);
-  }
-
-  & th.actions .actions-menu-trigger button:hover,
-  & th.actions .actions-menu-trigger button:focus-visible {
-    background-color: var(--hover-background-color);
-    color: var(--text-color);
-  }
-
-  & footer span {
-    background-color: #444;
-  }
-
-  & input[type="text"],
-  & input[type="email"],
-  & input[type="password"],
-  & input[type="url"],
-  & input[type="number"],
-  & input[type="color"],
-  & input[type="datetime-local"] {
-    background-color: #4e4e4e;
-    color: #ddd;
-    border-color: var(--border-color);
-  }
-
-  & select {
-    background-color: #4e4e4e;
-    color: #ddd;
-    border-color: var(--border-color);
-  }
-
-  & textarea {
-    background-color: #4e4e4e;
-    color: #ddd;
-    border-color: var(--border-color);
-  }
-
-  & .grid-boxed .stat-display {
-    background-color: var(--standout-bg-color);
-    border-color: var(--border-color) !important;
-  }
-
-  & pre {
-    background-color: var(--standout-bg-color);
-    color: #ddd;
-    border: 1px solid var(--border-color);
-  }
-
-  & .radio-group {
-    border-color: var(--border-color);
-  }
-
-  & .radio-group label {
-    background-color: #555;
-  }
-
-  & .radio-group label:hover,
-  & .radio-group label:has(input:focus-visible) {
-    background-color: var(--hover-background-color);
-    color: white;
-  }
-
-  & .multiple-checklist {
-    border-color: var(--border-color);
-  }
-
-  & .multiple-checklist label {
-    background-color: #555;
-  }
-
-  & aside {
-    background-color: #000;
-    box-shadow: 0 0 .5em #121212;
-  }
-
-  & aside :is(ul, menu) li a:hover,
-  & aside :is(ul, menu) li a:focus-visible {
-    background-color: var(--hover-background-color);
-    color: var(--hover-text-color, #fff);
-  }
-
-  & dt {
-    border-color: var(--border-color);
-  }
-
-  & .annotation,
-  & .tag,
-  & .inline-notification {
-    background-color: var(--standout-bg-color);
-    color: #ddd;
-    border-color: var(--border-color);
-  }
-
-  & .annotation-val {
-    color: #ddd;
-  }
-}
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 }
 
 html[data-theme="light"] {
-  color-scheme: light;
+	color-scheme: light;
+}
 }

package/styles/picocrank-extensions.css

@@ -0,0 +1,97 @@
+/* PicoCrank component tokens — aliases to Femtocrank semantic variables. */
+@layer components {
+:root {
+	--table-header-fg: var(--text-color);
+	--table-header-active-fg: var(--link-color);
+	--table-header-active-bg: var(--hover-background-color);
+	--tab-fg: var(--muted-text-color);
+	--tab-active-fg: var(--link-color);
+	--tab-focus-outline-color: var(--tab-active-fg);
+
+	/* Default light: bright bold blues for icons and active fill. */
+	--nav-grid-accent-fg: #007dff;
+	--nav-grid-accent-bg: #0066cc;
+	--nav-grid-active-fg: var(--button-on-accent-fg);
+	--nav-grid-muted-fg: var(--muted-text-color);
+	--nav-grid-border: var(--border-color);
+	--nav-grid-hover-bg: var(--hover-background-color);
+	--nav-grid-indicator-bg: var(--button-bad-bg);
+	--nav-grid-indicator-fg: var(--button-on-accent-fg);
+	--nav-grid-ring-bg: var(--surface-bg-color);
+	--nav-grid-disabled-fg: var(--disabled-text-color);
+	--nav-grid-shadow: var(--shadow-color);
+	--nav-grid-hover-shadow: color-mix(in srgb, var(--nav-grid-shadow) 50%, transparent);
+
+	--quick-search-dialog-bg: var(--standout-bg-color);
+	--quick-search-dialog-fg: var(--text-color);
+	--quick-search-backdrop: var(--backdrop-color);
+	--quick-search-input-bg: var(--input-bg-color);
+	--quick-search-input-fg: var(--input-fg-color);
+	--quick-search-border: var(--border-color);
+	--quick-search-muted-fg: var(--muted-text-color);
+	--quick-search-subtle-fg: var(--annotation-key-color);
+	--quick-search-focus-outline: var(--focus-outline-color);
+	--quick-search-highlight-bg: var(--karma-important);
+	--quick-search-hover-bg: var(--hover-background-color);
+	--quick-search-hover-fg: var(--hover-text-color);
+
+	--breadcrumbs-separator-fg: var(--muted-text-color);
+	--breadcrumbs-link-hover-bg: var(--hover-background-color);
+
+	--radio-group-focus-outline: var(--focus-outline-color);
+	--radio-group-checked-hover-bg: var(--control-checked-hover-bg);
+	--radio-group-checked-hover-fg: var(--control-checked-fg);
+
+	--login-input-focus-outline: var(--focus-outline-color);
+	--login-error-bg: var(--karma-bad);
+	--login-error-fg: var(--karma-bad-fg);
+	--login-muted-fg: var(--muted-text-color);
+
+	--table-muted-fg: var(--muted-text-color);
+
+	--table-popover-bg: var(--surface-bg-color);
+	--table-popover-border: var(--border-color);
+	--table-popover-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 60%, transparent);
+	--table-popover-muted-fg: var(--muted-text-color);
+	--table-popover-fg: var(--text-color);
+	--table-popover-item-bg: var(--standout-bg-color);
+	--table-popover-item-drag-border: var(--text-color);
+	--table-popover-divider: var(--border-color);
+	--table-popover-error-fg: var(--karma-bad-fg);
+	--table-popover-success-fg: var(--karma-good-fg);
+
+	--tab-border: var(--border-color);
+	--tab-hover-fg: var(--text-color);
+	--tab-hover-bg: var(--hover-background-color);
+
+	--calendar-chrome-bg: var(--standout-bg-color);
+	--calendar-surface-bg: var(--surface-bg-color);
+	--calendar-border: var(--border-color);
+	--calendar-error-fg: var(--karma-bad-fg);
+	--calendar-loading-overlay-bg: color-mix(in srgb, var(--calendar-surface-bg) 60%, transparent);
+	--calendar-day-fg: var(--text-color);
+	--calendar-muted-fg: var(--muted-text-color);
+	--calendar-accent-fg: var(--link-color);
+	--calendar-day-hover-bg: color-mix(in srgb, var(--link-color) 8%, var(--calendar-surface-bg));
+	--calendar-day-muted-bg: var(--standout-bg-color);
+	--calendar-day-muted-hover-bg: var(--table-uneditable-bg);
+	--calendar-today-bg: var(--karma-important);
+	--calendar-today-hover-bg: var(--karma-note);
+	--calendar-range-accent: var(--link-color);
+	--calendar-range-bg-strong: color-mix(in srgb, var(--link-color) 22%, transparent);
+	--calendar-range-bg: color-mix(in srgb, var(--link-color) 14%, transparent);
+	--calendar-range-bg-subtle: color-mix(in srgb, var(--link-color) 10%, transparent);
+	--calendar-event-bg: var(--karma-good);
+	--calendar-event-border: color-mix(in srgb, var(--karma-good-fg) 35%, var(--karma-good));
+	--calendar-event-hover-bg: color-mix(in srgb, var(--karma-good) 80%, var(--karma-good-fg));
+	--calendar-event-title-fg: var(--text-color);
+	--calendar-event-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-color) 50%, transparent);
+	--calendar-event-hover-shadow: 0 2px 4px color-mix(in srgb, var(--shadow-color) 60%, transparent);
+	--calendar-more-bg: var(--standout-bg-color);
+	--calendar-event-custom-border-mix: var(--karma-on-bg-fg);
+}
+
+table thead th {
+	color: var(--table-header-fg);
+}
+}

package/styles.css

@@ -2,6 +2,7 @@
 @layer components, karma, theme;
 
 @import 'femtocrank/style.css' layer(components);
+@import './styles/picocrank-extensions.css';
 @import './styles/dark-theme.css';
 
 /* Sidebar uses <menu> for nav items; mirror Femtocrank's aside ul rules. */

package/supplemental-themes/catppuccin-latte-frappe/theme.css

@@ -37,21 +37,61 @@ html[data-theme="dark"] {
 	--ctp-base: #303446;
 	--ctp-mantle: #292c3c;
 	--ctp-crust: #232634;
-	--ctp-shadow: rgba(35, 38, 52, 0.65);
 	--ctp-shadow-strong: rgba(35, 38, 52, 0.9);
 	--ctp-good-fg: var(--ctp-crust);
 
+	--body-bg-color: var(--ctp-base);
+	--surface-bg-color: var(--ctp-mantle);
+	--standout-bg-color: var(--ctp-mantle);
+	--section-header-bg-color: var(--ctp-mantle);
+	--shadow-color: var(--ctp-shadow-strong);
+
 	--text-color: var(--ctp-text);
+	--muted-text-color: var(--ctp-subtext0);
+	--annotation-key-color: var(--ctp-subtext0);
+	--link-color: var(--ctp-blue);
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--ctp-surface1);
-	--standout-bg-color: var(--ctp-mantle);
+
 	--hover-background-color: var(--ctp-surface0);
 	--hover-text-color: var(--ctp-text);
+
+	--header-bg-color: var(--ctp-crust);
+	--header-fg-color: var(--ctp-text);
+	--header-border-color: var(--ctp-surface0);
+	--header-shadow: none;
 	--header-hover-background-color: var(--ctp-surface1);
 	--header-hover-text-color: var(--ctp-text);
-	--header-text-color: var(--ctp-text);
+	--header-button-hover-bg-color: var(--ctp-surface1);
+
+	--sidebar-bg-color: var(--ctp-mantle);
+	--sidebar-link-color: var(--ctp-text);
+	--sidebar-hover-bg-color: var(--ctp-surface0);
+	--sidebar-border-color: var(--ctp-surface0);
+
+	--input-bg-color: var(--ctp-surface0);
+	--input-fg-color: var(--ctp-text);
+	--control-option-bg-color: var(--ctp-surface0);
+	--control-hover-bg-color: var(--ctp-surface1);
+	--menu-hover-bg-color: var(--ctp-surface0);
+
+	--table-row-hover-bg: var(--ctp-surface0);
+	--table-row-hover-fg: var(--ctp-text);
+	--table-uneditable-bg: var(--ctp-surface0);
+	--footer-chip-bg-color: var(--ctp-surface1);
+
 	--disabled-background-color: var(--ctp-surface0);
 	--disabled-text-color: var(--ctp-overlay0);
 
+	--button-good-bg: var(--ctp-green);
+	--button-good-hover-bg: var(--ctp-green);
+	--button-bad-bg: var(--ctp-red);
+	--button-bad-hover-bg: var(--ctp-red);
+	--button-warning-bg: var(--ctp-yellow);
+	--button-warning-hover-bg: var(--ctp-yellow);
+	--button-on-accent-fg: var(--ctp-good-fg);
+
 	--karma-good: var(--ctp-green);
 	--karma-bad: var(--ctp-red);
 	--karma-warning: var(--ctp-yellow);
@@ -100,21 +140,61 @@ html[data-theme="light"] {
 	--ctp-base: #eff1f5;
 	--ctp-mantle: #e6e9ef;
 	--ctp-crust: #dce0e8;
-	--ctp-shadow: rgba(76, 79, 105, 0.12);
 	--ctp-shadow-strong: rgba(76, 79, 105, 0.16);
 	--ctp-good-fg: var(--ctp-base);
 
+	--body-bg-color: var(--ctp-base);
+	--surface-bg-color: var(--ctp-mantle);
+	--standout-bg-color: var(--ctp-mantle);
+	--section-header-bg-color: var(--ctp-mantle);
+	--shadow-color: var(--ctp-shadow-strong);
+
 	--text-color: var(--ctp-text);
+	--muted-text-color: var(--ctp-subtext0);
+	--annotation-key-color: var(--ctp-subtext0);
+	--link-color: var(--ctp-blue);
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--ctp-surface1);
-	--standout-bg-color: var(--ctp-mantle);
+
 	--hover-background-color: var(--ctp-surface0);
 	--hover-text-color: var(--ctp-text);
+
+	--header-bg-color: var(--ctp-crust);
+	--header-fg-color: var(--ctp-text);
+	--header-border-color: var(--ctp-surface0);
+	--header-shadow: none;
 	--header-hover-background-color: var(--ctp-surface0);
 	--header-hover-text-color: var(--ctp-text);
-	--header-text-color: var(--ctp-text);
+	--header-button-hover-bg-color: var(--ctp-surface0);
+
+	--sidebar-bg-color: var(--ctp-mantle);
+	--sidebar-link-color: var(--ctp-text);
+	--sidebar-hover-bg-color: var(--ctp-surface0);
+	--sidebar-border-color: var(--ctp-surface0);
+
+	--input-bg-color: var(--ctp-surface0);
+	--input-fg-color: var(--ctp-text);
+	--control-option-bg-color: var(--ctp-surface0);
+	--control-hover-bg-color: var(--ctp-surface1);
+	--menu-hover-bg-color: var(--ctp-surface0);
+
+	--table-row-hover-bg: var(--ctp-surface0);
+	--table-row-hover-fg: var(--ctp-text);
+	--table-uneditable-bg: var(--ctp-surface0);
+	--footer-chip-bg-color: var(--ctp-surface1);
+
 	--disabled-background-color: var(--ctp-surface0);
 	--disabled-text-color: var(--ctp-overlay0);
 
+	--button-good-bg: var(--ctp-green);
+	--button-good-hover-bg: var(--ctp-green);
+	--button-bad-bg: var(--ctp-red);
+	--button-bad-hover-bg: var(--ctp-red);
+	--button-warning-bg: var(--ctp-yellow);
+	--button-warning-hover-bg: var(--ctp-yellow);
+	--button-on-accent-fg: var(--ctp-good-fg);
+
 	--karma-good: var(--ctp-green);
 	--karma-bad: var(--ctp-red);
 	--karma-warning: var(--ctp-yellow);
@@ -133,144 +213,3 @@ html[data-theme="light"] {
 	--karma-info-fg: var(--ctp-subtext0);
 	--karma-old-fg: var(--ctp-overlay1);
 }
-
-body {
-	background-color: var(--ctp-base);
-	color: var(--ctp-text);
-}
-
-header {
-	background-color: var(--ctp-crust);
-	border-bottom: 1px solid var(--ctp-surface0);
-	box-shadow: none;
-	color: var(--ctp-text);
-}
-
-header a,
-header a:visited,
-header button,
-header .button,
-header h1,
-header .topbar-link,
-header .topbar-link:visited {
-	color: var(--header-text-color, var(--ctp-text));
-}
-
-#sidebar-toggler-button,
-#sidebar-toggler-button.neutral,
-header .theme-toggle,
-header .theme-toggle.neutral,
-header .search-trigger,
-header .search-trigger.neutral,
-header .user-info {
-	background-color: transparent;
-	border: 0;
-	color: var(--header-text-color, var(--ctp-text));
-}
-
-#sidebar-toggler-button:hover,
-header .theme-toggle:hover,
-header .search-trigger:hover,
-header .user-info:hover {
-	background-color: var(--header-hover-background-color);
-	color: var(--header-hover-text-color);
-}
-
-aside,
-#sidebar {
-	background-color: var(--ctp-mantle);
-	color: var(--ctp-text);
-	border-color: var(--ctp-surface0);
-	box-shadow: 0.15em 0 0.6em var(--ctp-shadow);
-}
-
-aside a,
-aside a:visited {
-	color: var(--ctp-text);
-}
-
-aside a:hover,
-aside a:focus-visible,
-aside :is(ul, menu) li a:hover,
-aside :is(ul, menu) li a:focus-visible,
-aside .nav-section-header:hover,
-aside .nav-section-header:focus-visible {
-	background-color: var(--ctp-surface0);
-	color: var(--ctp-text);
-}
-
-section {
-	background-color: var(--ctp-mantle);
-	color: var(--ctp-text);
-	box-shadow: 0 0 0.5em var(--ctp-shadow-strong);
-	border-color: var(--ctp-surface0);
-}
-
-section .section-header,
-section .section-subheader {
-	background-color: var(--ctp-mantle);
-	border-bottom-color: var(--ctp-surface0);
-	color: var(--ctp-text);
-}
-
-button,
-.button {
-	background-color: var(--ctp-surface0);
-	border: 1px solid var(--ctp-surface1);
-	color: var(--ctp-text);
-}
-
-button:hover,
-.button:hover {
-	background-color: var(--ctp-surface1);
-	color: var(--ctp-text);
-}
-
-button.good,
-.button.good {
-	background-color: var(--ctp-green);
-	border-color: var(--ctp-green);
-	color: var(--ctp-good-fg);
-}
-
-button.bad,
-.button.bad {
-	background-color: var(--ctp-red);
-	border-color: var(--ctp-red);
-	color: var(--ctp-crust);
-}
-
-button.warning,
-.button.warning {
-	background-color: var(--ctp-yellow);
-	border-color: var(--ctp-yellow);
-	color: var(--ctp-crust);
-}
-
-button.neutral,
-.button.neutral {
-	background-color: var(--ctp-surface1);
-	border-color: var(--ctp-surface2);
-	color: var(--ctp-text);
-}
-
-input,
-select,
-textarea {
-	background-color: var(--ctp-surface0);
-	border: 1px solid var(--ctp-surface1);
-	color: var(--ctp-text);
-}
-
-a {
-	color: var(--ctp-blue);
-}
-
-footer {
-	color: var(--ctp-subtext0);
-	border-top-color: var(--ctp-surface0);
-}
-
-.subtle {
-	color: var(--ctp-subtext0);
-}