@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.14

package/DS1/4-page/styles/ds-footer.css

@@ -0,0 +1,29 @@
+/* ds-footer.css */
+/* The element places the block; 1-root/footer.css draws it and controls.css
+   the buttons. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+/* A brand of the page's own takes the mark's line; a slotted legal line its words. */
+::slotted([slot="brand"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--ds-unit) / 2);
+  align-self: flex-start;
+  height: var(--ds-unit);
+  color: inherit;
+  text-decoration: none;
+}
+
+::slotted([slot="legal"]) {
+  margin: 0;
+  font: inherit;
+}

package/DS1/4-page/styles/ds-grid.css

@@ -1,95 +1,41 @@
-/* ds-grid.css */
-/* Grid layout component styles */
-
+/* A one-square pitch by default. Rules stay hairlines at every surface scale. */
 :host {
-  margin-top: 0.5px !important;
-  margin-left: 0.5px !important;
-  display: grid;
-  width: 1440px;
-  height: 1280px;
-  grid-template-columns: repeat(auto-fill, 19px);
-  grid-template-rows: repeat(auto-fill, 19px);
-  gap: 1px;
-  row-rule: calc(1px * var(--sf)) solid var(--grid-color);
-  column-rule: calc(1px * var(--sf)) solid var(--grid-color);
-  outline: calc(1px * var(--sf)) solid light-dark(var(--sharp-blue), var(--yellow));
+  --grid-scale: var(--ds-sf, var(--sf, 1));
+  display: block;
   position: fixed;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
+  width: var(--ds-grid-width, calc(1440px * var(--grid-scale)));
+  height: var(--ds-grid-height, max(100vh, calc(1280px * var(--grid-scale))));
   pointer-events: none;
-  z-index: 300;
+  z-index: var(--ds-grid-z-index, 300);
 }
-
-/* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
-:host(.mobile) {
-  width: calc(100% - calc(1px * var(--sf)));
-  max-width: 100vw;
-  margin-left: 0.5px !important;
-  margin-top: 0 !important;
-  box-sizing: border-box;
-  position: fixed;
-  top: calc(0.5px * var(--sf));
-  left: 50%;
-  transform: translateX(-50%);
-  pointer-events: none;
-  z-index: 300;
-  gap: calc(1px * var(--sf));
-  grid-template-columns: repeat(14, calc(19px * var(--sf)));
-  grid-template-rows: repeat(auto-fill, calc(19px * var(--sf)));
-}
-
-:host([align="left"]) {
-  left: 0;
-  transform: none;
-}
-
-:host([align="center"]) {
-  left: 50%;
-  transform: translateX(-50%);
+:host([hidden]) { display: none !important; }
+:host([align="left"]) { left: 0; transform: none; }
+:host([align="right"]) { left: auto; right: 0; transform: none; }
+@media (max-width: 768px) {
+  :host { width: calc(100% - 1px); max-width: 100vw; }
 }
-
-:host([align="right"]) {
-  left: auto;
-  right: 0;
-  transform: none;
+/* The containing element establishes positioning; its content stays above the paper. */
+:host([contained]) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; z-index: 0; }
+.paper {
+  position: absolute;
+  inset: 0;
+  --cell: var(--ds-grid-unit, calc(var(--pitch-x) * var(--grid-scale)));
+  --row: var(--ds-grid-row, calc(var(--pitch-y) * var(--grid-scale)));
+  --stroke: var(--ds-grid-stroke, 1px);
+  background-color: var(--paper);
+  background-size: var(--cell) var(--row);
+  background-position: calc(var(--ds-grid-origin-x, 0px) - var(--stroke) / 2) calc(var(--ds-grid-origin-y, 0px) - var(--stroke) / 2);
+  background-repeat: repeat;
 }
-
-/* Visible 19px tracks when CSS Gap Decorations (`row-rule`) is unavailable */
-@supports not (row-rule: 1px solid black) {
-  :host {
-    background-image:
-      repeating-linear-gradient(
-        to right,
-        transparent 0,
-        transparent 19px,
-        var(--grid-color) 19px,
-        var(--grid-color) 20px
-      ),
-      repeating-linear-gradient(
-        to bottom,
-        transparent 0,
-        transparent 19px,
-        var(--grid-color) 19px,
-        var(--grid-color) 20px
-      );
-  }
-
-  :host(.mobile) {
-    background-image:
-      repeating-linear-gradient(
-        to right,
-        transparent 0,
-        transparent calc(19px * var(--sf, 1)),
-        var(--grid-color) calc(19px * var(--sf, 1)),
-        var(--grid-color) calc(20px * var(--sf, 1))
-      ),
-      repeating-linear-gradient(
-        to bottom,
-        transparent 0,
-        transparent calc(19px * var(--sf, 1)),
-        var(--grid-color) calc(19px * var(--sf, 1)),
-        var(--grid-color) calc(20px * var(--sf, 1))
-      );
-  }
+[data-pattern="grid"] { background-image: linear-gradient(to right, var(--ink) var(--stroke), transparent var(--stroke)), linear-gradient(to bottom, var(--ink) var(--stroke), transparent var(--stroke)); }
+[data-pattern="lines"] { background-image: linear-gradient(to bottom, var(--ink) var(--stroke), transparent var(--stroke)); }
+[data-pattern="columns"] { background-image: linear-gradient(to right, var(--ink) var(--stroke), transparent var(--stroke)); }
+[data-pattern="dots"] {
+  background-image: radial-gradient(circle, var(--ink) var(--stroke), transparent var(--stroke));
+  background-position: var(--ds-grid-origin-x, 0px) calc(var(--ds-grid-origin-y, 0px) - var(--row) / 2);
 }
+[data-pattern="none"] { background-image: none; }
+@media print { :host(:not([contained])) { display: none; } }

package/DS1/4-page/styles/ds-header.css

@@ -0,0 +1,57 @@
+/* ds-header.css */
+/* The element places the row; 1-root/header.css draws it, drawer.css its
+   drawer and controls.css the buttons. The links are the page's own, slotted:
+   they take the navigation's look here, and a page's own link styles win. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([sticky]) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+::slotted(a) {
+  display: block;
+  height: var(--ds-unit);
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: var(--ds-unit);
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: transparent;
+  text-underline-offset: calc(2px * var(--ds-sf));
+  white-space: nowrap;
+}
+
+::slotted(a:hover) {
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+}
+
+::slotted(a[aria-current]:not([aria-current="false"])) {
+  text-decoration-color: currentColor;
+}
+
+::slotted(a:focus-visible) {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: 1px;
+}
+
+/* A brand of the page's own takes the brand's line. */
+::slotted([slot="brand"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--ds-unit) / 2);
+  height: var(--ds-unit);
+  color: inherit;
+  text-decoration: none;
+}

package/DS1/4-page/styles/ds-page.css

@@ -0,0 +1,214 @@
+@import "../../1-root/component-metrics.css";
+
+/* ds-page.css
+ * Five areas, six arrangements. Every width is whole squares; areas are
+ * separated by one square down the page and two across. An empty area takes
+ * no room, so its margin goes with it.
+ */
+
+:host {
+  --ds-page-nav: calc(12 * var(--ds-unit));
+  --ds-page-aside: calc(12 * var(--ds-unit));
+  --ds-page-measure: calc(32 * var(--ds-unit));
+  --ds-page-tile: calc(12 * var(--ds-unit));
+  --ds-page-gap: calc(2 * var(--ds-unit));
+  --ds-page-line: var(--ds-border-color, var(--ds-slate-light));
+  /* How far the content stands outside its column on each side, the column's place and the
+     grid's lines kept: a phone's lists take a little more width, their words a longer line
+     (Money sets 4px). Zero by default. */
+  --ds-page-bleed: 0px;
+  box-sizing: border-box;
+  display: block;
+  container-type: inline-size;
+  min-width: 0;
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+
+:host([hidden]) { display: none; }
+:host([fill]) { height: 100%; }
+
+.page {
+  box-sizing: border-box;
+  display: grid;
+  column-gap: var(--ds-page-gap);
+  grid-template-columns: var(--ds-page-nav) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  grid-template-areas:
+    "nav header"
+    "nav main"
+    "nav aside"
+    "nav footer";
+  min-height: 100%;
+  padding: var(--ds-unit) calc(var(--ds-unit) - var(--ds-page-bleed));
+}
+
+:host([fill]) .page { height: 100%; }
+
+.area { position: relative; min-width: 0; }
+/* The drawer's menu button: shown only on a narrow page with `drawer`. */
+.bar { display: none; grid-area: bar; }
+.bar[hidden] { display: none !important; }
+.area[data-empty] { display: none; }
+.nav { grid-area: nav; }
+.header { grid-area: header; margin-block-end: var(--ds-unit); }
+.main { grid-area: main; }
+.aside { grid-area: aside; margin-block-start: var(--ds-unit); }
+.footer { grid-area: footer; margin-block-start: var(--ds-unit); }
+
+:host([fill]) :is(.nav, .main, .aside) { min-height: 0; overflow: auto; }
+
+/* List and detail: a wider leading column holds the list. */
+:host([layout="split"]) { --ds-page-nav: calc(16 * var(--ds-unit)); }
+
+/* Inspector: navigation, the work, and its properties beside it. */
+:host([layout="inspector"]) .page {
+  grid-template-columns: var(--ds-page-nav) minmax(0, 1fr) var(--ds-page-aside);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    "nav header aside"
+    "nav main aside"
+    "nav footer aside";
+}
+:host([layout="inspector"]) .aside { margin-block-start: 0; }
+
+/* One column down the middle; centred is narrower and sits in the middle of
+ * the height it is given. Tiles fill the width with 12-square tiles.
+ *
+ * A centred column stands on a whole square. The room beside it is shared out
+ * and rounded down to squares, then added to the page's own square of padding,
+ * so when the room is an odd number of squares the extra one falls on the
+ * trailing side instead of leaving the column on a half. 100% is the width of
+ * the element; with less room than the measure needs, the padding stays one
+ * square and the column takes what is left. */
+:host(:is([layout="column"], [layout="centered"], [layout="tiles"])) .page {
+  grid-template-columns: minmax(0, calc(var(--ds-page-measure) + 2 * var(--ds-page-bleed)));
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+  grid-template-areas: "header" "nav" "main" "aside" "footer";
+}
+:host(:is([layout="column"], [layout="centered"])) .page {
+  justify-content: start;
+  padding-inline-start: calc(var(--ds-unit) + max(0px, round(down, calc((100% - 2 * var(--ds-unit) - var(--ds-page-measure)) / 2), var(--ds-unit))) - var(--ds-page-bleed));
+}
+:host(:is([layout="column"], [layout="centered"], [layout="tiles"])) .nav { margin-block-end: var(--ds-unit); }
+
+:host([layout="centered"]) { --ds-page-measure: calc(16 * var(--ds-unit)); }
+:host([layout="centered"]) .page { grid-template-rows: auto; align-content: center; }
+
+:host([layout="tiles"]) .page { grid-template-columns: minmax(0, 1fr); }
+:host([layout="tiles"]) .main {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, var(--ds-page-tile));
+  grid-auto-rows: auto;
+  gap: var(--ds-unit);
+  align-items: start;
+  align-content: start;
+}
+:host([layout="tiles"]) .main ::slotted(*) { min-width: 0; }
+:host([layout="tiles"]) .main ::slotted([data-tile="wide"]) { grid-column: span 2; }
+:host([layout="tiles"]) .main ::slotted([data-tile="full"]) { grid-column: 1 / -1; }
+
+/* Hairlines between columns, on the grid line in the middle of the gap. The
+ * column reaches across half the gap to draw it, so its content keeps its
+ * whole width. */
+:host([divided]:not([layout="column"]):not([layout="centered"]):not([layout="tiles"])) .nav {
+  border-inline-end: 1px solid var(--ds-page-line);
+  padding-inline-end: calc(var(--ds-page-gap) / 2 - 1px);
+  margin-inline-end: calc(var(--ds-page-gap) / -2);
+}
+:host([divided][layout="inspector"]) .aside {
+  border-inline-start: 1px solid var(--ds-page-line);
+  padding-inline-start: calc(var(--ds-page-gap) / 2 - 1px);
+  margin-inline-start: calc(var(--ds-page-gap) / -2);
+}
+
+/* Narrower than navigation, the work and its properties: properties go below. */
+@container (max-width: 959px) {
+  :host([layout="inspector"]) .page {
+    grid-template-columns: var(--ds-page-nav) minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr) auto auto;
+    grid-template-areas:
+      "nav header"
+      "nav main"
+      "nav aside"
+      "nav footer";
+  }
+  :host([layout="inspector"]) .aside { margin-block-start: var(--ds-unit); }
+  :host([divided][layout="inspector"]) .aside { border-inline-start: 0; padding-inline-start: 0; margin-inline-start: 0; }
+}
+
+/* Phone width: every layout is one column, navigation first. */
+@container (max-width: 599px) {
+  .page,
+  :host([layout="inspector"]) .page {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto;
+    grid-template-areas: "nav" "header" "main" "aside" "footer";
+    column-gap: 0;
+    align-content: start;
+  }
+  .nav { margin-block-end: var(--ds-unit); }
+  :host([divided]:not([layout="column"]):not([layout="centered"]):not([layout="tiles"])) .nav {
+    border-inline-end: 0;
+    padding-inline-end: 0;
+    margin-inline-end: 0;
+    border-block-end: 1px solid var(--ds-page-line);
+    padding-block-end: calc(var(--ds-unit) - 1px);
+  }
+  :host([fill]) :is(.nav, .main, .aside) { overflow: visible; }
+  :host([fill]) .page { height: auto; }
+  :host([layout="tiles"]) .main { display: flex; flex-direction: column; align-items: stretch; }
+}
+
+/* Phone width with a drawer: the navigation folds away and the menu button
+ * stands in a one-square column before the header. In the drawer the
+ * navigation takes the panel's width, with none of the page's margins. */
+@container (max-width: 599px) {
+  :host([drawer]) .page,
+  :host([drawer][layout="inspector"]) .page {
+    grid-template-columns: var(--ds-unit) minmax(0, 1fr);
+    column-gap: var(--ds-unit);
+    grid-template-areas: "bar header" "main main" "aside aside" "footer footer";
+  }
+  :host([drawer]) .bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--ds-unit);
+    margin-block-end: var(--ds-unit);
+  }
+  :host([drawer]) .page > .nav { display: none; }
+}
+/* Important, as the layouts' own margins and hairlines for the navigation
+ * reach it by more specific selectors. */
+.ds-drawer > .nav {
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: visible !important;
+}
+
+/* Inspection: each area outlined and named by its slot, in the corner its
+ * content is least likely to use. */
+:host([view]) .area:not([data-empty]) {
+  outline: 1px dashed color-mix(in srgb, var(--ds-pink) 80%, var(--ds-text-color));
+  outline-offset: -1px;
+}
+:host([view]) .area:not([data-empty])::before {
+  content: attr(data-area);
+  position: absolute;
+  z-index: 1;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  height: var(--ds-unit);
+  padding-inline: calc(4px * var(--ds-sf));
+  font-size: var(--ds-type-size-small);
+  line-height: var(--ds-unit);
+  color: var(--ds-black);
+  background: var(--ds-pink);
+  pointer-events: none;
+}

package/DS1/components.ts

@@ -2,7 +2,6 @@
 export * from "./2-core/ds-button";
 export * from "./2-core/ds-text";
 export * from "./2-core/ds-input";
-export * from "./2-core/ds-textarea";
 export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";
 export * from "./2-core/ds-tooltip";
@@ -11,3 +10,10 @@ export * from "./3-unit/ds-list";
 export * from "./3-unit/ds-menu";
 export * from "./3-unit/ds-tabs";
 export * from "./4-page/ds-panel";
+export * from "./4-page/ds-page";
+
+export * from "./3-unit/ds-sidebar";
+
+export * from "./4-page/ds-grid";
+
+export * from "./2-core/ds-chart";

package/DS1/index.ts

@@ -26,35 +26,39 @@ export * from "./0-face/i18n";
 export * from "./0-face/languages";
 export * from "./0-face/language-routing";
 export * from "./0-face/translations-format";
+export * from "./0-face/format";
 export * from "./0-face/preferences";
 export * from "./0-face/pricing";
 export * from "./0-face/theme";
+export * from "./0-face/keys";
+export * from "./0-face/sidebar";
 
 // ============================================================================
 // 2-core: Core Components
 // ============================================================================
 
-export * from "./2-core/ds-banner";
 export * from "./2-core/ds-badge";
 export * from "./2-core/ds-button";
 export * from "./2-core/ds-checkbox";
 export * from "./2-core/ds-radio";
 export * from "./2-core/ds-switch";
-export * from "./2-core/ds-split";
 export * from "./2-core/ds-select";
 export * from "./2-core/ds-color";
 export * from "./2-core/ds-swatch";
 export * from "./2-core/ds-card";
 export * from "./2-core/ds-cycle";
-export * from "./2-core/ds-date";
+export * from "./2-core/ds-empty";
 export * from "./2-core/ds-gap";
 export * from "./2-core/ds-icon";
 export * from "./2-core/ds-input";
+export * from "./2-core/ds-kbd";
 export * from "./2-core/ds-file-picker";
-export * from "./2-core/ds-textarea";
 export * from "./2-core/ds-composer";
-export * from "./2-core/ds-language";
+export * from "./2-core/ds-notice";
+export * from "./2-core/ds-stat";
+export * from "./2-core/ds-progress";
 export * from "./2-core/ds-text";
+export * from "./2-core/ds-toast";
 export * from "./2-core/ds-tooltip";
 
 // ============================================================================
@@ -64,8 +68,13 @@ export * from "./2-core/ds-tooltip";
 export * from "./3-unit/ds-accordion";
 export * from "./2-core/ds-avatar";
 export * from "./3-unit/ds-avatar-group";
+export * from "./3-unit/ds-calendar";
+export * from "./3-unit/ds-calendar-large";
+export * from "./3-unit/ds-carousel";
+export * from "./3-unit/ds-date-picker";
 export * from "./3-unit/ds-form";
 export * from "./3-unit/ds-list";
+export * from "./3-unit/ds-matrix";
 export * from "./3-unit/ds-row";
 export * from "./3-unit/ds-table";
 
@@ -75,7 +84,10 @@ export * from "./3-unit/ds-table";
 
 export * from "./4-page/ds-container";
 export * from "./4-page/ds-grid";
-export * from "./4-page/ds-layout";
+export * from "./4-page/ds-page";
+export * from "./4-page/ds-header";
+export * from "./4-page/ds-footer";
+export * from "./4-page/ds-document";
 
 export * from "./3-unit/ds-menu";
 export * from "./3-unit/ds-tabs";
@@ -84,3 +96,11 @@ export * from "./4-page/ds-dialog";
 
 export * from "./2-core/ds-token";
 export * from "./3-unit/ds-token-field";
+
+export * from "./3-unit/ds-sidebar";
+
+export * from "./2-core/ds-chart";
+
+export * from "./2-core/ds-spacing-handle";
+export * from "./2-core/ds-loading";
+export * from "./0-face/component-visibility";

package/DS1/react/avatar.ts

@@ -17,6 +17,7 @@ export type AvatarProps = Omit<HTMLAttributes<AvatarElement>, "children"> &
       | "pending"
       | "plain"
       | "color"
+      | "ink"
     >
   >;
 /** Browser-only registration stays in the product's runtime entry for SSR. */
@@ -24,14 +25,12 @@ export const Avatar = forwardRef<AvatarElement, AvatarProps>(function Avatar(pro
   return createElement("ds-avatar", { ...props, ref });
 });
 
-export type LogoProps = Omit<AvatarProps, "shape" | "size" | "fit" | "mask" | "plain"> & {
-  src: string;
-};
-/** A monochrome brand mark fitted into the page's image area. */
+export type LogoProps = Omit<AvatarProps, "size" | "fit" | "mask" | "plain" | "shape">;
+/** A monochrome brand mark fitted into the page's image area; without `src`, its `initial`. */
 export const Logo = forwardRef<AvatarElement, LogoProps>(function Logo(props, ref) {
   return createElement("ds-avatar", {
     size: "fill",
-    shape: "square",
+    logo: true,
     fit: "contain",
     mask: true,
     plain: true,

package/DS1/react/button-split.ts

@@ -0,0 +1,29 @@
+/** Controlled state for Button's split mode. The shared Button owns its face. */
+import { createElement, useEffect, useLayoutEffect, useRef, type CSSProperties, type ReactNode, type Ref } from "react";
+import type { Button as ButtonElement, SplitSegment } from "../2-core/ds-button";
+export type { SplitSegment };
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export interface SplitButtonProps<T extends string> {
+  split: true; segments: ReadonlyArray<SplitSegment<T>>; value?: T;
+  onPress: (value: T) => void; label: string; className?: string; style?: CSSProperties;
+  disabled?: boolean; compact?: boolean;
+}
+export function SplitButton<T extends string>({ segments, value, onPress, label, className, style, disabled = false, compact = false, forwardedRef }: SplitButtonProps<T> & { forwardedRef?: Ref<ButtonElement> }): ReactNode {
+  const ref = useRef<ButtonElement | null>(null);
+  useCommitEffect(() => {
+    const element = ref.current; if (!element) return;
+    element.split = true; element.segments = segments; element.value = value ?? "";
+    element.actions = value === undefined; element.disabled = disabled; element.compact = compact; element.literal = true;
+    const press = (event: Event) => {
+      if (event.target !== element) return;
+      if (event.type === "change") event.preventDefault();
+      onPress((event as CustomEvent<{ value: T }>).detail.value);
+    };
+    element.addEventListener("change", press); element.addEventListener("press", press);
+    return () => { element.removeEventListener("change", press); element.removeEventListener("press", press); };
+  });
+  return createElement("ds-button", { ref: (element: ButtonElement | null) => {
+    ref.current = element;
+    if (typeof forwardedRef === "function") forwardedRef(element); else if (forwardedRef) forwardedRef.current = element;
+  }, split: true, "aria-label": label, className, style });
+}

package/DS1/react/button.ts

@@ -1,12 +1,17 @@
 /** Native semantics and React events; the shared Lit element owns the face. */
-import { createElement, forwardRef, type AnchorHTMLAttributes, type ButtonHTMLAttributes } from "react";
+import { createElement, forwardRef, type AnchorHTMLAttributes, type ReactElement, type RefAttributes, type Ref, type ButtonHTMLAttributes } from "react";
+import { SplitButton, type SplitButtonProps } from "./button-split";
+export type { SplitButtonProps, SplitSegment } from "./button-split";
 import type { Button as ButtonElement } from "../2-core/ds-button";
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
-  Partial<Pick<ButtonElement, "primary" | "secondary" | "active" | "choice" | "icon" | "wide" | "fit" | "danger" | "menuItem">>;
+  Partial<Pick<ButtonElement, "primary" | "secondary" | "active" | "choice" | "icon" | "wide" | "fixed" | "fit" | "danger" | "menuItem">>;
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  {
+const ButtonControl = forwardRef<HTMLButtonElement, ButtonProps | SplitButtonProps<string>>(function Button(
+  props, ref,
+) {
+  if ("split" in props && props.split) return createElement(SplitButton, { ...props, forwardedRef: ref as unknown as Ref<ButtonElement> });
+  const {
     children,
     className,
     style,
@@ -16,16 +21,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     choice,
     icon,
     wide,
+    fixed,
     fit,
     danger,
     menuItem,
     disabled,
     hidden,
     type = "button",
-    ...props
-  },
-  ref,
-) {
+    ...nativeProps
+  } = props as ButtonProps;
   return createElement(
     "ds-button",
     {
@@ -36,6 +40,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       choice,
       icon,
       wide,
+      fixed,
       fit,
       danger,
       menuItem,
@@ -44,18 +49,32 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       className,
       style,
     },
-    createElement("button", { ...props, ref, type, disabled, hidden }, children),
+    createElement("button", { ...nativeProps, ref, type, disabled, hidden }, children),
   );
 });
 
-/** A real link: browser navigation, context menus and modifier clicks survive. */
+export const Button = ButtonControl as unknown as {
+  <const T extends string>(props: SplitButtonProps<T> & RefAttributes<ButtonElement>): ReactElement | null;
+  (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
+  displayName?: string;
+};
+
+/**
+ * A real link: browser navigation, context menus and modifier clicks survive.
+ * As `<ds-button href>`: `target="_blank"` gets `rel="noopener noreferrer"`
+ * unless `rel` is given, and a disabled link loses its `href` and `target`, is
+ * left out of the tab order and stays a link (`role="link"`, `aria-disabled`).
+ */
 export type ButtonLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> &
-  Partial<Pick<ButtonElement, "primary" | "secondary" | "active" | "choice" | "icon" | "wide" | "fit" | "danger" | "menuItem">> & {disabled?: boolean};
+  Partial<Pick<ButtonElement, "primary" | "secondary" | "active" | "choice" | "icon" | "wide" | "fixed" | "fit" | "danger" | "menuItem">> & {disabled?: boolean};
 export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(function ButtonLink(
-  {children, className, style, primary, secondary, active, choice, icon, wide, fit, danger, menuItem, disabled, hidden, href, onClick, onAuxClick, tabIndex, ...props}, ref,
+  {children, className, style, primary, secondary, active, choice, icon, wide, fixed, fit, danger, menuItem, disabled, hidden, href, target, rel, role, onClick, onAuxClick, tabIndex, ...props}, ref,
 ) {
-  return createElement("ds-button", {control: "slotted", primary, secondary, active, choice, icon, wide, fit, danger, menuItem, disabled, hidden, className, style},
+  return createElement("ds-button", {control: "slotted", primary, secondary, active, choice, icon, wide, fixed, fit, danger, menuItem, disabled, hidden, className, style},
     createElement("a", {...props, ref, href: disabled ? undefined : href, hidden,
+      target: disabled ? undefined : target,
+      rel: disabled ? undefined : rel ?? (target === "_blank" ? "noopener noreferrer" : undefined),
+      role: role ?? (disabled ? "link" : undefined),
       "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : tabIndex,
       onClick: event => { if (disabled) { event.preventDefault(); event.stopPropagation(); } else onClick?.(event); },
       onAuxClick: event => { if (disabled) { event.preventDefault(); event.stopPropagation(); } else onAuxClick?.(event); },