@jfrader/storybook-docs 0.0.0-stage → 0.4.4

package/dist/index.css

@@ -0,0 +1,420 @@
+/* src/guidance.css */
+.guidance p,
+.guidance ul,
+.guidance ol {
+  margin: 8px 0;
+  line-height: 1.6;
+}
+.guidance li + li {
+  margin-top: 4px;
+}
+.guidance a {
+  color: var(--sd-accent-text);
+}
+.guidance pre.code {
+  margin: 12px 0;
+}
+.guidance hr {
+  margin: 22px 0;
+  border: 0;
+  border-top: 1px solid var(--sd-border);
+}
+.guidance-table {
+  overflow-x: auto;
+}
+.guidance-callout {
+  --callout-tone: var(--sd-accent);
+  margin: 12px 0;
+  padding: 14px 18px;
+  border: 0;
+  border-left: 3px solid var(--callout-tone);
+  border-radius: 0 var(--sd-radius) var(--sd-radius) 0;
+  background: var(--sd-surface);
+}
+.guidance-callout > :first-child {
+  margin-top: 0;
+}
+.guidance-callout > :last-child {
+  margin-bottom: 0;
+}
+.guidance-callout-do {
+  --callout-tone: var(--sd-success);
+  background: color-mix(in srgb, var(--sd-success) 8%, var(--sd-surface));
+}
+.guidance-callout-dont {
+  --callout-tone: var(--sd-danger-text, var(--sd-danger));
+  background: color-mix(in srgb, var(--sd-danger) 8%, var(--sd-surface));
+}
+.guidance-callout-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--callout-tone);
+}
+
+/* src/toc.css */
+[data-toc] {
+  scroll-margin-top: 76px;
+}
+[data-toc-slot] {
+  margin-left: auto;
+}
+.toc-copy {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 24px;
+  font: inherit;
+  color: var(--sd-text-muted);
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 2px 8px;
+  cursor: pointer;
+}
+.toc-copy:hover,
+.toc-copy:focus-visible {
+  color: var(--sd-text);
+  border-color: var(--sd-border);
+}
+.toc-sr,
+.toc-clipboard {
+  position: fixed;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  opacity: 0;
+}
+.toc-flash {
+  animation: toc-flash 2.4s ease-out;
+}
+@keyframes toc-flash {
+  0%, 45% {
+    box-shadow: 0 0 0 3px var(--sd-accent, currentColor);
+  }
+  100% {
+    box-shadow: 0 0 0 3px transparent;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .toc-flash {
+    animation: none;
+    outline: 2px solid var(--sd-accent, currentColor);
+  }
+}
+.toc {
+  display: none;
+}
+@media (min-width: 1180px) {
+  .app.has-toc {
+    grid-template-columns: 276px minmax(0, 1fr) 224px;
+  }
+  .toc {
+    display: block;
+    grid-column: 3;
+    grid-row: 2;
+    align-self: start;
+    transform: translateY(var(--sd-rail-follow, 0px));
+    padding: 34px 18px 40px 6px;
+    font-size: 12.5px;
+  }
+  .toc-title {
+    margin-bottom: 8px;
+    color: var(--sd-text-subtle);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .toc ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .toc ul ul {
+    margin: 2px 0 6px 10px;
+    border-left: 1px solid var(--sd-border);
+  }
+  .toc-link {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-block-size: 24px;
+    padding: 4px 8px;
+    font: inherit;
+    text-align: left;
+    color: var(--sd-text-muted);
+    background: none;
+    border: 0;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  .toc-link:hover {
+    color: var(--sd-text);
+  }
+  .toc-link[aria-current=location] {
+    color: var(--sd-text);
+    font-weight: 600;
+  }
+  .toc-story {
+    font-size: 12px;
+  }
+  .toc-sub {
+    font-size: 12.5px;
+    color: var(--sd-text-subtle);
+  }
+}
+
+/* src/controls.css */
+.sd-controls {
+  margin: 0;
+  padding: 0 20px 18px;
+  min-width: 0;
+  background: none;
+  color: var(--sd-text-muted);
+  font-size: 13px;
+}
+.sd-controls-label {
+  margin: 16px 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.sd-controls-fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px 24px;
+}
+.sd-control {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-block-size: 32px;
+}
+.sd-control input:not([type=checkbox]),
+.sd-control select,
+.sd-control textarea,
+.sd-controls-reset {
+  font: inherit;
+  color: var(--sd-text);
+  background: var(--sd-surface);
+  border: 1px solid var(--sd-text-subtle);
+  border-radius: 6px;
+  padding: 5px 8px;
+  max-width: 100%;
+  min-block-size: 32px;
+  box-sizing: border-box;
+}
+.sd-control input:not([type=checkbox]) {
+  width: 10rem;
+}
+.sd-control textarea {
+  width: 16rem;
+  min-height: 4rem;
+  resize: vertical;
+}
+.sd-control textarea[aria-invalid=true] {
+  border-color: var(--sd-danger);
+}
+.sd-control :is(input[type=checkbox], input[type=range]) {
+  accent-color: var(--sd-accent);
+}
+.sd-controls-reset {
+  margin-left: auto;
+  cursor: pointer;
+}
+.sd-controls-reset:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.sd-controls :is(input, select, textarea, button):focus-visible {
+  outline: 2px solid var(--sd-focus-ring);
+  outline-offset: 2px;
+}
+.sd-controls-note {
+  margin: 12px 16px;
+  color: var(--sd-text-muted);
+  font-size: 13px;
+}
+
+/* src/component-demo.css */
+.frame {
+  border: 1px solid var(--sd-border-subtle);
+  border-radius: var(--sd-radius);
+  background: var(--sd-bg);
+  margin: 20px 0;
+}
+.frame > .story-blurb {
+  margin: 0;
+  padding: 12px 20px 0;
+  color: var(--sd-text-muted);
+  font-size: 0.92em;
+}
+.frame > header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 20px;
+  background: var(--sd-surface);
+  border-radius: var(--sd-radius) var(--sd-radius) 0 0;
+  font-size: 13px;
+  color: var(--sd-text);
+}
+.frame .shot {
+  padding: 36px 24px;
+  display: block;
+  overflow-x: auto;
+  min-inline-size: 0;
+}
+.frame .shot[data-layout=fullscreen] {
+  padding: 0;
+}
+.frame .story-lane[data-layout=centered] {
+  display: grid;
+  place-items: center;
+  min-block-size: 96px;
+}
+.frame .story-lane[data-layout=inline] {
+  text-align: center;
+}
+.frame > details.code-toggle {
+  border-top: 1px solid var(--sd-border-subtle);
+  background: var(--sd-surface);
+  border-radius: 0 0 var(--sd-radius) var(--sd-radius);
+}
+.frame > details.code-toggle summary {
+  cursor: pointer;
+  padding: 8px 20px;
+  font-size: 12px;
+  color: var(--sd-text-muted);
+  min-block-size: 24px;
+  display: flex;
+  align-items: center;
+}
+.sd-demo-code {
+  overflow: hidden;
+  border-radius: 0 0 var(--sd-radius) var(--sd-radius);
+}
+.frame .sd-demo-code > *,
+.frame .sd-demo-code > * > *,
+.frame .sd-demo-code pre {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+}
+.sd-demo-code > p {
+  padding: 16px 20px;
+  font-size: 13px;
+  color: var(--sd-text-muted);
+}
+.sd-demo-code-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* src/search.css */
+.search-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 0;
+  background: var(--sd-surface);
+  border: 1px solid var(--sd-border);
+  border-radius: var(--sd-radius);
+  box-shadow: 0 18px 40px color-mix(in srgb, var(--sd-bg) 70%, transparent);
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.search-dropdown .search-results {
+  position: static;
+  margin: 0;
+  padding: 8px;
+  list-style: none;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  max-height: 320px;
+  overflow-y: auto;
+  z-index: auto;
+}
+.search-dropdown .search-results li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.search-results li[aria-selected=true] {
+  background: var(--sd-accent-soft);
+}
+.search-result-main {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.search-result-name {
+  font-size: 13.5px;
+  color: var(--sd-text);
+}
+.search-result-sep {
+  color: var(--sd-text-subtle);
+  font-size: 12px;
+  user-select: none;
+}
+.search-result-story {
+  font-size: 13px;
+  color: var(--sd-text-muted);
+}
+.search-dropdown .search-results li span {
+  margin-left: 0;
+}
+.search-dropdown .search-results li span.search-result-meta {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--sd-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.search mark {
+  background: var(--sd-accent-soft);
+  color: var(--sd-accent-text);
+  border-radius: 2px;
+  padding: 0 1px;
+  font-weight: 700;
+}
+.search-empty {
+  padding: 18px 14px;
+  font-size: 13px;
+  color: var(--sd-text-muted);
+  text-align: center;
+}
+.search-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 16px;
+  border-top: 1px solid var(--sd-border-subtle);
+  font-size: 11px;
+  color: var(--sd-text-muted);
+  background: var(--sd-surface-raised);
+  user-select: none;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference path="./virtual.d.ts" />
+/// <reference path="./css.d.ts" />
+export { start } from './start.js';
+export { ComponentDemo, type ComponentDemoProps } from './component-demo.js';
+export type { StorybookDocsConfig, CatalogEntry, ThemeRole } from './config.js';