1 files changed, 136 insertions, 0 deletions
diff --git a/src/components/form-examples/form-examples.module.css b/src/components/form-examples/form-examples.module.css
new file mode 100644
index 0000000..d63db91
--- /dev/null
+++ b/src/components/form-examples/form-examples.module.css
@@ -0,0 +1,136 @@
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  gap: 20px;
+  padding: 20px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  margin-bottom: 24px;
+}
+
+.form.form {
+  display: block;
+}
+
+.fields {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.section,
+.result {
+  display: grid;
+  gap: 24px;
+  min-width: 0;
+  padding: 24px;
+  margin-bottom: 24px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+}
+
+.section h2,
+.result h2 {
+  font-size: 20px;
+  margin: 0;
+}
+
+.section p,
+.result p {
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+  align-items: start;
+  gap: 28px;
+  min-width: 0;
+}
+
+.field {
+  display: grid;
+  grid-template-columns: [field] minmax(0, 1fr);
+  align-content: start;
+  min-width: 0;
+}
+
+.grid .field > * {
+  grid-column: 1 / -1;
+  min-width: 0;
+}
+
+.sideLabels .grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
+}
+
+.sideLabels .field {
+  grid-template-columns: [label] minmax(0, 10rem) [field] minmax(0, 1fr);
+  column-gap: 16px;
+}
+
+.layoutHint {
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+
+.fields:disabled {
+  opacity: 0.6;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+  font-size: 14px;
+}
+
+.calendars {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 32px;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.dropContent {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+}
+
+.output,
+.result pre {
+  margin: 0;
+  padding: 16px;
+  border-radius: 8px;
+  background: var(--social-bg);
+  font-family: monospace;
+  font-size: 13px;
+  overflow: auto;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  .section,
+  .result {
+    padding: 16px;
+  }
+}