@neo-ui-kit/react 0.0.0-stage → 1.0.0

package/dist/components/layout/Grid/styles.css

@@ -0,0 +1,90 @@
+/* Styles owned by Grid. The component sets every variable for every breakpoint itself,
+   so each rule reads one variable and nested grids never inherit a parent's values. */
+.ad-grid {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: var(--ad-grid-columns);
+  row-gap: var(--ad-grid-row-gap);
+  column-gap: var(--ad-grid-column-gap);
+  align-items: var(--ad-grid-align);
+  justify-items: var(--ad-grid-justify);
+  justify-content: var(--ad-grid-distribution);
+}
+.ad-grid--auto-fit {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--ad-grid-min-child-width)), 1fr)
+  );
+}
+.ad-grid--dense {
+  grid-auto-flow: dense;
+}
+.ad-grid-item {
+  min-width: 0;
+  grid-column: var(--ad-grid-column-start) / var(--ad-grid-column-end);
+  grid-row: var(--ad-grid-row-start) / var(--ad-grid-row-end);
+}
+@media (min-width: 40rem) {
+  .ad-grid:not(.ad-grid--auto-fit) {
+    grid-template-columns: var(--ad-grid-columns-sm);
+  }
+  .ad-grid {
+    row-gap: var(--ad-grid-row-gap-sm);
+    column-gap: var(--ad-grid-column-gap-sm);
+    align-items: var(--ad-grid-align-sm);
+    justify-items: var(--ad-grid-justify-sm);
+    justify-content: var(--ad-grid-distribution-sm);
+  }
+  .ad-grid-item {
+    grid-column: var(--ad-grid-column-start-sm) / var(--ad-grid-column-end-sm);
+    grid-row: var(--ad-grid-row-start-sm) / var(--ad-grid-row-end-sm);
+  }
+}
+@media (min-width: 56.25rem) {
+  .ad-grid:not(.ad-grid--auto-fit) {
+    grid-template-columns: var(--ad-grid-columns-md);
+  }
+  .ad-grid {
+    row-gap: var(--ad-grid-row-gap-md);
+    column-gap: var(--ad-grid-column-gap-md);
+    align-items: var(--ad-grid-align-md);
+    justify-items: var(--ad-grid-justify-md);
+    justify-content: var(--ad-grid-distribution-md);
+  }
+  .ad-grid-item {
+    grid-column: var(--ad-grid-column-start-md) / var(--ad-grid-column-end-md);
+    grid-row: var(--ad-grid-row-start-md) / var(--ad-grid-row-end-md);
+  }
+}
+@media (min-width: 75rem) {
+  .ad-grid:not(.ad-grid--auto-fit) {
+    grid-template-columns: var(--ad-grid-columns-lg);
+  }
+  .ad-grid {
+    row-gap: var(--ad-grid-row-gap-lg);
+    column-gap: var(--ad-grid-column-gap-lg);
+    align-items: var(--ad-grid-align-lg);
+    justify-items: var(--ad-grid-justify-lg);
+    justify-content: var(--ad-grid-distribution-lg);
+  }
+  .ad-grid-item {
+    grid-column: var(--ad-grid-column-start-lg) / var(--ad-grid-column-end-lg);
+    grid-row: var(--ad-grid-row-start-lg) / var(--ad-grid-row-end-lg);
+  }
+}
+@media (min-width: 96rem) {
+  .ad-grid:not(.ad-grid--auto-fit) {
+    grid-template-columns: var(--ad-grid-columns-xl);
+  }
+  .ad-grid {
+    row-gap: var(--ad-grid-row-gap-xl);
+    column-gap: var(--ad-grid-column-gap-xl);
+    align-items: var(--ad-grid-align-xl);
+    justify-items: var(--ad-grid-justify-xl);
+    justify-content: var(--ad-grid-distribution-xl);
+  }
+  .ad-grid-item {
+    grid-column: var(--ad-grid-column-start-xl) / var(--ad-grid-column-end-xl);
+    grid-row: var(--ad-grid-row-start-xl) / var(--ad-grid-row-end-xl);
+  }
+}

package/dist/components/layout/Header/Header.d.ts

@@ -0,0 +1,2 @@
+import type { HeaderProps } from "../shared";
+export declare const Header: ({ as, level, title, description, eyebrow, icon, actions, compact, ...p }: HeaderProps) => import("react").JSX.Element;

package/dist/components/layout/Header/styles.css

@@ -0,0 +1,42 @@
+/* When the actions do not fit beside the title, they wrap below it instead of squeezing it. */
+.ad-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ad-space-3);
+  min-width: 0;
+}
+.ad-header-copy {
+  flex: 1 1 12rem;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+.ad-header-copy h1,
+.ad-header-copy h2,
+.ad-header-copy h3,
+.ad-header-copy h4 {
+  margin: 0;
+  font-family: var(--ad-font-family-heading);
+  color: var(--ad-text);
+  line-height: var(--ad-line-height-heading);
+  letter-spacing: var(--ad-letter-spacing-heading);
+}
+.ad-header-copy p {
+  margin: var(--ad-space-1) 0 0;
+}
+.ad-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  min-width: 0;
+  max-width: 100%;
+  align-items: center;
+  gap: var(--ad-space-2);
+  margin-inline-start: auto;
+}
+.ad-header[data-ad-compact="true"] {
+  gap: var(--ad-space-2);
+}
+/* A compact header (small cards, panels) keeps its title beside the icon even in a narrow column. */
+.ad-header[data-ad-compact="true"] .ad-header-copy {
+  flex-basis: 4rem;
+}

package/dist/components/layout/Icon/Icon.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type IconProps } from "../shared";
+/** Without `size` the icon takes --ad-icon-size from CSS, so buttons and fields can size it. */
+export declare const Icon: ({ name, size, surface, className, style, label, ...p }: IconProps) => React.JSX.Element;

package/dist/components/layout/Icon/styles.css

@@ -0,0 +1,62 @@
+.ad-icon {
+  --ad-icon-size: 1.5rem;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: var(--ad-icon-size);
+  height: var(--ad-icon-size);
+  color: inherit;
+}
+.ad-icon > [data-ad-component="IconAsset"] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+.ad-icon[data-ad-surface="tile"] {
+  width: calc(var(--ad-icon-size) * 1.8);
+  height: calc(var(--ad-icon-size) * 1.8);
+  padding: calc(var(--ad-icon-size) * 0.34);
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.36);
+  border-radius: calc(var(--ad-radius) * 0.85);
+  background: var(--ad-surface-tile);
+  box-shadow: var(--ad-shadow-tile);
+  color: var(--ad-on-accent);
+}
+/* Tile icons breathe with light (a glow layer fading in and out); hovering lifts the tile and rocks the glyph. */
+.ad-icon[data-ad-surface="tile"] {
+  position: relative;
+  transition:
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.5, 1),
+    border-color 0.3s;
+}
+.ad-icon[data-ad-surface="tile"] > [data-ad-component="IconAsset"] {
+  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.5, 1);
+}
+.ad-icon[data-ad-surface="tile"]:hover {
+  transform: translateY(-0.125rem) scale(1.06);
+  border-color: var(--ad-secondary);
+}
+.ad-icon[data-ad-surface="tile"]:hover > [data-ad-component="IconAsset"] {
+  transform: rotate(-10deg) scale(1.08);
+}
+.ad-icon[data-ad-surface="tile"]::after {
+  content: "";
+  position: absolute;
+  inset: -0.0625rem;
+  border-radius: inherit;
+  box-shadow: 0 0 1rem rgb(from var(--ad-primary) r g b / 0.33);
+  opacity: 0;
+  animation: ad-tile-breathe 4s ease-in-out infinite;
+  pointer-events: none;
+}
+@keyframes ad-tile-breathe {
+  50% {
+    opacity: 1;
+  }
+}

package/dist/components/layout/Illustration/Illustration.d.ts

@@ -0,0 +1,2 @@
+import type { IllustrationProps } from "../shared";
+export declare const Illustration: ({ variant, label, framed, fit, ...p }: IllustrationProps) => import("react").JSX.Element;

package/dist/components/layout/Illustration/styles.css

@@ -0,0 +1,104 @@
+.ad-illustration {
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  min-height: 0;
+}
+.ad-illustration-art {
+  max-width: 100%;
+  max-height: 100%;
+}
+.ad-illustration[data-ad-framed="true"] {
+  padding: var(--ad-space-3);
+  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.3);
+  border-radius: var(--ad-radius);
+  background: var(--ad-surface-glass);
+  box-shadow: var(--ad-shadow-glass);
+}
+/* The artwork floats slowly in a pulsing glow; a framed one gets a living edge. Everything that
+   moves is a layer that is only moved or faded: no filter or gradient is redrawn while it runs. */
+.ad-illustration-art {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  animation: ad-art-float 7s ease-in-out infinite;
+  will-change: transform;
+}
+.ad-illustration-art > [data-ad-component="IllustrationAsset"] {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  filter: hue-rotate(var(--ad-hue-shift, 0deg));
+}
+.ad-illustration-glow {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+.ad-illustration-glow[data-glow="pulse"] {
+  opacity: 0;
+  animation: ad-art-glow 5s ease-in-out infinite;
+  will-change: opacity;
+}
+.ad-illustration[data-ad-framed="true"] {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+/* The edge is a 1px ring (the mask) over a conic light that turns: turning a conic gradient
+   about its centre is the same as sweeping its start angle. */
+.ad-illustration-edge {
+  position: absolute;
+  inset: 0;
+  container-type: size;
+  border-radius: inherit;
+  padding: 0.0625rem;
+  overflow: hidden;
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+  pointer-events: none;
+}
+.ad-illustration-edge::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: hypot(100cqw, 100cqh);
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  background: conic-gradient(
+    transparent 0 70%,
+    var(--ad-secondary),
+    transparent 85%
+  );
+  animation: ad-art-edge 5s linear infinite;
+  will-change: transform;
+}
+@keyframes ad-art-float {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-0.4rem) scale(1.02);
+  }
+}
+@keyframes ad-art-glow {
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes ad-art-edge {
+  to {
+    rotate: 1turn;
+  }
+}

package/dist/components/layout/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,2 @@
+import { type ScrollAreaProps } from "../shared";
+export declare function ScrollArea(p: ScrollAreaProps): import("react").JSX.Element;

package/dist/components/layout/ScrollArea/styles.css

@@ -0,0 +1,61 @@
+/* Styles owned by ScrollArea. */
+.ad-scroll-area {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ad-primary) var(--ad-neutral-900);
+  padding-inline-end: clamp(0.4rem, 0.25rem + 0.35vw, 0.75rem);
+}
+.ad-scroll-area::-webkit-scrollbar {
+  width: clamp(0.45rem, 0.3rem + 0.25vw, 0.7rem);
+  height: clamp(0.45rem, 0.3rem + 0.25vw, 0.7rem);
+}
+.ad-scroll-area::-webkit-scrollbar-track {
+  background: var(--ad-neutral-900);
+  border-radius: 999rem;
+}
+.ad-scroll-area::-webkit-scrollbar-thumb {
+  background: linear-gradient(var(--ad-primary), var(--ad-primary-600));
+  border-radius: 999rem;
+}
+/* Edges fade out only where there is more to scroll (scroll-driven, where supported). */
+@property --ad-fade-top {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --ad-fade-bottom {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@supports (animation-timeline: scroll()) {
+  .ad-scroll-area {
+    mask: linear-gradient(
+      #0000,
+      #000 var(--ad-fade-top),
+      #000 calc(100% - var(--ad-fade-bottom)),
+      #0000
+    );
+    animation: ad-scroll-fade linear both;
+    animation-timeline: scroll(self);
+  }
+}
+@keyframes ad-scroll-fade {
+  0% {
+    --ad-fade-top: 0px;
+    --ad-fade-bottom: 2rem;
+  }
+  10%,
+  90% {
+    --ad-fade-top: 2rem;
+    --ad-fade-bottom: 2rem;
+  }
+  100% {
+    --ad-fade-top: 2rem;
+    --ad-fade-bottom: 0px;
+  }
+}

package/dist/components/layout/Stack/Stack.d.ts

@@ -0,0 +1,21 @@
+import type { ElementType, HTMLAttributes, ReactNode, Ref } from "react";
+import { type Breakpoint, type Responsive, type Spacing } from "../../../core/responsive";
+export type StackDirection = "row" | "column" | "row-reverse" | "column-reverse";
+export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+export type StackWrap = "nowrap" | "wrap" | "wrap-reverse";
+export type StackBreakpoint = Breakpoint;
+export type StackResponsive<T> = Responsive<T>;
+export type StackSpacing = Spacing;
+export interface StackProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+    as?: ElementType;
+    ref?: Ref<HTMLElement>;
+    direction?: StackResponsive<StackDirection>;
+    gap?: StackResponsive<StackSpacing>;
+    align?: StackResponsive<StackAlign>;
+    justify?: StackResponsive<StackJustify>;
+    wrap?: StackResponsive<StackWrap | boolean>;
+    divider?: ReactNode;
+    inline?: boolean;
+}
+export declare function Stack({ as: Component, direction, gap, align, justify, wrap, divider, inline, children, className, style, ...props }: StackProps): import("react").JSX.Element;

package/dist/components/layout/Stack/styles.css

@@ -0,0 +1,53 @@
+/* Styles owned by Stack. The component sets every variable for every breakpoint itself,
+   so each rule reads one variable and nested stacks never inherit a parent's values. */
+.ad-stack {
+  display: flex;
+  min-width: 0;
+  flex-direction: var(--ad-stack-direction);
+  gap: var(--ad-stack-gap);
+  align-items: var(--ad-stack-align);
+  justify-content: var(--ad-stack-justify);
+  flex-wrap: var(--ad-stack-wrap);
+}
+.ad-stack--inline {
+  display: inline-flex;
+}
+.ad-stack__divider {
+  display: contents;
+}
+@media (min-width: 40rem) {
+  .ad-stack {
+    flex-direction: var(--ad-stack-direction-sm);
+    gap: var(--ad-stack-gap-sm);
+    align-items: var(--ad-stack-align-sm);
+    justify-content: var(--ad-stack-justify-sm);
+    flex-wrap: var(--ad-stack-wrap-sm);
+  }
+}
+@media (min-width: 56.25rem) {
+  .ad-stack {
+    flex-direction: var(--ad-stack-direction-md);
+    gap: var(--ad-stack-gap-md);
+    align-items: var(--ad-stack-align-md);
+    justify-content: var(--ad-stack-justify-md);
+    flex-wrap: var(--ad-stack-wrap-md);
+  }
+}
+@media (min-width: 75rem) {
+  .ad-stack {
+    flex-direction: var(--ad-stack-direction-lg);
+    gap: var(--ad-stack-gap-lg);
+    align-items: var(--ad-stack-align-lg);
+    justify-content: var(--ad-stack-justify-lg);
+    flex-wrap: var(--ad-stack-wrap-lg);
+  }
+}
+@media (min-width: 96rem) {
+  .ad-stack {
+    flex-direction: var(--ad-stack-direction-xl);
+    gap: var(--ad-stack-gap-xl);
+    align-items: var(--ad-stack-align-xl);
+    justify-content: var(--ad-stack-justify-xl);
+    flex-wrap: var(--ad-stack-wrap-xl);
+  }
+}

package/dist/components/layout/StatTile/StatTile.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface StatTileProps extends CommonProps {
+    /** Icon in the glowing ring. */
+    icon?: string;
+    /** The headline number or short value. */
+    value: ReactNode;
+    /** What the value counts. */
+    label: ReactNode;
+    /** Makes the whole tile a button, e.g. to open the list behind the number. */
+    onClick?: () => void;
+    /** Lean toward the pointer with a glare. */
+    tilt?: boolean;
+    /** A count bubble on the corner, e.g. new requests waiting. */
+    badge?: ReactNode;
+    /** Name of the badge for screen readers. */
+    badgeLabel?: string;
+}
+/** A headline number: an icon in a glowing ring with a spark, the value large, its label below. */
+export declare function StatTile({ icon, value, label, onClick, tilt, badge, badgeLabel, ...p }: StatTileProps): import("react").JSX.Element;

package/dist/components/layout/StatTile/styles.css

@@ -0,0 +1,90 @@
+/* Styles owned by StatTile: a glass card with a glowing icon ring; it grows to share a row with its siblings. */
+.ad-stat-tile {
+  position: relative;
+  flex: 1 1 11rem;
+  min-width: 0;
+}
+.ad-stat-tile-badge {
+  position: absolute;
+  top: calc(var(--ad-space-2) * -1);
+  right: calc(var(--ad-space-2) * -1);
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  min-inline-size: 1.5rem;
+  block-size: 1.5rem;
+  padding-inline: 0.4rem;
+  border-radius: var(--ad-radius-pill);
+  background: var(--ad-primary);
+  color: #fff;
+  font-size: var(--ad-font-size-caption);
+  font-weight: var(--ad-font-weight-bold);
+  box-shadow: 0 0 0.75rem var(--ad-primary);
+}
+.ad-stat-tile-badge::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: 0 0 1.4rem var(--ad-primary);
+  opacity: 0;
+  animation: ad-stat-tile-pulse 2s ease-in-out infinite;
+}
+@keyframes ad-stat-tile-pulse {
+  50% {
+    opacity: 1;
+  }
+}
+button.ad-stat-tile {
+  padding: 0;
+  border: 0;
+  border-radius: var(--ad-radius-lg);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+button.ad-stat-tile:focus-visible {
+  outline: 0.125rem solid var(--ad-focus);
+  outline-offset: 0.2rem;
+}
+.ad-stat-tile-card.ad-card {
+  display: flex;
+  gap: var(--ad-space-4);
+  align-items: center;
+  height: 100%;
+}
+.ad-stat-tile-icon {
+  position: relative;
+  display: grid;
+  flex: none;
+  place-items: center;
+  inline-size: clamp(3rem, 5vw, 4.25rem);
+  aspect-ratio: 1;
+  border: 0.0625rem solid var(--ad-primary);
+  border-radius: 50%;
+  color: var(--ad-primary);
+  --ad-icon-size: 1.6rem;
+  background: radial-gradient(circle, rgb(from var(--ad-primary) r g b / 0.16), var(--ad-neutral-950) 68%);
+  box-shadow:
+    inset 0 0 1rem rgb(from var(--ad-primary) r g b / 0.16),
+    0 0 1rem rgb(from var(--ad-primary) r g b / 0.3);
+}
+.ad-stat-tile-spark {
+  position: absolute;
+  inset: 0.3rem 0.15rem auto auto;
+  --ad-icon-size: 0.75rem;
+  animation: ad-stat-tile-twinkle 3.2s ease-in-out infinite;
+}
+.ad-stat-tile-text {
+  display: grid;
+  gap: var(--ad-space-1);
+  min-width: 0;
+}
+@keyframes ad-stat-tile-twinkle {
+  50% {
+    opacity: 0.35;
+    scale: 0.8;
+  }
+}

package/dist/components/layout/TabPanel/TabPanel.d.ts

@@ -0,0 +1,2 @@
+import { type TabPanelProps } from "../shared";
+export declare const TabPanel: (p: TabPanelProps) => import("react").JSX.Element;

package/dist/components/layout/TabPanel/styles.css

@@ -0,0 +1,16 @@
+/* Styles owned by TabPanel: the content of each newly selected tab glides in. */
+.ad-tab-panel {
+  padding: 1.125rem;
+  color: var(--ad-muted);
+  font-size: 0.8125rem;
+}
+.ad-tab-panel-content {
+  animation: ad-panel-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+@keyframes ad-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+    filter: blur(0.2rem);
+  }
+}

package/dist/components/layout/Text/Text.d.ts

@@ -0,0 +1,2 @@
+import { type TextProps } from "../shared";
+export declare const Text: ({ as, ...p }: TextProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/layout/Text/styles.css

@@ -0,0 +1,29 @@
+/* Legacy lightweight text component. Typography is the full type system. */
+.ad-text {
+  font-family: var(--ad-font-family-sans);
+  font-size: var(--ad-font-size-body);
+  line-height: var(--ad-line-height-body);
+  color: var(--ad-text);
+}
+.ad-text[data-ad-variant="body"] {
+  font-size: var(--ad-font-size-body);
+  line-height: var(--ad-line-height-body);
+}
+.ad-text[data-ad-variant="title"] {
+  font-size: var(--ad-font-size-title);
+  font-weight: var(--ad-font-weight-semibold);
+  line-height: var(--ad-line-height-title);
+  letter-spacing: var(--ad-letter-spacing-title);
+}
+.ad-text[data-ad-variant="muted"] {
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-body-sm);
+}
+.ad-text[data-ad-variant="eyebrow"] {
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  font-weight: var(--ad-font-weight-bold);
+  line-height: var(--ad-line-height-compact);
+  letter-spacing: var(--ad-letter-spacing-eyebrow);
+  text-transform: uppercase;
+}

package/dist/components/layout/Toolbar/Toolbar.d.ts

@@ -0,0 +1,12 @@
+export declare const Toolbar: {
+    (p: import("../../..").CommonProps): import("react").DetailedReactHTMLElement<{
+        id: string | undefined;
+        className: string;
+        style: import("../../..").TokenStyle | undefined;
+        "data-ad-component": string;
+        "data-ad-material": import("../../..").Material | undefined;
+        "data-ad-size": import("../../..").ControlSize | undefined;
+        "data-ad-tone": import("../../..").Tone | undefined;
+    }, HTMLElement>;
+    displayName: string;
+};

package/dist/components/layout/Toolbar/styles.css

@@ -0,0 +1,7 @@
+/* Styles owned by Toolbar. */
+.ad-toolbar {
+  padding: 0.8125rem;
+  background: var(--ad-surface-shell);
+  border: 0.0625rem solid rgb(from var(--ad-primary-700) r g b / 0.37);
+  border-radius: 0.9375rem;
+}