@imdz/react 0.0.0-stage → 0.2.0

package/dist/styles.css

@@ -0,0 +1,872 @@
+@font-face {
+  font-family: "imdz Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./fonts/inter-latin-400-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "imdz Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(./fonts/inter-latin-600-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "imdz JetBrains Mono";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+.imdz-accordion {
+  border-top: 1px solid var(--imdz-border, #c4c4c4);
+  font-family: var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+}
+
+.imdz-accordion-item {
+  border-bottom: 1px solid var(--imdz-border, #c4c4c4);
+}
+
+.imdz-accordion-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.875rem 0;
+  color: var(--imdz-text, #000000);
+  font: 600 0.75rem/1.3 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-transform: uppercase;
+  list-style: none;
+  cursor: pointer;
+}
+
+.imdz-accordion-summary::-webkit-details-marker {
+  display: none;
+}
+
+.imdz-accordion-summary::after {
+  content: "+";
+  color: var(--imdz-muted, #5e5e5e);
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.imdz-accordion-item[open] > .imdz-accordion-summary::after {
+  content: "\2212";
+}
+
+.imdz-accordion-summary:hover::after {
+  color: var(--imdz-text, #000000);
+}
+
+.imdz-accordion-summary:focus-visible {
+  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));
+  outline-offset: 2px;
+}
+
+.imdz-accordion-content {
+  padding-bottom: 1rem;
+  color: var(--imdz-muted, #5e5e5e);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.imdz-alert {
+  --imdz-alert-color: var(--imdz-text, #000000);
+
+  display: grid;
+  gap: 0.375rem;
+  box-sizing: border-box;
+  padding: 0.875rem 1rem;
+  border: 1px solid color-mix(in srgb, var(--imdz-alert-color) 45%, transparent);
+  border-left: 3px solid var(--imdz-alert-color);
+  border-radius: var(--imdz-radius, 0px);
+  background: color-mix(in srgb, var(--imdz-alert-color) 6%, transparent);
+  color: var(--imdz-text, #000000);
+  font: 400 0.875rem/1.5 var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+}
+
+.imdz-alert-title {
+  margin: 0;
+  color: var(--imdz-alert-color);
+  font: 600 0.75rem/1.3 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-transform: uppercase;
+}
+
+.imdz-alert-success {
+  --imdz-alert-color: var(--imdz-success, #0f7a3d);
+}
+
+.imdz-alert-warning {
+  --imdz-alert-color: var(--imdz-warning, #8f5a00);
+}
+
+.imdz-alert-danger {
+  --imdz-alert-color: var(--imdz-danger, #c4001a);
+}
+
+.imdz-avatar {
+  display: inline-grid;
+  place-items: center;
+  box-sizing: border-box;
+  width: 2.5rem;
+  height: 2.5rem;
+  overflow: hidden;
+  border: 1px solid var(--imdz-border, #c4c4c4);
+  border-radius: var(--imdz-radius, 0px);
+  background: var(--imdz-surface, #f2f2f2);
+  color: var(--imdz-text, #000000);
+  font: 600 0.75rem/1 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-transform: uppercase;
+}
+
+/* Photos are turned black and white to keep the palette. */
+.imdz-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: grayscale(1);
+}
+
+.imdz-avatar-lg {
+  width: 3.5rem;
+  height: 3.5rem;
+  font-size: 1rem;
+}
+
+.imdz-badge {
+  --imdz-badge-color: var(--imdz-muted, #5e5e5e);
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--imdz-badge-color);
+  border-radius: var(--imdz-radius, 0px);
+  color: var(--imdz-badge-color);
+  font: 600 0.6875rem/1 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.imdz-badge::before {
+  content: "";
+  width: 0.375rem;
+  height: 0.375rem;
+  background: currentColor;
+}
+
+.imdz-badge-primary {
+  --imdz-badge-color: var(--imdz-text, #000000);
+
+  background: var(--imdz-text, #000000);
+  color: var(--imdz-bg, #ffffff);
+}
+
+.imdz-badge-success {
+  --imdz-badge-color: var(--imdz-success, #0f7a3d);
+}
+
+.imdz-badge-warning {
+  --imdz-badge-color: var(--imdz-warning, #8f5a00);
+}
+
+.imdz-badge-danger {
+  --imdz-badge-color: var(--imdz-danger, #c4001a);
+}
+
+.imdz-button {
+  --imdz-button-color: var(--imdz-primary, var(--imdz-text, #000000));
+  --imdz-button-on: var(--imdz-on-primary, var(--imdz-bg, #ffffff));
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  height: 2.5rem;
+  padding: 0 1.125rem;
+  border: 1px solid var(--imdz-button-color);
+  border-radius: var(--imdz-radius, 0px);
+  background: var(--imdz-button-color);
+  color: var(--imdz-button-on);
+  font: 600 0.75rem/1 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 150ms, color 150ms, border-color 150ms,
+    box-shadow 150ms;
+}
+
+/* On hover it inverts: just the outline with a glow. */
+.imdz-button:hover:not(:disabled, [aria-disabled="true"]) {
+  background: transparent;
+  color: var(--imdz-button-color);
+  box-shadow: 0 0 18px
+    color-mix(in srgb, var(--imdz-button-color) 40%, transparent);
+}
+
+.imdz-button:focus-visible {
+  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));
+  outline-offset: 3px;
+}
+
+.imdz-button:disabled,
+.imdz-button[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.imdz-button-secondary {
+  border-color: var(--imdz-border, #c4c4c4);
+  background: transparent;
+  color: var(--imdz-text, #000000);
+}
+
+.imdz-button-secondary:hover:not(:disabled, [aria-disabled="true"]) {
+  border-color: var(--imdz-text, #000000);
+  background: var(--imdz-text, #000000);
+  color: var(--imdz-bg, #ffffff);
+  box-shadow: none;
+}
+
+.imdz-button-ghost {
+  border-color: transparent;
+  background: transparent;
+  color: var(--imdz-text, #000000);
+}
+
+.imdz-button-ghost:hover:not(:disabled, [aria-disabled="true"]) {
+  border-color: var(--imdz-border, #c4c4c4);
+  background: var(--imdz-surface, #f2f2f2);
+  color: var(--imdz-text, #000000);
+  box-shadow: none;
+}
+
+.imdz-button-danger {
+  --imdz-button-color: var(--imdz-danger, #c4001a);
+  --imdz-button-on: var(--imdz-on-danger, #ffffff);
+}
+
+.imdz-button-sm {
+  height: 2rem;
+  padding: 0 0.75rem;
+  font-size: 0.6875rem;
+}
+
+.imdz-button-lg {
+  height: 3rem;
+  padding: 0 1.5rem;
+  font-size: 0.8125rem;
+}
+
+.imdz-card {
+  position: relative;
+  display: grid;
+  gap: 0.75rem;
+  box-sizing: border-box;
+  padding: 1.25rem;
+  border: 1px solid var(--imdz-border, #c4c4c4);
+  border-radius: var(--imdz-radius, 0px);
+  background: var(--imdz-surface, #f2f2f2);
+  color: var(--imdz-text, #000000);
+  font-family: var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+}
+
+/* Corner brackets on two opposite corners. */
+.imdz-card::before,
+.imdz-card::after {
+  content: "";
+  position: absolute;
+  width: 0.625rem;
+  height: 0.625rem;
+  border: 0 solid var(--imdz-text, #000000);
+  pointer-events: none;
+}
+
+.imdz-card::before {
+  top: -1px;
+  left: -1px;
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+
+.imdz-card::after {
+  right: -1px;
+  bottom: -1px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.imdz-card-title {
+  margin: 0;
+  font: 600 0.8125rem/1.3 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-transform: uppercase;
+}
+
+.imdz-card-body {
+  color: var(--imdz-muted, #5e5e5e);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.imdz-card-body > :first-child {
+  margin-top: 0;
+}
+
+.imdz-card-body > :last-child {
+  margin-bottom: 0;
+}
+
+.imdz-card-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+.imdz-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  color: var(--imdz-text, #000000);
+  font: 400 0.875rem/1.4 var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+  cursor: pointer;
+}
+
+.imdz-checkbox-input {
+  display: grid;
+  flex: none;
+  place-content: center;
+  box-sizing: border-box;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin: 0;
+  border: 1px solid var(--imdz-border, #c4c4c4);
+  border-radius: var(--imdz-radius, 0px);
+  background: transparent;
+  appearance: none;
+  cursor: pointer;
+  transition: border-color 150ms;
+}
+
+.imdz-checkbox-input::before {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  background: var(--imdz-text, #000000);
+  transform: scale(0);
+  transition: transform 120ms;
+}
+
+.imdz-checkbox-input:hover,
+.imdz-checkbox-input:checked {
+  border-color: var(--imdz-text, #000000);
+}
+
+.imdz-checkbox-input:checked::before {
+  transform: scale(1);
+}
+
+.imdz-checkbox-input:focus-visible {
+  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));
+  outline-offset: 3px;
+}
+
+.imdz-checkbox:has(.imdz-checkbox-input:disabled) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.imdz-dialog {
+  box-sizing: border-box;
+  width: min(28rem, calc(100vw - 2rem));
+  /* Explicit: some resets (e.g. Tailwind) undo the native centering. */
+  margin: auto;
+  padding: 1.25rem;
+  border: 1px solid var(--imdz-text, #000000);
+  border-radius: var(--imdz-radius, 0px);
+  background: var(--imdz-bg, #ffffff);
+  color: var(--imdz-text, #000000);
+  font-family: var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+  box-shadow: 0 0 48px color-mix(in srgb, var(--imdz-text, #000000) 18%, transparent);
+}
+
+.imdz-dialog::backdrop {
+  background: rgb(0 0 0 / 0.7);
+  backdrop-filter: blur(4px);
+}
+
+.imdz-dialog-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.imdz-dialog-title {
+  margin: 0;
+  font: 600 0.875rem/1.4 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-transform: uppercase;
+}
+
+.imdz-dialog-close {
+  display: grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: 1px solid var(--imdz-border, #c4c4c4);
+  border-radius: var(--imdz-radius, 0px);
+  background: transparent;
+  color: var(--imdz-muted, #5e5e5e);
+  font-size: 1.125rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 150ms, color 150ms, border-color 150ms;
+}
+
+.imdz-dialog-close:hover {
+  border-color: var(--imdz-text, #000000);
+  background: var(--imdz-text, #000000);
+  color: var(--imdz-bg, #ffffff);
+}
+
+.imdz-dialog-close:focus-visible {
+  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));
+  outline-offset: 2px;
+}
+
+.imdz-dialog-body {
+  margin-top: 0.75rem;
+  color: var(--imdz-muted, #5e5e5e);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.imdz-dialog-body > :first-child {
+  margin-top: 0;
+}
+
+.imdz-dialog-body > :last-child {
+  margin-bottom: 0;
+}
+
+.imdz-dialog-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.25rem;
+}
+
+.imdz-field {
+  display: grid;
+  gap: 0.5rem;
+  font-family: var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+}
+
+.imdz-field-label {
+  color: var(--imdz-muted, #5e5e5e);
+  font: 600 0.6875rem/1 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-transform: uppercase;
+}
+
+.imdz-field-hint,
+.imdz-field-error {
+  margin: 0;
+  font-size: 0.8125rem;
+}
+
+.imdz-field-hint {
+  color: var(--imdz-muted, #5e5e5e);
+}
+
+.imdz-field-error {
+  color: var(--imdz-danger, #c4001a);
+}
+
+/* Base shared by input, textarea and select. */
+.imdz-field-input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0 0.75rem;
+  border: 1px solid var(--imdz-border, #c4c4c4);
+  border-radius: var(--imdz-radius, 0px);
+  background: transparent;
+  color: var(--imdz-text, #000000);
+  font: 400 0.875rem/1.4 var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+  transition: border-color 150ms, box-shadow 150ms;
+}
+
+.imdz-field-input::placeholder {
+  color: var(--imdz-muted, #5e5e5e);
+}
+
+.imdz-field-input:hover {
+  border-color: var(--imdz-muted, #5e5e5e);
+}
+
+.imdz-field-input:focus-visible {
+  border-color: var(--imdz-focus, var(--imdz-text, #000000));
+  outline: 1px solid var(--imdz-focus, var(--imdz-text, #000000));
+  box-shadow: 0 0 18px color-mix(in srgb, var(--imdz-focus, var(--imdz-text, #000000)) 25%, transparent);
+}
+
+.imdz-field-input[aria-invalid="true"] {
+  border-color: var(--imdz-danger, #c4001a);
+}
+
+.imdz-field-input:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.imdz-progress {
+  display: grid;
+  gap: 0.5rem;
+  font-family: var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+}
+
+.imdz-progress-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  color: var(--imdz-muted, #5e5e5e);
+  font: 600 0.6875rem/1 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-transform: uppercase;
+}
+
+.imdz-progress-track {
+  box-sizing: border-box;
+  height: 0.75rem;
+  padding: 2px;
+  border: 1px solid var(--imdz-border, #c4c4c4);
+  border-radius: var(--imdz-radius, 0px);
+}
+
+/* Segmented bar. The width comes from the --imdz-progress-value variable. */
+.imdz-progress-bar {
+  width: var(--imdz-progress-value, 0%);
+  height: 100%;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--imdz-text, #000000) 0 6px,
+    transparent 6px 8px
+  );
+  transition: width 300ms;
+}
+
+/* Used together with .input from field.css. */
+.imdz-select {
+  appearance: none;
+  padding-right: 2.25rem;
+  /* Arrow drawn with two gradients, so it inherits the text color. */
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: right 1rem center, right 0.6875rem center;
+  background-size: 0.3125rem 0.3125rem;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+.imdz-select option {
+  background: var(--imdz-bg, #ffffff);
+  color: var(--imdz-text, #000000);
+}
+
+/*
+ * Custom dropdown, no JavaScript, using CSS customizable select
+ * (appearance: base-select). Where the browser doesn't support it, you get
+ * the system's native list and the field above.
+ */
+@supports (appearance: base-select) {
+  .imdz-select,
+  .imdz-select::picker(select) {
+    appearance: base-select;
+  }
+
+  .imdz-select {
+    align-items: center;
+    padding-right: 0.75rem;
+    background-image: none;
+  }
+
+  .imdz-select::picker-icon {
+    color: var(--imdz-muted, #5e5e5e);
+    transition: rotate 150ms;
+  }
+
+  .imdz-select:open::picker-icon {
+    rotate: 180deg;
+  }
+
+  .imdz-select::picker(select) {
+    margin: 0.25rem 0;
+    padding: 0;
+    border: 1px solid var(--imdz-text, #000000);
+    border-radius: var(--imdz-radius, 0px);
+    background: var(--imdz-bg, #ffffff);
+    box-shadow: 0 0 32px color-mix(in srgb, var(--imdz-text, #000000) 18%, transparent);
+  }
+
+  .imdz-select option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.625rem 0.75rem;
+    font: 400 0.875rem/1.4 var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+    cursor: pointer;
+  }
+
+  .imdz-select option:not(:last-child) {
+    border-bottom: 1px solid var(--imdz-border, #c4c4c4);
+  }
+
+  /* The option under the pointer or focus inverts, like the buttons. */
+  .imdz-select option:hover,
+  .imdz-select option:focus-visible {
+    outline: none;
+    background: var(--imdz-text, #000000);
+    color: var(--imdz-bg, #ffffff);
+  }
+
+  .imdz-select option:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* The selected option's mark is a square on the right. */
+  .imdz-select option::checkmark {
+    content: "";
+    order: 1;
+    width: 0.375rem;
+    height: 0.375rem;
+    background: currentColor;
+  }
+}
+
+.imdz-skeleton {
+  display: block;
+  height: 1rem;
+  border-radius: var(--imdz-radius, 0px);
+  background: linear-gradient(
+    90deg,
+    var(--imdz-surface, #f2f2f2) 25%,
+    var(--imdz-border, #c4c4c4) 50%,
+    var(--imdz-surface, #f2f2f2) 75%
+  );
+  background-size: 200% 100%;
+  animation: imdz-shimmer 1.4s linear infinite;
+}
+
+@keyframes imdz-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .imdz-skeleton {
+    animation: none;
+  }
+}
+
+.imdz-spinner {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--imdz-border, #c4c4c4);
+  border-top-color: var(--imdz-text, #000000);
+  border-radius: 50%;
+  animation: imdz-spin 700ms linear infinite;
+}
+
+.imdz-spinner-lg {
+  width: 2rem;
+  height: 2rem;
+}
+
+@keyframes imdz-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .imdz-spinner {
+    animation-duration: 2.4s;
+  }
+}
+
+.imdz-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  color: var(--imdz-text, #000000);
+  font: 400 0.875rem/1.4 var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+  cursor: pointer;
+}
+
+.imdz-switch-input {
+  position: relative;
+  flex: none;
+  box-sizing: border-box;
+  width: 2.5rem;
+  height: 1.25rem;
+  margin: 0;
+  border: 1px solid var(--imdz-border, #c4c4c4);
+  border-radius: var(--imdz-radius, 0px);
+  background: transparent;
+  appearance: none;
+  cursor: pointer;
+  transition: border-color 150ms, background-color 150ms;
+}
+
+.imdz-switch-input::before {
+  content: "";
+  position: absolute;
+  top: 0.1875rem;
+  left: 0.1875rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--imdz-muted, #5e5e5e);
+  transition: transform 150ms, background-color 150ms;
+}
+
+.imdz-switch-input:hover {
+  border-color: var(--imdz-text, #000000);
+}
+
+.imdz-switch-input:checked {
+  border-color: var(--imdz-text, #000000);
+  background: var(--imdz-text, #000000);
+}
+
+.imdz-switch-input:checked::before {
+  background: var(--imdz-bg, #ffffff);
+  transform: translateX(1.25rem);
+}
+
+.imdz-switch-input:focus-visible {
+  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));
+  outline-offset: 3px;
+}
+
+.imdz-switch:has(.imdz-switch-input:disabled) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.imdz-tabs {
+  font-family: var(--imdz-font, "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+}
+
+.imdz-tabs-list {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-shadow: inset 0 -1px 0 var(--imdz-border, #c4c4c4);
+}
+
+.imdz-tabs-tab {
+  padding: 0.75rem 1rem;
+  border: 0;
+  background: transparent;
+  color: var(--imdz-muted, #5e5e5e);
+  font: 600 0.6875rem/1 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-transform: uppercase;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 150ms, color 150ms;
+}
+
+.imdz-tabs-tab:hover {
+  color: var(--imdz-text, #000000);
+}
+
+.imdz-tabs-tab:focus-visible {
+  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));
+  outline-offset: -4px;
+}
+
+/* The active tab is an inverted block. */
+.imdz-tabs-tab[aria-selected="true"] {
+  background: var(--imdz-text, #000000);
+  color: var(--imdz-bg, #ffffff);
+}
+
+.imdz-tabs-tab[aria-selected="true"]:focus-visible {
+  outline-color: var(--imdz-bg, #ffffff);
+}
+
+.imdz-tabs-panel {
+  padding-top: 1rem;
+  color: var(--imdz-text, #000000);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* Used together with .input from field.css. */
+.imdz-textarea {
+  display: block;
+  height: auto;
+  min-height: 6rem;
+  padding: 0.625rem 0.75rem;
+  resize: vertical;
+}
+
+.imdz-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+.imdz-tooltip-bubble {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  left: 50%;
+  z-index: 10;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--imdz-radius, 0px);
+  background: var(--imdz-text, #000000);
+  color: var(--imdz-bg, #ffffff);
+  font: 600 0.6875rem/1.2 var(--imdz-font-mono, "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  letter-spacing: var(--imdz-tracking, 0.08em);
+  text-transform: uppercase;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  translate: -50% 0.25rem;
+  transition: opacity 120ms, translate 120ms, visibility 120ms;
+}
+
+/* Shows on hover and also on keyboard focus. */
+.imdz-tooltip:hover .imdz-tooltip-bubble,
+.imdz-tooltip:focus-within .imdz-tooltip-bubble {
+  opacity: 1;
+  visibility: visible;
+  translate: -50% 0;
+}