@rokkit/themes 1.0.0-next.133 → 1.0.0-next.136

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.133",
+  "version": "1.0.0-next.136",
   "description": "Theme styles for @rokkit/ui components",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jerrythomas/rokkit.git"
+  },
   "type": "module",
   "main": "./src/index.js",
   "exports": {
@@ -32,14 +36,16 @@
     "src",
     "dist",
     "build.mjs",
+    "README.md",
     "LICENSE"
   ],
   "scripts": {
     "prepublishOnly": "cp ../../LICENSE . && bun run build.mjs",
+    "postpublish": "rm -f LICENSE",
     "build": "bun run build.mjs"
   },
   "dependencies": {
-    "@rokkit/core": "1.0.0-next.133"
+    "@rokkit/core": "workspace:*"
   },
   "devDependencies": {
     "magic-string": "^0.30.21",

package/src/base/breadcrumbs.css

@@ -1,47 +1,47 @@
 /* BreadCrumbs — base structural styles */
 
 [data-breadcrumbs] {
-	display: block;
+  display: block;
 }
 
 [data-breadcrumb-list] {
-	display: flex;
-	align-items: center;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	gap: 0.25rem;
+  display: flex;
+  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: 0.25rem;
 }
 
 [data-breadcrumb-item] {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 [data-breadcrumb-separator] {
-	display: flex;
-	align-items: center;
-	opacity: 0.5;
+  display: flex;
+  align-items: center;
+  opacity: 0.5;
 }
 
 [data-breadcrumb-link] {
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-	background: none;
-	border: none;
-	cursor: pointer;
-	padding: 0.25rem 0.5rem;
-	border-radius: 0.25rem;
-	font: inherit;
-	color: inherit;
-	text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font: inherit;
+  color: inherit;
+  text-decoration: none;
 }
 
 [data-breadcrumb-current] {
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-	padding: 0.25rem 0.5rem;
-	font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-weight: 600;
 }

package/src/base/button.css

@@ -171,7 +171,9 @@
    ============================================================================= */
 
 /* Hover lift — subtle elevation on hover (not on link or ghost style) */
-[data-button]:not([data-style='link']):not([data-style='ghost']):hover:not(:disabled):not([data-disabled]) {
+[data-button]:not([data-style='link']):not([data-style='ghost']):hover:not(:disabled):not(
+    [data-disabled]
+  ) {
   transform: translateY(-1px);
 }
 
@@ -195,8 +197,13 @@
 }
 
 @keyframes button-loading-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
 }
 
 /* =============================================================================

package/src/base/card.css

@@ -1,36 +1,36 @@
 /* Card — base structural styles */
 
 [data-card] {
-	display: flex;
-	flex-direction: column;
-	border-radius: 0.5rem;
-	overflow: hidden;
-	text-decoration: none;
-	color: inherit;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
 }
 
 button[data-card] {
-	background: none;
-	border: none;
-	cursor: pointer;
-	text-align: inherit;
-	font: inherit;
-	padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: inherit;
+  font: inherit;
+  padding: 0;
 }
 
 a[data-card] {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 [data-card-header] {
-	padding: 1rem 1rem 0.5rem;
+  padding: 1rem 1rem 0.5rem;
 }
 
 [data-card-body] {
-	padding: 0.5rem 1rem;
-	flex: 1;
+  padding: 0.5rem 1rem;
+  flex: 1;
 }
 
 [data-card-footer] {
-	padding: 0.5rem 1rem 1rem;
+  padding: 0.5rem 1rem 1rem;
 }

package/src/base/carousel.css

@@ -1,128 +1,128 @@
 /* Carousel — base structural styles */
 
 [data-carousel] {
-	position: relative;
-	overflow: hidden;
-	outline: none;
+  position: relative;
+  overflow: hidden;
+  outline: none;
 }
 
 [data-carousel-viewport] {
-	overflow: hidden;
-	width: 100%;
+  overflow: hidden;
+  width: 100%;
 }
 
 /* ─── Slide transition ─── */
 
-[data-carousel-transition="slide"] [data-carousel-track] {
-	display: flex;
-	transition: transform 0.4s ease;
-	transform: translateX(calc(-100% * var(--carousel-current, 0)));
+[data-carousel-transition='slide'] [data-carousel-track] {
+  display: flex;
+  transition: transform 0.4s ease;
+  transform: translateX(calc(-100% * var(--carousel-current, 0)));
 }
 
-[data-carousel-transition="slide"] [data-carousel-slide] {
-	flex: 0 0 100%;
-	min-width: 0;
+[data-carousel-transition='slide'] [data-carousel-slide] {
+  flex: 0 0 100%;
+  min-width: 0;
 }
 
 /* ─── Fade transition ─── */
 
-[data-carousel-transition="fade"] [data-carousel-track] {
-	position: relative;
+[data-carousel-transition='fade'] [data-carousel-track] {
+  position: relative;
 }
 
-[data-carousel-transition="fade"] [data-carousel-slide] {
-	position: absolute;
-	inset: 0;
-	opacity: 0;
-	transition: opacity 0.4s ease;
-	pointer-events: none;
+[data-carousel-transition='fade'] [data-carousel-slide] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
 }
 
-[data-carousel-transition="fade"] [data-carousel-slide][data-active] {
-	position: relative;
-	opacity: 1;
-	pointer-events: auto;
+[data-carousel-transition='fade'] [data-carousel-slide][data-active] {
+  position: relative;
+  opacity: 1;
+  pointer-events: auto;
 }
 
 /* ─── No transition ─── */
 
-[data-carousel-transition="none"] [data-carousel-track] {
-	display: flex;
-	transform: translateX(calc(-100% * var(--carousel-current, 0)));
+[data-carousel-transition='none'] [data-carousel-track] {
+  display: flex;
+  transform: translateX(calc(-100% * var(--carousel-current, 0)));
 }
 
-[data-carousel-transition="none"] [data-carousel-slide] {
-	flex: 0 0 100%;
-	min-width: 0;
+[data-carousel-transition='none'] [data-carousel-slide] {
+  flex: 0 0 100%;
+  min-width: 0;
 }
 
 /* ─── Arrow buttons ─── */
 
 [data-carousel-prev],
 [data-carousel-next] {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 2.5rem;
-	height: 2.5rem;
-	border: none;
-	border-radius: 9999px;
-	cursor: pointer;
-	background: rgba(0, 0, 0, 0.3);
-	color: white;
-	font-size: 1.25rem;
-	z-index: 1;
-	opacity: 0.7;
-	transition: opacity 0.2s ease;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.3);
+  color: white;
+  font-size: 1.25rem;
+  z-index: 1;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
 }
 
 [data-carousel-prev]:hover,
 [data-carousel-next]:hover {
-	opacity: 1;
+  opacity: 1;
 }
 
 [data-carousel-prev]:disabled,
 [data-carousel-next]:disabled {
-	opacity: 0.3;
-	cursor: default;
+  opacity: 0.3;
+  cursor: default;
 }
 
 [data-carousel-prev] {
-	left: 0.5rem;
+  left: 0.5rem;
 }
 
 [data-carousel-next] {
-	right: 0.5rem;
+  right: 0.5rem;
 }
 
 /* ─── Dots ─── */
 
 [data-carousel-dots] {
-	display: flex;
-	justify-content: center;
-	gap: 0.5rem;
-	padding: 0.75rem 0;
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 0;
 }
 
 [data-carousel-dot] {
-	width: 0.625rem;
-	height: 0.625rem;
-	border-radius: 9999px;
-	border: none;
-	cursor: pointer;
-	background: currentColor;
-	opacity: 0.3;
-	transition: opacity 0.2s ease;
-	padding: 0;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  border: none;
+  cursor: pointer;
+  background: currentColor;
+  opacity: 0.3;
+  transition: opacity 0.2s ease;
+  padding: 0;
 }
 
 [data-carousel-dot][data-active] {
-	opacity: 1;
+  opacity: 1;
 }
 
 [data-carousel-dot]:hover {
-	opacity: 0.7;
+  opacity: 0.7;
 }

package/src/base/display.css

@@ -6,24 +6,24 @@
 }
 
 [data-display-title] {
-  @apply font-semibold text-sm text-on-surface;
+  @apply text-on-surface text-sm font-semibold;
 }
 
 [data-display-field] {
-  @apply flex justify-between items-baseline gap-4;
+  @apply flex items-baseline justify-between gap-4;
 }
 
 [data-display-label] {
-  @apply text-sm text-on-surface/70 shrink-0;
+  @apply text-on-surface/70 shrink-0 text-sm;
 }
 
 [data-display-value] {
-  @apply text-sm text-on-surface text-right;
+  @apply text-on-surface text-right text-sm;
 }
 
 /* Badge format: pill style */
 [data-display-value][data-format='badge'] {
-  @apply px-2 py-0.5 rounded-full text-xs font-medium bg-surface-z2;
+  @apply bg-surface-z2 rounded-full px-2 py-0.5 text-xs font-medium;
 }
 
 /* Boolean format */
@@ -58,11 +58,11 @@
 }
 
 [data-display-card] {
-  @apply flex flex-col gap-1 p-3 rounded border border-surface-z2 bg-surface;
+  @apply border-surface-z2 bg-surface flex flex-col gap-1 rounded border p-3;
 }
 
 [data-display-card][data-selected] {
-  @apply border-primary ring-1 ring-primary;
+  @apply border-primary ring-primary ring-1;
 }
 
 [data-selectable] [data-display-card] {
@@ -83,7 +83,7 @@
 }
 
 [data-display-list-item] {
-  @apply flex gap-4 items-baseline py-1 border-b border-surface-z2 last:border-0;
+  @apply border-surface-z2 flex items-baseline gap-4 border-b py-1 last:border-0;
 }
 
 [data-display-list-item] [data-display-field] {

package/src/base/floating-navigation.css

@@ -80,23 +80,47 @@
    ============================================================================= */
 
 @keyframes fn-slide-in-right {
-  from { opacity: 0; transform: translateX(4rem); }
-  to   { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @keyframes fn-slide-in-left {
-  from { opacity: 0; transform: translateX(-4rem); }
-  to   { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(-4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @keyframes fn-slide-in-top {
-  from { opacity: 0; transform: translateY(-4rem); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes fn-slide-in-bottom {
-  from { opacity: 0; transform: translateY(4rem); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* =============================================================================

package/src/base/graph-paper.css

@@ -25,59 +25,59 @@
  */
 
 [data-graph-paper] {
-	background-image:
-		linear-gradient(
-			var(--graph-paper-color, currentColor) var(--major-grid, 0.5px),
-			transparent var(--major-grid, 0.5px)
-		),
-		linear-gradient(
-			90deg,
-			var(--graph-paper-color, currentColor) var(--major-grid, 0.5px),
-			transparent var(--major-grid, 0.5px)
-		),
-		linear-gradient(
-			var(--graph-paper-color, currentColor) var(--minor-grid, 0.5px),
-			transparent var(--minor-grid, 0.5px)
-		),
-		linear-gradient(
-			90deg,
-			var(--graph-paper-color, currentColor) var(--minor-grid, 0.5px),
-			transparent var(--minor-grid, 0.5px)
-		);
-	background-size:
-		var(--size, calc(5 * var(--unit, 0.5rem))) var(--size, calc(5 * var(--unit, 0.5rem))),
-		var(--size, calc(5 * var(--unit, 0.5rem))) var(--size, calc(5 * var(--unit, 0.5rem))),
-		var(--unit, 0.5rem) var(--unit, 0.5rem),
-		var(--unit, 0.5rem) var(--unit, 0.5rem);
-	background-position:
-		calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
-		calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
-		calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
-		calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px));
+  background-image:
+    linear-gradient(
+      var(--graph-paper-color, currentColor) var(--major-grid, 0.5px),
+      transparent var(--major-grid, 0.5px)
+    ),
+    linear-gradient(
+      90deg,
+      var(--graph-paper-color, currentColor) var(--major-grid, 0.5px),
+      transparent var(--major-grid, 0.5px)
+    ),
+    linear-gradient(
+      var(--graph-paper-color, currentColor) var(--minor-grid, 0.5px),
+      transparent var(--minor-grid, 0.5px)
+    ),
+    linear-gradient(
+      90deg,
+      var(--graph-paper-color, currentColor) var(--minor-grid, 0.5px),
+      transparent var(--minor-grid, 0.5px)
+    );
+  background-size:
+    var(--size, calc(5 * var(--unit, 0.5rem))) var(--size, calc(5 * var(--unit, 0.5rem))),
+    var(--size, calc(5 * var(--unit, 0.5rem))) var(--size, calc(5 * var(--unit, 0.5rem))),
+    var(--unit, 0.5rem) var(--unit, 0.5rem),
+    var(--unit, 0.5rem) var(--unit, 0.5rem);
+  background-position:
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px));
 }
 
 [data-grid-paper] {
-	background-image:
-		linear-gradient(
-			var(--grid-paper-color, currentColor) var(--grid-line, 0.5px),
-			transparent var(--grid-line, 0.5px)
-		),
-		linear-gradient(
-			90deg,
-			var(--grid-paper-color, currentColor) var(--grid-line, 0.5px),
-			transparent var(--grid-line, 0.5px)
-		);
-	background-size: var(--unit, 0.5rem) var(--unit, 0.5rem);
-	background-position:
-		calc(-1 * var(--grid-line, 0.5px)) calc(-1 * var(--grid-line, 0.5px)),
-		calc(-1 * var(--grid-line, 0.5px)) calc(-1 * var(--grid-line, 0.5px));
+  background-image:
+    linear-gradient(
+      var(--grid-paper-color, currentColor) var(--grid-line, 0.5px),
+      transparent var(--grid-line, 0.5px)
+    ),
+    linear-gradient(
+      90deg,
+      var(--grid-paper-color, currentColor) var(--grid-line, 0.5px),
+      transparent var(--grid-line, 0.5px)
+    );
+  background-size: var(--unit, 0.5rem) var(--unit, 0.5rem);
+  background-position:
+    calc(-1 * var(--grid-line, 0.5px)) calc(-1 * var(--grid-line, 0.5px)),
+    calc(-1 * var(--grid-line, 0.5px)) calc(-1 * var(--grid-line, 0.5px));
 }
 
 [data-ruled-paper] {
-	background-image: linear-gradient(
-		var(--ruled-paper-color, currentColor) var(--rule-size, 0.5px),
-		transparent var(--rule-size, 0.5px)
-	);
-	background-size: 100% var(--unit, 1.5rem);
-	background-position: 0 calc(-1 * var(--rule-size, 0.5px));
+  background-image: linear-gradient(
+    var(--ruled-paper-color, currentColor) var(--rule-size, 0.5px),
+    transparent var(--rule-size, 0.5px)
+  );
+  background-size: 100% var(--unit, 1.5rem);
+  background-position: 0 calc(-1 * var(--rule-size, 0.5px));
 }