@keepkit/ui 0.26.4 → 0.27.0

package/dist/styles/base.css

@@ -59,6 +59,7 @@
   --keep-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0ZM12 9v4M12 17h.01'/%3E%3C/svg%3E");
   --keep-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 4 6 6-3 1-4 4-1 4-7-7 4-1 4-4Z'/%3E%3Cpath d='m9 15-5 5'/%3E%3C/svg%3E");
   --keep-icon-archive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M5 6v14h14V6M9 10h6'/%3E%3Cpath d='M4 3h16v3H4z'/%3E%3C/svg%3E");
+  --keep-icon-collection: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9L9.2 3.9A2 2 0 0 0 7.5 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
 }
 
 :where(.keep-theme, [data-keep-theme]) {
@@ -427,6 +428,7 @@
     [data-keep-action="filter-tag"],
     [data-keep-action="apply-tags"],
     [data-keep-action="save-note"],
+    [data-keep-action="edit"],
     [data-keep-action="retry-item"],
     [data-keep-action="retry-sync"],
     [data-keep-action="resolve-conflicts"],
@@ -455,6 +457,9 @@
 :where(.keep-theme, [data-keep-theme]) [data-keep-action="toggle-save"] {
   --keep-action-icon: var(--keep-icon-bookmark);
 }
+:where(.keep-theme, [data-keep-theme]) [data-keep-action="edit"] {
+  --keep-action-icon: var(--keep-icon-edit);
+}
 :where(.keep-theme, [data-keep-theme]) :is([data-keep-action="previous-page"], [data-keep-action="close-dialog"]) {
   --keep-action-icon: var(--keep-icon-chevron-left);
 }
@@ -507,6 +512,36 @@
   --keep-action-icon: var(--keep-icon-close);
 }
 
+:where(.keep-theme, [data-keep-theme])
+  :is([data-keep-field="note"], [data-keep-field="tags"], [data-keep-field="collection"])
+  > [data-keep-field-icon]::before {
+  content: "";
+  display: inline-block;
+  flex: 0 0 auto;
+  width: var(--keep-icon-size);
+  height: var(--keep-icon-size);
+  background: currentColor;
+  mask: var(--keep-field-icon) center / contain no-repeat;
+  -webkit-mask: var(--keep-field-icon) center / contain no-repeat;
+}
+:where(.keep-theme, [data-keep-theme])
+  :is([data-keep-field="note"], [data-keep-field="tags"], [data-keep-field="collection"])
+  > [data-keep-field-icon] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-block-end: 0.25rem;
+}
+:where(.keep-theme, [data-keep-theme]) [data-keep-field="note"] {
+  --keep-field-icon: var(--keep-icon-edit);
+}
+:where(.keep-theme, [data-keep-theme]) [data-keep-field="tags"] {
+  --keep-field-icon: var(--keep-icon-tag);
+}
+:where(.keep-theme, [data-keep-theme]) [data-keep-field="collection"] {
+  --keep-field-icon: var(--keep-icon-collection);
+}
+
 :where(.keep-theme, [data-keep-theme]) [data-has-custom-icon="true"]::before {
   content: none;
 }

package/dist/styles/collection.css

@@ -258,7 +258,25 @@
 
 :where(.keep-theme, [data-keep-theme]) [data-keep-card-part="actions"] {
   align-items: center;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), max-content));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keep-card-part="actions"] > [data-keepkit="item-edit-dialog"] {
+  grid-column: 1 / -1;
+  width: 100%;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keep-card-part="actions"]:has(> [data-keepkit="item-edit-dialog"]) {
+  justify-content: stretch;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keep-card-part="actions-secondary"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--keep-control-gap);
+  grid-column: 1 / -1;
+  justify-content: flex-end;
+  width: 100%;
 }
 
 :where(.keep-theme, [data-keep-theme]) [data-keep-card-part="collection-badge"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keepkit/ui",
-  "version": "0.26.4",
+  "version": "0.27.0",
   "description": "Headless, accessible React UI components for KeepKit.",
   "type": "module",
   "license": "MIT",
@@ -60,7 +60,7 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@keepkit/core": "0.26.4"
+    "@keepkit/core": "0.27.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.3",