@kosmeo-ui/react 0.1.1 → 1.0.0

package/dist/components/layout/card/styles.css

@@ -1,9 +1,9 @@
 /* Card Component Styles */
 .k-card {
-  background: var(--background-color);
+  background: var(--k-background-color);
   border-radius: 0.9375rem;
   transition: all 0.3s ease;
-  border: 0.0625rem solid var(--border-color);
+  border: 0.0625rem solid var(--k-border-color);
 }
 
 .k-card-align-left {
@@ -15,12 +15,12 @@
 }
 
 .k-card-hoverable {
-  box-shadow: 0 0.3125rem 0.9375rem var(--shadow-color);
+  box-shadow: 0 0.3125rem 0.9375rem var(--k-shadow-color);
 }
 
 .k-card-hoverable:hover {
   transform: translateY(-0.3125rem);
-  box-shadow: 0 0.9375rem 1.875rem var(--shadow-color-hover);
+  box-shadow: 0 0.9375rem 1.875rem var(--k-shadow-color-hover);
 }
 
 .k-card-header {
@@ -29,7 +29,7 @@
   gap: 0.5rem;
   padding-bottom: 0.75rem;
   margin-bottom: 1rem;
-  border-bottom: 0.0625rem solid var(--border-color);
+  border-bottom: 0.0625rem solid var(--k-border-color);
 }
 
 .k-card-header-row {
@@ -58,7 +58,7 @@
 
 .k-card-progress-label {
   font-size: 0.8125rem;
-  color: var(--text-color);
+  color: var(--k-text-color);
   opacity: 0.7;
 }
 
@@ -72,12 +72,34 @@
   gap: 0.5rem;
   padding-top: 0.75rem;
   margin-top: 1rem;
-  border-top: 0.0625rem solid var(--border-color);
+  border-top: 0.0625rem solid var(--k-border-color);
 }
 
 /* Padding Variants */
+/* Edge-to-edge content (tables, images): clip it to the rounded corners, and
+   give the header and footer their own padding instead. */
 .k-card-padding-none {
   padding: 0;
+  overflow: hidden;
+}
+
+.k-card-padding-none .k-card-header {
+  padding: 0.75rem 1rem;
+  margin-bottom: 0;
+}
+
+.k-card-padding-none .k-card-footer {
+  padding: 0.75rem 1rem;
+  margin-top: 0;
+}
+
+/* The card already draws the outer edge and the line under the header. */
+.k-card-padding-none .k-card-body > .k-table {
+  border: none;
+}
+
+.k-card-padding-none .k-card-body > .k-table thead th {
+  border-top: none;
 }
 
 .k-card-padding-small {
@@ -94,67 +116,67 @@
 
 /* Color Variants */
 .k-card-primary {
-  border-color: var(--primary-color);
+  border-color: var(--k-primary-color);
 }
 
 .k-card-primary.k-card-hoverable:hover {
-  border-color: var(--primary-color-hover);
+  border-color: var(--k-primary-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--primary-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-primary-color);
 }
 
 .k-card-secondary {
-  border-color: var(--secondary-color);
+  border-color: var(--k-secondary-color);
 }
 
 .k-card-secondary.k-card-hoverable:hover {
-  border-color: var(--secondary-color-hover);
+  border-color: var(--k-secondary-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--secondary-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-secondary-color);
 }
 
 .k-card-light {
-  border-color: var(--light-color);
+  border-color: var(--k-light-color);
 }
 
 .k-card-light.k-card-hoverable:hover {
-  border-color: var(--light-color-hover);
+  border-color: var(--k-light-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--light-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-light-color);
 }
 
 .k-card-danger {
-  border-color: var(--danger-color);
+  border-color: var(--k-danger-color);
 }
 
 .k-card-danger.k-card-hoverable:hover {
-  border-color: var(--danger-color-hover);
+  border-color: var(--k-danger-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--danger-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-danger-color);
 }
 
 .k-card-warning {
-  border-color: var(--warning-color);
+  border-color: var(--k-warning-color);
 }
 
 .k-card-warning.k-card-hoverable:hover {
-  border-color: var(--warning-color-hover);
+  border-color: var(--k-warning-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--warning-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-warning-color);
 }
 
 .k-card-success {
-  border-color: var(--success-color);
+  border-color: var(--k-success-color);
 }
 
 .k-card-success.k-card-hoverable:hover {
-  border-color: var(--success-color-hover);
+  border-color: var(--k-success-color-hover);
   box-shadow:
-    0 0.9375rem 1.875rem var(--shadow-color-hover),
-    0 0 0 0.0625rem var(--success-color);
+    0 0.9375rem 1.875rem var(--k-shadow-color-hover),
+    0 0 0 0.0625rem var(--k-success-color);
 }

package/dist/components/layout/col/styles.css

@@ -23,5 +23,5 @@
 .k-col-divider-solid-top {
   margin-top: 0.5rem;
   padding-top: 0.5rem;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--k-border-color);
 }

package/dist/components/layout/page/styles.css

@@ -1,8 +1,11 @@
 .k-page {
+  --k-page-padding: 0px;
+  --k-page-gap: 0px;
   display: flex;
   flex-direction: column;
   width: 100%;
   box-sizing: border-box;
+  gap: var(--k-page-gap);
 }
 
 .k-page-fill {
@@ -11,15 +14,32 @@
 }
 
 .k-page-padded {
-  padding: 1.5rem;
+  --k-page-padding: 1.5rem;
+  padding: var(--k-page-padding);
+}
+
+/* A fill page has a fixed height, so content taller than it spills past the
+   bottom padding and ends flush with the view. A spacer after the content
+   stands in for that padding: it follows the content when it overflows, so
+   the scroll area still ends with the space. Its margin cancels the gap
+   before it; it keeps a real height, as an empty box adds no scroll area. */
+.k-page-fill.k-page-padded {
+  padding-bottom: 0;
+}
+
+.k-page-fill.k-page-padded::after {
+  content: "";
+  flex: none;
+  height: var(--k-page-padding);
+  margin-top: calc(-1 * var(--k-page-gap));
 }
 
 .k-page-gap-sm {
-  gap: 0.75rem;
+  --k-page-gap: 0.75rem;
 }
 
 .k-page-gap-md {
-  gap: 1.5rem;
+  --k-page-gap: 1.5rem;
 }
 
 .k-page-max-narrow {
@@ -45,9 +65,9 @@
 
 @media (max-width: 640px) {
   .k-page-padded {
-    padding: 1rem;
+    --k-page-padding: 1rem;
   }
   .k-page-gap-md {
-    gap: 1rem;
+    --k-page-gap: 1rem;
   }
 }

package/dist/components/layout/sectionHeader/styles.css

@@ -11,13 +11,13 @@
 
 .k-section-header-divider {
   padding-bottom: 1rem;
-  border-bottom: 0.0625rem solid var(--border-color);
+  border-bottom: 0.0625rem solid var(--k-border-color);
   margin-bottom: 1.5rem;
 }
 
 .k-section-header-preface {
   font-size: 0.875rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-section-header-row {
@@ -82,8 +82,7 @@
 
 .k-section-header-subtitle {
   font-size: 0.8125rem;
-  color: var(--text-color);
-  opacity: 0.65;
+  color: var(--k-text-color-secondary);
 }
 
 .k-section-header-badges {

package/dist/components/navigation/breadcrumbs/styles.css

@@ -7,12 +7,12 @@
 }
 
 .k-breadcrumb-item {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-breadcrumb-item a {
   text-decoration: none;
-  color: var(--text-color-link);
+  color: var(--k-text-color-link);
 }
 
 .k-breadcrumb-item a:hover {
@@ -20,23 +20,23 @@
 }
 
 .k-breadcrumb-item span {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-breadcrumb-item + .k-breadcrumb-item::before {
   content: "/";
   margin: 0 0.5rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-breadcrumb-item-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
 }
 
 .k-breadcrumb-item-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
 }
 
 .k-breadcrumb-item-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
 }

package/dist/components/navigation/pagination/index.d.ts

@@ -0,0 +1,23 @@
+import { PropsWithSize } from "../../types.js";
+import "./styles.css";
+export interface PaginationProps extends PropsWithSize {
+    /** Current page, starting at 1. */
+    page: number;
+    /** Total number of pages. */
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** Total item count. With `pageSize`, shows a "51–75 of 240" summary. */
+    total?: number;
+    /** Items per page. Needed for the summary and the page-size picker. */
+    pageSize?: number;
+    /** Page sizes to offer. With `onPageSizeChange`, shows a "Rows per page" picker. */
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Pages shown either side of the current page before a "…" gap. Defaults to 1. */
+    siblingCount?: number;
+    /** Accessible name for the navigation landmark. Defaults to "Pagination". */
+    "aria-label"?: string;
+}
+declare const Pagination: ({ page, pageCount, onPageChange, total, pageSize, pageSizeOptions, onPageSizeChange, siblingCount, size, "aria-label": ariaLabel, }: PaginationProps) => import("react").JSX.Element;
+export default Pagination;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,cAAc,CAAC;AAMtB,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,UAAU,GAAI,qIAWjB,eAAe,gCAwFjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/navigation/pagination/index.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Select from "../../inputs/select/index.js";
+import { pageRange } from "./utils.js";
+import { useId } from "react";
+import "./styles.css";
+import { faChevronLeft, faChevronRight, } from "@fortawesome/free-solid-svg-icons";
+const Pagination = ({ page, pageCount, onPageChange, total, pageSize, pageSizeOptions, onPageSizeChange, siblingCount = 1, size = "md", "aria-label": ariaLabel = "Pagination", }) => {
+    const pageSizeId = useId();
+    const lastPage = Math.max(pageCount, 1);
+    const current = Math.min(Math.max(page, 1), lastPage);
+    const goTo = (target) => {
+        if (target >= 1 && target <= lastPage && target !== current) {
+            onPageChange(target);
+        }
+    };
+    const summary = total !== undefined && pageSize !== undefined
+        ? total === 0
+            ? "No results"
+            : `${(current - 1) * pageSize + 1}–${Math.min(current * pageSize, total)} of ${total.toLocaleString()}`
+        : undefined;
+    return (_jsxs("nav", { className: `k-pagination k-pagination-${size}`, "aria-label": ariaLabel, children: [summary && (_jsx("p", { className: "k-pagination-summary", "aria-live": "polite", children: summary })), _jsxs("ul", { className: "k-pagination-pages", children: [_jsx("li", { children: _jsx("button", { type: "button", className: "k-pagination-button", onClick: () => goTo(current - 1), disabled: current <= 1, "aria-label": "Previous page", children: _jsx(FontAwesomeIcon, { icon: faChevronLeft, "aria-hidden": "true" }) }) }), pageRange(current, lastPage, siblingCount).map((item) => typeof item === "number" ? (_jsx("li", { children: _jsx("button", { type: "button", className: `k-pagination-button${item === current ? " k-pagination-button-current" : ""}`, onClick: () => goTo(item), "aria-label": `Page ${item}`, "aria-current": item === current ? "page" : undefined, children: item }) }, item)) : (_jsx("li", { className: "k-pagination-gap", "aria-hidden": "true", children: "\u2026" }, item))), _jsx("li", { children: _jsx("button", { type: "button", className: "k-pagination-button", onClick: () => goTo(current + 1), disabled: current >= lastPage, "aria-label": "Next page", children: _jsx(FontAwesomeIcon, { icon: faChevronRight, "aria-hidden": "true" }) }) })] }), pageSizeOptions && onPageSizeChange && (_jsxs("div", { className: "k-pagination-page-size", children: [_jsx("label", { htmlFor: pageSizeId, children: "Rows per page" }), _jsx(Select, { id: pageSizeId, size: "sm", value: pageSize === undefined ? undefined : String(pageSize), options: pageSizeOptions.map((n) => ({
+                            value: String(n),
+                            label: String(n),
+                        })), onChange: (n) => n !== undefined && onPageSizeChange(Number(n)) })] }))] }));
+};
+export default Pagination;
+//# sourceMappingURL=index.js.map

package/dist/components/navigation/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/navigation/pagination/styles.css

@@ -0,0 +1,113 @@
+.k-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1.5rem;
+  color: var(--k-text-color);
+}
+
+.k-pagination-summary {
+  margin: 0;
+  color: var(--k-text-color-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.k-pagination-pages {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.k-pagination-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0.0625rem solid var(--k-border-color);
+  border-radius: 0.375rem;
+  background-color: var(--k-background-color-light);
+  color: var(--k-text-color);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
+}
+
+.k-pagination-button:not(:disabled):hover {
+  background-color: var(--k-background-color-hover);
+}
+
+.k-pagination-button:focus-visible {
+  outline: 0.125rem solid var(--k-border-color-active);
+  outline-offset: 0.125rem;
+}
+
+.k-pagination-button-current,
+.k-pagination-button-current:not(:disabled):hover {
+  border-color: var(--k-primary-color);
+  background-color: var(--k-primary-color);
+  color: var(--k-text-color-light);
+  font-weight: 600;
+}
+
+.k-pagination-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.k-pagination-gap {
+  color: var(--k-text-color-secondary);
+  text-align: center;
+}
+
+.k-pagination-page-size {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--k-text-color-secondary);
+  white-space: nowrap;
+}
+
+/* Sizes: every button stays at least 32px, above the 24px target minimum. */
+.k-pagination-sm {
+  font-size: var(--k-text-size-sm);
+}
+
+.k-pagination-sm .k-pagination-button,
+.k-pagination-sm .k-pagination-gap {
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+}
+
+.k-pagination-md {
+  font-size: var(--k-text-size-sm);
+}
+
+.k-pagination-md .k-pagination-button,
+.k-pagination-md .k-pagination-gap {
+  min-width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 0.625rem;
+}
+
+.k-pagination-lg {
+  font-size: var(--k-text-size-md);
+}
+
+.k-pagination-lg .k-pagination-button,
+.k-pagination-lg .k-pagination-gap {
+  min-width: 2.75rem;
+  height: 2.75rem;
+  padding: 0 0.75rem;
+}
+
+.k-pagination-gap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/components/navigation/pagination/utils.d.ts

@@ -0,0 +1,9 @@
+export type PageRangeItem = number | "start-gap" | "end-gap";
+/**
+ * The page buttons to show: always the first and last page, the current page
+ * with `siblings` neighbours either side, and a gap marker wherever pages are
+ * skipped. The list is the same length on every page, so the control doesn't
+ * jump around as you move through it.
+ */
+export declare const pageRange: (page: number, pageCount: number, siblings?: number) => PageRangeItem[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/navigation/pagination/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;AAE7D;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GACpB,MAAM,MAAM,EACZ,WAAW,MAAM,EACjB,iBAAY,KACX,aAAa,EAmBf,CAAC"}

package/dist/components/navigation/pagination/utils.js

@@ -0,0 +1,25 @@
+/**
+ * The page buttons to show: always the first and last page, the current page
+ * with `siblings` neighbours either side, and a gap marker wherever pages are
+ * skipped. The list is the same length on every page, so the control doesn't
+ * jump around as you move through it.
+ */
+export const pageRange = (page, pageCount, siblings = 1) => {
+    const range = (from, to) => Array.from({ length: to - from + 1 }, (_, i) => from + i);
+    // first + last + current + siblings + two gaps
+    const slots = siblings * 2 + 5;
+    if (pageCount <= slots)
+        return range(1, pageCount);
+    const left = Math.max(page - siblings, 1);
+    const right = Math.min(page + siblings, pageCount);
+    const gapBefore = left > 2;
+    const gapAfter = right < pageCount - 1;
+    // Pages shown at the start or end when only one gap is needed.
+    const edge = siblings * 2 + 3;
+    if (!gapBefore)
+        return [...range(1, edge), "end-gap", pageCount];
+    if (!gapAfter)
+        return [1, "start-gap", ...range(pageCount - edge + 1, pageCount)];
+    return [1, "start-gap", ...range(left, right), "end-gap", pageCount];
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/navigation/pagination/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/utils.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,IAAY,EACZ,SAAiB,EACjB,QAAQ,GAAG,CAAC,EACK,EAAE;IACnB,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,EAAU,EAAE,EAAE,CACzC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IAE5D,+CAA+C;IAC/C,MAAM,KAAK,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;IAC/B,IAAI,SAAS,IAAI,KAAK;QAAE,OAAO,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;IAEnD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC;IAC3B,MAAM,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,CAAC,CAAC;IACvC,+DAA+D;IAC/D,MAAM,IAAI,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;IAE9B,IAAI,CAAC,SAAS;QAAE,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IACjE,IAAI,CAAC,QAAQ;QACX,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;IACrE,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AACvE,CAAC,CAAC"}

package/dist/components/navigation/sidebar/styles.css

@@ -14,7 +14,9 @@
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--overlay-light-medium);
+  /* 50% white: the weakest overlay that keeps small text above 4.5:1 on the
+     sidebar's dark background. */
+  color: var(--k-overlay-light-strong);
   white-space: nowrap;
   overflow: hidden;
 }
@@ -24,7 +26,7 @@
   align-items: center;
   gap: 0.75rem;
   padding: 0.6rem 1.5rem;
-  color: var(--text-color-light);
+  color: var(--k-text-color-light);
   text-decoration: none;
   font-size: 0.875rem;
   transition:
@@ -35,12 +37,18 @@
 }
 
 .k-sidebar-nav-link:hover {
-  background-color: var(--overlay-light-weak);
+  background-color: var(--k-overlay-light-weak);
+}
+
+/* Browser default focus rings can vanish on the dark background. */
+.k-sidebar-nav-link:focus-visible {
+  outline: 2px solid var(--k-text-color-light);
+  outline-offset: -2px;
 }
 
 .k-sidebar-nav-link.active {
-  background-color: var(--overlay-light-medium);
-  color: var(--text-color-light);
+  background-color: var(--k-overlay-light-medium);
+  color: var(--k-text-color-light);
   font-weight: 600;
 }
 

package/dist/components/navigation/stepper/styles.css

@@ -38,14 +38,14 @@
   height: 2rem;
   min-width: 2rem;
   border-radius: 50%;
-  border: 0.125rem solid var(--border-color);
+  border: 0.125rem solid var(--k-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 0.875rem;
-  background: var(--background-color);
-  color: var(--text-color);
+  background: var(--k-background-color);
+  color: var(--k-text-color);
   transition:
     background 0.15s ease,
     border-color 0.15s ease,
@@ -60,7 +60,7 @@
 
 .k-stepper-connector {
   position: absolute;
-  background: var(--border-color);
+  background: var(--k-border-color);
 }
 
 .k-stepper-horizontal .k-stepper-connector {
@@ -78,24 +78,24 @@
 }
 
 .k-stepper-step-active .k-stepper-marker {
-  border-color: var(--primary-color);
-  background: var(--primary-color);
-  color: var(--text-color-light);
+  border-color: var(--k-primary-color);
+  background: var(--k-primary-color);
+  color: var(--k-text-color-light);
 }
 
 .k-stepper-step-complete .k-stepper-marker {
-  border-color: var(--success-color);
-  background: var(--success-color);
-  color: var(--text-color-light);
+  border-color: var(--k-success-color);
+  background: var(--k-success-color);
+  color: var(--k-text-color-light);
 }
 
 .k-stepper-step-error .k-stepper-marker {
-  border-color: var(--danger-color);
-  background: var(--danger-color);
-  color: var(--text-color-light);
+  border-color: var(--k-danger-color);
+  background: var(--k-danger-color);
+  color: var(--k-text-color-light);
 }
 
 .k-stepper-step-complete .k-stepper-connector,
 .k-stepper-step-active .k-stepper-connector {
-  background: var(--primary-color);
+  background: var(--k-primary-color);
 }