@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/brand/brandMark.d.ts

@@ -0,0 +1,26 @@
+/** @internal The mark's box: a block that never shrinks in a flex row, recolored on `duration.fast`. */
+export declare const BRAND_MARK_SVG_CSS: import("@linaria/core").LinariaClassName;
+/** @internal The brand mark's color: the monochrome fill, `solid.primary.background` (`text.primary`). */
+export declare const BRAND_MARK_CSS: import("@linaria/core").LinariaClassName;
+/** @internal The wordmarks' color: type follows the monochrome hierarchy, `text.primary`. */
+export declare const BRAND_MARK_NEUTRAL_CSS: import("@linaria/core").LinariaClassName;
+/** @internal Any mark on an inverted fill (`text.primary`): `background.base`. */
+export declare const BRAND_MARK_INVERSE_CSS: import("@linaria/core").LinariaClassName;
+/**
+ * @internal What `brandMarkAriaProps` returns: a named image (`role="img"` + `aria-label`) or a
+ * decorative mark (`aria-hidden`). Each key is always present, `undefined` when unused, so a mark
+ * can set them as explicit attributes before its `...rest` spread.
+ */
+export interface BrandMarkAriaProps {
+    /** `"img"` when the mark is named. */
+    role: "img" | undefined;
+    /** The accessible name, when the mark is named. */
+    "aria-label": string | undefined;
+    /** `true` when the mark is decorative. */
+    "aria-hidden": true | undefined;
+}
+/**
+ * @internal A non-empty `ariaLabel` names the mark (`role="img"`); anything else makes it
+ * decorative (`aria-hidden`). Applied before `...rest` so an explicit `aria-*` passthrough wins.
+ */
+export declare function brandMarkAriaProps(ariaLabel: string | undefined): BrandMarkAriaProps;

package/dist/brand/brandMark.js

@@ -0,0 +1,35 @@
+/* empty css                    */
+//#region src/brand/brandMark.ts
+/**
+* @internal Shared by the five brand components (`GalaxyLogomark`, `GalaxyWordmark`,
+* `GalaxyFilamentWordmark`, `GalaxyLogomarkAnimation`, `GalaxyLogomark3D`); not documented API.
+*
+* The marks are one inline SVG painted with `fill="currentColor"`, so their color is CSS: exactly
+* one of the color classes below sets `color` on the mark. One class never overrides another, so
+* the stylesheet order of the extracted CSS cannot change a mark's color.
+*/
+/** @internal The mark's box: a block that never shrinks in a flex row, recolored on `duration.fast`. */
+var BRAND_MARK_SVG_CSS = "gx-brandMark-BRAND_MARK_SVG_CSS-b6b0vfg";
+/** @internal The brand mark's color: the monochrome fill, `solid.primary.background` (`text.primary`). */
+var BRAND_MARK_CSS = "gx-brandMark-BRAND_MARK_CSS-bqqro87";
+/** @internal The wordmarks' color: type follows the monochrome hierarchy, `text.primary`. */
+var BRAND_MARK_NEUTRAL_CSS = "gx-brandMark-BRAND_MARK_NEUTRAL_CSS-bpwrsap";
+/** @internal Any mark on an inverted fill (`text.primary`): `background.base`. */
+var BRAND_MARK_INVERSE_CSS = "gx-brandMark-BRAND_MARK_INVERSE_CSS-b1iep03c";
+/**
+* @internal A non-empty `ariaLabel` names the mark (`role="img"`); anything else makes it
+* decorative (`aria-hidden`). Applied before `...rest` so an explicit `aria-*` passthrough wins.
+*/
+function brandMarkAriaProps(ariaLabel) {
+	return ariaLabel ? {
+		role: "img",
+		"aria-label": ariaLabel,
+		"aria-hidden": void 0
+	} : {
+		role: void 0,
+		"aria-label": void 0,
+		"aria-hidden": true
+	};
+}
+//#endregion
+export { BRAND_MARK_CSS, BRAND_MARK_INVERSE_CSS, BRAND_MARK_NEUTRAL_CSS, BRAND_MARK_SVG_CSS, brandMarkAriaProps };

package/dist/buttons/Button.d.ts

@@ -1,71 +1,160 @@
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
-import { DropdownPosition } from "../dropdown/Dropdown";
-export interface ButtonProps {
-    /** Button text. Omit for an icon-only button and set `ariaLabel` instead. */
-    label?: string;
-    /** Phosphor icon *component* — pass `PlusIcon`, not `<PlusIcon />`. */
-    icon?: PhosphorIcon;
-    /** @default ButtonVariant.PRIMARY */
-    variant?: ButtonVariant;
-    /** @default ButtonSize.MEDIUM */
-    size?: ButtonSize;
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Blocks `onClick` and disables the button. Renders no spinner. */
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    /** Render the icon after the label instead of before. */
-    isIconTrailing?: boolean;
-    /** Use the icon's filled weight instead of bold. */
-    isIconFilled?: boolean;
-    /** Truncate a long label with an ellipsis instead of growing the button. */
-    isEllipsis?: boolean;
-    /** Stretch to the parent's width. */
-    fillWidth?: boolean;
-    cursor?: React.CSSProperties["cursor"];
-    /**
-     * Renders a split button: the button plus a caret segment that opens an
-     * anchored dropdown of advanced actions. Pass a render function to receive
-     * `close` for dismissing the panel from a menu item.
-     */
-    contentWhenDropdown?: React.ReactNode | ((args: {
-        close: () => void;
-    }) => React.ReactNode);
-    /** Placement of the caret dropdown. @default DropdownPosition.BOTTOM_END */
-    dropdownPosition?: DropdownPosition;
-    /** Accessible name for the caret segment. @default "More actions" */
-    dropdownAriaLabel?: string;
-    /** Accessible name — required when the button renders an icon with no label. */
-    ariaLabel?: string;
-    ariaExpanded?: boolean;
-    ariaControls?: string;
-    ariaHasPopup?: boolean;
-}
-/** Visual weight. One PRIMARY per view; TERTIARY is the transparent variant. */
+import { type AriaAttributes, type CSSProperties, type ElementType, type FocusEventHandler, type MouseEvent, type MouseEventHandler, type ReactNode } from "react";
+import { type DropdownSlot } from "../dropdown/Dropdown.js";
+/** Mode (Constitution V-A local mode set, declared in `scripts/lint-dls.ts` `MODE_SETS`). */
 export declare enum ButtonVariant {
+    /** Monochrome solid (`solid.primary`): the one main action in a view. The default. */
     PRIMARY = "PRIMARY",
-    PRIMARY_ALT = "PRIMARY_ALT",
+    /** Panel fill with a hairline border. */
     SECONDARY = "SECONDARY",
+    /** Transparent until hovered. */
     TERTIARY = "TERTIARY",
-    SUCCESS = "SUCCESS",
+    /**
+     * Muted fill (`solid.neutral`: `background.secondary` with a `text.primary` label), no border: a
+     * quiet filled action. Hover and press are clearly visible steps in both themes.
+     */
+    BASE = "BASE",
+    /** Error solid (`solid.error`): destructive actions only. */
     ERROR = "ERROR"
 }
-/** Control height — 24 / 28 / 32px. Also drives label and icon size. */
+/** Canonical rungs; Button supports all five. */
 export declare enum ButtonSize {
+    /** 20px tall, `caption` label, 13px icon, 10px caret. */
+    X_SMALL = "X_SMALL",
+    /** 24px tall, `body_sm` label, 13px icon, 10px caret. */
     SMALL = "SMALL",
+    /** 32px tall, `body_md` label, 15px icon, 12px caret. The default (1.x `MEDIUM` was 28px). */
     MEDIUM = "MEDIUM",
-    LARGE = "LARGE"
+    /** 36px tall, `body_lg` label, 15px icon, 12px caret. */
+    LARGE = "LARGE",
+    /** 40px tall, `body_lg` label, 17px icon, 12px caret. */
+    X_LARGE = "X_LARGE"
+}
+/** Every Button prop except the accessible-name pair (`label` / `ariaLabel`). */
+export interface ButtonBaseProps extends AriaAttributes {
+    /** Phosphor icon component: `PlusIcon`, not `<PlusIcon />`. Sized to the rung and colored by the variant. */
+    icon?: PhosphorIcon;
+    /**
+     * Put `icon` after the label instead of before it.
+     * @default false
+     */
+    isIconTrailing?: boolean;
+    /** Content before the icon and label when `icon` is not enough (an `Avatar`, a `Beacon`). Must not be interactive. */
+    leading?: ReactNode;
+    /** Content after the label (a count `Chip`, a caret `Icon`). Must not be interactive. */
+    trailing?: ReactNode;
+    /**
+     * Shortcut shown as `Kbd` caps after the label, in `useHotkey` grammar (`["mod", "enter"]`). On
+     * an icon-only button it shows in the tooltip instead. Display only unless `shouldBindHotKey`.
+     */
+    hotKeys?: string[];
+    /**
+     * Also bind `hotKeys` with `useHotkey`: pressing the shortcut clicks the button.
+     * @default false
+     */
+    shouldBindHotKey?: boolean;
+    /**
+     * Mode: solid, bordered, transparent, muted fill, or destructive. Use one `PRIMARY` per view.
+     * @default ButtonVariant.PRIMARY
+     */
+    variant?: ButtonVariant;
+    /**
+     * Control rung: 20 / 24 / 32 / 36 / 40px tall.
+     * @default ButtonSize.MEDIUM
+     */
+    size?: ButtonSize;
+    /**
+     * Form behavior of the `<button>`. Ignored when `href` is set.
+     * @default "button"
+     */
+    type?: "button" | "submit" | "reset";
+    /** Renders an `<a>` with button styling. */
+    href?: string;
+    /**
+     * With `href`: opens in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) and adds a
+     * trailing arrow plus visually hidden "(opens in a new tab)".
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * Router link component that renders the `<a>` when `href` is set. It receives `href` and must
+     * forward its `ref`. Ignored without `href`.
+     * @default "a"
+     */
+    as?: ElementType;
+    /**
+     * Wraps the button in a `Tooltip` with this body. Pass `""` instead of `undefined` when it
+     * toggles, so the button does not remount.
+     */
+    tooltip?: ReactNode;
+    /**
+     * Secondary options of the main action, behind a caret segment (split button). Opens a
+     * `Dropdown` below the button, end-aligned. A function receives `{ close }`. 1.x:
+     * `contentWhenDropdown`.
+     */
+    dropdown?: DropdownSlot;
+    /**
+     * Blocks activation and shows the disabled look.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Blocks activation, shows a spinning ring (Spinner's, at the icon's size) in place of the icon (or centered over the content), and
+     * keeps the width.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Pressed / toggled look. When passed, the button is announced as a toggle (`aria-pressed`, or
+     * `aria-current="page"` on a link).
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Pill radius. An icon-only round button is a circle.
+     * @default false
+     */
+    isRound?: boolean;
+    /**
+     * Stretch to the parent's width. Content stays centered.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Called on activation. Not called while disabled or loading. */
+    onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Focus passthrough to the root (used by triggers that wrap Button). */
+    onFocus?: FocusEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /** Blur passthrough to the root (used by triggers that wrap Button). */
+    onBlur?: FocusEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /** Pointer-enter passthrough to the root (kept from 1.x). */
+    onMouseEnter?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /** Pointer-leave passthrough to the root (kept from 1.x). */
+    onMouseLeave?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /** DOM id on the root. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A visible label, optionally with an accessible name that starts with it. */
+interface ButtonLabelledProps {
+    /** Visible text. Omit it for an icon-only button and set `ariaLabel` instead. */
+    label: string;
+    /** Accessible name. With a `label`, it must start with the visible label text (WCAG 2.5.3). */
+    ariaLabel?: string;
+}
+/** No visible label: the accessible name is required. */
+interface ButtonUnlabelledProps {
+    /** Visible text. Omit it for an icon-only button and set `ariaLabel` instead. */
+    label?: undefined;
+    /** Accessible name. Required when there is no `label`. */
+    ariaLabel: string;
 }
-/**
- * The standard action control. Renders a label, an icon, or both.
- *
- * `isLoading` and `isDisabled` behave identically at the DOM level — both set
- * `disabled` on the `<button>` and swallow `onClick`. Loading is a lockout, not
- * a spinner; render your own indicator alongside if you need one.
- *
- * With `contentWhenDropdown`, renders as a split button: a caret segment after
- * a hairline divider opens an anchored dropdown of advanced actions.
- */
-declare const Button: ({ label, icon, variant, size, onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, contentWhenDropdown, dropdownPosition, dropdownAriaLabel, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup, }: ButtonProps) => import("react").JSX.Element;
+/** Button props. Without a `label`, `ariaLabel` is required by the type. */
+export type ButtonProps = ButtonBaseProps & (ButtonLabelledProps | ButtonUnlabelledProps);
+/** The standard action control: a label, an icon or both, in one of four modes and five rungs. */
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Button;