@domainkit/react 0.3.0 → 0.4.0

package/dist/styles.css

@@ -8,9 +8,11 @@
 ) {
   --domainkit-accent: #0070f3;
   --domainkit-accent-contrast: #ffffff;
+  --domainkit-backdrop: rgb(15 23 42 / 0.45);
   --domainkit-background: #ffffff;
   --domainkit-border: #d4d4d8;
   --domainkit-danger: #dc2626;
+  --domainkit-danger-contrast: #ffffff;
   --domainkit-fill: #f4f4f5;
   --domainkit-font-family: ui-sans-serif, system-ui, sans-serif;
   --domainkit-muted: #52525b;
@@ -20,8 +22,9 @@
   --domainkit-text: #18181b;
   --domainkit-control-radius: calc(var(--domainkit-radius) * 0.5);
   --domainkit-button-raised-glint: rgb(255 255 255 / 0.95);
-  --domainkit-button-raised-shade: rgb(15 23 42 / 0.1);
-  --domainkit-button-raised-shadow: 0 1px 2px rgb(15 23 42 / 0.1);
+  --domainkit-button-raised-shade: color-mix(in srgb, var(--domainkit-text) 10%, transparent);
+  --domainkit-button-raised-shadow: 0 1px 2px
+    color-mix(in srgb, var(--domainkit-text) 10%, transparent);
   color: var(--domainkit-text);
   color-scheme: light;
   font-family: var(--domainkit-font-family);
@@ -90,7 +93,10 @@
   [data-domainkit-part="observe-action"],
   [data-domainkit-part="cleanup-trigger"],
   [data-domainkit-part="cleanup-apply"],
+  [data-domainkit-part="cleanup-retry"],
   [data-domainkit-part="disconnect-action"],
+  [data-domainkit-part="disconnect-trigger"],
+  [data-domainkit-part="actions-trigger"],
   [data-domainkit-part="token-connect"] button,
   [data-domainkit-part="copy-action"],
   [data-domainkit-part="zone-copy"],
@@ -134,7 +140,7 @@
   );
   border-color: var(--domainkit-button-edge);
   box-shadow:
-    0 1px 2px rgb(15 23 42 / 0.18),
+    0 1px 2px color-mix(in srgb, var(--domainkit-text) 18%, transparent),
     inset 0 1px 0 var(--domainkit-button-glint);
   color: var(--domainkit-accent-contrast);
 }
@@ -159,13 +165,14 @@
     var(--domainkit-accent),
     color-mix(in oklch, var(--domainkit-accent), black 10%)
   );
-  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.28);
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--domainkit-text) 28%, transparent);
 }
 
 :where(
   [data-domainkit-part="reuse-connection"],
   [data-domainkit-part="connection-retry"],
   [data-domainkit-part="provisioning-retry"],
+  [data-domainkit-part="cleanup-retry"],
   [data-domainkit-part="observe-action"],
   [data-domainkit-part="zone-copy"],
   [data-domainkit-part="zone-download"],
@@ -219,9 +226,9 @@
   );
   border-color: var(--domainkit-button-edge);
   box-shadow:
-    0 1px 2px rgb(15 23 42 / 0.18),
+    0 1px 2px color-mix(in srgb, var(--domainkit-text) 18%, transparent),
     inset 0 1px 0 var(--domainkit-button-glint);
-  color: var(--domainkit-accent-contrast);
+  color: var(--domainkit-danger-contrast);
 }
 
 :where([data-domainkit-part="cleanup-apply"]:hover:not(:disabled)) {
@@ -234,7 +241,7 @@
     var(--domainkit-danger),
     color-mix(in oklch, var(--domainkit-danger), black 10%)
   );
-  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.28);
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--domainkit-text) 28%, transparent);
 }
 
 :where([data-domainkit-part="dialog-cancel"], [data-domainkit-part="dialog-close"]) {
@@ -327,7 +334,7 @@
 }
 
 :where([data-domainkit-part="dialog-backdrop"]) {
-  background: rgb(15 23 42 / 0.45);
+  background: var(--domainkit-backdrop);
   inset: 0;
   position: fixed;
   transition: opacity 150ms ease;
@@ -337,7 +344,8 @@
 :where(
   [data-domainkit-part="connection-dialog"],
   [data-domainkit-part="plan-dialog"],
-  [data-domainkit-part="cleanup-dialog"]
+  [data-domainkit-part="cleanup-dialog"],
+  [data-domainkit-part="disconnect-dialog"]
 ) {
   background: var(--domainkit-background);
   border: 1px solid var(--domainkit-border);
@@ -370,7 +378,9 @@
   [data-domainkit-part="plan-dialog"][data-starting-style],
   [data-domainkit-part="plan-dialog"][data-ending-style],
   [data-domainkit-part="cleanup-dialog"][data-starting-style],
-  [data-domainkit-part="cleanup-dialog"][data-ending-style]
+  [data-domainkit-part="cleanup-dialog"][data-ending-style],
+  [data-domainkit-part="disconnect-dialog"][data-starting-style],
+  [data-domainkit-part="disconnect-dialog"][data-ending-style]
 ) {
   opacity: 0;
   transform: translate(-50%, -48%) scale(0.98);
@@ -412,6 +422,35 @@
   padding: 1rem;
 }
 
+:where([data-domainkit-part="provider-authentication"]) {
+  display: grid;
+  gap: 0.55rem;
+}
+
+:where([data-domainkit-part="authentication-separator"]) {
+  align-items: center;
+  color: var(--domainkit-muted);
+  display: grid;
+  font-size: 0.75rem;
+  gap: 0.75rem;
+  grid-template-columns: 1fr auto 1fr;
+  line-height: 1;
+  padding: 0.15rem 0;
+  text-transform: lowercase;
+}
+
+:where([data-domainkit-part="authentication-separator"])::before,
+:where([data-domainkit-part="authentication-separator"])::after {
+  border-top: 1px solid var(--domainkit-border);
+  content: "";
+}
+
+:where([data-domainkit-part="dialog-progress"]) {
+  color: var(--domainkit-muted);
+  margin: 0;
+  min-height: 1.4em;
+}
+
 :where([data-domainkit-part="dialog-body"] [data-domainkit-part="oauth-connect"]),
 :where([data-domainkit-part="dialog-body"] [data-domainkit-part="reuse-connection"]) {
   width: 100%;
@@ -430,6 +469,7 @@
   background: var(--domainkit-fill);
   border: 1px solid var(--domainkit-border);
   border-radius: var(--domainkit-control-radius);
+  box-sizing: border-box;
   display: inline-flex;
   flex: none;
   font-size: 0.75rem;
@@ -506,10 +546,11 @@
   background: var(--domainkit-background);
   border: 1px solid var(--domainkit-border);
   border-radius: var(--domainkit-radius);
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   gap: 0.75rem 1rem;
+  grid-template-columns: minmax(0, 1fr) auto;
   justify-content: space-between;
+  min-height: 4.25rem;
   padding: 1rem;
   width: 100%;
 }
@@ -524,11 +565,96 @@
 :where([data-domainkit-part="connected-actions"]) {
   align-items: center;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 0.5rem;
   margin-left: auto;
 }
 
+:where([data-domainkit-part="actions-trigger"]) {
+  background: transparent;
+  border-color: transparent;
+  color: var(--domainkit-muted);
+  flex: none;
+  font-size: 1.15rem;
+  min-height: 2.25rem;
+  padding: 0;
+  width: 2.25rem;
+}
+
+:where(
+  [data-domainkit-part="actions-trigger"]:hover:not(:disabled),
+  [data-domainkit-part="actions-trigger"][data-popup-open]
+) {
+  background: var(--domainkit-fill);
+  color: var(--domainkit-text);
+}
+
+:where([data-domainkit-part="actions-menu"]) {
+  background: var(--domainkit-background);
+  border: 1px solid var(--domainkit-border);
+  border-radius: var(--domainkit-control-radius);
+  box-shadow: var(--domainkit-shadow);
+  color: var(--domainkit-text);
+  display: grid;
+  min-width: 11rem;
+  padding: 0.3rem;
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+  z-index: 1002;
+}
+
+:where(
+  [data-domainkit-part="actions-menu"][data-starting-style],
+  [data-domainkit-part="actions-menu"][data-ending-style]
+) {
+  opacity: 0;
+  transform: scale(0.98);
+}
+
+:where([data-domainkit-part="actions-item"]) {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--domainkit-control-radius) * 0.75);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: 0.875rem;
+  min-height: 2.25rem;
+  outline: none;
+  padding: 0.45rem 0.65rem;
+  text-align: left;
+  width: 100%;
+}
+
+:where([data-domainkit-part="actions-item"][data-highlighted]) {
+  background: var(--domainkit-fill);
+}
+
+:where([data-domainkit-part="actions-item"][data-tone="danger"]) {
+  color: var(--domainkit-danger);
+}
+
+:where([data-domainkit-part="actions-separator"]) {
+  background: var(--domainkit-border);
+  height: 1px;
+  margin: 0.25rem 0.35rem;
+}
+
+@media (max-width: 36rem) {
+  :where([data-domainkit-part="connected-card"]) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  :where([data-domainkit-part="connected-actions"]) {
+    justify-content: space-between;
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
 :where(
   [data-domainkit-part="provisioning-flow"],
   [data-domainkit-part="verification-status"],
@@ -541,6 +667,11 @@
   width: 100%;
 }
 
+:where([data-domainkit-part="verification-status"]) {
+  display: inline-flex;
+  width: auto;
+}
+
 :where(
   [data-domainkit-part="connected-actions"] > [data-domainkit-part="provisioning-flow"],
   [data-domainkit-part="connected-actions"] > [data-domainkit-part="verification-status"],
@@ -552,23 +683,124 @@
 
 :where([data-domainkit-part="provisioning-flow"] > [data-domainkit-part="records-panel"]),
 :where([data-domainkit-part="provisioning-flow"] > [data-domainkit-part="flow-outcome"]),
-:where([data-domainkit-part="verification-status"] > [data-domainkit-part="observation-list"]),
-:where([data-domainkit-part="verification-status"] > p),
 :where([data-domainkit-part="cleanup-flow"] > [data-domainkit-part="flow-outcome"]) {
   flex: 1 1 100%;
 }
 
+:where([data-domainkit-part="verification-positioner"]) {
+  max-width: min(var(--available-width), calc(100vw - 1rem));
+  z-index: 1002;
+}
+
+:where([data-domainkit-part="verification-popover"]) {
+  background: var(--domainkit-background);
+  border: 1px solid var(--domainkit-border);
+  border-radius: var(--domainkit-control-radius);
+  box-shadow: 0 6px 20px color-mix(in srgb, var(--domainkit-text) 12%, transparent);
+  box-sizing: border-box;
+  color: var(--domainkit-text);
+  display: grid;
+  gap: 0.625rem;
+  max-height: min(20rem, var(--available-height));
+  max-width: min(18rem, calc(100vw - 1rem), var(--available-width));
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0.625rem;
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+  width: 18rem;
+}
+
+:where(
+  [data-domainkit-part="verification-popover"][data-starting-style],
+  [data-domainkit-part="verification-popover"][data-ending-style]
+) {
+  opacity: 0;
+  transform: scale(0.98);
+}
+
+:where([data-domainkit-part="verification-arrow"]) {
+  display: block;
+  height: 5px;
+  overflow: clip;
+  position: relative;
+  width: 10px;
+}
+
+:where([data-domainkit-part="verification-arrow"])::before {
+  background: var(--domainkit-background);
+  border: 1px solid var(--domainkit-border);
+  box-sizing: border-box;
+  content: "";
+  display: block;
+  height: calc(5px * sqrt(2));
+  left: 50%;
+  position: absolute;
+  width: calc(5px * sqrt(2));
+}
+
+:where([data-domainkit-part="verification-arrow"][data-side="bottom"]) {
+  top: -5px;
+}
+
+:where([data-domainkit-part="verification-arrow"][data-side="bottom"])::before {
+  bottom: 0;
+  transform: translate(-50%, 50%) rotate(45deg);
+}
+
+:where([data-domainkit-part="verification-arrow"][data-side="top"]) {
+  bottom: -5px;
+  rotate: 180deg;
+}
+
+:where([data-domainkit-part="verification-arrow"][data-side="top"])::before {
+  bottom: 0;
+  transform: translate(-50%, 50%) rotate(45deg);
+}
+
+:where([data-domainkit-part="verification-arrow"][data-side="left"]) {
+  right: -7px;
+  rotate: 90deg;
+}
+
+:where([data-domainkit-part="verification-arrow"][data-side="left"])::before,
+:where([data-domainkit-part="verification-arrow"][data-side="right"])::before {
+  bottom: 0;
+  transform: translate(-50%, 50%) rotate(45deg);
+}
+
+:where([data-domainkit-part="verification-arrow"][data-side="right"]) {
+  left: -7px;
+  rotate: -90deg;
+}
+
+:where([data-domainkit-part="verification-progress"]) {
+  color: var(--domainkit-muted);
+  font-size: 0.8125rem;
+  margin: 0;
+}
+
 :where([data-domainkit-part="observation-list"]) {
   background: var(--domainkit-fill);
   border: 1px solid var(--domainkit-border);
   border-radius: var(--domainkit-control-radius);
   display: grid;
-  gap: 0.85rem;
-  max-width: 24rem;
+  gap: 0.625rem;
+  max-width: 18rem;
   padding: 0.75rem 0.85rem;
   width: 100%;
 }
 
+:where([data-domainkit-part="verification-popover"] > [data-domainkit-part="observation-list"]) {
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  max-width: none;
+  padding: 0;
+}
+
 :where([data-domainkit-part="observation-group"]) {
   display: grid;
   gap: 0.4rem;
@@ -579,7 +811,7 @@
   font-size: 0.6875rem;
   font-weight: 650;
   letter-spacing: 0.04em;
-  margin: 0;
+  margin: 0 0 0.125rem;
   text-transform: uppercase;
 }
 
@@ -601,7 +833,7 @@
   display: flex;
   gap: 0.75rem;
   justify-content: space-between;
-  min-height: 1.75rem;
+  min-height: 1.5rem;
 }
 
 :where([data-domainkit-part="observation-record"]) {
@@ -850,7 +1082,7 @@
 }
 
 :where([data-domainkit-part="operation-value"]) {
-  color: var(--domainkit-foreground);
+  color: var(--domainkit-text);
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domainkit/react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Accessible React flows for DomainKit",
   "license": "MIT",
   "repository": {
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
-    "domainkit": "^0.2.2",
+    "domainkit": "^0.4.0",
     "scheduler": "0.27.0"
   },
   "devDependencies": {