@keepkit/ui 0.16.0 → 0.18.0

package/dist/styles/base.css

@@ -14,6 +14,8 @@
   --keep-ring: var(--ring, var(--keep-primary));
   --keep-success: #15803d;
   --keep-warning: #b45309;
+  --keep-highlight-bg: #fef08a;
+  --keep-highlight-fg: #422006;
   --keep-accent: var(--primary, #2563eb);
   --keep-radius: var(--radius, 0.5rem);
   --keep-card-padding: 1rem;
@@ -66,6 +68,11 @@
   outline-offset: 2px;
 }
 
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"]:focus-visible {
+  outline: 2px solid var(--keep-ring);
+  outline-offset: 3px;
+}
+
 :where(.keep-theme, [data-keep-theme]) :is(button, a) {
   min-height: var(--keep-button-size);
 }
@@ -221,6 +228,8 @@
   --keep-destructive-foreground: var(--destructive-foreground, #450a0a);
   --keep-success: #86efac;
   --keep-warning: #fdba74;
+  --keep-highlight-bg: #facc15;
+  --keep-highlight-fg: #422006;
   --keep-ring: var(--ring, var(--keep-primary));
   --keep-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
   --keep-icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 6 4-4 4 4M12 2v14M16 18l-4 4-4-4'/%3E%3C/svg%3E");
@@ -242,6 +251,8 @@
     --keep-destructive-foreground: var(--destructive-foreground, #450a0a);
     --keep-success: #86efac;
     --keep-warning: #fdba74;
+    --keep-highlight-bg: #facc15;
+    --keep-highlight-fg: #422006;
     --keep-ring: var(--ring, var(--keep-primary));
     --keep-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
     --keep-icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 6 4-4 4 4M12 2v14M16 18l-4 4-4-4'/%3E%3C/svg%3E");
@@ -360,6 +371,16 @@
   outline-offset: -2px;
 }
 
+:where(.keep-theme, [data-keep-theme]) mark.keep-highlight {
+  border-radius: 0.2em;
+  padding-inline: 0.12em;
+  background: var(--keep-highlight-bg);
+  color: var(--keep-highlight-fg);
+  text-decoration: underline;
+  text-decoration-thickness: 0.12em;
+  text-underline-offset: 0.12em;
+}
+
 :where(.keep-theme, [data-keep-theme]) [data-keepkit="bulk-actions"][data-state="selected"] {
   border: 1px solid var(--keep-ring);
   background: var(--keep-muted);

package/dist/styles/collection.css

@@ -110,6 +110,7 @@
   grid-row: 1 / span 2;
   width: var(--keep-thumbnail-size);
   height: var(--keep-thumbnail-size);
+  aspect-ratio: 1 / 1;
   overflow: hidden;
   border-radius: calc(var(--keep-radius) - 2px);
   background: var(--keep-muted);
@@ -123,6 +124,12 @@
   object-fit: cover;
 }
 
+:where(.keep-theme, [data-keep-theme]) [data-keep-card-part="media"] > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 :where(.keep-theme, [data-keep-theme]) [data-keep-card-fallback] {
   overflow: hidden;
   color: var(--keep-muted-foreground);
@@ -174,10 +181,24 @@
 }
 
 :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] :is(h2, h3, h4, h5, h6)[data-keep-card-part="title"] {
+  display: -webkit-box;
+  overflow: hidden;
   margin: 0;
   padding-inline-end: calc(var(--keep-button-size) + var(--keep-card-gap));
   font-size: var(--keep-title-size);
   line-height: 1.35;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keep-card-part="memo-preview"],
+:where(.keep-theme, [data-keep-theme]) [data-card-note-preview] {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
 }
 
 :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] [data-keep-card-part="title"] a {
@@ -326,6 +347,106 @@
   aspect-ratio: 16 / 9;
 }
 
+:where(.keep-theme, [data-keep-theme])
+  [data-keepkit="list"]
+  > ul[data-layout="grid"]
+  [data-keepkit="card"]:has(> [data-keep-card-part="media"]),
+:where(.keep-theme, [data-keep-theme])
+  [data-keepkit="list"]
+  > ul[data-layout="auto"]
+  [data-keepkit="card"]:has(> [data-keep-card-part="media"]) {
+  grid-template-columns: 1fr;
+}
+
+:where(.keep-theme, [data-keep-theme])
+  [data-keepkit="list"]
+  > ul:is([data-layout="grid"], [data-layout="auto"])
+  [data-keepkit="card"]
+  > [data-keep-card-part="media"] {
+  grid-column: 1;
+  grid-row: auto;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16 / 9;
+}
+
+:where(.keep-theme, [data-keep-theme])
+  [data-keepkit="list"]
+  > ul:is([data-layout="grid"], [data-layout="auto"])
+  [data-keepkit="card"]
+  > :is([data-keep-card-part="content"], [data-keep-card-part="actions"]) {
+  grid-column: 1;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="reorderable-list"] {
+  position: relative;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="reorderable-list"] > li[data-reorder-index] {
+  position: relative;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="reorderable-list"] > li[data-drop-target]::before,
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="reorderable-list"] > li[data-drop-target]::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  left: 0;
+  height: 0.2rem;
+  border-radius: 999px;
+  background: var(--keep-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--keep-primary) 18%, transparent);
+  pointer-events: none;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="reorderable-list"] > li[data-drop-target="before"]::before {
+  top: calc(var(--keep-list-gap) / -2);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="reorderable-list"] > li[data-drop-target="after"]::after {
+  bottom: calc(var(--keep-list-gap) / -2);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-drag-handle] {
+  color: var(--keep-muted-foreground);
+  cursor: grab;
+}
+
+@media (pointer: coarse) {
+  :where(.keep-theme, [data-keep-theme]) [data-drag-handle] {
+    color: var(--keep-foreground);
+    opacity: 1;
+  }
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="tour-bar"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: var(--keep-control-gap);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="tour-bar"] [data-keep-action^="tour-"] {
+  display: inline-flex;
+  min-width: 7rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  text-align: center;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-tour-preview] {
+  max-width: 12rem;
+  overflow: hidden;
+  color: var(--keep-muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 :where(.keep-theme, [data-keep-theme]) [data-keepkit="card-skeleton"][data-layout="compact"] {
   --keep-skeleton-media-size: 2.75rem;
   --keep-skeleton-title-width: 64%;

package/dist/styles/status.css

@@ -0,0 +1,44 @@
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: 1px solid color-mix(in srgb, var(--keep-border) 72%, transparent);
+  border-radius: 999px;
+  padding: 0.125rem 0.5rem;
+  background: var(--keep-muted);
+  color: var(--keep-card-foreground);
+  font-size: var(--keep-tag-size);
+  font-weight: 600;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"] [data-status-icon] {
+  flex: 0 0 auto;
+  width: var(--keep-icon-size);
+  height: var(--keep-icon-size);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="available"] {
+  border-color: color-mix(in srgb, var(--keep-success) 55%, var(--keep-border));
+  color: var(--keep-success);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="expired"] {
+  border-style: dashed;
+  border-color: var(--keep-destructive);
+  color: var(--keep-destructive);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="removed"] {
+  border-color: var(--keep-muted-foreground);
+  border-radius: var(--keep-radius);
+  background: color-mix(in srgb, var(--keep-muted-foreground) 12%, var(--keep-card));
+  color: var(--keep-muted-foreground);
+  filter: grayscale(1);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="restricted"] {
+  border-color: var(--keep-destructive);
+  border-radius: var(--keep-radius);
+  background: var(--keep-destructive);
+  color: var(--keep-destructive-foreground);
+}

package/dist/styles/sync.css

@@ -12,20 +12,6 @@
   box-shadow: var(--keep-shadow);
 }
 
-:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"] {
-  --keep-status-icon: var(--keep-icon-warning);
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  border: 1px solid color-mix(in srgb, var(--keep-border) 72%, transparent);
-  border-radius: 999px;
-  padding: 0.125rem 0.5rem;
-  background: var(--keep-muted);
-  font-size: var(--keep-tag-size);
-  font-weight: 600;
-}
-
-:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"]::before,
 :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"]::before,
 :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"]::before {
   content: "";
@@ -38,24 +24,6 @@
   -webkit-mask: var(--keep-status-icon) center / contain no-repeat;
 }
 
-:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="available"] {
-  --keep-status-icon: var(--keep-icon-check);
-  color: var(--keep-success);
-}
-:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="expired"],
-:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="removed"],
-:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="deleted"] {
-  border-color: var(--keep-destructive);
-  color: var(--keep-destructive);
-}
-:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="expired"],
-:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="removed"],
-:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="restricted"] {
-  border-color: var(--keep-destructive);
-  color: var(--keep-destructive);
-  --keep-status-icon: var(--keep-icon-warning);
-}
-
 :where(.keep-theme, [data-keep-theme]) [data-keepkit="stale-notice"],
 :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"] {
   display: flex;
@@ -125,6 +93,51 @@
   animation: keepkit-undo-in 160ms ease-out;
 }
 
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="undo"] [data-keepkit="undo-message"] {
+  flex: 1 1 12rem;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="undo-countdown"] {
+  color: var(--keep-muted-foreground);
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="undo-progress"] {
+  flex: 1 0 100%;
+  width: 100%;
+  height: 0.375rem;
+  overflow: hidden;
+  border: 0;
+  border-radius: 999px;
+  background: var(--keep-muted);
+  accent-color: var(--keep-primary);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="undo-progress"]::-webkit-progress-bar {
+  border-radius: inherit;
+  background: var(--keep-muted);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="undo-progress"]::-webkit-progress-value {
+  border-radius: inherit;
+  background: var(--keep-primary);
+  transition: width 250ms linear;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="undo-progress"]::-moz-progress-bar {
+  border-radius: inherit;
+  background: var(--keep-primary);
+  transition: width 250ms linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.keep-theme, [data-keep-theme]) [data-keepkit="undo-progress"]::-webkit-progress-value,
+  :where(.keep-theme, [data-keep-theme]) [data-keepkit="undo-progress"]::-moz-progress-bar {
+    transition: none;
+  }
+}
+
 @keyframes keepkit-undo-in {
   from {
     opacity: 0;

package/dist/theme.css

@@ -1,4 +1,5 @@
 @import "./styles/base.css";
 @import "./styles/button.css";
 @import "./styles/collection.css";
+@import "./styles/status.css";
 @import "./styles/sync.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keepkit/ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Headless, accessible React UI components for KeepKit.",
   "type": "module",
   "license": "MIT",
@@ -40,6 +40,9 @@
     "./styles/collection.css": {
       "default": "./dist/styles/collection.css"
     },
+    "./styles/status.css": {
+      "default": "./dist/styles/status.css"
+    },
     "./styles/sync.css": {
       "default": "./dist/styles/sync.css"
     }
@@ -54,7 +57,7 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@keepkit/core": "0.16.0"
+    "@keepkit/core": "0.18.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.3",