@solidjs/start 2.0.3 → 2.0.5

package/dist/shared/ui/Button.css

@@ -7,13 +7,13 @@
 
   border-radius: 0.5rem;
 
-  color: oklch(97% 0.014 254.604);
+  color: var(--start-dt-text, oklch(97% 0.014 254.604));
 
-  background-color: rgb(17 24 39);
-  padding: 0.25rem 0.5rem;
+  background-color: var(--start-dt-surface, rgb(17 24 39));
+  padding: 0.25rem 0.625rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  border: none;
+  border: 1px var(--start-dt-border, transparent) solid;
   outline: none;
 
   transition-property: color, background-color, border-color, box-shadow;
@@ -27,6 +27,7 @@
 [data-start-button][tc-selected],
 [data-start-button]:hover,
 [data-start-button]:focus {
-  color: rgb(219 234 254);
-  background-color: rgb(30 58 138);
+  color: var(--start-dt-text, rgb(219 234 254));
+  background-color: var(--start-dt-surface-hover, rgb(30 58 138));
+  border-color: var(--start-dt-accent, transparent);
 }

package/dist/shared/ui/IconButton.css

@@ -1,36 +1,42 @@
 [data-start-icon-button] {
   display: flex;
-  padding: 0.25rem;
-  border-radius: 9999px;
+  padding: 0.375rem;
+  border-radius: 0.5rem;
   border-width: 0px;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: rgb(249 250 251);
+  color: var(--start-dt-text, rgb(249 250 251));
   background: none;
-  transition-property: color, background-color, border-color, box-shadow;
+  transition-property: color, background-color, border-color, box-shadow, opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
 [data-start-icon-button]:hover {
-  color: rgb(229 231 235);
-  background-color: rgb(55 65 81);
+  color: var(--start-dt-text, rgb(229 231 235));
+  background-color: var(--start-dt-surface-hover, rgb(55 65 81));
 }
 
 [data-start-icon-button]:focus {
   outline: 2px solid transparent;
-  outline-color: rgb(249 250 251);
+  outline-color: var(--start-dt-accent, rgb(249 250 251));
   outline-offset: 2px;
 }
 
 [data-start-icon-button]:focus-visible {
-  box-shadow: 0 0 0 calc(3px) rgb(17 24 39 / 0.75);
+  box-shadow: 0 0 0 2px var(--start-dt-accent, rgb(17 24 39 / 0.75));
 }
 
 [data-start-icon-button]:active {
-  color: rgb(243 244 246);
-  background-color: rgb(31 41 55);
+  color: var(--start-dt-accent, rgb(243 244 246));
+  background-color: var(--start-dt-surface-active, rgb(31 41 55));
+}
+
+[data-start-icon-button]:disabled {
+  opacity: 0.35;
+  cursor: default;
+  pointer-events: none;
 }
 
 [data-start-icon-button] > svg {

package/dist/shared/ui/Placeholder.css

@@ -5,6 +5,8 @@
 
   width: 100%;
   height: 100%;
+
+  color: var(--start-dt-text-muted, inherit);
 }
 
 [data-start-placeholder] > span {

package/dist/shared/ui/Section.css

@@ -1,16 +1,55 @@
 [data-start-section] {
   display: flex;
   flex-direction: column;
+  gap: 0.375rem;
 }
 
 [data-start-section-title] {
   text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--start-dt-text-muted, inherit);
+}
+
+/* collapsible variant */
+summary[data-start-section-title] {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+summary[data-start-section-title]::-webkit-details-marker {
+  display: none;
+}
+
+summary[data-start-section-title]::before {
+  content: "";
+
+  width: 0.375rem;
+  height: 0.375rem;
+
+  border-right: 1.5px currentColor solid;
+  border-bottom: 1.5px currentColor solid;
+
+  transform: rotate(-45deg);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+details[open] > summary[data-start-section-title]::before {
+  transform: rotate(45deg);
+}
+
+summary[data-start-section-title]:hover {
+  color: var(--start-dt-text, inherit);
 }
 
 [data-start-section-content] {
-  margin-left: 0.5rem;
-  padding-left: 0.5rem;
-  border-left: 1px oklch(87% 0.065 274.039) solid;
+  margin-left: 0.25rem;
+  padding-left: 0.625rem;
+  border-left: 2px var(--start-dt-border-soft, oklch(87% 0.065 274.039)) solid;
 
   width: calc(100% - 2rem);
 

package/dist/shared/ui/Section.d.ts

@@ -1,9 +1,11 @@
-import type { JSX } from "solid-js";
+import { type JSX } from "solid-js";
 import { type TextProps } from "./Text.tsx";
 import "./Section.css";
 export interface SectionProps {
     title: string;
     options?: TextProps<"span">["options"];
+    collapsible?: boolean;
+    defaultOpen?: boolean;
     children: JSX.Element;
 }
 export declare function Section(props: SectionProps): JSX.Element;

package/dist/shared/ui/Section.jsx

@@ -1,10 +1,18 @@
+import { Show } from "solid-js";
 import { Text } from "./Text.jsx";
 import "./Section.css";
 export function Section(props) {
-    return (<div data-start-section>
-      <Text data-start-section-title options={{ weight: "bold", font: "sans", ...props.options }}>
-        {props.title}
-      </Text>
-      <div data-start-section-content>{props.children}</div>
-    </div>);
+    return (<Show when={props.collapsible} fallback={<div data-start-section>
+          <Text data-start-section-title options={{ weight: "bold", font: "sans", ...props.options }}>
+            {props.title}
+          </Text>
+          <div data-start-section-content>{props.children}</div>
+        </div>}>
+      <details data-start-section open={props.defaultOpen ?? true}>
+        <summary data-start-section-title>
+          <Text options={{ weight: "bold", font: "sans", ...props.options }}>{props.title}</Text>
+        </summary>
+        <div data-start-section-content>{props.children}</div>
+      </details>
+    </Show>);
 }

package/dist/shared/ui/Select.css

@@ -8,11 +8,11 @@
 }
 
 [data-start-select] > * + * {
-  border-top: 1px oklch(87% 0.065 274.039) solid;
+  border-top: 1px var(--start-dt-border-soft, oklch(87% 0.065 274.039)) solid;
 }
 
 [data-start-select-option] {
-  color: rgb(249 250 251);
+  color: var(--start-dt-text, rgb(249 250 251));
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 1rem;
@@ -22,6 +22,8 @@
   outline: none;
   cursor: pointer;
 
+  border-left: 2px solid transparent;
+
   transition-property: color, background-color, border-color, box-shadow;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -29,9 +31,14 @@
   white-space: nowrap;
 }
 
+[data-start-select-option]:hover {
+  background-color: var(--start-dt-surface-hover, rgb(55 65 81));
+}
+
 [data-start-select-option][tc-active],
 [data-start-select-option][tc-selected],
 [data-start-select-option]:focus {
-  color: rgb(229 231 235);
-  background-color: rgb(55 65 81);
+  color: var(--start-dt-text, rgb(229 231 235));
+  background-color: var(--start-dt-accent-soft, rgb(55 65 81));
+  border-left-color: var(--start-dt-accent, transparent);
 }

package/dist/shared/ui/Tabs.css

@@ -3,49 +3,63 @@
   align-items: center;
   justify-content: center;
 
-  border-radius: 0.5rem;
+  border-radius: 0.375rem;
   cursor: pointer;
 
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  font-size: 0.875rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.875rem;
+  padding-right: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.25rem;
+  font-weight: 500;
   border: none;
   outline: none;
 
+  color: var(--start-dt-text-muted, rgb(229 231 235));
+  background: none;
+
   transition-property: color, background-color, border-color, box-shadow;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-[data-start-tab][tc-active],
-[data-start-tab][tc-selected],
 [data-start-tab]:hover,
 [data-start-tab]:focus {
-  color: rgb(229 231 235);
-  background-color: rgb(55 65 81);
+  color: var(--start-dt-text, rgb(229 231 235));
+}
+
+[data-start-tab][tc-active],
+[data-start-tab][tc-selected] {
+  color: var(--start-dt-text, rgb(229 231 235));
+  background-color: var(--start-dt-surface-hover, rgb(55 65 81));
+  box-shadow: 0 1px 2px oklch(0 0 0 / 0.25);
 }
 
 [data-start-tab-group] {
 }
 
 [data-start-tab-list] {
-  display: flex;
-  gap: 0.5rem;
+  display: inline-flex;
+  gap: 0.25rem;
   margin: 0.5rem;
+  padding: 0.25rem;
+
+  border-radius: 0.5rem;
+  background-color: var(--start-dt-surface, rgb(17 24 39));
+  align-self: flex-start;
 }
 
 [data-start-tab-panel] {
-  height: 100%;
+  flex: 1 1 0%;
+  min-height: 0;
 
   overflow: auto;
 
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  gap: 0.75rem;
+  padding: 0.75rem;
 
-  border-top: oklch(87% 0.065 274.039) 1px solid;
+  border-top: var(--start-dt-border-soft, oklch(87% 0.065 274.039)) 1px solid;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/solidjs/solid-start.git",
@@ -34,12 +34,13 @@
     "@babel/core": "^7.29.7",
     "@babel/traverse": "^7.29.7",
     "@babel/types": "^7.29.7",
+    "@jridgewell/trace-mapping": "^0.3.31",
     "@solidjs/meta": "^0.29.4",
     "@types/babel__traverse": "^7.28.0",
     "@types/micromatch": "^4.0.10",
     "cookie-es": "^3.1.1",
     "defu": "^6.1.7",
-    "error-stack-parser": "^2.1.4",
+    "error-stack-parser-es": "^2.0.1",
     "fast-glob": "^3.3.3",
     "h3": "^2.0.1-rc.26",
     "html-to-image": "^1.11.13",
@@ -51,10 +52,9 @@
     "seroval": "^1.6.0",
     "seroval-plugins": "^1.6.0",
     "shiki": "^4.3.1",
-    "solid-js": "^1.9.14",
-    "source-map-js": "^1.2.1",
+    "solid-js": "^1.9.15",
     "srvx": "^0.12.4",
-    "terracotta": "^1.1.1",
+    "terracotta": "^1.2.4",
     "vite-plugin-solid": "^2.11.13"
   },
   "devDependencies": {

package/dist/shared/ui/Cascade.css

@@ -1,29 +0,0 @@
-[data-start-cascade] {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  margin-block: 0;
-  list-style-type: none;
-  padding-inline: 0;
-}
-
-[data-start-cascade-option] {
-  border-radius: 0.25rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  outline: none;
-  cursor: pointer;
-
-  transition-property: color, background-color, border-color, box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-
-  white-space: nowrap;
-}
-
-[data-start-cascade-option][tc-active],
-[data-start-cascade-option][tc-selected],
-[data-start-cascade-option]:focus {
-  background-color: rgb(219 234 254);
-  color: rgb(30 58 138);
-}

package/dist/shared/ui/Cascade.d.ts

@@ -1,4 +0,0 @@
-import { Select as BaseSelect, SelectOption as BaseSelectOption } from "terracotta";
-import "./Cascade.css";
-export declare const Cascade: typeof BaseSelect;
-export declare const CascadeOption: typeof BaseSelectOption;

package/dist/shared/ui/Cascade.jsx

@@ -1,4 +0,0 @@
-import { Select as BaseSelect, SelectOption as BaseSelectOption } from "terracotta";
-import "./Cascade.css";
-export const Cascade = props => <BaseSelect data-start-cascade {...props}/>;
-export const CascadeOption = props => (<BaseSelectOption data-start-cascade-option {...props}/>);

package/dist/shared/ui/Dialog.css

@@ -1,25 +0,0 @@
-[data-start-dialog] {
-  position: fixed;
-  inset: 0px;
-  z-index: 50;
-  overflow-y: auto;
-}
-
-[data-start-dialog] > div {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-}
-
-[data-start-dialog-overlay] {
-  position: absolute;
-  inset: 0px;
-  background-color: rgb(17 24 39 / 0.5);
-}
-
-[data-start-dialog-panel] {
-  margin: 2rem;
-  z-index: 10;
-}

package/dist/shared/ui/Dialog.d.ts

@@ -1,5 +0,0 @@
-import { Dialog as BaseDialog, DialogOverlay as BaseDialogOverlay, DialogPanel as BaseDialogPanel } from "terracotta";
-import "./Dialog.css";
-export declare const Dialog: typeof BaseDialog;
-export declare const DialogOverlay: typeof BaseDialogOverlay;
-export declare const DialogPanel: typeof BaseDialogPanel;

package/dist/shared/ui/Dialog.jsx

@@ -1,5 +0,0 @@
-import { Dialog as BaseDialog, DialogOverlay as BaseDialogOverlay, DialogPanel as BaseDialogPanel, } from "terracotta";
-import "./Dialog.css";
-export const Dialog = props => <BaseDialog data-start-dialog {...props}/>;
-export const DialogOverlay = props => (<BaseDialogOverlay data-start-dialog-overlay {...props}/>);
-export const DialogPanel = props => (<BaseDialogPanel data-start-dialog-panel {...props}/>);

package/dist/shared/ui/Table.css

@@ -1,22 +0,0 @@
-[data-start-table] {
-  border: 1px oklch(70.7% 0.165 254.624) solid;
-}
-
-[data-start-table-header] {
-  display: flex;
-  flex-direction: row;
-  background-color: oklch(93.2% 0.032 255.585);
-  font-weight: 600;
-}
-
-[data-start-table-row] {
-  display: flex;
-  flex-direction: row;
-  border-top: 1px oklch(70.7% 0.165 254.624) solid;
-}
-
-[data-start-table-cell] {
-  flex: 1;
-  padding: 0.5rem 1rem;
-  overflow: auto;
-}

package/dist/shared/ui/Table.d.ts

@@ -1,11 +0,0 @@
-import type { ComponentProps, JSX } from "solid-js";
-import "./Table.css";
-type TableProps = ComponentProps<"div">;
-export declare function Table(props: TableProps): JSX.Element;
-type TableHeaderProps = ComponentProps<"div">;
-export declare function TableHeader(props: TableHeaderProps): JSX.Element;
-type TableRowProps = ComponentProps<"div">;
-export declare function TableRow(props: TableRowProps): JSX.Element;
-type TableCellProps = ComponentProps<"div">;
-export declare function TableCell(props: TableCellProps): JSX.Element;
-export {};

package/dist/shared/ui/Table.jsx

@@ -1,13 +0,0 @@
-import "./Table.css";
-export function Table(props) {
-    return <div data-start-table {...props}/>;
-}
-export function TableHeader(props) {
-    return <div data-start-table-header {...props}/>;
-}
-export function TableRow(props) {
-    return <div data-start-table-row {...props}/>;
-}
-export function TableCell(props) {
-    return <div data-start-table-cell {...props}/>;
-}