diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index e3e0bbac01..f3af6eb1f7 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -2,9 +2,9 @@ name: CI on: push: - branches: [develop, beta] + branches: [develop, beta, main] pull_request: - branches: [develop, beta] + branches: [develop, beta, main] jobs: build-and-test: diff --git a/package-lock.json b/package-lock.json index d0f5a1a491..f0723f4d6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18086,7 +18086,9 @@ "@docsearch/js": "^4.3.2", "@hbsnow/rehype-sectionize": "^1.0.7", "@stackoverflow/stacks": "*", + "@stackoverflow/stacks-editor": "*", "@stackoverflow/stacks-icons": "*", + "@stackoverflow/stacks-icons-legacy": "*", "@stackoverflow/stacks-svelte": "*", "@stefanprobst/rehype-extract-toc": "^3.0.0", "better-auth": "^1.4.7", diff --git a/packages/stacks-classic/lib/esm-no-css.ts b/packages/stacks-classic/lib/esm-no-css.ts new file mode 100644 index 0000000000..72e8402536 --- /dev/null +++ b/packages/stacks-classic/lib/esm-no-css.ts @@ -0,0 +1,26 @@ +// ESM entry for bundlers that need named exports (e.g. Vite/Rollup). +// Mirrors lib/index.ts but omits the CSS side-effect import; +// consumers should import the stylesheet separately. +import { + BannerController, + ModalController, + PopoverController, + TableController, + TabListController, + ToastController, + TooltipController, +} from "./controllers"; +import { application, StacksApplication } from "./stacks"; + +application.register("s-banner", BannerController); +application.register("s-modal", ModalController); +application.register("s-toast", ToastController); +application.register("s-navigation-tablist", TabListController); +application.register("s-popover", PopoverController); +application.register("s-table", TableController); +application.register("s-tooltip", TooltipController); + +StacksApplication.finalize(); + +export * from "./controllers"; +export * from "./stacks"; diff --git a/packages/stacks-docs-next/.gitignore b/packages/stacks-docs-next/.gitignore index 785f956d1d..7df20a667c 100644 --- a/packages/stacks-docs-next/.gitignore +++ b/packages/stacks-docs-next/.gitignore @@ -22,5 +22,4 @@ Thumbs.db vite.config.js.timestamp-* vite.config.ts.timestamp-* -/static/docs -/static/legacy \ No newline at end of file +/static/docs \ No newline at end of file diff --git a/packages/stacks-docs-next/CLAUDE.md b/packages/stacks-docs-next/CLAUDE.md new file mode 100644 index 0000000000..648547345b --- /dev/null +++ b/packages/stacks-docs-next/CLAUDE.md @@ -0,0 +1,196 @@ +# stacks-docs-next — Claude Instructions + +This is the SvelteKit documentation site for the Stacks v3 design system. Pages are written in mdsvex (`.md` files with Svelte support). + +## Page anatomy + +### Frontmatter + +```yaml +--- +title: "Page Title" +description: "…" # shown in the page header and meta +figma: "https://…" # optional — links to Figma file +svelte: "https://…" # optional — links to stacks-svelte component +js: true # only if the page has a JavaScript section +updated: 2026-01-15 # ISO date of last meaningful content update +--- +``` + +### Script block + +```svelte + +``` + +### Content + +Use standard markdown for prose. Svelte components can be used anywhere in the body. Fenced code blocks use explicit language tags (` ```html `, ` ```js `, etc.). + +## Adding a new page + +1. Create `src/docs/public/
/.md` +2. Add an entry to `src/structure.yaml` under the correct section in **alphabetical order** — no `legacy:` key needed for new pages: + +```yaml +- title: "Page Title" + slug: "page-name" +``` + +## Available doc components + +| Component | Location | Purpose | +|---|---|---| +| `ClassTable` | `$components/ClassTable.svelte` | CSS class / JS attribute reference tables | +| `Example` | `$components/Example.svelte` | Bordered container for static example content | +| `Grid` | `$components/Grid.svelte` | Equal-width responsive column grid for Do/Don't blocks | +| `GridColumn` | `$components/GridColumn.svelte` | Column within a `Grid`; accepts `extraClasses`, `padding` prop | +| `PreviewTable` | `$components/PreviewTable.svelte` | Table of component previews: Example \| Class \| Description | +| `BannerPreview` | `$components/BannerPreview.svelte` | Static pre-built banner instance for illustration | +| `BannerDemo` | `$components/BannerDemo.svelte` | Interactive banner playground with user controls | +| `StacksEditorDemo` | `$components/StacksEditorDemo.svelte` | Interactive Stacks editor playground | +| `TableSortDemo` | `$components/TableSortDemo.svelte` | Interactive sortable table playground | + +**Naming convention:** `Example` = generic wrapper; `*Preview` = static pre-built component instance; `*Demo` = interactive playground with user controls. + +### ClassTable + +Use `ClassTable` for every reference table — never raw markdown tables. + +```svelte + + + + + +``` + +**ClassTableRow fields:** `class`, `parent`, `modifies`, `output`, `description`, `define`, `responsive`. +- Only populate relevant fields — `ClassTable` auto-hides columns with no data. +- Use `'N/A'` (string) for explicitly empty `parent`/`modifies` — renders as muted text. +- The `headings` prop renames any column: `headings={{ class: 'Selector', description: 'Notes' }}`. + +### Example + +All component examples must be wrapped in ``. Multiple labelled variants in one block: + +```svelte + +
+
+ Label + +
+
+
+``` + +Sub-example labels always use `class="ff-mono mb8"`. + +### Grid / GridColumn + +`Grid` renders an equal-width responsive CSS grid (stacks to a single column below 780px). Use it for Do/Don't comparisons and side-by-side content blocks. + +```svelte + + + + + + + + +``` + +`GridColumn` props: +- `extraClasses` — appended to the column div (default: `bg-black-200`) +- `padding` — adds `p24` when `true` (default: `true`); set `false` if you're applying `py*` in `extraClasses` to avoid conflict +- `...rest` — any extra attributes (e.g. `style="background: var(--brand-color-orange)"`) are spread onto the outer div + +For the `column-strike` diagonal overlay on "Instead of this" blocks, add it to `extraClasses`: + +```svelte + +``` + +### Svelte components vs raw HTML + +- **Always prefer** Svelte components from `@stackoverflow/stacks-svelte` when one exists. +- **Fall back to raw HTML** only when the component's prop API can't express what the example needs. +- Check `packages/stacks-svelte/src/components/index.ts` for available components. +- Check story files (`*.stories.svelte`) for usage patterns. + +For popover/menu examples, wrap content in `s-popover is-visible ps-relative` (`ws2 p8` or `ws3 p8`). + +## Rehype plugins (automatic — no action needed) + +The `svelte.config.js` rehype pipeline automatically: +- Adds `docs-heading docs-h2/h3/h4` to markdown headings +- Adds `docs-copy` to `p` and `ol` elements **in markdown prose only** +- Adds `docs-section` to `
` elements (via rehype-sectionize) +- Adds `docs-link` to `` elements +- Adds syntax highlighting via `s-code-block` to fenced code blocks +- Extracts the TOC from headings and exposes it as `metadata.toc` + +## Key conventions and gotchas + +### docs-copy not applied inside Svelte component slots + +Rehype only processes markdown-level elements. Any `

`, `

    `, or `
      ` written as raw HTML inside a Svelte component slot (e.g. inside ``, ``) **will not** receive `docs-copy` automatically — add the class manually: + +```svelte + +

      This text needs the class added explicitly.

      +
        +
      • Same for lists
      • +
      +
      +``` + +### Notice component — always wrap content in `

      ` + +The `Notice` component uses flexbox internally. Bare text and inline elements become flex items and break the layout: + +```svelte + + +

      Text with inline code and links.

      + + + + + Text with inline code and links. + +``` + +### Global h1 size + +The global `h1` rule sets `font-size: var(--fs-display3)` (4.5rem / 72px) — designed for page hero titles. If you use `

      ` inside a content block (e.g. a `GridColumn`), add a scoped ` +``` + +### Brand background colors + +Not all `bg-brand-*` utility classes exist. If a class is missing (e.g. `bg-brand-orange`), use an inline `style` with the CSS variable instead: + +```svelte + +``` + +Available brand color CSS variables are defined in `src/app.css` under `:root`. diff --git a/packages/stacks-docs-next/package.json b/packages/stacks-docs-next/package.json index 15cedb2235..4a95d63662 100644 --- a/packages/stacks-docs-next/package.json +++ b/packages/stacks-docs-next/package.json @@ -4,8 +4,7 @@ "type": "module", "scripts": { "dev": "vite dev", - "predev": "node scripts/copy-legacy.mjs", - "prebuild": "npm run build -w @stackoverflow/stacks && npm run build -w @stackoverflow/stacks-svelte && npm run build -w @stackoverflow/stacks-docs && node scripts/copy-legacy.mjs", + "prebuild": "npm run build -w @stackoverflow/stacks && npm run build -w @stackoverflow/stacks-svelte", "build": "bash netlify-setup.sh && npm run init-private-content && vite build", "preview": "vite preview", "prepare": "svelte-kit sync || echo ''", @@ -28,7 +27,9 @@ "@docsearch/js": "^4.3.2", "@hbsnow/rehype-sectionize": "^1.0.7", "@stackoverflow/stacks": "*", + "@stackoverflow/stacks-editor": "*", "@stackoverflow/stacks-icons": "*", + "@stackoverflow/stacks-icons-legacy": "*", "@stackoverflow/stacks-svelte": "*", "@stefanprobst/rehype-extract-toc": "^3.0.0", "better-auth": "^1.4.7", diff --git a/packages/stacks-docs-next/scripts/copy-legacy.mjs b/packages/stacks-docs-next/scripts/copy-legacy.mjs deleted file mode 100644 index 1e507c227b..0000000000 --- a/packages/stacks-docs-next/scripts/copy-legacy.mjs +++ /dev/null @@ -1,40 +0,0 @@ -// Handles legacy Eleventy site content - -import fs from "fs"; -import path from "path"; - -const site = "../stacks-docs/_site"; - -if (!fs.existsSync(site)) { - console.warn("stacks-docs/_site not found, skipping legacy copy"); - process.exit(0); -} - -fs.mkdirSync("static/legacy", { recursive: true }); - -// Copy compiled assets -fs.cpSync(`${site}/assets`, "static/legacy/assets", { recursive: true }); - -// Copy fragment HTML files only, preserving directory structure -fs.cpSync(site, "static/legacy/fragments", { - recursive: true, - filter: (src) => { - const stat = fs.statSync(src); - if (stat.isDirectory()) return true; - return path.basename(src) === "fragment.html"; - }, -}); - -// Copy legacy JS bundle -const docsJs = "../stacks-docs/assets/dist/docs.js"; -if (fs.existsSync(docsJs)) { - fs.copyFileSync(docsJs, "static/legacy/docs.js"); -} - -// Copy legacy llms.txt -const llms = "../stacks-docs/_site/llms.txt"; -if (fs.existsSync(llms)) { - fs.copyFileSync(llms, "static/legacy/llms.txt"); -} - -console.log("Legacy assets copied successfully"); diff --git a/packages/stacks-docs-next/src/app.css b/packages/stacks-docs-next/src/app.css index 136ed17898..d945a28e70 100644 --- a/packages/stacks-docs-next/src/app.css +++ b/packages/stacks-docs-next/src/app.css @@ -1,5 +1,7 @@ @import "@stackoverflow/stacks/dist/css/stacks.css"; +/* Brand color tokens — used by brand docs components. + The utility classes (.bg-brand-*, .fc-brand-*) are already provided by Stacks CSS. */ :root { --brand-color-orange: #ff5e00; --brand-color-orange-medium: #6e1527; @@ -31,83 +33,61 @@ --brand-color-gray-200: #dee0e3; } -/* Add to Stacks classic eventually */ - -.bg-brand-orange { - background: var(--brand-color-orange); -} -.fc-brand-orange { - color: var(--brand-color-orange) !important; -} -.bg-brand-orange-medium { - background: var(--brand-color-orange-medium); -} -.bg-brand-orange-dark { - background: var(--brand-color-orange-dark); -} - -.bg-brand-white { - background: var(--brand-color-white); -} -.bg-brand-black { - background: var(--brand-color-black); -} -.bg-brand-off-white { - background: var(--brand-color-off-white); -} - -.bg-brand-beige { - background: var(--brand-color-beige); -} - -.bg-brand-blue { - background: var(--brand-color-blue); -} -.bg-brand-blue-light { - background: var(--brand-color-blue-light); -} -.bg-brand-blue-dark { - background: var(--brand-color-blue-dark); -} - -.bg-brand-purple { - background: var(--brand-color-purple); -} -.bg-brand-purple-dark { - background: var(--brand-color-purple-dark); -} - -.bg-brand-pink { - background: var(--brand-color-pink); -} -.bg-brand-pink-dark { - background: var(--brand-color-pink-dark); -} - -.bg-brand-green { - background: var(--brand-color-green); -} -.bg-brand-green-dark { - background: var(--brand-color-green-dark); -} - -.bg-brand-yellow { - background: var(--brand-color-yellow); -} -.bg-brand-yellow-dark { - background: var(--brand-color-yellow-dark); -} - -.bg-brand-gray { - background: var(--brand-color-gray); -} -.bg-brand-gray-200 { - background: var(--brand-color-gray-200); +/* Custom theme color palette — activates when body has theme-custom + themed classes. + Primary: teal (h:170 s:37% l:48%), Secondary: purple (h:260 s:29% l:55%). + Matches the custom theme defined in stacks-docs. */ +body.theme-custom.themed { + --theme-base-primary-color-h: 170; + --theme-base-primary-color-s: 37%; + --theme-base-primary-color-l: 48%; + --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * .9))); + --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * .75))); + --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * .5))); + --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l)); + --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -.3))); + --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -.6))); + --theme-primary-custom: var(--theme-primary-custom-400); + --theme-base-secondary-color-h: 260; + --theme-base-secondary-color-s: 29%; + --theme-base-secondary-color-l: 55%; + --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * .9))); + --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * .75))); + --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * .5))); + --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l)); + --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -.3))); + --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -.6))); + --theme-secondary-custom: var(--theme-secondary-custom-400); + --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15); + --theme-secondary-custom-translucent: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15); + /* Dark mode variants */ + --theme-dark-primary-color-h: 170; + --theme-dark-primary-color-s: 50%; + --theme-dark-primary-color-l: 60%; + --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.7))); + --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.5))); + --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.2))); + --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l)); + --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * .5))); + --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * .8))); + --theme-dark-primary-custom: var(--theme-dark-primary-custom-400); + --theme-dark-secondary-color-h: 260; + --theme-dark-secondary-color-s: 70%; + --theme-dark-secondary-color-l: 70%; + --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -.6)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.7))); + --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -.4)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.5))); + --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -.3)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.2))); + --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l)); + --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * .5))); + --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * .8))); + --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400); + --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25); + --theme-dark-secondary-custom-translucent: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25); } /* Override Stacks defaults */ html, body { + --fw-bold: 700; --ff-sans: "Stack Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif; @@ -131,10 +111,6 @@ body { src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); } -.ff-stack-sans { - font-family: "Stack Sans Text"; - font-weight: 400; -} .ff-stack-sans-headline, .ff-stack-sans-headline-notch { font-family: "Stack Sans Headline"; @@ -143,24 +119,9 @@ body { font-feature-settings: "ss01" 1 !important; } -.fw-extralight { - font-weight: 200; -} -.fw-light { - font-weight: 300; -} -.fw-regular { - font-weight: 400; -} -.fw-medium { - font-weight: 500; -} -.fw-semibold { - font-weight: 600; -} -.fw-bold, -.s-prose strong { - font-weight: 700; +.docs-copy strong { + color: var(--black-600); + font-weight: var(--fw-bold); } body { @@ -179,7 +140,7 @@ h5 { font-weight: 400; } h1 { - font-size: 72px; + font-size: var(--fs-display3); line-height: 106%; font-weight: 500; margin-top: 0; @@ -187,94 +148,142 @@ h1 { h1 { font-feature-settings: "ss01" 1; } -main { - min-height: calc(100vh - 24px); -} -main, -footer { - margin-left: 20%; +/* Three-column page layout — nav | content | toc */ +.layout-root { + min-height: 100vh; } -@media (max-width: 48.75rem) { - main, - footer { - margin-left: 0%; - } +.layout-hero { + aspect-ratio: 1030 / 540; } -/* Document styles */ - -.doc h1 a, -.doc h2 a, -.doc h3 a, -.doc h4 a, -.doc h5 a { +/* Prose paragraph styling — applied to all p elements by the addDocClasses rehype plugin */ +.docs-copy { + color: var(--black-500); + font-size: var(--fs-body2); + line-height: var(--lh-lg); + margin-bottom: var(--su16); + margin-top: 0; +} +.docs-copy a:not([class]), +.docs-copy .s-link { + text-decoration: underline; +} +.docs-copy .docs-link { color: inherit; +} +.docs-copy code { + background-color: var(--black-200); + color: var(--black-600); + font-family: var(--ff-mono); + font-size: var(--fs-fine); + padding: var(--su2) var(--su4); +} +/* Document styles — individual classes applied by the addDocClasses rehype plugin */ + +/* Links and SVGs inside headings */ +.docs-heading .docs-link, +.docs-heading .docs-heading-anchor { + color: inherit !important; text-decoration: none; } -.doc h1 svg, -.doc h2 svg, -.doc h3 svg, -.doc h4 svg, -.doc h5 svg { +.docs-heading svg { vertical-align: middle; - margin-right: 4px; + margin-right: var(--su4); +} + +/* Heading flex layout (heading text + anchor icon side-by-side) */ +.docs-heading { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--su8); + font-weight: var(--fw-bold); } -.doc img, -.doc iframe { + +/* Heading anchor icon appended by rehype-autolink-headings */ +.docs-heading-anchor { + flex-shrink: 0; + color: var(--black-300); + line-height: 1; + margin-bottom: var(--su2); +} +.docs-heading-anchor:hover { + color: var(--black-600); +} + +/* Heading-specific overrides */ +.docs-h2 { + font-size: var(--fs-headline1); + margin-bottom: var(--su16); +} +.docs-h3 { + color: var(--black-500); + margin-top: var(--su48); +} +.docs-h2 + .docs-section > .docs-h3 { + margin-top: var(--su24); +} +.docs-h4 { + color: var(--black-400); + margin-bottom: var(--su12); + margin-top: var(--su16); +} + +/* Images and iframes */ +.docs-img, +.docs-iframe { width: 100%; height: auto; display: block; } -.doc iframe { +.docs-iframe { aspect-ratio: 16 / 9.675; } -.doc .doc__grid { - margin: 12px 0; + +/* Grid layout helper */ +.docs-grid { + margin: var(--su12) 0; } -.doc .doc__grid:not(.doc__grid + .doc__grid):not(:has(+ .doc__grid)) { - margin: 32px 0; +.docs-grid:not(.docs-grid + .docs-grid):not(:has(+ .docs-grid)) { + margin: var(--su32) 0; } -.doc section { + +/* Sections generated by rehype-sectionize */ +.docs-section { border-top: 1px solid var(--black-150); position: relative; - padding: 20px 0; - margin: 20px 0; -} -.doc h1 a, -.doc h2 a, -.doc h3 a, -.doc h4 a { - color: inherit !important; + padding: calc(var(--su24) + var(--sun4)) 0; + margin: calc(var(--su24) + var(--sun4)) 0; } -.doc section[data-heading-rank] { - margin-top: 32px; +.docs-section[data-heading-rank] { + margin-top: var(--su24); } -.doc section[data-heading-rank="2"] > p { +.docs-section[data-heading-rank="2"] > .docs-p { color: var(--fc-medium); } -.doc section > section { +.docs-section > .docs-section { border-top: 0; padding: 0; margin: 0; } -.doc p:not(:has(img)), -.doc li { - max-width: 800px; + +/* Prose elements */ +.docs-ul, +.docs-copy ol { + margin-bottom: 1.1em; + margin-top: 0; +} +.docs-li { + max-width: var(--su848); } -.doc ul li { +.docs-ul > .docs-li { list-style-type: square; } -.doc nav ul li { +.docs-nav .docs-li { list-style: none; } -.doc h2 { - font-size: var(--_pr-h1-fs); -} -.doc h4 { - color: var(--black-400); -} -.doc a { +.docs-link { font-weight: 500; } @@ -305,7 +314,7 @@ footer { border: var(--su1) solid var(--black-200); border-radius: var(--su2); font-family: var(--ff-mono); - font-size: 0.875em; + font-size: var(--fs-fine); overflow-wrap: break-word; margin: var(--sun1); padding: 0.125em 0.1875em 0.0625em; @@ -340,6 +349,70 @@ footer { border-color: var(--black-300); } +/* Docs card — used in example containers to simulate a card-like context */ +.docs-card { + border: var(--su1) solid var(--black-225); + border-radius: var(--su4); + padding: var(--su16); +} + +/* Notices in doc content get breathing room below */ +.docs .s-notice { + margin-bottom: var(--su16); +} + +/* Paragraphs inside doc notices inherit docs-copy typography */ +.docs .s-notice p { + color: inherit; + font-size: var(--fs-body1); + line-height: var(--lh-lg); + margin-bottom: 0; + margin-top: 0; +} +.docs .s-notice p strong { + font-weight: var(--fw-bold); +} + +/* s-prose inside example containers — reset docs-specific font overrides so + the prose renders with standard product fonts, not the docs custom typefaces. + Covers both containers and the prose page's custom expandable wrapper. */ +.example-container .s-prose, +.docs-prose-example .s-prose { + --ff-sans: -apple-system, BlinkMacSystemFont, + "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif; + --ff-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", + "Liberation Mono", Menlo, Monaco, Consolas, monospace; + font-family: var(--ff-sans); + font-weight: initial; +} + +/* The global h1–h5 rule applies "Stack Sans Headline" with higher specificity + than the container reset above, so headings need an explicit override. */ +.example-container h1, +.example-container h2, +.example-container h3, +.example-container h4, +.example-container h5, +.example-container h6, +.example-container .s-prose h1, +.example-container .s-prose h2, +.example-container .s-prose h3, +.example-container .s-prose h4, +.example-container .s-prose h5, +.example-container .s-prose h6, +.docs-prose-example .s-prose h1, +.docs-prose-example .s-prose h2, +.docs-prose-example .s-prose h3, +.docs-prose-example .s-prose h4, +.docs-prose-example .s-prose h5, +.docs-prose-example .s-prose h6 { + font-family: var(--ff-sans); +} + +.hmn6 .s-editor-resizable { + min-height: var(--su640) !important; +} + /* Agolia Docsearch */ .DocSearch-Container { diff --git a/packages/stacks-docs-next/src/components/BannerDemo.svelte b/packages/stacks-docs-next/src/components/BannerDemo.svelte new file mode 100644 index 0000000000..7b48c20dee --- /dev/null +++ b/packages/stacks-docs-next/src/components/BannerDemo.svelte @@ -0,0 +1,56 @@ + + +{#if visible} + +{/if} + +
      + + +
      diff --git a/packages/stacks-docs-next/src/components/BannerPreview.svelte b/packages/stacks-docs-next/src/components/BannerPreview.svelte new file mode 100644 index 0000000000..568c03573f --- /dev/null +++ b/packages/stacks-docs-next/src/components/BannerPreview.svelte @@ -0,0 +1,29 @@ + + + diff --git a/packages/stacks-docs-next/src/components/ClassTable.svelte b/packages/stacks-docs-next/src/components/ClassTable.svelte new file mode 100644 index 0000000000..c6a6381676 --- /dev/null +++ b/packages/stacks-docs-next/src/components/ClassTable.svelte @@ -0,0 +1,156 @@ + + + +
      + + {#if showHeadings} + + + + {#each activeCols as col (col)} + + {/each} + + + {/if} + + {#each classes as row (row.class)} + + + {#each activeCols as col (col)} + + {/each} + + {/each} + +
      {label('class')}{label(col)}
      {row.class} + {#if booleanIconCols.includes(col)} + {#if (row as Record)[col]} + + {/if} + {:else} + {@const val = String((row as Record)[col] ?? '')} + {#if val === 'N/A'} + N/A + {:else if val.startsWith('.')} + {val} + {:else} + {val} + {/if} + {/if} +
      +
      + + + +{#if expandable && !expanded} + +{:else} +
      +{/if} diff --git a/packages/stacks-docs-next/src/components/Contents.svelte b/packages/stacks-docs-next/src/components/Contents.svelte index 3097fed471..355a943384 100644 --- a/packages/stacks-docs-next/src/components/Contents.svelte +++ b/packages/stacks-docs-next/src/components/Contents.svelte @@ -1,7 +1,5 @@ -

- {/if} +{/if} diff --git a/packages/stacks-docs-next/src/components/Grid.svelte b/packages/stacks-docs-next/src/components/Grid.svelte index 528c2b58b1..59e969ce8b 100644 --- a/packages/stacks-docs-next/src/components/Grid.svelte +++ b/packages/stacks-docs-next/src/components/Grid.svelte @@ -1,12 +1,20 @@ -
+
{@render children()}
+ + diff --git a/packages/stacks-docs-next/src/components/GridColumn.svelte b/packages/stacks-docs-next/src/components/GridColumn.svelte index f0c5e98118..349c3f0ef1 100644 --- a/packages/stacks-docs-next/src/components/GridColumn.svelte +++ b/packages/stacks-docs-next/src/components/GridColumn.svelte @@ -1,12 +1,8 @@ -
+
{@render children()}
diff --git a/packages/stacks-docs-next/src/components/Navigation.svelte b/packages/stacks-docs-next/src/components/Navigation.svelte index 4838d2d8f4..84f1c8cc94 100644 --- a/packages/stacks-docs-next/src/components/Navigation.svelte +++ b/packages/stacks-docs-next/src/components/Navigation.svelte @@ -124,7 +124,7 @@ border-radius: 6px !important; } .s-navigation--item:hover { - background: var(--orange-400) !important; + background: var(--theme-primary) !important; color: var(--white) !important; } .s-navigation--item.is-selected, diff --git a/packages/stacks-docs-next/src/components/PreviewTable.svelte b/packages/stacks-docs-next/src/components/PreviewTable.svelte new file mode 100644 index 0000000000..7fdba57a77 --- /dev/null +++ b/packages/stacks-docs-next/src/components/PreviewTable.svelte @@ -0,0 +1,61 @@ + + +
+ + + + + {#if showClasses} + + {/if} + + + + + {#each rows as row, i (i)} + + + {#if showClasses} + + {/if} + + + {/each} + +
Example{columnLabel}Description
+ {@render example(row)} + +
+ {#each row.classes as cls (cls)} + {#if cls === 'N/A'} + N/A + {:else} + {cls} + {/if} + {/each} +
+
{row.description}
+
diff --git a/packages/stacks-docs-next/src/components/ProseContent.svelte b/packages/stacks-docs-next/src/components/ProseContent.svelte new file mode 100644 index 0000000000..b886bbf88e --- /dev/null +++ b/packages/stacks-docs-next/src/components/ProseContent.svelte @@ -0,0 +1,75 @@ +

Stacks adds a new s-prose class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:

+
<article class="s-prose">
+  <h1>Garlic bread with cheese: What the science tells us</h1>
+  <p>For years parents have espoused the health benefits of eating garlic bread…</p>
+</article>
+ +

What to expect from here on out

+

What follows from here is just a bunch of absolute nonsense we've written to dogfood the component itself. It includes every sensible typographic element we could think of, like bold text, unordered lists, ordered lists, code blocks, block quotes, and even italics.

+

It's important to cover all of these use cases for a few reasons:

+
    +
  1. We want everything to look good out of the box.
  2. +
  3. Really just the first reason, that's the whole point of the plugin.
  4. +
  5. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.
  6. +
+ +

Typography should be easy

+

So that's a header for you — with any luck if we've done our job correctly that will look pretty reasonable.

+

Something a wise person once told me about typography is:

+

Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.

+

It's probably important that images look okay here by default as well:

+two people performing a transaction at a counter on either side of a point of sale system in a trendy salon +

Now I'm going to show you an example of an unordered list to make sure that looks good, too:

+
    +
  • So here is the first item in this list.
  • +
  • In this example we're keeping the items short.
  • +
  • Later, we'll use longer, more complex list items.
  • +
+ +

What if we stack headings?

+

We should make sure that looks good, too.

+

Sometimes you have headings directly underneath each other. In those cases you often have to undo the top margin on the second heading because it usually looks better for the headings to be closer together than a paragraph followed by a heading should be.

+

When a heading comes after a paragraph…

+

When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see what a more complex list would look like.

+
    +
  • +

    I often do this thing where list items have headings.

    +

    For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the styles right.

    +
  • +
  • +

    Since this is a list, I need at least two items.

    +

    I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only had one item.

    +
  • +
+ +

Code should look okay by default.

+

Here's what a default tailwind.config.js file looks like at the time of writing:

+
module.exports = {
+  purge: [],
+  theme: { extend: {} },
+  variants: {},
+  plugins: [],
+}
+

Hopefully that looks good enough to you.

+ +

There are other elements we need to style

+

I almost forgot to mention links, like Stack Overflow.

+

We even included table styles, check it out:

+
+ + + + + + + + + +
WrestlerOriginFinisher
Bret "The Hitman" HartCalgary, ABSharpshooter
Stone Cold Steve AustinAustin, TXStone Cold Stunner
Randy SavageSarasota, FLElbow Drop
+
+

We also need to make sure inline code looks good, like if I wanted to talk about <span> elements or tell you the good news about @tailwindcss/typography.

+

Sometimes I even use code in headings

+

Even though it's probably a bad idea, and historically I've had a hard time making it look good. This "wrap the code blocks in backticks" approach is the best we've come up with.

+

We haven't used an hr yet

+
+

We just used one. What do you think? Pretty nice, right?

diff --git a/packages/stacks-docs-next/src/components/ProseContentSandbox.svelte b/packages/stacks-docs-next/src/components/ProseContentSandbox.svelte new file mode 100644 index 0000000000..8fb26e3ff2 --- /dev/null +++ b/packages/stacks-docs-next/src/components/ProseContentSandbox.svelte @@ -0,0 +1,81 @@ +

The Comprehensive Formatting Test

+ +

Code Formatting

+
    +
  • Inline code formatting: System.out.println("Hello World!");
  • +
  • Block code formatting:
  • +
+
System.out.println("Hello World!");
+System.out.println("Code Block!");
+
<div class="s-progress s-progress__stepped">
+    <div class="s-progress--step is-complete">
+        <a href="…" class="s-progress--stop">…</a>
+        <div class="s-progress--bar"></div>
+    </div>
+</div>
+ +

Headers

+

H1 Header

+

H2 Header

+

H3 Header

+

H4 Header

+
H5 Header
+
H6 Header
+ +

Emphasis

+

This is italic and this is bold. Bold and italic.

+ +

Lists

+

Unordered

+
    +
  • Item one
  • +
  • Item two +
      +
    • Nested item A
    • +
    • Nested item B
    • +
    +
  • +
  • Item three
  • +
+

Ordered

+
    +
  1. First item
  2. +
  3. Second item +
      +
    1. Nested first
    2. +
    3. Nested second
    4. +
    +
  4. +
  5. Third item
  6. +
+ +

Blockquotes

+
+

This is a blockquote. It can span multiple lines and should be styled appropriately.

+

It can also have multiple paragraphs.

+
+ +

Links

+

Here's a link to Stack Overflow.

+ +

Images

+Placeholder + +

Tables

+
+ + + + + + +
Column 1Column 2Column 3
Row 1, Col 1Row 1, Col 2Row 1, Col 3
Row 2, Col 1Row 2, Col 2Row 2, Col 3
+
+ +

Horizontal Rules

+
+

Content after a horizontal rule.

+ +

Inline elements

+

This paragraph contains bold, italic, inline code, and a link.

+

It can also include superscript and subscript text.

diff --git a/packages/stacks-docs-next/src/components/StacksEditorDemo.svelte b/packages/stacks-docs-next/src/components/StacksEditorDemo.svelte new file mode 100644 index 0000000000..7ae818ebaa --- /dev/null +++ b/packages/stacks-docs-next/src/components/StacksEditorDemo.svelte @@ -0,0 +1,27 @@ + + +
diff --git a/packages/stacks-docs-next/src/components/TableSortDemo.svelte b/packages/stacks-docs-next/src/components/TableSortDemo.svelte new file mode 100644 index 0000000000..bf13c7d775 --- /dev/null +++ b/packages/stacks-docs-next/src/components/TableSortDemo.svelte @@ -0,0 +1,67 @@ + + +
+ + + + {#each headers as h, c (c)} + + {/each} + + + + {#each sorted as r (r.season)} + + + + + + {/each} + + + + + +
+ +
{r.season}{r.month}{r.temp}
Average temperature13
+
diff --git a/packages/stacks-docs-next/src/docs/private b/packages/stacks-docs-next/src/docs/private index 71343d3bf6..2361368c91 160000 --- a/packages/stacks-docs-next/src/docs/private +++ b/packages/stacks-docs-next/src/docs/private @@ -1 +1 @@ -Subproject commit 71343d3bf6d083067a72bc72a2d9eb86b6b6ee69 +Subproject commit 2361368c91fa01d9b2e1cdd4ceede6014b0a8dad diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/ColorCodes.svelte b/packages/stacks-docs-next/src/docs/public/brand/color/ColorCodes.svelte index 391961990c..ac8f86740a 100644 --- a/packages/stacks-docs-next/src/docs/public/brand/color/ColorCodes.svelte +++ b/packages/stacks-docs-next/src/docs/public/brand/color/ColorCodes.svelte @@ -8,7 +8,7 @@ const { business = false } = $props() -
+
{#each colors as color (color.cssVar)} .colors { display: grid; - grid-template-columns: repeat(6, 1fr); + grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; grid-auto-rows: 120px; } diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/ColorHeadlines.svelte b/packages/stacks-docs-next/src/docs/public/brand/color/ColorHeadlines.svelte index 19fbb2d178..ca0a8f436e 100644 --- a/packages/stacks-docs-next/src/docs/public/brand/color/ColorHeadlines.svelte +++ b/packages/stacks-docs-next/src/docs/public/brand/color/ColorHeadlines.svelte @@ -60,7 +60,7 @@ - + {#each themes as theme, index (theme.name)} selected = index} diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte index a3b4b4e1b6..62bc6d85e6 100644 --- a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte +++ b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte @@ -162,7 +162,7 @@
{#key selectedWeight.file} - + {#each fontWeights as weight (weight.file)} - + {#if loading}
Loading font...
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyNotch.svelte b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyNotch.svelte index 0d730ff991..2c8899aadf 100644 --- a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyNotch.svelte +++ b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyNotch.svelte @@ -12,7 +12,7 @@
Text Normal
Text Normal
- + diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte index 638b2d42b9..cda723d10f 100644 --- a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte +++ b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte @@ -13,7 +13,7 @@ let notch = $state(true); - + {#each weights as weight (weight)} +
@@ -49,6 +50,7 @@ Our primary typeface is called **Stack Sans**. Crafted uniquely for Stack Overfl +
## Glyph set diff --git a/packages/stacks-docs-next/src/docs/public/copy/naming.md b/packages/stacks-docs-next/src/docs/public/copy/naming.md index ffe5ac8f81..9873c287ae 100644 --- a/packages/stacks-docs-next/src/docs/public/copy/naming.md +++ b/packages/stacks-docs-next/src/docs/public/copy/naming.md @@ -74,7 +74,7 @@ The legal entity is **Stack Exchange Inc.** However, most of the time we refer t

Don’t

-
    +
    • StackOverflow
    • Stackoverflow
    • stackoverflow
    • @@ -84,7 +84,7 @@ The legal entity is **Stack Exchange Inc.** However, most of the time we refer t

      Do

      -
        +
        • Stack Overflow
        @@ -99,7 +99,7 @@ However, when disambiguation is necessary, use these conventions:

        When referring to the company

        -
          +
          • Stack Overflow (in most contexts)
          • “We at Stack Overflow believe…”
          • “Stack Overflow announced today…”
          • @@ -108,7 +108,7 @@ However, when disambiguation is necessary, use these conventions:

            When referring to website

            -
              +
              • Stack Overflow (in most contexts)
              • “stackoverflow.com” (when being very specific)
              • “Ask a question on Stack Overflow”
              • @@ -124,7 +124,7 @@ Use contextual clues or specific phrasing when you need to make the distinction

                Do

                -
                  +
                  • “Stack Overflow has 183+ public platforms, and business products”
                  • “Visit stackoverflow.com to ask questions, or try Stack Internal for your team”
                  • “Unlike the public Stack Overflow site, Stack Internal is private to your organization”
                  • @@ -146,7 +146,7 @@ Our data licensing product provides ethical access to Stack Overflow’s vast da

                    Don’t

                    -
                      +
                      • Stack Overflow Knowledge Solutions
                      • SOKS
                      • OverflowAPI
                      • @@ -157,7 +157,7 @@ Our data licensing product provides ethical access to Stack Overflow’s vast da

                        Do

                        -
                          +
                          • Stack Data Licensing
                          @@ -172,7 +172,7 @@ Our advertising platform for reaching developers and technologists.

                          Don’t

                          -
                            +
                            • Stack Overflow Talent
                            • Stack Overflow Employer Branding
                            • Stack Overflow Advertising
                            • @@ -182,7 +182,7 @@ Our advertising platform for reaching developers and technologists.

                              Do

                              -
                                +
                                • Stack Ads
                                @@ -197,7 +197,7 @@ In November 2025 we renamed **Stack Overflow for Teams** to **Stack Internal**.

                                Don’t

                                -
                                  +
                                  • Stack Overflow for Teams
                                  • SO4T
                                  • SOE
                                  • @@ -211,7 +211,7 @@ In November 2025 we renamed **Stack Overflow for Teams** to **Stack Internal**.

                                    Do

                                    -
                                      +
                                      • Stack Internal
                                      @@ -224,7 +224,7 @@ Both **Stack \_\_\_** and **Stack Overflow \_\_\_** are acceptable when referrin

                                      Use Stack ___

                                      -
                                        +
                                        • Inside the product themselves
                                        • Internal communications (presentations, emails, Slack)
                                        • Official social media posts from company accounts
                                        • @@ -234,7 +234,7 @@ Both **Stack \_\_\_** and **Stack Overflow \_\_\_** are acceptable when referrin

                                          Use Stack Overflow ___

                                          -
                                            +
                                            • External communications where context is unclear
                                            • First mention of a product in outreach materials
                                            • App stores, marketplaces, and review sites
                                            • @@ -251,7 +251,7 @@ Stack Internal tier names are unchanged from previous naming.

                                              Don’t

                                              -
                                                +
                                                • Stack Overflow Enterprise
                                                • Stack Overflow for Enterprise
                                                • Stack Overflow Business
                                                • @@ -261,7 +261,7 @@ Stack Internal tier names are unchanged from previous naming.

                                                  Do

                                                  -
                                                    +
                                                    • Stack Internal (Enterprise)
                                                    • Stack Internal (Business)
                                                    • Use tier name alone after first full mention (e.g., "Enterprise")
                                                    • @@ -276,7 +276,7 @@ When referring to Stack Internal instances and users in product contexts:

                                                      Don’t

                                                      -
                                                        +
                                                        • Team (capitalized when referring to an instance)
                                                        • Members
                                                        • Users
                                                        • @@ -285,7 +285,7 @@ When referring to Stack Internal instances and users in product contexts:

                                                          Do

                                                          -
                                                            +
                                                            • team (lowercase, where "Stack Internal" is too formal)
                                                            • teammates (for the collective name of users)
                                                            • Stack Internal (when being specific e.g., …your Stack Internal…)
                                                            • @@ -300,7 +300,7 @@ The OverflowAI brand has been retired. When referring to AI functionality:

                                                              Don’t

                                                              -
                                                                +
                                                                • OverflowAI
                                                                • Overflow AI
                                                                • Stack AI
                                                                • @@ -310,7 +310,7 @@ The OverflowAI brand has been retired. When referring to AI functionality:

                                                                  Do

                                                                  -
                                                                    +
                                                                    • Refer to specific features by name (e.g., "Enhanced Search")
                                                                    • Use "Stack Internal's AI features" when referring collectively
                                                                    • Avoid collective references when possible
                                                                    • @@ -325,7 +325,7 @@ The following brands and visual identities have been retired:

                                                                      Don’t

                                                                      -
                                                                        +
                                                                        • Stack Overflow Labs
                                                                        • Collectives on Stack Overflow visual identity
                                                                        • Old style product logos (i.e., Teams, Talent, Advertising)
                                                                        • @@ -334,7 +334,7 @@ The following brands and visual identities have been retired:

                                                                          Do

                                                                          -
                                                                            +
                                                                            • Refer to the releases section on the blog
                                                                            • Refer to these products in text when contextually appropriate
                                                                            • Link to historical content (blog posts, documentation)
                                                                            • diff --git a/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md b/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md index 59f7690718..e93b15ce99 100644 --- a/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md +++ b/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md @@ -69,14 +69,14 @@ We want to help folks fix errors quickly, so error messages should be concise. S

                                                                              Don't

                                                                              -
                                                                                +
                                                                                • "Can't create 'Engineering' because a team with that name already exists. Specify a different name."
                                                                                • "Your notification failed and needs to be re-authorized."

                                                                                Do

                                                                                -
                                                                                  +
                                                                                  • "'Engineering' already exists. Try another team name."
                                                                                  • "Notification failed, please re-authorize it."
                                                                                  @@ -92,13 +92,13 @@ Apologize when it's the system's fault and let the user know it's not their faul

                                                                                  Don't

                                                                                  -
                                                                                    +
                                                                                    • "Your changes couldn't be saved."

                                                                                    Do

                                                                                    -
                                                                                      +
                                                                                      • "We couldn't save your changes."
                                                                                      @@ -111,14 +111,14 @@ Sometimes it's the user's fault, but there are ways to tell them without soundin

                                                                                      Don't

                                                                                      -
                                                                                        +
                                                                                        • "You've missed your name."
                                                                                        • "You can't leave this blank."

                                                                                        Do

                                                                                        -
                                                                                          +
                                                                                          • "Please enter your name."
                                                                                          • "Please enter a team name."
                                                                                          @@ -136,13 +136,13 @@ Tone is how you say something. A message's tone should depend on how serious the

                                                                                          Don't

                                                                                          -
                                                                                            +
                                                                                            • "The password entered does not match our records. Please re-enter your password."

                                                                                            Do

                                                                                            -
                                                                                              +
                                                                                              • "That password's not right. Try again."
                                                                                              @@ -153,13 +153,13 @@ At the same time, error messages are not the place to be clever or make jokes. T

                                                                                              Don't

                                                                                              -
                                                                                                +
                                                                                                • "Whoops! Looks like your card was declined. Better ask Mom for another one."

                                                                                                Do

                                                                                                -
                                                                                                  +
                                                                                                  • "This card was declined. Try another payment method."
                                                                                                  @@ -225,14 +225,14 @@ A good success message provides clear information that the performed action was

                                                                                                  Don't

                                                                                                  -
                                                                                                    +
                                                                                                    • "Successfully saved."
                                                                                                    • "Upgrade complete."

                                                                                                    Do

                                                                                                    -
                                                                                                      +
                                                                                                      • "Your account details have been saved."
                                                                                                      • "You've upgraded to the Business tier of Teams."
                                                                                                      @@ -246,14 +246,14 @@ Tone is how you say something. Excitement makes sense for successfully finishing

                                                                                                      Don't

                                                                                                      -
                                                                                                        +
                                                                                                        • "Thanks for updating your email."
                                                                                                        • "Account created."

                                                                                                        Do

                                                                                                        -
                                                                                                          +
                                                                                                          • "Your email has been updated."
                                                                                                          • "Thanks for signing up. Your account has been created."
                                                                                                          diff --git a/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md b/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md index 2aa0fb7757..dd19b46331 100644 --- a/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md +++ b/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md @@ -8,7 +8,7 @@ updated: 2026-02-12 import Grid from '$components/Grid.svelte' import GridColumn from '$components/GridColumn.svelte' - import { Icon } from '@stackoverflow/stacks-svelte'; + import { Icon, Checkbox, TextInput } from '@stackoverflow/stacks-svelte'; import { IconCheckFillCircle, IconCrossFillCircle } from '@stackoverflow/stacks-icons' @@ -20,51 +20,21 @@ Preferences and settings should always be written in the affirmative—even if t

                                                                                                          Don't

                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          + + + + +

                                                                                                          Do

                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          + + + + +
                                                                                                          @@ -83,44 +53,23 @@ Avoid using tooltips.

                                                                                                          Don't

                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          + + +

                                                                                                          Do

                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          + + {#snippet description()}Describes the site in the product, emails, integrations, and logs.{/snippet} + + + {#snippet description()}This is automatically generated. You only need to manually set this if you're reinstalling the app.{/snippet} + + + {#snippet description()}Add up to 4.{/snippet} +
                                                                                                          @@ -135,33 +84,19 @@ Placeholder text disappears once a character is typed in the input, so the user

                                                                                                          Don't

                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          + +

                                                                                                          Do

                                                                                                          -
                                                                                                          - - -
                                                                                                          -
                                                                                                          - - -
                                                                                                          + + {#snippet description()}Must be https{/snippet} + + + {#snippet description()}Add up to 2 roles{/snippet} +
                                                                                                          diff --git a/packages/stacks-docs-next/src/docs/public/copy/styleguide.md b/packages/stacks-docs-next/src/docs/public/copy/styleguide.md index c934f6c010..b3255f38a9 100644 --- a/packages/stacks-docs-next/src/docs/public/copy/styleguide.md +++ b/packages/stacks-docs-next/src/docs/public/copy/styleguide.md @@ -21,7 +21,7 @@ When Stack Overflow products appear in running text, always capitalize the full

                                                                                                          Don’t

                                                                                                          -
                                                                                                            +
                                                                                                            • Sign up for stack internal today
                                                                                                            • Our stack ads platform reaches millions
                                                                                                            • Access stack data licensing
                                                                                                            • @@ -30,7 +30,7 @@ When Stack Overflow products appear in running text, always capitalize the full

                                                                                                              Do

                                                                                                              -
                                                                                                                +
                                                                                                                • Sign up for Stack Internal today
                                                                                                                • Our Stack Ads platform reaches millions
                                                                                                                • Access Stack Data Licensing
                                                                                                                • @@ -46,7 +46,7 @@ Feature names should be capitalized when referring to the specific Stack Overflo

                                                                                                                  Don’t

                                                                                                                  -
                                                                                                                    +
                                                                                                                    • Use enhanced search to find answers
                                                                                                                    • Join a collective on Stack Overflow
                                                                                                                    • The Enhanced Search Feature is powered by AI
                                                                                                                    • @@ -54,7 +54,7 @@ Feature names should be capitalized when referring to the specific Stack Overflo

                                                                                                                      Do

                                                                                                                      -
                                                                                                                        +
                                                                                                                        • Use Enhanced Search to find answers
                                                                                                                        • Join a Collective on Stack Overflow
                                                                                                                        • Enhanced Search is powered by AI
                                                                                                                        • @@ -70,14 +70,14 @@ When using product-related terms generically (not referring to the Stack Overflo

                                                                                                                          Don’t

                                                                                                                          -
                                                                                                                            +
                                                                                                                            • We offer Data Licensing to our clients (when not referring to the specific product)
                                                                                                                            • internal knowledge sharing tools (when specifically referring to Stack Internal)

                                                                                                                            Do

                                                                                                                            -
                                                                                                                              +
                                                                                                                              • Many companies offer data licensing to their clients
                                                                                                                              • Stack Internal helps teams with internal knowledge sharing
                                                                                                                              • We provide advertising solutions through Stack Ads
                                                                                                                              • @@ -95,14 +95,14 @@ Use standard possessive rules with Stack Overflow and product names.

                                                                                                                                Don’t

                                                                                                                                -
                                                                                                                                  +
                                                                                                                                  • Stack Overflows’ mission
                                                                                                                                  • Stack Internals’ features

                                                                                                                                  Do

                                                                                                                                  -
                                                                                                                                    +
                                                                                                                                    • Stack Overflow’s mission
                                                                                                                                    • Stack Internal’s features
                                                                                                                                    • Stack Ads’ reach (or “the reach of Stack Ads”)
                                                                                                                                    • @@ -117,14 +117,14 @@ Avoid pluralizing product names. Use “instances”, “deployments” or simil

                                                                                                                                      Don’t

                                                                                                                                      -
                                                                                                                                        +
                                                                                                                                        • Multiple Stack Internals
                                                                                                                                        • Two Stack Ads

                                                                                                                                        Do

                                                                                                                                        -
                                                                                                                                          +
                                                                                                                                          • Multiple Stack Internal instances
                                                                                                                                          • Two Stack Internal deployments
                                                                                                                                          • Several Stack Ads campaigns
                                                                                                                                          • @@ -141,7 +141,7 @@ Never use abbreviations in external-facing materials including marketing, docume

                                                                                                                                            Don’t

                                                                                                                                            -
                                                                                                                                              +
                                                                                                                                              • SO provides data licensing
                                                                                                                                              • Try SI for your team
                                                                                                                                              • SOE and SIE (for tiers)
                                                                                                                                              • @@ -150,7 +150,7 @@ Never use abbreviations in external-facing materials including marketing, docume

                                                                                                                                                Do

                                                                                                                                                -
                                                                                                                                                  +
                                                                                                                                                  • Stack Overflow provides data licensing
                                                                                                                                                  • Try Stack Internal for your team
                                                                                                                                                  • Stack Internal (Enterprise)
                                                                                                                                                  • @@ -166,7 +166,7 @@ In internal Slack, emails, or presentations, abbreviations may be used for brevi

                                                                                                                                                    Acceptable internally

                                                                                                                                                    -
                                                                                                                                                      +
                                                                                                                                                      • SO (for Stack Overflow, after first mention)
                                                                                                                                                      • SI (for Stack Internal, after first mention)
                                                                                                                                                      • In code: Use descriptive variable names, abbreviations acceptable where conventional
                                                                                                                                                      • @@ -181,7 +181,7 @@ When referring to multiple products together, use "and" and maintain each produc

                                                                                                                                                        Don’t

                                                                                                                                                        -
                                                                                                                                                          +
                                                                                                                                                          • Stack Internal & Ads customers
                                                                                                                                                          • SI/SA users
                                                                                                                                                          • Stack Overflow’s Internal and Ads products
                                                                                                                                                          • @@ -189,7 +189,7 @@ When referring to multiple products together, use "and" and maintain each produc

                                                                                                                                                            Do

                                                                                                                                                            -
                                                                                                                                                              +
                                                                                                                                                              • Stack Internal and Stack Ads customers
                                                                                                                                                              • Customers using Stack Internal, Stack Ads, or Stack Data Licensing
                                                                                                                                                              • Stack Overflow Business products
                                                                                                                                                              • @@ -204,7 +204,7 @@ After the first mention of a product name, you may use shortened forms if the co

                                                                                                                                                                Do

                                                                                                                                                                -
                                                                                                                                                                  +
                                                                                                                                                                  • First mention: “Stack Internal provides private knowledge management”. Second mention: “Internal helps teams collaborate…”
                                                                                                                                                                  • First mention: “Stack Overflow Business includes three products”. Second mention: “Business customers have access to…”
                                                                                                                                                                  • Use “the product”, “the platform”, or “it” when context is unmistakable
                                                                                                                                                                  • @@ -221,7 +221,7 @@ Use sentence case for all headings. This means capitalizing the first word, the

                                                                                                                                                                    Don’t

                                                                                                                                                                    -
                                                                                                                                                                      +
                                                                                                                                                                      • User Roles
                                                                                                                                                                      • Performance Overview
                                                                                                                                                                      • Edit Your Profile
                                                                                                                                                                      • @@ -230,7 +230,7 @@ Use sentence case for all headings. This means capitalizing the first word, the

                                                                                                                                                                        Do

                                                                                                                                                                        -
                                                                                                                                                                          +
                                                                                                                                                                          • User roles
                                                                                                                                                                          • Performance overview
                                                                                                                                                                          • Edit your profile
                                                                                                                                                                          • @@ -246,7 +246,7 @@ Capitalize “Articles” when referring to the specific Stack Overflow feature

                                                                                                                                                                            Don’t

                                                                                                                                                                            -
                                                                                                                                                                              +
                                                                                                                                                                              • I’m writing an article and then I’m going to put it in our team’s articles section
                                                                                                                                                                              • In articles, you can find how-to guides
                                                                                                                                                                              • Create articles
                                                                                                                                                                              • @@ -254,7 +254,7 @@ Capitalize “Articles” when referring to the specific Stack Overflow feature

                                                                                                                                                                                Do

                                                                                                                                                                                -
                                                                                                                                                                                  +
                                                                                                                                                                                  • I’m writing an article and then I’m going to put it in our team’s Articles section
                                                                                                                                                                                  • In Articles, you can find how-to guides, blog posts, and articles
                                                                                                                                                                                  • Create Articles
                                                                                                                                                                                  • @@ -269,14 +269,14 @@ Always capitalize user roles in relation to management systems.

                                                                                                                                                                                    Don’t

                                                                                                                                                                                    -
                                                                                                                                                                                      +
                                                                                                                                                                                      • employees
                                                                                                                                                                                      • Recommended members

                                                                                                                                                                                      Do

                                                                                                                                                                                      -
                                                                                                                                                                                        +
                                                                                                                                                                                        • Employees
                                                                                                                                                                                        • Recommended Members
                                                                                                                                                                                        @@ -290,7 +290,7 @@ Always capitalize “Collective” or “Collectives” when used as a proper no

                                                                                                                                                                                        Don’t

                                                                                                                                                                                        -
                                                                                                                                                                                          +
                                                                                                                                                                                          • join the Google Cloud collective
                                                                                                                                                                                          • join an Collective
                                                                                                                                                                                          • A company’s Collective page will be located at the top right of the screen
                                                                                                                                                                                          • @@ -298,7 +298,7 @@ Always capitalize “Collective” or “Collectives” when used as a proper no

                                                                                                                                                                                            Do

                                                                                                                                                                                            -
                                                                                                                                                                                              +
                                                                                                                                                                                              • join the Google Cloud Collective
                                                                                                                                                                                              • join a collective
                                                                                                                                                                                              • A company’s collective page will be located at the top right of the screen
                                                                                                                                                                                              • @@ -313,7 +313,7 @@ Capitalize “Communities” and “Community” when referring to the Stack Int

                                                                                                                                                                                                Do

                                                                                                                                                                                                -
                                                                                                                                                                                                  +
                                                                                                                                                                                                  • With Communities you can help your teammates know what’s trending
                                                                                                                                                                                                  • Subscribe to a Community and get notifications for new questions and answers
                                                                                                                                                                                                  @@ -334,7 +334,7 @@ Questions, answers, and other types of posts have **scores**. A post’s score i

                                                                                                                                                                                                  Don’t

                                                                                                                                                                                                  -
                                                                                                                                                                                                    +
                                                                                                                                                                                                    • Highest voted posts
                                                                                                                                                                                                    • Total number of votes for this answer
                                                                                                                                                                                                    • Only top voted answers are eligible
                                                                                                                                                                                                    • @@ -343,7 +343,7 @@ Questions, answers, and other types of posts have **scores**. A post’s score i

                                                                                                                                                                                                      Do

                                                                                                                                                                                                      -
                                                                                                                                                                                                        +
                                                                                                                                                                                                        • Highest scored posts
                                                                                                                                                                                                        • Total score for this answer
                                                                                                                                                                                                        • Only top scored answers are eligible
                                                                                                                                                                                                        • @@ -361,13 +361,13 @@ Write in the active voice, particularly if the user needs to do something.

                                                                                                                                                                                                          Don’t

                                                                                                                                                                                                          -
                                                                                                                                                                                                            +
                                                                                                                                                                                                            • You should update your profile

                                                                                                                                                                                                            Do

                                                                                                                                                                                                            -
                                                                                                                                                                                                              +
                                                                                                                                                                                                              • Your profile needs updating.
                                                                                                                                                                                                              @@ -378,14 +378,14 @@ While it’s generally best to avoid the passive voice, in certain situations it

                                                                                                                                                                                                              Don’t

                                                                                                                                                                                                              -
                                                                                                                                                                                                                +
                                                                                                                                                                                                                • We cancelled your order
                                                                                                                                                                                                                • We've suspended your account

                                                                                                                                                                                                                Do

                                                                                                                                                                                                                -
                                                                                                                                                                                                                  +
                                                                                                                                                                                                                  • Your order has been cancelled
                                                                                                                                                                                                                  • Your account has been suspended
                                                                                                                                                                                                                  @@ -399,14 +399,14 @@ Contractions make copy sound more human. Avoid contractions that sound awkward w

                                                                                                                                                                                                                  Don’t

                                                                                                                                                                                                                  -
                                                                                                                                                                                                                    +
                                                                                                                                                                                                                    • This’ll help you get answers to your questions
                                                                                                                                                                                                                    • There must've been an error with your order

                                                                                                                                                                                                                    Do

                                                                                                                                                                                                                    -
                                                                                                                                                                                                                      +
                                                                                                                                                                                                                      • It’s designed to help you get answers to your questions
                                                                                                                                                                                                                      • There’s an error with your order
                                                                                                                                                                                                                      @@ -420,7 +420,7 @@ Use American spelling for all public-facing content. When in doubt, check the [M

                                                                                                                                                                                                                      Don’t

                                                                                                                                                                                                                      -
                                                                                                                                                                                                                        +
                                                                                                                                                                                                                        • Recognise
                                                                                                                                                                                                                        • Travelled
                                                                                                                                                                                                                        • Colour
                                                                                                                                                                                                                        • @@ -429,7 +429,7 @@ Use American spelling for all public-facing content. When in doubt, check the [M

                                                                                                                                                                                                                          Do

                                                                                                                                                                                                                          -
                                                                                                                                                                                                                            +
                                                                                                                                                                                                                            • Recognize
                                                                                                                                                                                                                            • Traveled
                                                                                                                                                                                                                            • Color
                                                                                                                                                                                                                            • @@ -445,7 +445,7 @@ Leave off possessives when referring to users or features when possible. If you

                                                                                                                                                                                                                              Don’t

                                                                                                                                                                                                                              -
                                                                                                                                                                                                                                +
                                                                                                                                                                                                                                • My Teams
                                                                                                                                                                                                                                • My settings
                                                                                                                                                                                                                                • Change my email settings
                                                                                                                                                                                                                                • @@ -453,7 +453,7 @@ Leave off possessives when referring to users or features when possible. If you

                                                                                                                                                                                                                                  Do

                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                    +
                                                                                                                                                                                                                                    • Teams
                                                                                                                                                                                                                                    • Settings
                                                                                                                                                                                                                                    • Change your email settings
                                                                                                                                                                                                                                    • @@ -468,14 +468,14 @@ Use “their” as a singular, gender-neutral pronoun when the gender of the sub

                                                                                                                                                                                                                                      Don’t

                                                                                                                                                                                                                                      -
                                                                                                                                                                                                                                        +
                                                                                                                                                                                                                                        • When a new user is added, he or she will be able to edit content
                                                                                                                                                                                                                                        • We appreciate the guys and gals of Stack Overflow

                                                                                                                                                                                                                                        Do

                                                                                                                                                                                                                                        -
                                                                                                                                                                                                                                          +
                                                                                                                                                                                                                                          • When a new user is added, they'll be able to edit content
                                                                                                                                                                                                                                          • We appreciate the Stack Overflow community
                                                                                                                                                                                                                                          @@ -489,7 +489,7 @@ Take extra care with “login” and “log in”. The former is a noun while th

                                                                                                                                                                                                                                          Don’t

                                                                                                                                                                                                                                          -
                                                                                                                                                                                                                                            +
                                                                                                                                                                                                                                            • Login to ask a question
                                                                                                                                                                                                                                            • Add a log in to your account
                                                                                                                                                                                                                                            • Signup to ask a question
                                                                                                                                                                                                                                            • @@ -498,7 +498,7 @@ Take extra care with “login” and “log in”. The former is a noun while th

                                                                                                                                                                                                                                              Do

                                                                                                                                                                                                                                              -
                                                                                                                                                                                                                                                +
                                                                                                                                                                                                                                                • Log in to ask a question
                                                                                                                                                                                                                                                • Add a login to your account
                                                                                                                                                                                                                                                • Sign up to ask a question
                                                                                                                                                                                                                                                • @@ -514,7 +514,7 @@ Use the abbreviated version “OK” (fully capitalized in every context). This

                                                                                                                                                                                                                                                  Don’t

                                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                                    +
                                                                                                                                                                                                                                                    • Okay
                                                                                                                                                                                                                                                    • okay
                                                                                                                                                                                                                                                    • Ok
                                                                                                                                                                                                                                                    • @@ -522,7 +522,7 @@ Use the abbreviated version “OK” (fully capitalized in every context). This

                                                                                                                                                                                                                                                      Do

                                                                                                                                                                                                                                                      -
                                                                                                                                                                                                                                                        +
                                                                                                                                                                                                                                                        • OK
                                                                                                                                                                                                                                                        @@ -537,14 +537,14 @@ Don’t use ampersands (&) unless it’s part of a branded term. Spell out the w

                                                                                                                                                                                                                                                        Don’t

                                                                                                                                                                                                                                                        -
                                                                                                                                                                                                                                                          +
                                                                                                                                                                                                                                                          • Update your email address & password
                                                                                                                                                                                                                                                          • Stack Overflow Q and A

                                                                                                                                                                                                                                                          Do

                                                                                                                                                                                                                                                          -
                                                                                                                                                                                                                                                            +
                                                                                                                                                                                                                                                            • Update your email address and password
                                                                                                                                                                                                                                                            • Stack Overflow Q&A
                                                                                                                                                                                                                                                            @@ -558,14 +558,14 @@ Use apostrophes to represent omitted letters or numbers (can’t, you’re, ’9

                                                                                                                                                                                                                                                            Don’t

                                                                                                                                                                                                                                                            -
                                                                                                                                                                                                                                                              +
                                                                                                                                                                                                                                                              • Admins role
                                                                                                                                                                                                                                                              • Moderators’s tasks

                                                                                                                                                                                                                                                              Do

                                                                                                                                                                                                                                                              -
                                                                                                                                                                                                                                                                +
                                                                                                                                                                                                                                                                • Admin’s role
                                                                                                                                                                                                                                                                • Moderators’ tasks
                                                                                                                                                                                                                                                                @@ -583,14 +583,14 @@ Use the oxford comma in sentences. Don’t use a comma to separate two distinct

                                                                                                                                                                                                                                                                Don’t

                                                                                                                                                                                                                                                                -
                                                                                                                                                                                                                                                                  +
                                                                                                                                                                                                                                                                  • Our community is rooted in kindness, collaboration and mutual respect
                                                                                                                                                                                                                                                                  • Thanks for contacting us, we'll be in touch soon

                                                                                                                                                                                                                                                                  Do

                                                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                                                    +
                                                                                                                                                                                                                                                                    • Our community is rooted in kindness, collaboration, and mutual respect
                                                                                                                                                                                                                                                                    • Thank you for contacting us. We'll be in touch soon
                                                                                                                                                                                                                                                                    @@ -604,14 +604,14 @@ The ellipsis (…) can be used in place of missing text. Avoid using ellipses in

                                                                                                                                                                                                                                                                    Don’t

                                                                                                                                                                                                                                                                    -
                                                                                                                                                                                                                                                                      +
                                                                                                                                                                                                                                                                      • Avoid subjective questions… stick to fact-based questions
                                                                                                                                                                                                                                                                      • Search...

                                                                                                                                                                                                                                                                      Do

                                                                                                                                                                                                                                                                      -
                                                                                                                                                                                                                                                                        +
                                                                                                                                                                                                                                                                        • Avoid subjective questions. Stick to fact-based questions
                                                                                                                                                                                                                                                                        • Search…
                                                                                                                                                                                                                                                                        @@ -631,14 +631,14 @@ Use an en dash with no spaces (–) for a fixed range of numbers. Avoid using em

                                                                                                                                                                                                                                                                        Don’t

                                                                                                                                                                                                                                                                        -
                                                                                                                                                                                                                                                                          +
                                                                                                                                                                                                                                                                          • Start your free 14 day trial
                                                                                                                                                                                                                                                                          • January 7 – 9

                                                                                                                                                                                                                                                                          Do

                                                                                                                                                                                                                                                                          -
                                                                                                                                                                                                                                                                            +
                                                                                                                                                                                                                                                                            • Start your free 14-day trial
                                                                                                                                                                                                                                                                            • January 7–9
                                                                                                                                                                                                                                                                            @@ -656,13 +656,13 @@ Avoid using question marks wherever possible. Reword into affirmative statements

                                                                                                                                                                                                                                                                            Don’t

                                                                                                                                                                                                                                                                            -
                                                                                                                                                                                                                                                                              +
                                                                                                                                                                                                                                                                              • Want to learn more?

                                                                                                                                                                                                                                                                              Do

                                                                                                                                                                                                                                                                              -
                                                                                                                                                                                                                                                                                +
                                                                                                                                                                                                                                                                                • Learn more
                                                                                                                                                                                                                                                                                @@ -696,7 +696,7 @@ Don’t write dates numerically since differing international standards can lead

                                                                                                                                                                                                                                                                                Don’t

                                                                                                                                                                                                                                                                                -
                                                                                                                                                                                                                                                                                  +
                                                                                                                                                                                                                                                                                  • September 2, '19
                                                                                                                                                                                                                                                                                  • 9-2-19
                                                                                                                                                                                                                                                                                  • September 2nd
                                                                                                                                                                                                                                                                                  • @@ -704,7 +704,7 @@ Don’t write dates numerically since differing international standards can lead

                                                                                                                                                                                                                                                                                    Do

                                                                                                                                                                                                                                                                                    -
                                                                                                                                                                                                                                                                                      +
                                                                                                                                                                                                                                                                                      • September 2, 2019
                                                                                                                                                                                                                                                                                      • Sep. 2, 2019
                                                                                                                                                                                                                                                                                      • September 2
                                                                                                                                                                                                                                                                                      • @@ -721,7 +721,7 @@ If indicating both date and time, separate them with the word “at” rather th

                                                                                                                                                                                                                                                                                        Don’t

                                                                                                                                                                                                                                                                                        -
                                                                                                                                                                                                                                                                                          +
                                                                                                                                                                                                                                                                                          • 15:30
                                                                                                                                                                                                                                                                                          • September 2, 2019 @ 4:35 pm
                                                                                                                                                                                                                                                                                          • September 2, 2019, 4:35 pm
                                                                                                                                                                                                                                                                                          • @@ -729,7 +729,7 @@ If indicating both date and time, separate them with the word “at” rather th

                                                                                                                                                                                                                                                                                            Do

                                                                                                                                                                                                                                                                                            -
                                                                                                                                                                                                                                                                                              +
                                                                                                                                                                                                                                                                                              • 3:30 pm
                                                                                                                                                                                                                                                                                              • September 2, 2019 at 4:35 pm
                                                                                                                                                                                                                                                                                              @@ -749,7 +749,7 @@ Buttons and links should be clear and predictable. Button and link text should b

                                                                                                                                                                                                                                                                                              Don’t

                                                                                                                                                                                                                                                                                              -
                                                                                                                                                                                                                                                                                                +
                                                                                                                                                                                                                                                                                                • New team
                                                                                                                                                                                                                                                                                                • Settings
                                                                                                                                                                                                                                                                                                • Post Job
                                                                                                                                                                                                                                                                                                • @@ -757,7 +757,7 @@ Buttons and links should be clear and predictable. Button and link text should b

                                                                                                                                                                                                                                                                                                  Do

                                                                                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                                                                                    +
                                                                                                                                                                                                                                                                                                    • Create new team
                                                                                                                                                                                                                                                                                                    • View settings
                                                                                                                                                                                                                                                                                                    • Post job
                                                                                                                                                                                                                                                                                                    • @@ -789,7 +789,7 @@ A good URL can also provide a solid foundation for SEO/AEO.

                                                                                                                                                                                                                                                                                                      Don't

                                                                                                                                                                                                                                                                                                      -
                                                                                                                                                                                                                                                                                                        +
                                                                                                                                                                                                                                                                                                        • Avoid using branded language e.g., `/overflowapi`
                                                                                                                                                                                                                                                                                                        • Avoid overly long lengths e.g., `/introducing-stack-internal-powering-the-human-intelligence-layer-of-enterprise-ai/`
                                                                                                                                                                                                                                                                                                        • Use underscores e.g., `/user_settings`
                                                                                                                                                                                                                                                                                                        • @@ -799,7 +799,7 @@ A good URL can also provide a solid foundation for SEO/AEO.

                                                                                                                                                                                                                                                                                                          Do

                                                                                                                                                                                                                                                                                                          -
                                                                                                                                                                                                                                                                                                            +
                                                                                                                                                                                                                                                                                                            • Instead say what it is e.g., `/api-dashboard`
                                                                                                                                                                                                                                                                                                            • Instead summarise the content e.g., `/announcing-stack-internal`
                                                                                                                                                                                                                                                                                                            • Use hyphens e.g., `/user-settings`
                                                                                                                                                                                                                                                                                                            • @@ -814,7 +814,7 @@ A good URL can also provide a solid foundation for SEO/AEO.

                                                                                                                                                                                                                                                                                                              Use path segments for:

                                                                                                                                                                                                                                                                                                              -
                                                                                                                                                                                                                                                                                                                +
                                                                                                                                                                                                                                                                                                                • Core content hierarchy and navigation
                                                                                                                                                                                                                                                                                                                • Specific resources: `/users/12345/ada-lovelace`
                                                                                                                                                                                                                                                                                                                • Content categories: `/questions/tagged/python`
                                                                                                                                                                                                                                                                                                                • @@ -823,7 +823,7 @@ A good URL can also provide a solid foundation for SEO/AEO.

                                                                                                                                                                                                                                                                                                                  Use query parameters for:

                                                                                                                                                                                                                                                                                                                  -
                                                                                                                                                                                                                                                                                                                    +
                                                                                                                                                                                                                                                                                                                    • Filters, sorting, and temporary state
                                                                                                                                                                                                                                                                                                                    • Sorting options: `/questions?tab=newest&sort=votes`
                                                                                                                                                                                                                                                                                                                    • Search and pagination: `/search?q=javascript&page=2`
                                                                                                                                                                                                                                                                                                                    • diff --git a/packages/stacks-docs-next/src/docs/public/copy/voice.md b/packages/stacks-docs-next/src/docs/public/copy/voice.md index d234594153..96d4dd5fc4 100644 --- a/packages/stacks-docs-next/src/docs/public/copy/voice.md +++ b/packages/stacks-docs-next/src/docs/public/copy/voice.md @@ -7,6 +7,15 @@ updated: 2025-09-25 import GridColumn from '$components/GridColumn.svelte' + + ## What is Tone of Voice? Tone of voice (TOV) isn’t what a brand says, it’s how it says it.  @@ -62,12 +71,12 @@ If you’re not sure how normal or formal you’re being, read what you’ve wri
                                                                                                                                                                                                                                                                                                                      Say this…

                                                                                                                                                                                                                                                                                                                      The knowledge you need to keep creating.

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Stack Overflow is a place for technologists and businesses to learn and share knowledge.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Stack Overflow is a place for technologists and businesses to learn and share knowledge.

                                                                                                                                                                                                                                                                                                                      Instead of this…

                                                                                                                                                                                                                                                                                                                      The knowledge required to power innovation.

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Stack Overflow provides comprehensive information and data for technologists and businesses.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Stack Overflow provides comprehensive information and data for technologists and businesses.

                                                                                                                                                                                                                                                                                                                      @@ -81,11 +90,11 @@ You can explain context or reasoning after, if you like, but keep it concise. Th
                                                                                                                                                                                                                                                                                                                      Say this…

                                                                                                                                                                                                                                                                                                                      Switch (100 opinions) for one right answer

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Get the knowledge you need to solve problems and craft code that works. No vague ideas or random suggestions. Just verified, definitive answers from experienced developers.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Get the knowledge you need to solve problems and craft code that works. No vague ideas or random suggestions. Just verified, definitive answers from experienced developers.

                                                                                                                                                                                                                                                                                                                      Instead of this…
                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      When you encounter problems in programming, finding the right information to solve them can feel impossible. Most information is unverified, and it seems like everyone has a different opinion. That’s why at Stack Overflow you won’t find guesswork and confusion. You’ll only find verified, definitive answers from experienced developers — so you can get the knowledge you need to solve problems and craft code that works.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      When you encounter problems in programming, finding the right information to solve them can feel impossible. Most information is unverified, and it seems like everyone has a different opinion. That’s why at Stack Overflow you won’t find guesswork and confusion. You’ll only find verified, definitive answers from experienced developers — so you can get the knowledge you need to solve problems and craft code that works.

                                                                                                                                                                                                                                                                                                                      @@ -102,11 +111,11 @@ Check out the Spirited section for more tips on making our writing a little more
                                                                                                                                                                                                                                                                                                                      Say this…
                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Connect Stack Internal to Slack and Microsoft Teams so your developers can find the answers they need quickly. You can also create Communities where specialists can share the most relevant knowledge.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Connect Stack Internal to Slack and Microsoft Teams so your developers can find the answers they need quickly. You can also create Communities where specialists can share the most relevant knowledge.

                                                                                                                                                                                                                                                                                                                      Instead of this…
                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Enhance efficiency by integrating with tools including Slack and Microsoft Teams. Plus, empower teams and supercharge productivity by creating Communities centered on different specialisms.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Enhance efficiency by integrating with tools including Slack and Microsoft Teams. Plus, empower teams and supercharge productivity by creating Communities centered on different specialisms.

                                                                                                                                                                                                                                                                                                                      @@ -124,12 +133,12 @@ Done well, this kind of writing earns trust, gives us an air of expertise and au
                                                                                                                                                                                                                                                                                                                      Say this…

                                                                                                                                                                                                                                                                                                                      You can’t know everything

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      But with Stack Internal, you can find someone who does.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      But with Stack Internal, you can find someone who does.

                                                                                                                                                                                                                                                                                                                      Instead of this…

                                                                                                                                                                                                                                                                                                                      Become an expert in your field

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Stack Internal puts valuable knowledge at your fingertips.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Stack Internal puts valuable knowledge at your fingertips.

                                                                                                                                                                                                                                                                                                                      @@ -141,12 +150,12 @@ If there’s no expectation to subvert, no convention to challenge or no feather
                                                                                                                                                                                                                                                                                                                      Say this…

                                                                                                                                                                                                                                                                                                                      Find knowledge to upskill. Reskill. Outskill.

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      We can’t promise you a promotion, but we can promise you’ll learn something.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      We can’t promise you a promotion, but we can promise you’ll learn something.

                                                                                                                                                                                                                                                                                                                      Instead of this…

                                                                                                                                                                                                                                                                                                                      Supercharge your future

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Access the knowledge you need to boost your skills and transform your career.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Access the knowledge you need to boost your skills and transform your career.

                                                                                                                                                                                                                                                                                                                      @@ -177,12 +186,12 @@ If we’re excited about something, we let it show. If we believe in something,
                                                                                                                                                                                                                                                                                                                      Say this…

                                                                                                                                                                                                                                                                                                                      One place. A million breakthroughs.

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Join a community of technologists, businesses and developers working things out, together.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Join a community of technologists, businesses and developers working things out, together.

                                                                                                                                                                                                                                                                                                                      Instead of this…

                                                                                                                                                                                                                                                                                                                      The leading place for technical knowledge.

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Here’s to changing the world, one question at a time.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Here’s to changing the world, one question at a time.

                                                                                                                                                                                                                                                                                                                      @@ -197,25 +206,25 @@ Like computers, readers have a limit on how much they can process and remember

                                                                                                                                                                                                                                                                                                                      Structure and scanability

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Write and structure your content in a way that lets people scan and get the most important information. Headlines and subheads are your friend here, as are bullet points, if you’re throwing a lot of information at them.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Write and structure your content in a way that lets people scan and get the most important information. Headlines and subheads are your friend here, as are bullet points, if you’re throwing a lot of information at them.

                                                                                                                                                                                                                                                                                                                      Density

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Writing can feel dense if you’re using lots of formal language or the marketing fluff we’ve already highlighted. But also when you’re trying to cram too much into sentences and paragraphs. A good guideline is to try and develop no more than 1–2 ideas per paragraph.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Writing can feel dense if you’re using lots of formal language or the marketing fluff we’ve already highlighted. But also when you’re trying to cram too much into sentences and paragraphs. A good guideline is to try and develop no more than 1–2 ideas per paragraph.

                                                                                                                                                                                                                                                                                                                      Control your sentence lengths

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Try to keep your sentences to a maximum of 30 words. There’s a lot of research that tells us the moment they go over that, they instantly become harder to understand. And within that limit, try to vary your sentence length. A nice mixture of short, mid and longer sentences creates rhythm and keeps monotony at bay.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Try to keep your sentences to a maximum of 30 words. There’s a lot of research that tells us the moment they go over that, they instantly become harder to understand. And within that limit, try to vary your sentence length. A nice mixture of short, mid and longer sentences creates rhythm and keeps monotony at bay.

                                                                                                                                                                                                                                                                                                                      Teaching developers. And models.

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Stack Overflow has been the go-to place for technologists to learn for over fifteen years. Now you can license our vital, verified knowledge to train your AI models.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Stack Overflow has been the go-to place for technologists to learn for over fifteen years. Now you can license our vital, verified knowledge to train your AI models.

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      As the go-to place for technologists to learn, Stack Overflow is unmatched for verified technical knowledge, and now you can license that public data – built up over fifteen years of questions and answers posted on our public forum – to train your AI models.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      As the go-to place for technologists to learn, Stack Overflow is unmatched for verified technical knowledge, and now you can license that public data – built up over fifteen years of questions and answers posted on our public forum – to train your AI models.

                                                                                                                                                                                                                                                                                                                      @@ -227,10 +236,10 @@ That said, in certain situations the passive voice can help soften a message. Th -

                                                                                                                                                                                                                                                                                                                      With Stack Internal, your developers can share knowledge and resources with the whole organization, so everyone can find the right answers quickly.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      With Stack Internal, your developers can share knowledge and resources with the whole organization, so everyone can find the right answers quickly.

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      With Stack Internal, knowledge and resources can be shared with the whole organization, making answers easily searchable and findable.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      With Stack Internal, knowledge and resources can be shared with the whole organization, making answers easily searchable and findable.

                                                                                                                                                                                                                                                                                                                      @@ -245,11 +254,11 @@ Learn more about how we dial these aspects of our voice up and down in different

                                                                                                                                                                                                                                                                                                                      Content Health.

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      These posts haven’t been updated for six months. You may want to review them to check if the information is still accurate.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      These posts haven’t been updated for six months. You may want to review them to check if the information is still accurate.

                                                                                                                                                                                                                                                                                                                      Content Health.

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Things are always changing – we get it. But make sure your team has the right knowledge at hand by updating these old posts.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Things are always changing – we get it. But make sure your team has the right knowledge at hand by updating these old posts.

                                                                                                                                                                                                                                                                                                                      @@ -268,15 +277,15 @@ There are no hard rules around this. It’s about reading the room and thinking

                                                                                                                                                                                                                                                                                                                      B2B

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      When we’re speaking to businesses, our messaging needs to feel professional. So we should focus on Simple over Spirited. The good news is that most B2B messaging is so stuffed with marketing fluff that clear, simple copy is enough to help us stand out and get our message across.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      When we’re speaking to businesses, our messaging needs to feel professional. So we should focus on Simple over Spirited. The good news is that most B2B messaging is so stuffed with marketing fluff that clear, simple copy is enough to help us stand out and get our message across.

                                                                                                                                                                                                                                                                                                                      In product

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      In-product copy is there to guide, not distract. So simplicity is king. That said, there can still be moments where Spirited shines through, for example in a success message or during onboarding.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      In-product copy is there to guide, not distract. So simplicity is king. That said, there can still be moments where Spirited shines through, for example in a success message or during onboarding.

                                                                                                                                                                                                                                                                                                                      Support

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Someone reading our help center may be feeling frustrated or trying to fix an urgent problem. We should prioritize our Simple pillar to make sure the information they find is clear and easy to understand.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Someone reading our help center may be feeling frustrated or trying to fix an urgent problem. We should prioritize our Simple pillar to make sure the information they find is clear and easy to understand.

                                                                                                                                                                                                                                                                                                                      @@ -285,14 +294,14 @@ There are no hard rules around this. It’s about reading the room and thinking

                                                                                                                                                                                                                                                                                                                      B2C

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      Consumers are used to brands talking to them in more relaxed and informal ways, so it’s appropriate for us to bring a little more wit and charm.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      Consumers are used to brands talking to them in more relaxed and informal ways, so it’s appropriate for us to bring a little more wit and charm.

                                                                                                                                                                                                                                                                                                                      Social Media

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      On social media, our content needs to stand out and get noticed. Turning up the Spirited part of our voice can help.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      On social media, our content needs to stand out and get noticed. Turning up the Spirited part of our voice can help.

                                                                                                                                                                                                                                                                                                                      Email Marketing

                                                                                                                                                                                                                                                                                                                      -

                                                                                                                                                                                                                                                                                                                      As a one-to-one channel, email marketing helps us build relationships with our customers. Leaning into our Spirited side helps keep our emails engaging, and humanizes us as a brand.

                                                                                                                                                                                                                                                                                                                      +

                                                                                                                                                                                                                                                                                                                      As a one-to-one channel, email marketing helps us build relationships with our customers. Leaning into our Spirited side helps keep our emails engaging, and humanizes us as a brand.

                                                                                                                                                                                                                                                                                                                      diff --git a/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md b/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md index 1236576679..469b1b4ca3 100644 --- a/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md +++ b/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md @@ -8,7 +8,8 @@ updated: 2026-02-12 import Grid from '$components/Grid.svelte' import GridColumn from '$components/GridColumn.svelte' - import { Icon } from '@stackoverflow/stacks-svelte'; + import { Icon, Notice } from '@stackoverflow/stacks-svelte'; + import Example from '$components/Example.svelte' import { IconCheckFillCircle, IconCrossFillCircle } from '@stackoverflow/stacks-icons' @@ -88,13 +89,15 @@ If an image does not convey any meaning to the user, leave the alt-text blank.
``` -
+ +

Improve efficiency and ship better code

There's a reason the world's largest developer teams rely on Stack Overflow Enterprise—it leads to better product and allows distributed teams to securely collaborate and share knowledge.

+
The rocket here doesn't add meaningful information. @@ -110,7 +113,8 @@ If an image has a label nearby, leave the alt-text blank.
``` -
+ +
@@ -119,16 +123,13 @@ If an image has a label nearby, leave the alt-text blank.

This ad unit is the most visible on the site.

+ The nearby text here already explains what the graphic illustrates. If there was alt-text here, screen readers would repeat information to the user. -
-
-
- Note: In these cases, leaving the alt attribute empty (alt="") will cause a screenreader to skip over the image. Never remove the alt-attribute. When a screenreader comes to an image without an alt attribute, it will dictate the filename (Eg. "SO underscore logo dot png"). -
-
-
+ +

Note: In these cases, leaving the alt attribute empty (alt="") will cause a screenreader to skip over the image. Never remove the alt-attribute. When a screenreader comes to an image without an alt attribute, it will dictate the filename (Eg. "SO underscore logo dot png").

+
## How to add alt-text diff --git a/packages/stacks-docs-next/src/docs/public/system/base/backgrounds.md b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds.md deleted file mode 100644 index 34bb92c3f3..0000000000 --- a/packages/stacks-docs-next/src/docs/public/system/base/backgrounds.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: Backgrounds -description: Atomic classes for controlling the background properties of an element’s background image. -updated: 2025-12-05 ---- - - - -## Background size - -
- - - - - - - - - {#each backgroundSize as bgSize} - - - - - {/each} - -
ClassOutput
{bgSize.class}{bgSize.output}
-
- -## Background repeat - -
- - - - - - - - - {#each backgroundRepeat as bgRepeat} - - - - - {/each} - -
ClassOutput
{bgRepeat.class}{bgRepeat.output}
-
- -## Background position - -
- - - - - - - - - {#each backgroundPosition as bgPosition} - - - - - {/each} - -
ClassOutput
{bgPosition.class}{bgPosition.output}
-
- -### Background position examples - -```html -
-
-
-
-
-
-
-
-
-``` - -
-
.bg-bottom
-
.bg-center
-
.bg-left
-
.bg-left-bottom
-
.bg-left-top
-
.bg-right
-
.bg-right-bottom
-
.bg-right-top
-
.bg-top
-
- -## Background attachment - -
- - - - - - - - - {#each backgroundAttachment as bgAttachment} - - - - - {/each} - -
ClassOutput
{bgAttachment.class}{bgAttachment.output}
-
- -## Background image - -
- - - - - - - - - {#each backgroundImage as bgImage} - - - - - {/each} - -
ClassOutput
{bgImage.class}{bgImage.output}
-
- -## Background utilities - -### Loading - -Adding the `.bg-loading` class applies a shimmering gradient animation to a container's background. Use it to create flexible skeleton placeholders that mimic the shape and layout of content while it loads. - -```html -
-
-
Loading…
-
-
-
-
-
-
-
-
-``` - -
-
-
Loading…
-
-
-
-
-
-
-
-
- -### Confetti - -Adding the confetti background utility adds confetti to any block-level element. You can choose the animated version, or static version. The animated version respects `prefers-reduced-motion` and displays the static version of the background when necessary. No JavaScript required. - -```html -
-
-``` - -#### Animated - -
- -#### Static - -
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/illustrationBgImage.svg b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/illustrationBgImage.svg new file mode 100644 index 0000000000..a104d14772 --- /dev/null +++ b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/illustrationBgImage.svg @@ -0,0 +1 @@ + diff --git a/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/index.md b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/index.md new file mode 100644 index 0000000000..0d34f3e758 --- /dev/null +++ b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds/index.md @@ -0,0 +1,150 @@ +--- +title: Backgrounds +description: Atomic classes for controlling the background properties of an element. +--- + + + +## Background size + + + +## Background repeat + + + +## Background position + + + +### Background position examples + +```html +
+
+
+
+
+
+
+
+
+``` + + +
+ {#each backgroundPosition as item} +
+ {item.class} +
+
+ {/each} +
+
+ +## Background attachment + + + +## Background image + + + +## Background utilities + +### Loading + +Adding the `.bg-loading` class applies a shimmering gradient animation to a container's background. Use it to create flexible skeleton placeholders that mimic the shape and layout of content while it loads. + +```html +
+
+
Loading…
+
+
+
+
+
+
+
+
+``` + + +
+
+
Loading…
+
+
+
+
+
+
+
+
+
+ +### Confetti + +Adding the confetti background utility adds confetti to any block-level element. You can choose the animated version, or static version. The animated version respects `prefers-reduced-motion` and displays the static version of the background when necessary. No JavaScript required. + +```html +
+
+``` + + +
+
+ Animated +
+
+
+ Static +
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/border-radius.md b/packages/stacks-docs-next/src/docs/public/system/base/border-radius.md index 55458c4361..14eb9c134c 100644 --- a/packages/stacks-docs-next/src/docs/public/system/base/border-radius.md +++ b/packages/stacks-docs-next/src/docs/public/system/base/border-radius.md @@ -1,292 +1,229 @@ --- title: Border radius description: Stacks provides atomic classes for border radius. -updated: 2025-12-05 --- ## Classes -
- - - - - - - - - - - {#each borderRadius as border} - - - - - - - {/each} - -
AbbreviationOutputDefinition - Responsive? -
{border.class}{border.output}{border.define} - -
-
+ ## Examples ### All corners -``` -
0px Border radius
-
10px Border radius
-
Circle Border radius
-
1000px Border radius
-``` - -
-
0px Border Radius
-
10px Border Radius
-
Circle Border Radius
-
1000px Border Radius
-
+```html +
+
+
+
+``` + + +
+
+ .bar0 +
+
+
+ .bar-md +
+
+
+ .bar-circle +
+
+
+ .bar-pill +
+
+
+
### Top left corner -``` -
0px Top Left Border Radius
-
10px Top Left Border Radius
+```html +
+
``` -
-
-
0px Top Left Border Radius
-
10px Top Left Border Radius
-
-
+ +
+
+ .btlr0 +
+
+
+ .btlr-md +
+
+
+
### Top right corner -``` -
0px Top Right Border Radius
-
10px Top Right Border Radius
+```html +
+
``` -
-
-
0px Top Right Border Radius
-
10px Top Right Border Radius
-
-
+ +
+
+ .btrr0 +
+
+
+ .btrr-md +
+
+
+
### Bottom right corner -``` -
0px Bottom Right Border Radius
-
10px Bottom Right Border Radius
+```html +
+
``` -
-
-
0px Bottom Right Border Radius
-
10px Bottom Right Border Radius
-
-
+ +
+
+ .bbrr0 +
+
+
+ .bbrr-md +
+
+
+
### Bottom left corner -``` -
0px Bottom Left Border Radius
-
10px Bottom Left Border Radius
+```html +
+
``` -
-
-
0px Bottom Left Border Radius
-
10px Bottom Left Border Radius
-
-
+ +
+
+ .bblr0 +
+
+
+ .bblr-md +
+
+
+
### Top corners -``` -
0px Top Border Radius
-
10px Top Border Radius
+```html +
+
``` -
-
-
0px Top Border Radius
-
10px Top Border Radius
-
-
+ +
+
+ .btr0 +
+
+
+ .btr-md +
+
+
+
### Bottom corners -``` -
0px Bottom Border Radius
-
10px Bottom Border Radius
+```html +
+
``` -
-
-
0px Bottom Border Radius
-
10px Bottom Border Radius
-
-
+ +
+
+ .bbr0 +
+
+
+ .bbr-md +
+
+
+
### Left corners -``` -
0px Left Border Radius
-
10px Left Border Radius
+```html +
+
``` -
-
-
0px Left Border Radius
-
10px Left Border Radius
-
-
+ +
+
+ .blr0 +
+
+
+ .blr-md +
+
+
+
### Right corners -``` -
0px Right Border Radius
-
10px Right Border Radius
-``` - -
-
-
0px Right Border Radius
-
10px Right Border Radius
-
-
+```html +
+
+``` + + +
+
+ .brr0 +
+
+
+ .brr-md +
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/borders.md b/packages/stacks-docs-next/src/docs/public/system/base/borders.md index 0f9bf673d4..e83388c570 100644 --- a/packages/stacks-docs-next/src/docs/public/system/base/borders.md +++ b/packages/stacks-docs-next/src/docs/public/system/base/borders.md @@ -1,96 +1,71 @@ --- title: Borders description: Stacks provides atomic classes for borders. -updated: 2025-12-16 --- ## Classes -
- - - - - - - - - - - {#each borderClasses as border} - - - - - - - {/each} - -
ClassOutputApply border to - Responsive? -
.{border.class}{border.output}{border.define} - -
-
+ ## Examples @@ -104,42 +79,19 @@ updated: 2025-12-16
``` -
- {#each borderClasses as border} -
{border.define}
- {/each} -
+ +
+ {#each borderClasses as item} +
{item.define}
+ {/each} +
+
## Width ### Width classes -
- - - - - - - - - - - {#each widthClasses as border} - - - - - - - {/each} - -
ClassOutputBorder width, side(s) - Responsive? -
.{border.class}{border.output}{border.define} - -
-
+ ### Width examples @@ -151,38 +103,21 @@ updated: 2025-12-16
``` -
-
.ba
-
.ba.brw0
-
.ba.bbw0
-
.ba.baw2
-
.ba.baw3
-
+ +
+
.ba
+
.ba.brw0
+
.ba.bbw0
+
.ba.baw2
+
.ba.baw3
+
+
## Style ### Style classes -
- - - - - - - - - - {#each styleClasses as border} - - - - - - {/each} - -
ClassOutputDefinition
.{border.class}{border.output}{border.define}
-
+ ### Style examples @@ -192,16 +127,14 @@ updated: 2025-12-16
``` -
-
-
Solid border style
-
Dashed border style
-
Dashed border right style
-
-
+ +
+
Solid border style
+
Dashed border style
+
Dashed border right style
+
+
## Color -### Color classes - Each color stop is available as a border class. See the [colors documentation](/system/foundation/colors#classes) for all available classes. diff --git a/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md b/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md index 1723c5890c..1c92acf228 100644 --- a/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md +++ b/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md @@ -2,99 +2,26 @@ title: Box shadow figma: https://svelte.stackoverflow.design/figma/box-shadows description: Box shadow atomic classes allow you to change an element's box shadow quickly. -updated: 2025-12-16 --- ## Classes -
- - - - - - - - - - - - {#each boxShadowClasses as item} - - - - - - - - {/each} - -
ClassOutputHover?Focus?Responsive?
.{item.class}{item.output} - - - - - -
-
+ ## Examples @@ -106,12 +33,12 @@ updated: 2025-12-16
``` -
-
-
.bs-sm
-
.bs-md
-
.bs-lg
-
.bs-xl
-
.bs-ring
-
-
+ +
+
.bs-sm
+
.bs-md
+
.bs-lg
+
.bs-xl
+
.bs-ring
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md b/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md index 9cb8ef5d2d..c6af4e1329 100644 --- a/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md +++ b/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md @@ -1,51 +1,23 @@ --- title: Box sizing description: Box-sizing atomic classes allow one to determine what is used to determine an element's width or height. -updated: 2025-12-16 --- ## Classes -
- - - - - - - - - - {#each boxSizingClasses as item} - - - - - - {/each} - -
ClassOutputDefinition
.{item.class}{item.output}

{@html item.define}

-
+ ## Examples @@ -55,7 +27,7 @@ updated: 2025-12-16
``` -
+

Parent container

@@ -94,4 +66,4 @@ updated: 2025-12-16
-
+ diff --git a/packages/stacks-docs-next/src/docs/public/system/base/current-color.md b/packages/stacks-docs-next/src/docs/public/system/base/current-color.md index 3a12979da7..67b775079e 100644 --- a/packages/stacks-docs-next/src/docs/public/system/base/current-color.md +++ b/packages/stacks-docs-next/src/docs/public/system/base/current-color.md @@ -3,12 +3,20 @@ title: Current color description: Atomic classes allow you to quickly add currentColor to an element's fill or stroke property. --- + + ## Classes -| Class | Output | -| ----------------- | ----------------------- | -| `.fill-current` | `fill: currentColor;` | -| `.stroke-current` | `stroke: currentColor;` | + ## Examples @@ -22,27 +30,21 @@ When applied to an SVG, applying `currentColor` to the fill or stroke property a ``` -
-
- - - -
-
- - - -
-
- - - - -
-
- - - - -
-
+ +
+ + + + + + + + + + + + + + +
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/cursors.md b/packages/stacks-docs-next/src/docs/public/system/base/cursors.md index 769dd2bec0..edae75126c 100644 --- a/packages/stacks-docs-next/src/docs/public/system/base/cursors.md +++ b/packages/stacks-docs-next/src/docs/public/system/base/cursors.md @@ -1,66 +1,28 @@ --- title: Cursors description: Atomic cursor classes allow you to quickly change an element's cursor behavior. -updated: 2025-12-16 --- ## Classes -
- - - - - - - - - {#each cursorClasses as item} - - - - - {/each} - -
ClassOutput
.{item.class}{item.output}
-
+ ## Examples @@ -75,31 +37,31 @@ updated: 2025-12-16
``` -
-
-
- .c-auto -
-
- .c-default -
-
- .c-pointer -
-
- .c-text -
-
- .c-wait -
-
- .c-move -
-
- .c-not-allowed -
-
- .c-help + +
+
+ .c-auto +
+
+ .c-default +
+
+ .c-pointer +
+
+ .c-text +
+
+ .c-wait +
+
+ .c-move +
+
+ .c-not-allowed +
+
+ .c-help +
-
-
+ diff --git a/packages/stacks-docs-next/src/docs/public/system/base/display.md b/packages/stacks-docs-next/src/docs/public/system/base/display.md index 6c19ce2e5a..bb3549f4a8 100644 --- a/packages/stacks-docs-next/src/docs/public/system/base/display.md +++ b/packages/stacks-docs-next/src/docs/public/system/base/display.md @@ -1,121 +1,28 @@ --- title: Display description: Display atomic classes allow you to change an element's display quickly. -updated: 2025-12-16 --- ## Classes -
- - - - - - - - - - - - {#each displayClasses as item} - - - - - - - - {/each} - -
ClassOutputDefinitionResponsive?Print?
.{item.class}{item.output}

{@html item.define}

- - - -
-
+ diff --git a/packages/stacks-docs-next/src/docs/public/system/base/flex.md b/packages/stacks-docs-next/src/docs/public/system/base/flex.md index 14008b9ab6..74948b72ee 100644 --- a/packages/stacks-docs-next/src/docs/public/system/base/flex.md +++ b/packages/stacks-docs-next/src/docs/public/system/base/flex.md @@ -1,368 +1,113 @@ --- title: Flex description: Stacks provides extensive utility and helper classes for flex layouts. If you are new to flex layouts, check out this interactive introduction by Joshua Comeau. -updated: 2025-12-05 --- +``` + +### Default + + +
+
+
+
body
+
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
.themed.theme-team-001
+
+
+
C
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
.themed.theme-team-002
+
+
+
C
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
.themed.theme-team-003
+
+
+
C
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
+
+ +### Light forced + + +
+
+
+
.theme-light__forced body
+
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
.theme-light__forced .themed.theme-team-001
+
+
+
C
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
.theme-light__forced .themed.theme-team-002
+
+
+
C
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
.theme-light__forced .themed.theme-team-003
+
+
+
C
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
+
+ +### Dark forced + + +
+
+
+
.theme-dark__forced body
+
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
.theme-dark__forced .themed.theme-team-001
+
+
+
C
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
.theme-dark__forced .themed.theme-team-002
+
+
+
C
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
.theme-dark__forced .themed.theme-team-003
+
+
+
C
+
+ + +
+
+ 1 + 2 + Next +
+
+
+
+
+
+
+ + diff --git a/packages/stacks-docs-next/src/docs/public/system/foundation/typography.md b/packages/stacks-docs-next/src/docs/public/system/foundation/typography.md new file mode 100644 index 0000000000..f5956cde44 --- /dev/null +++ b/packages/stacks-docs-next/src/docs/public/system/foundation/typography.md @@ -0,0 +1,406 @@ +--- +title: "Typography" +description: "Stacks provides atomic classes to override default styling of typography. Change typographic weights, styles, and alignment with these atomic styles." +figma: "https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=50-9087" +--- + + + +## Basic + +These styles should only be used as overrides. They shouldn't replace standard semantic uses of `strong` or `em` tags. + +### Basic classes + + + +### Basic examples + +```html +

+

+ +

+

+

+ +

+

+

+

+

+ + + +``` + + +
+
Font Weight: Normal
+
Font Weight: Bold
+
Font Style: Normal
+
Font Style: Italic
+
Font Style: Unset
+
Text Transform: Capitalize
+
Text Transform: Lowercase
+
Text Transform: Uppercase
+
Text Transform: None
+
Text Transform: Unset
+
Text Decoration: Underline
+
Text Decoration: None
+
+
+ +## Layout + +### Layout classes + + + +### Layout examples + +```html +

Text align: Left

+

Text align: Center

+

Text align: Right

+

Justify: …

+

Text align: Unset

+ +

White-space: Normal

+

White-space: Nowrap

+

White-space: Pre

+

White-space: Pre-wrap

+

White-space: Pre-line

+

White-space: Unset

+ +

Break word

+ +

Truncate: …

+``` + + +

Text Align: Left

+

Text Align: Center

+

Text Align: Right

+

Text Align: Justify — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Text Align: Unset

+

White-space: Normal

+

White-space: Nowrap

+

White-space: Pre

+

White-space: Pre-wrap

+

White-space: Pre-line

+

White-space: Unset

+

Break word: MethionylglutaminylarginylhionylglutaminylargintyrosylglutamylmethionylglutaminylarginyltyrlarginyltyrosylglutamylMethionylglutaminylarginyltyrosylglutamylnyltyrosylserinemethionylglutaminylargiglutamylmethionyosylglutamylmethionylglutaminylglutaminylarginyltyrosylglutamylmethionylglutaminylarginyltyrosylglutamylmetyltyrosylglutamylserine

+
+ +## Fonts + +```html +

+

+

+

+``` + + +
+
+

Sans Serif

+

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

+
+
+

Serif

+

Georgia, Cambria, "Times New Roman", Times, serif

+
+
+

Monospace

+

"SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

+
+
+
+ +## Sizes + +Fonts larger than `.fs-body1` are reduced in size at the smallest responsive breakpoint. `.fs-body1` or smaller remain fixed at their initial pixel values. + +### Size classes + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassSizeLine HeightResponsive Size
.fs-fine12px1.3612px
.fs-caption13px1.4013px
.fs-body114px1.4014px
.fs-body216px1.4015px
.fs-body318px1.4016px
.fs-subheading20px1.4018px
.fs-title22px1.4020px
.fs-headline128px1.4023px
.fs-headline236px1.4026px
.fs-display146px1.3429px
.fs-display258px1.2834px
.fs-display372px1.2037px
.fs-display4100px1.1843px
+
+ +### Size examples + +```html +

+

+

+

+

+

+

+

+

+

+

+

+

+``` + + +
+
+
Fine
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Caption
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Body 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Body 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Body 3
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Subheading
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Title
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Headline 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Headline 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Display 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Display 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Display 3
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
Display 4
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+
+
+ +## Line height + +```html +

+

+

+

+

+

+

+``` + + +

Line Height XS: This sets the line-height value to 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

Line Height SM: This sets the line-height value to 1.15. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

Line Height MD: This sets the line-height value to 1.3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

Line Height LG: This sets the line-height value to 1.6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

Line Height XL: This sets the line-height value to 1.92. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

Line Height XXL: This sets the line-height value to 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

Line Height Unset: This sets the line-height value to initial. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+ +## Hyphenation + +Our hyphenation classes determine when text that wraps across multiple lines is hyphenated. You can prevent hyphenation entirely, or allow the browser to automatically hypenate. + +```html +

+

+``` + + +
+
+ This text will not be hyphenated when large words break—longer words are broken by .ow-break-word. +
+
+ This text will be hyphenated when large words break. .ow-break-word shouldn't be necessary since breaks are implied by hyphenation rules. +
+
+
diff --git a/packages/stacks-docs-next/src/routes/+layout.server.ts b/packages/stacks-docs-next/src/routes/+layout.server.ts index 6f573059b0..278e06b9eb 100644 --- a/packages/stacks-docs-next/src/routes/+layout.server.ts +++ b/packages/stacks-docs-next/src/routes/+layout.server.ts @@ -38,6 +38,13 @@ export const load: LayoutServerLoad = async (event) => { const segments: [string] = event.url.pathname.split("/").filter(Boolean); const breadcrumb: { label: string; path: string }[] = []; + // Walk an item's children to find the first page path (an item with no children). + function firstPagePath(item: Record, basePath: string): string { + if (!Array.isArray(item.items) || item.items.length === 0) return basePath; + const first = item.items[0] as Record; + return firstPagePath(first, `${basePath}/${first.slug}`); + } + let currentLevel = { items: structure.navigation }; let currentPath = ""; @@ -47,9 +54,15 @@ export const load: LayoutServerLoad = async (event) => { if (item) { currentPath += `/${segment}`; + // If this item has children (it's a section, not a page), link to its + // first descendant page so the breadcrumb doesn't navigate to a 404. + const linkPath = Array.isArray(item.items) && item.items.length > 0 + ? firstPagePath(item, currentPath) + : currentPath; + breadcrumb.push({ label: item.title || segment, - path: currentPath, + path: linkPath, }); currentLevel = item; diff --git a/packages/stacks-docs-next/src/routes/+layout.svelte b/packages/stacks-docs-next/src/routes/+layout.svelte index 3e6e67f9ce..a973ea3fba 100644 --- a/packages/stacks-docs-next/src/routes/+layout.svelte +++ b/packages/stacks-docs-next/src/routes/+layout.svelte @@ -7,6 +7,7 @@ import { IconLogo, IconGlyph24, IconServiceGitHub, IconMenu, IconCross } from '@stackoverflow/stacks-icons' import Navigation from '$components/Navigation.svelte'; + import Contents from '$components/Contents.svelte'; import Search from '$components/Search.svelte'; import ThemeToggle from '$components/ThemeToggle.svelte'; import Login from '$src/components/LoginPrompt.svelte'; @@ -15,9 +16,15 @@ let { children, data } = $props(); - let mobileMenu = $state(false) + let mobileMenu = $state(false); - const year = new Date().getFullYear() + $effect(() => { + document.body.classList.toggle('overflow-hidden', mobileMenu); + return () => { document.body.classList.remove('overflow-hidden'); }; + }); + + const year = new Date().getFullYear(); + const toc = $derived(page.data?.metadata?.toc || []); @@ -25,9 +32,10 @@ -
-
- +
+
+
+ @@ -38,45 +46,69 @@
-
+
-
+
-
+
-
- - -
- {#if data.needsAuth} - - {:else} - {@render children?.()} - {/if} -
+
+ {#if page.data.active?.image} +
+ {/if} - {#if !page.data.hideFooter} -
- -
- {/if} -
+ + {#if !page.data.hideFooter} +
+ + +
+ {/if} + + + {#if !page.data.hideToc}{/if} +
+
+
+ + diff --git a/packages/stacks-docs-next/src/routes/+page.svelte b/packages/stacks-docs-next/src/routes/+page.svelte index 9edabe05c8..30ceccb2ff 100644 --- a/packages/stacks-docs-next/src/routes/+page.svelte +++ b/packages/stacks-docs-next/src/routes/+page.svelte @@ -31,15 +31,17 @@ background-size: 55% auto; display: flex; flex-direction: column; + flex-grow: 1; + width: 100%; padding-bottom: 30px; } -
-
- v{__APP_VERSION__} - +
+
+ v{__APP_VERSION__} + v{__SVELTE_VERSION__} diff --git a/packages/stacks-docs-next/src/routes/[category]/+page.svelte b/packages/stacks-docs-next/src/routes/[category]/+page.svelte index c902114729..8f56f46ca8 100644 --- a/packages/stacks-docs-next/src/routes/[category]/+page.svelte +++ b/packages/stacks-docs-next/src/routes/[category]/+page.svelte @@ -4,7 +4,7 @@ let { data } = $props(); -
+

{data?.active?.title}

{data?.active?.description}

diff --git a/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.server.ts b/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.server.ts index 45d4bd9ae4..64f36de9f6 100644 --- a/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.server.ts +++ b/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.server.ts @@ -42,21 +42,6 @@ export const load: PageServerLoad = async (event) => { possiblePaths.includes(path) ); - if (parent.active?.legacy) { - const response = await event.fetch(`/legacy/fragments/${parent.active.legacy}/fragment.html`); - if (response.ok) { - const html = (await response.text()) - .replace(/="\/assets\//g, '="/legacy/assets/'); - return { - source: "legacy" as const, - filename: null, - metadata: null, - markdown: null, - html, - }; - } - } - if (found) { const [filename, doc] = found; const loader = (await doc()) as { default: Component; metadata: Record }; diff --git a/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.svelte b/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.svelte index 125672a7de..c5f047536e 100644 --- a/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.svelte +++ b/packages/stacks-docs-next/src/routes/[category]/[[section]]/[subsection]/+page.svelte @@ -1,86 +1,80 @@ {pageTitle} - {#if data.source === 'legacy'} - - {/if} - -{#if data?.active?.image} - -{/if} - -
-
-
-
- -
diff --git a/packages/stacks-docs-next/src/routes/resources/icons/+page.svelte b/packages/stacks-docs-next/src/routes/resources/icons/+page.svelte index 1a68419c21..40ee8589f8 100644 --- a/packages/stacks-docs-next/src/routes/resources/icons/+page.svelte +++ b/packages/stacks-docs-next/src/routes/resources/icons/+page.svelte @@ -91,186 +91,184 @@ -
-
- - - {#snippet section(label, entries)} - {#if entries.length > 0} -

- {label} {entries.length} -

- -
- {#each entries as entry (entry.name)} - {@const def = getDefaultVariant(entry)} - - {/each} -
- {/if} - {/snippet} - - {@render section('Icons', filteredIcons)} - {@render section('Spots', filteredSpots)} -
- -
- {#each variants as variant (variant.key)} -
- -
- {#each variant.values as val (val)} - {@const isActive = selectedProps[variant.key] === val} - {@const compatible = isCompatible(variant.key, val)} - - - {/each} -
-
- {/each} - -
- - - - {#each ["Svelte", ".NET", "SVG"] as label (label)} - activeCodeTab = label} - /> +
+ + {@html selectedVariant.svg.replace('class="', 'class="native m-auto ')} +
+
+ +
+ {exportName} + + + + +
+ + {#each variants as variant (variant.key)} +
+ +
+ {#each variant.values as val (val)} + {@const isActive = selectedProps[variant.key] === val} + {@const compatible = isCompatible(variant.key, val)} + + {/each} - +
+
+ {/each} - {#if activeCodeTab === 'Svelte'} -

If you are working in a Svelte project, you can use the Icon component to render the asset as an svg element with the appropriate classes and attributes (docs).

+
+ - - import { Icon } from '@stackoverflow/stacks-svelte'; - + + {#each ["Svelte", ".NET", "SVG"] as label (label)} + activeCodeTab = label} + /> + {/each} + -

Import this asset

+ {#if activeCodeTab === 'Svelte'} +

If you are working in a Svelte project, you can use the Icon component to render the asset as an svg element with the appropriate classes and attributes (docs).

- - import { {selected?.isSpot ? 'Spot' : 'Icon'}{exportName} } from "@stackoverflow/stacks-icons/{selected?.isSpot ? 'spots' : 'icons'}"; - + + import { Icon } from '@stackoverflow/stacks-svelte'; + -

Render this asset

+

Import this asset

- - <Icon src={{selected?.isSpot ? 'Spot' : 'Icon'}{exportName}} /> - - {/if} - {#if activeCodeTab === '.NET'} -

If you’re working in a .NET project, we have a helper that can be called with @Svg. and the icon name. By default, any icon will inherit the text color of the parent element.

+ + import { {selected?.isSpot ? 'Spot' : 'Icon'}{exportName} } from "@stackoverflow/stacks-icons/{selected?.isSpot ? 'spots' : 'icons'}"; + -

Add the helper

+

Render this asset

- - @inject IModuleSvg Svg - + + <Icon src={{selected?.isSpot ? 'Spot' : 'Icon'}{exportName}} /> + + {/if} + {#if activeCodeTab === '.NET'} +

If you’re working in a .NET project, we have a helper that can be called with @Svg. and the icon name. By default, any icon will inherit the text color of the parent element.

-

Render the asset

+

Add the helper

- - @Svg.{selectedVariant.key} - + + @inject IModuleSvg Svg + -

Add CSS classes as a string:

+

Render the asset

- - @Svg.{selected?.isSpot ? 'Spot' : ''}{selectedVariant.key}.With("native fc-black-300") - + + @Svg.{selectedVariant.key} + -

You can also add a title prop, which also removes aria-hidden.

+

Add CSS classes as a string:

- - @Svg.{selected?.isSpot ? 'Spot' : ''}{selectedVariant.key}.With(cssClass: "fc-danger", title: "foo") - - {/if} - {#if activeCodeTab === 'SVG'} - + + @Svg.{selected?.isSpot ? 'Spot' : ''}{selectedVariant.key}.With("native fc-black-300") + - ",g.noCloneChecked=!!Te.cloneNode(!0).lastChild.defaultValue,Te.innerHTML="",g.option=!!Te.lastChild;var ke={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function _e(e,t){var n;return n=void 0!==e.getElementsByTagName?e.getElementsByTagName(t||"*"):void 0!==e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&S(e,t)?C.merge([e],n):n}function Ne(e,t){for(var n=0,r=e.length;n",""]);var De=/<|&#?\w+;/;function je(e,t,n,r,i){for(var s,o,a,c,u,l,h=t.createDocumentFragment(),d=[],p=0,f=e.length;p-1)i&&i.push(s);else if(u=ge(s),o=_e(h.appendChild(s),"script"),u&&Ne(o),n)for(l=0;s=o[l++];)Se.test(s.type||"")&&n.push(s);return h}var Le=/^([^.]*)(?:\.(.+)|)/;function Me(){return!0}function $e(){return!1}function Fe(e,t,n,r,i,s){var o,a;if("object"==typeof t){for(a in"string"!=typeof n&&(r=r||n,n=void 0),t)Fe(e,a,n,r,t[a],s);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=$e;else if(!i)return e;return 1===s&&(o=i,i=function(e){return C().off(e),o.apply(this,arguments)},i.guid=o.guid||(o.guid=C.guid++)),e.each(function(){C.event.add(this,t,i,r,n)})}function Ie(e,t,n){n?(ae.set(e,t,!1),C.event.add(e,t,{namespace:!1,handler:function(e){var n,r=ae.get(this,t);if(1&e.isTrigger&&this[t]){if(r)(C.event.special[t]||{}).delegateType&&e.stopPropagation();else if(r=a.call(arguments),ae.set(this,t,r),this[t](),n=ae.get(this,t),ae.set(this,t,!1),r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n}else r&&(ae.set(this,t,C.event.trigger(r[0],r.slice(1),this)),e.stopPropagation(),e.isImmediatePropagationStopped=Me)}})):void 0===ae.get(e,t)&&C.event.add(e,t,Me)}C.event={global:{},add:function(e,t,n,r,i){var s,o,a,c,u,l,h,d,p,f,m,g=ae.get(e);if(se(e))for(n.handler&&(n=(s=n).handler,i=s.selector),i&&C.find.matchesSelector(me,i),n.guid||(n.guid=C.guid++),(c=g.events)||(c=g.events=Object.create(null)),(o=g.handle)||(o=g.handle=function(t){return void 0!==C&&C.event.triggered!==t.type?C.event.dispatch.apply(e,arguments):void 0}),u=(t=(t||"").match(z)||[""]).length;u--;)p=m=(a=Le.exec(t[u])||[])[1],f=(a[2]||"").split(".").sort(),p&&(h=C.event.special[p]||{},p=(i?h.delegateType:h.bindType)||p,h=C.event.special[p]||{},l=C.extend({type:p,origType:m,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&C.expr.match.needsContext.test(i),namespace:f.join(".")},s),(d=c[p])||((d=c[p]=[]).delegateCount=0,h.setup&&!1!==h.setup.call(e,r,f,o)||e.addEventListener&&e.addEventListener(p,o)),h.add&&(h.add.call(e,l),l.handler.guid||(l.handler.guid=n.guid)),i?d.splice(d.delegateCount++,0,l):d.push(l),C.event.global[p]=!0)},remove:function(e,t,n,r,i){var s,o,a,c,u,l,h,d,p,f,m,g=ae.hasData(e)&&ae.get(e);if(g&&(c=g.events)){for(u=(t=(t||"").match(z)||[""]).length;u--;)if(p=m=(a=Le.exec(t[u])||[])[1],f=(a[2]||"").split(".").sort(),p){for(h=C.event.special[p]||{},d=c[p=(r?h.delegateType:h.bindType)||p]||[],a=a[2]&&new RegExp("(^|\\.)"+f.join("\\.(?:.*\\.|)")+"(\\.|$)"),o=s=d.length;s--;)l=d[s],!i&&m!==l.origType||n&&n.guid!==l.guid||a&&!a.test(l.namespace)||r&&r!==l.selector&&("**"!==r||!l.selector)||(d.splice(s,1),l.selector&&d.delegateCount--,h.remove&&h.remove.call(e,l));o&&!d.length&&(h.teardown&&!1!==h.teardown.call(e,f,g.handle)||C.removeEvent(e,p,g.handle),delete c[p])}else for(p in c)C.event.remove(e,p+t[u],n,r,!0);C.isEmptyObject(c)&&ae.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,s,o,a=new Array(arguments.length),c=C.event.fix(e),u=(ae.get(this,"events")||Object.create(null))[c.type]||[],l=C.event.special[c.type]||{};for(a[0]=c,t=1;t=1))for(;u!==this;u=u.parentNode||this)if(1===u.nodeType&&("click"!==e.type||!0!==u.disabled)){for(s=[],o={},n=0;n-1:C.find(i,this,null,[u]).length),o[i]&&s.push(r);s.length&&a.push({elem:u,handlers:s})}return u=this,c\s*$/g;function qe(e,t){return S(e,"table")&&S(11!==t.nodeType?t:t.firstChild,"tr")&&C(e).children("tbody")[0]||e}function Be(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Ve(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Ue(e,t){var n,r,i,s,o,a;if(1===t.nodeType){if(ae.hasData(e)&&(a=ae.get(e).events))for(i in ae.remove(t,"handle events"),a)for(n=0,r=a[i].length;n1&&"string"==typeof f&&!g.checkClone&&Re.test(f))return e.each(function(i){var s=e.eq(i);m&&(t[0]=f.call(this,i,s.html())),We(s,t,n,r)});if(d&&(s=(i=je(t,e[0].ownerDocument,!1,e,r)).firstChild,1===i.childNodes.length&&(i=s),s||r)){for(a=(o=C.map(_e(i,"script"),Be)).length;h0&&Ne(o,!c&&_e(e,"script")),a},cleanData:function(e){for(var t,n,r,i=C.event.special,s=0;void 0!==(n=e[s]);s++)if(se(n)){if(t=n[ae.expando]){if(t.events)for(r in t.events)i[r]?C.event.remove(n,r):C.removeEvent(n,r,t.handle);n[ae.expando]=void 0}n[ce.expando]&&(n[ce.expando]=void 0)}}}),C.fn.extend({detach:function(e){return ze(this,e,!0)},remove:function(e){return ze(this,e)},text:function(e){return ee(this,function(e){return void 0===e?C.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return We(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||qe(this,e).appendChild(e)})},prepend:function(){return We(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=qe(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return We(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return We(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(C.cleanData(_e(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return C.clone(this,e,t)})},html:function(e){return ee(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!Pe.test(e)&&!ke[(Oe.exec(e)||["",""])[1].toLowerCase()]){e=C.htmlPrefilter(e);try{for(;n=0&&(c+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-s-c-a-.5))||0),c+u}function lt(e,t,n){var r=Qe(e),i=(!g.boxSizingReliable()||n)&&"border-box"===C.css(e,"boxSizing",!1,r),s=i,o=Ze(e,t,r),a="offset"+t[0].toUpperCase()+t.slice(1);if(Je.test(o)){if(!n)return o;o="auto"}return(!g.boxSizingReliable()&&i||!g.reliableTrDimensions()&&S(e,"tr")||"auto"===o||!parseFloat(o)&&"inline"===C.css(e,"display",!1,r))&&e.getClientRects().length&&(i="border-box"===C.css(e,"boxSizing",!1,r),(s=a in e)&&(o=e[a])),(o=parseFloat(o)||0)+ut(e,t,n||(i?"border":"content"),s,r,o)+"px"}function ht(e,t,n,r,i){return new ht.prototype.init(e,t,n,r,i)}C.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Ze(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,aspectRatio:!0,borderImageSlice:!0,columnCount:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,gridArea:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnStart:!0,gridRow:!0,gridRowEnd:!0,gridRowStart:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,scale:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeMiterlimit:!0,strokeOpacity:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,s,o,a=ie(t),c=Xe.test(t),u=e.style;if(c||(t=it(a)),o=C.cssHooks[t]||C.cssHooks[a],void 0===n)return o&&"get"in o&&void 0!==(i=o.get(e,!1,r))?i:u[t];"string"==(s=typeof n)&&(i=pe.exec(n))&&i[1]&&(n=be(e,t,i),s="number"),null!=n&&n==n&&("number"!==s||c||(n+=i&&i[3]||(C.cssNumber[a]?"":"px")),g.clearCloneStyle||""!==n||0!==t.indexOf("background")||(u[t]="inherit"),o&&"set"in o&&void 0===(n=o.set(e,n,r))||(c?u.setProperty(t,n):u[t]=n))}},css:function(e,t,n,r){var i,s,o,a=ie(t);return Xe.test(t)||(t=it(a)),(o=C.cssHooks[t]||C.cssHooks[a])&&"get"in o&&(i=o.get(e,!0,n)),void 0===i&&(i=Ze(e,t,r)),"normal"===i&&t in at&&(i=at[t]),""===n||n?(s=parseFloat(i),!0===n||isFinite(s)?s||0:i):i}}),C.each(["height","width"],function(e,t){C.cssHooks[t]={get:function(e,n,r){if(n)return!st.test(C.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?lt(e,t,r):Ge(e,ot,function(){return lt(e,t,r)})},set:function(e,n,r){var i,s=Qe(e),o=!g.scrollboxSize()&&"absolute"===s.position,a=(o||r)&&"border-box"===C.css(e,"boxSizing",!1,s),c=r?ut(e,t,r,a,s):0;return a&&o&&(c-=Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-parseFloat(s[t])-ut(e,t,"border",!1,s)-.5)),c&&(i=pe.exec(n))&&"px"!==(i[3]||"px")&&(e.style[t]=n,n=C.css(e,t)),ct(0,n,c)}}}),C.cssHooks.marginLeft=et(g.reliableMarginLeft,function(e,t){if(t)return(parseFloat(Ze(e,"marginLeft"))||e.getBoundingClientRect().left-Ge(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),C.each({margin:"",padding:"",border:"Width"},function(e,t){C.cssHooks[e+t]={expand:function(n){for(var r=0,i={},s="string"==typeof n?n.split(" "):[n];r<4;r++)i[e+fe[r]+t]=s[r]||s[r-2]||s[0];return i}},"margin"!==e&&(C.cssHooks[e+t].set=ct)}),C.fn.extend({css:function(e,t){return ee(this,function(e,t,n){var r,i,s={},o=0;if(Array.isArray(t)){for(r=Qe(e),i=t.length;o1)}}),C.Tween=ht,ht.prototype={constructor:ht,init:function(e,t,n,r,i,s){this.elem=e,this.prop=n,this.easing=i||C.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=s||(C.cssNumber[n]?"":"px")},cur:function(){var e=ht.propHooks[this.prop];return e&&e.get?e.get(this):ht.propHooks._default.get(this)},run:function(e){var t,n=ht.propHooks[this.prop];return this.options.duration?this.pos=t=C.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):ht.propHooks._default.set(this),this}},ht.prototype.init.prototype=ht.prototype,ht.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=C.css(e.elem,e.prop,""))&&"auto"!==t?t:0},set:function(e){C.fx.step[e.prop]?C.fx.step[e.prop](e):1!==e.elem.nodeType||!C.cssHooks[e.prop]&&null==e.elem.style[it(e.prop)]?e.elem[e.prop]=e.now:C.style(e.elem,e.prop,e.now+e.unit)}}},ht.propHooks.scrollTop=ht.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},C.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},C.fx=ht.prototype.init,C.fx.step={};var dt,pt,ft=/^(?:toggle|show|hide)$/,mt=/queueHooks$/;function gt(){pt&&(!1===b.hidden&&r.requestAnimationFrame?r.requestAnimationFrame(gt):r.setTimeout(gt,C.fx.interval),C.fx.tick())}function vt(){return r.setTimeout(function(){dt=void 0}),dt=Date.now()}function yt(e,t){var n,r=0,i={height:e};for(t=t?1:0;r<4;r+=2-t)i["margin"+(n=fe[r])]=i["padding"+n]=e;return t&&(i.opacity=i.width=e),i}function bt(e,t,n){for(var r,i=(wt.tweeners[t]||[]).concat(wt.tweeners["*"]),s=0,o=i.length;s1)},removeAttr:function(e){return this.each(function(){C.removeAttr(this,e)})}}),C.extend({attr:function(e,t,n){var r,i,s=e.nodeType;if(3!==s&&8!==s&&2!==s)return void 0===e.getAttribute?C.prop(e,t,n):(1===s&&C.isXMLDoc(e)||(i=C.attrHooks[t.toLowerCase()]||(C.expr.match.bool.test(t)?xt:void 0)),void 0!==n?null===n?void C.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=C.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!g.radioValue&&"radio"===t&&S(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(z);if(i&&1===e.nodeType)for(;n=i[r++];)e.removeAttribute(n)}}),xt={set:function(e,t,n){return!1===t?C.removeAttr(e,n):e.setAttribute(n,n),n}},C.each(C.expr.match.bool.source.match(/\w+/g),function(e,t){var n=Et[t]||C.find.attr;Et[t]=function(e,t,r){var i,s,o=t.toLowerCase();return r||(s=Et[o],Et[o]=i,i=null!=n(e,t,r)?o:null,Et[o]=s),i}});var Tt=/^(?:input|select|textarea|button)$/i,At=/^(?:a|area)$/i;function Ct(e){return(e.match(z)||[]).join(" ")}function Ot(e){return e.getAttribute&&e.getAttribute("class")||""}function St(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(z)||[]}C.fn.extend({prop:function(e,t){return ee(this,C.prop,e,t,arguments.length>1)},removeProp:function(e){return this.each(function(){delete this[C.propFix[e]||e]})}}),C.extend({prop:function(e,t,n){var r,i,s=e.nodeType;if(3!==s&&8!==s&&2!==s)return 1===s&&C.isXMLDoc(e)||(t=C.propFix[t]||t,i=C.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=C.find.attr(e,"tabindex");return t?parseInt(t,10):Tt.test(e.nodeName)||At.test(e.nodeName)&&e.href?0:-1}}},propFix:{for:"htmlFor",class:"className"}}),g.optSelected||(C.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),C.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){C.propFix[this.toLowerCase()]=this}),C.fn.extend({addClass:function(e){var t,n,r,i,s,o;return v(e)?this.each(function(t){C(this).addClass(e.call(this,t,Ot(this)))}):(t=St(e)).length?this.each(function(){if(r=Ot(this),n=1===this.nodeType&&" "+Ct(r)+" "){for(s=0;s-1;)n=n.replace(" "+i+" "," ");o=Ct(n),r!==o&&this.setAttribute("class",o)}}):this:this.attr("class","")},toggleClass:function(e,t){var n,r,i,s,o=typeof e,a="string"===o||Array.isArray(e);return v(e)?this.each(function(n){C(this).toggleClass(e.call(this,n,Ot(this),t),t)}):"boolean"==typeof t&&a?t?this.addClass(e):this.removeClass(e):(n=St(e),this.each(function(){if(a)for(s=C(this),i=0;i-1)return!0;return!1}});var kt=/\r/g;C.fn.extend({val:function(e){var t,n,r,i=this[0];return arguments.length?(r=v(e),this.each(function(n){var i;1===this.nodeType&&(null==(i=r?e.call(this,n,C(this).val()):e)?i="":"number"==typeof i?i+="":Array.isArray(i)&&(i=C.map(i,function(e){return null==e?"":e+""})),(t=C.valHooks[this.type]||C.valHooks[this.nodeName.toLowerCase()])&&"set"in t&&void 0!==t.set(this,i,"value")||(this.value=i))})):i?(t=C.valHooks[i.type]||C.valHooks[i.nodeName.toLowerCase()])&&"get"in t&&void 0!==(n=t.get(i,"value"))?n:"string"==typeof(n=i.value)?n.replace(kt,""):null==n?"":n:void 0}}),C.extend({valHooks:{option:{get:function(e){var t=C.find.attr(e,"value");return null!=t?t:Ct(C.text(e))}},select:{get:function(e){var t,n,r,i=e.options,s=e.selectedIndex,o="select-one"===e.type,a=o?null:[],c=o?s+1:i.length;for(r=s<0?c:o?s:0;r-1)&&(n=!0);return n||(e.selectedIndex=-1),s}}}}),C.each(["radio","checkbox"],function(){C.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=C.inArray(C(e).val(),t)>-1}},g.checkOn||(C.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})});var _t=r.location,Nt={guid:Date.now()},Dt=/\?/;C.parseXML=function(e){var t,n;if(!e||"string"!=typeof e)return null;try{t=(new r.DOMParser).parseFromString(e,"text/xml")}catch(e){}return n=t&&t.getElementsByTagName("parsererror")[0],t&&!n||C.error("Invalid XML: "+(n?C.map(n.childNodes,function(e){return e.textContent}).join("\n"):e)),t};var jt=/^(?:focusinfocus|focusoutblur)$/,Lt=function(e){e.stopPropagation()};C.extend(C.event,{trigger:function(e,t,n,i){var s,o,a,c,u,l,h,d,f=[n||b],m=p.call(e,"type")?e.type:e,g=p.call(e,"namespace")?e.namespace.split("."):[];if(o=d=a=n=n||b,3!==n.nodeType&&8!==n.nodeType&&!jt.test(m+C.event.triggered)&&(m.indexOf(".")>-1&&(g=m.split("."),m=g.shift(),g.sort()),u=m.indexOf(":")<0&&"on"+m,(e=e[C.expando]?e:new C.Event(m,"object"==typeof e&&e)).isTrigger=i?2:3,e.namespace=g.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+g.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=n),t=null==t?[e]:C.makeArray(t,[e]),h=C.event.special[m]||{},i||!h.trigger||!1!==h.trigger.apply(n,t))){if(!i&&!h.noBubble&&!y(n)){for(c=h.delegateType||m,jt.test(c+m)||(o=o.parentNode);o;o=o.parentNode)f.push(o),a=o;a===(n.ownerDocument||b)&&f.push(a.defaultView||a.parentWindow||r)}for(s=0;(o=f[s++])&&!e.isPropagationStopped();)d=o,e.type=s>1?c:h.bindType||m,(l=(ae.get(o,"events")||Object.create(null))[e.type]&&ae.get(o,"handle"))&&l.apply(o,t),(l=u&&o[u])&&l.apply&&se(o)&&(e.result=l.apply(o,t),!1===e.result&&e.preventDefault());return e.type=m,i||e.isDefaultPrevented()||h._default&&!1!==h._default.apply(f.pop(),t)||!se(n)||u&&v(n[m])&&!y(n)&&((a=n[u])&&(n[u]=null),C.event.triggered=m,e.isPropagationStopped()&&d.addEventListener(m,Lt),n[m](),e.isPropagationStopped()&&d.removeEventListener(m,Lt),C.event.triggered=void 0,a&&(n[u]=a)),e.result}},simulate:function(e,t,n){var r=C.extend(new C.Event,n,{type:e,isSimulated:!0});C.event.trigger(r,null,t)}}),C.fn.extend({trigger:function(e,t){return this.each(function(){C.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return C.event.trigger(e,t,n,!0)}});var Mt=/\[\]$/,$t=/\r?\n/g,Ft=/^(?:submit|button|image|reset|file)$/i,It=/^(?:input|select|textarea|keygen)/i;function Pt(e,t,n,r){var i;if(Array.isArray(t))C.each(t,function(t,i){n||Mt.test(e)?r(e,i):Pt(e+"["+("object"==typeof i&&null!=i?t:"")+"]",i,n,r)});else if(n||"object"!==E(t))r(e,t);else for(i in t)Pt(e+"["+i+"]",t[i],n,r)}C.param=function(e,t){var n,r=[],i=function(e,t){var n=v(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(null==e)return"";if(Array.isArray(e)||e.jquery&&!C.isPlainObject(e))C.each(e,function(){i(this.name,this.value)});else for(n in e)Pt(n,e[n],t,i);return r.join("&")},C.fn.extend({serialize:function(){return C.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=C.prop(this,"elements");return e?C.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!C(this).is(":disabled")&&It.test(this.nodeName)&&!Ft.test(e)&&(this.checked||!Ce.test(e))}).map(function(e,t){var n=C(this).val();return null==n?null:Array.isArray(n)?C.map(n,function(e){return{name:t.name,value:e.replace($t,"\r\n")}}):{name:t.name,value:n.replace($t,"\r\n")}}).get()}});var Rt=/%20/g,Ht=/#.*$/,qt=/([?&])_=[^&]*/,Bt=/^(.*?):[ \t]*([^\r\n]*)$/gm,Vt=/^(?:GET|HEAD)$/,Ut=/^\/\//,Kt={},Wt={},zt="*/".concat("*"),Jt=b.createElement("a");function Xt(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var r,i=0,s=t.toLowerCase().match(z)||[];if(v(n))for(;r=s[i++];)"+"===r[0]?(r=r.slice(1)||"*",(e[r]=e[r]||[]).unshift(n)):(e[r]=e[r]||[]).push(n)}}function Qt(e,t,n,r){var i={},s=e===Wt;function o(a){var c;return i[a]=!0,C.each(e[a]||[],function(e,a){var u=a(t,n,r);return"string"!=typeof u||s||i[u]?s?!(c=u):void 0:(t.dataTypes.unshift(u),o(u),!1)}),c}return o(t.dataTypes[0])||!i["*"]&&o("*")}function Gt(e,t){var n,r,i=C.ajaxSettings.flatOptions||{};for(n in t)void 0!==t[n]&&((i[n]?e:r||(r={}))[n]=t[n]);return r&&C.extend(!0,e,r),e}Jt.href=_t.href,C.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:_t.href,type:"GET",isLocal:/^(?:about|app|app-storage|.+-extension|file|res|widget):$/.test(_t.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":zt,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":C.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?Gt(Gt(e,C.ajaxSettings),t):Gt(C.ajaxSettings,e)},ajaxPrefilter:Xt(Kt),ajaxTransport:Xt(Wt),ajax:function(e,t){"object"==typeof e&&(t=e,e=void 0),t=t||{};var n,i,s,o,a,c,u,l,h,d,p=C.ajaxSetup({},t),f=p.context||p,m=p.context&&(f.nodeType||f.jquery)?C(f):C.event,g=C.Deferred(),v=C.Callbacks("once memory"),y=p.statusCode||{},w={},x={},E="canceled",T={readyState:0,getResponseHeader:function(e){var t;if(u){if(!o)for(o={};t=Bt.exec(s);)o[t[1].toLowerCase()+" "]=(o[t[1].toLowerCase()+" "]||[]).concat(t[2]);t=o[e.toLowerCase()+" "]}return null==t?null:t.join(", ")},getAllResponseHeaders:function(){return u?s:null},setRequestHeader:function(e,t){return null==u&&(e=x[e.toLowerCase()]=x[e.toLowerCase()]||e,w[e]=t),this},overrideMimeType:function(e){return null==u&&(p.mimeType=e),this},statusCode:function(e){var t;if(e)if(u)T.always(e[T.status]);else for(t in e)y[t]=[y[t],e[t]];return this},abort:function(e){var t=e||E;return n&&n.abort(t),A(0,t),this}};if(g.promise(T),p.url=((e||p.url||_t.href)+"").replace(Ut,_t.protocol+"//"),p.type=t.method||t.type||p.method||p.type,p.dataTypes=(p.dataType||"*").toLowerCase().match(z)||[""],null==p.crossDomain){c=b.createElement("a");try{c.href=p.url,c.href=c.href,p.crossDomain=Jt.protocol+"//"+Jt.host!=c.protocol+"//"+c.host}catch(e){p.crossDomain=!0}}if(p.data&&p.processData&&"string"!=typeof p.data&&(p.data=C.param(p.data,p.traditional)),Qt(Kt,p,t,T),u)return T;for(h in(l=C.event&&p.global)&&0===C.active++&&C.event.trigger("ajaxStart"),p.type=p.type.toUpperCase(),p.hasContent=!Vt.test(p.type),i=p.url.replace(Ht,""),p.hasContent?p.data&&p.processData&&0===(p.contentType||"").indexOf("application/x-www-form-urlencoded")&&(p.data=p.data.replace(Rt,"+")):(d=p.url.slice(i.length),p.data&&(p.processData||"string"==typeof p.data)&&(i+=(Dt.test(i)?"&":"?")+p.data,delete p.data),!1===p.cache&&(i=i.replace(qt,"$1"),d=(Dt.test(i)?"&":"?")+"_="+Nt.guid+++d),p.url=i+d),p.ifModified&&(C.lastModified[i]&&T.setRequestHeader("If-Modified-Since",C.lastModified[i]),C.etag[i]&&T.setRequestHeader("If-None-Match",C.etag[i])),(p.data&&p.hasContent&&!1!==p.contentType||t.contentType)&&T.setRequestHeader("Content-Type",p.contentType),T.setRequestHeader("Accept",p.dataTypes[0]&&p.accepts[p.dataTypes[0]]?p.accepts[p.dataTypes[0]]+("*"!==p.dataTypes[0]?", "+zt+"; q=0.01":""):p.accepts["*"]),p.headers)T.setRequestHeader(h,p.headers[h]);if(p.beforeSend&&(!1===p.beforeSend.call(f,T,p)||u))return T.abort();if(E="abort",v.add(p.complete),T.done(p.success),T.fail(p.error),n=Qt(Wt,p,t,T)){if(T.readyState=1,l&&m.trigger("ajaxSend",[T,p]),u)return T;p.async&&p.timeout>0&&(a=r.setTimeout(function(){T.abort("timeout")},p.timeout));try{u=!1,n.send(w,A)}catch(e){if(u)throw e;A(-1,e)}}else A(-1,"No Transport");function A(e,t,o,c){var h,d,b,w,x,E=t;u||(u=!0,a&&r.clearTimeout(a),n=void 0,s=c||"",T.readyState=e>0?4:0,h=e>=200&&e<300||304===e,o&&(w=function(e,t,n){for(var r,i,s,o,a=e.contents,c=e.dataTypes;"*"===c[0];)c.shift(),void 0===r&&(r=e.mimeType||t.getResponseHeader("Content-Type"));if(r)for(i in a)if(a[i]&&a[i].test(r)){c.unshift(i);break}if(c[0]in n)s=c[0];else{for(i in n){if(!c[0]||e.converters[i+" "+c[0]]){s=i;break}o||(o=i)}s=s||o}if(s)return s!==c[0]&&c.unshift(s),n[s]}(p,T,o)),!h&&C.inArray("script",p.dataTypes)>-1&&C.inArray("json",p.dataTypes)<0&&(p.converters["text script"]=function(){}),w=function(e,t,n,r){var i,s,o,a,c,u={},l=e.dataTypes.slice();if(l[1])for(o in e.converters)u[o.toLowerCase()]=e.converters[o];for(s=l.shift();s;)if(e.responseFields[s]&&(n[e.responseFields[s]]=t),!c&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),c=s,s=l.shift())if("*"===s)s=c;else if("*"!==c&&c!==s){if(!(o=u[c+" "+s]||u["* "+s]))for(i in u)if((a=i.split(" "))[1]===s&&(o=u[c+" "+a[0]]||u["* "+a[0]])){!0===o?o=u[i]:!0!==u[i]&&(s=a[0],l.unshift(a[1]));break}if(!0!==o)if(o&&e.throws)t=o(t);else try{t=o(t)}catch(e){return{state:"parsererror",error:o?e:"No conversion from "+c+" to "+s}}}return{state:"success",data:t}}(p,w,T,h),h?(p.ifModified&&((x=T.getResponseHeader("Last-Modified"))&&(C.lastModified[i]=x),(x=T.getResponseHeader("etag"))&&(C.etag[i]=x)),204===e||"HEAD"===p.type?E="nocontent":304===e?E="notmodified":(E=w.state,d=w.data,h=!(b=w.error))):(b=E,!e&&E||(E="error",e<0&&(e=0))),T.status=e,T.statusText=(t||E)+"",h?g.resolveWith(f,[d,E,T]):g.rejectWith(f,[T,E,b]),T.statusCode(y),y=void 0,l&&m.trigger(h?"ajaxSuccess":"ajaxError",[T,p,h?d:b]),v.fireWith(f,[T,E]),l&&(m.trigger("ajaxComplete",[T,p]),--C.active||C.event.trigger("ajaxStop")))}return T},getJSON:function(e,t,n){return C.get(e,t,n,"json")},getScript:function(e,t){return C.get(e,void 0,t,"script")}}),C.each(["get","post"],function(e,t){C[t]=function(e,n,r,i){return v(n)&&(i=i||r,r=n,n=void 0),C.ajax(C.extend({url:e,type:t,dataType:i,data:n,success:r},C.isPlainObject(e)&&e))}}),C.ajaxPrefilter(function(e){var t;for(t in e.headers)"content-type"===t.toLowerCase()&&(e.contentType=e.headers[t]||"")}),C._evalUrl=function(e,t,n){return C.ajax({url:e,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,converters:{"text script":function(){}},dataFilter:function(e){C.globalEval(e,t,n)}})},C.fn.extend({wrapAll:function(e){var t;return this[0]&&(v(e)&&(e=e.call(this[0])),t=C(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){for(var e=this;e.firstElementChild;)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(e){return v(e)?this.each(function(t){C(this).wrapInner(e.call(this,t))}):this.each(function(){var t=C(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=v(e);return this.each(function(n){C(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(e){return this.parent(e).not("body").each(function(){C(this).replaceWith(this.childNodes)}),this}}),C.expr.pseudos.hidden=function(e){return!C.expr.pseudos.visible(e)},C.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},C.ajaxSettings.xhr=function(){try{return new r.XMLHttpRequest}catch(e){}};var Yt={0:200,1223:204},Zt=C.ajaxSettings.xhr();g.cors=!!Zt&&"withCredentials"in Zt,g.ajax=Zt=!!Zt,C.ajaxTransport(function(e){var t,n;if(g.cors||Zt&&!e.crossDomain)return{send:function(i,s){var o,a=e.xhr();if(a.open(e.type,e.url,e.async,e.username,e.password),e.xhrFields)for(o in e.xhrFields)a[o]=e.xhrFields[o];for(o in e.mimeType&&a.overrideMimeType&&a.overrideMimeType(e.mimeType),e.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest"),i)a.setRequestHeader(o,i[o]);t=function(e){return function(){t&&(t=n=a.onload=a.onerror=a.onabort=a.ontimeout=a.onreadystatechange=null,"abort"===e?a.abort():"error"===e?"number"!=typeof a.status?s(0,"error"):s(a.status,a.statusText):s(Yt[a.status]||a.status,a.statusText,"text"!==(a.responseType||"text")||"string"!=typeof a.responseText?{binary:a.response}:{text:a.responseText},a.getAllResponseHeaders()))}},a.onload=t(),n=a.onerror=a.ontimeout=t("error"),void 0!==a.onabort?a.onabort=n:a.onreadystatechange=function(){4===a.readyState&&r.setTimeout(function(){t&&n()})},t=t("abort");try{a.send(e.hasContent&&e.data||null)}catch(e){if(t)throw e}},abort:function(){t&&t()}}}),C.ajaxPrefilter(function(e){e.crossDomain&&(e.contents.script=!1)}),C.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(e){return C.globalEval(e),e}}}),C.ajaxPrefilter("script",function(e){void 0===e.cache&&(e.cache=!1),e.crossDomain&&(e.type="GET")}),C.ajaxTransport("script",function(e){var t,n;if(e.crossDomain||e.scriptAttrs)return{send:function(r,i){t=C("