@lolmath/ui 9.6.0 → 9.7.0

package/dist/index.css

@@ -1646,6 +1646,83 @@
 		}
 	}
 }
+@layer lol {
+	._previewButton_sepr8_2 {
+		appearance: none;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+
+		/*
+		 * Not `pointer`: the preview opens on hover, so a hand would promise a
+		 * click that does nothing, and the term is not a link. This is the arrow
+		 * a `<button>` gets from the browser anyway, spelled out because a host's
+		 * CSS reset may have decided otherwise.
+		 */
+		cursor: default;
+
+		/*
+		 * The term belongs to the sentence around it, so everything but the face
+		 * is inherited: size, weight, leading and colour come from the paragraph.
+		 * `font: inherit` also resets the family, hence the override after it.
+		 */
+		font: inherit;
+		font-family: var(--lol-font-family-spiegel);
+		/* A button is an inline-block; without this it rides above the text. */
+		vertical-align: baseline;
+		text-align: inherit;
+
+		color: var(--lol-color-gold-100);
+
+		/*
+		 * An underline rather than a border-bottom: it follows the term when it
+		 * wraps, sits under the descenders instead of clipping them, and can go
+		 * from dashed to solid without moving anything on the line.
+		 */
+		text-decoration: underline dashed var(--lol-preview-underline-color);
+		text-decoration-thickness: 1px;
+		text-underline-offset: 0.25em;
+
+		--lol-preview-underline-color: var(--lol-color-gold-400);
+
+		transition: color, text-decoration-color;
+		transition-duration: 0.3s;
+
+		outline-style: solid;
+		outline-color: var(--lol-color-gold-400);
+		outline-offset: 2px;
+
+		&:not(:focus-visible) {
+			outline: none;
+		}
+
+		&:hover,
+		&:focus-visible {
+			--lol-preview-underline-color: var(--lol-color-gold-200);
+		}
+
+		/*
+		 * Once the preview is open the dashes have done their job — they hint that
+		 * there is more to read, and there now is — so they close up into a rule.
+		 * `aria-expanded` is set by whichever trigger wraps the button, so this
+		 * also covers a `DialogTrigger` used as a toggle tip.
+		 */
+		&[aria-expanded="true"] {
+			--lol-preview-underline-color: var(--lol-color-gold-200);
+			text-decoration-style: solid;
+		}
+
+		&:active {
+			color: var(--lol-color-gold-300);
+		}
+
+		&:disabled {
+			color: var(--lol-color-grey-150);
+			--lol-preview-underline-color: var(--lol-color-grey-150);
+		}
+	}
+}
 @layer lol {
 	._wrapper_1jgc6_2 {
 		display: flex;

package/dist/index.d.mts

@@ -223,6 +223,41 @@ declare function NumberField({ inputProps, groupProps, children, preset, size, .
 declare function Popover({ children, className, ...props }: PopoverProps): import("react").JSX.Element;
 declare function PopoverBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 //#endregion
+//#region src/components/preview-trigger.d.ts
+declare const previewButton: (props?: ({
+  class?: import("cva").ClassValue;
+  className?: never;
+} | {
+  class?: never;
+  className?: import("cva").ClassValue;
+}) | undefined) => string;
+type PreviewButtonProps = ButtonProps & {
+  ref?: Ref<HTMLButtonElement>;
+};
+/**
+ * A term inside running text that reveals a preview: it inherits the size,
+ * weight and leading of the sentence it sits in and marks itself with a dashed
+ * gold underline, which goes solid while the preview is open.
+ *
+ * Use it as the trigger of a `PreviewTrigger` for a term the reader may not
+ * know — an item, a rune, a stat — where a `Button` would interrupt the
+ * sentence and a plain `<span>` would give a keyboard or screen reader user
+ * nothing to act on. It is a real button, so it also works as the trigger of a
+ * `DialogTrigger` (a toggle tip). When the term should also navigate
+ * somewhere, use a `ButtonLink` or apply the exported `previewButton` styles
+ * to a `Link` instead — a preview is never the only way to reach content.
+ *
+ * ```tsx
+ * <PreviewTrigger>
+ *   <PreviewButton>Doran's Blade</PreviewButton>
+ *   <Popover>
+ *     <PopoverBody>…</PopoverBody>
+ *   </Popover>
+ * </PreviewTrigger>
+ * ```
+ */
+declare function PreviewButton({ children, className, ref, ...props }: PreviewButtonProps): import("react").JSX.Element;
+//#endregion
 //#region src/components/progress-bar.d.ts
 interface ProgressBarProps$1 extends Omit<ProgressBarProps, "children"> {
   label?: string;
@@ -795,5 +830,5 @@ interface VerticalTableProps<T> extends Omit<TableHTMLAttributes<HTMLTableElemen
  */
 declare function VerticalTable<T>({ align, className, fields, recordHeader, recordKey, records, ...props }: VerticalTableProps<T>): import("react").JSX.Element;
 //#endregion
-export { type AsyncListData, type AsyncListOptions, Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, ButtonPreset, ButtonShape, ButtonSize, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, CalendarProps, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, type DateValue, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, type DragAndDropHooks, type DragAndDropOptions, type DropItem, type DropTarget, FieldError, Focusable, GridLayout, Group, GroupInput, GroupProps, GroupSeparator, Heading, HeadingColor, HeadingElement, type Key, Label, ListBoxItem, type ListData, ListLayout, Menu, MenuHeader, MenuItem, type MenuItemProps, MenuPopover, type MenuProps, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, MultipleSelectProps, NumberField, PickerDateInput, Popover, PopoverBody, Pressable, PreviewTrigger, type PreviewTriggerProps, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, RangeCalendarProps, ResizableTableContainer, ResizableTableContainerProps, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, type Selection, Size, Slider, SliderOutput, Sonner, SonnerProps, type SortDescriptor, type SortDirection, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableAlign, TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableColumnResizer, TableColumnResizerProps, TableDropIndicator, TableDropIndicatorProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableLayout, TableLoadMoreItem, TableLoadMoreItemProps, TableProps, TableRow, TableRowProps, Tabs, Tag, TagGroup, TagGroupProps, TagList, TagListProps, TagProps, Text, TextArea, TextColor, type TextDropItem, TextElement, TextField, TextPreset, TimeField, type TimeValue, ToastVariant, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonPreset, Token, TokenField, type TokenFieldValue, TokenInput, TokenInputProps, TokenProps, Toolbar, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps, Tree, TreeItem, TreeItemContent, TreeItemContentProps, TreeItemProps, TreeLoadMoreItem, TreeLoadMoreItemProps, TreeProps, UnstyledPopover, VerticalTable, VerticalTableAlign, VerticalTableField, VerticalTableProps, Virtualizer, WaterfallLayout, button, dateGroup, dateInput, group, heading, isTextDropItem, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, token, tokenInput, tree, treeItem, useAsyncList, useDragAndDrop, useFilter, useListData, useTableDragAndDrop, verticalTable, verticalTableCell, verticalTableRecordHeader };
+export { type AsyncListData, type AsyncListOptions, Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, ButtonPreset, ButtonShape, ButtonSize, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, CalendarProps, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, type DateValue, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, type DragAndDropHooks, type DragAndDropOptions, type DropItem, type DropTarget, FieldError, Focusable, GridLayout, Group, GroupInput, GroupProps, GroupSeparator, Heading, HeadingColor, HeadingElement, type Key, Label, ListBoxItem, type ListData, ListLayout, Menu, MenuHeader, MenuItem, type MenuItemProps, MenuPopover, type MenuProps, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, MultipleSelectProps, NumberField, PickerDateInput, Popover, PopoverBody, Pressable, PreviewButton, PreviewButtonProps, PreviewTrigger, type PreviewTriggerProps, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, RangeCalendarProps, ResizableTableContainer, ResizableTableContainerProps, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, type Selection, Size, Slider, SliderOutput, Sonner, SonnerProps, type SortDescriptor, type SortDirection, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableAlign, TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableColumnResizer, TableColumnResizerProps, TableDropIndicator, TableDropIndicatorProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableLayout, TableLoadMoreItem, TableLoadMoreItemProps, TableProps, TableRow, TableRowProps, Tabs, Tag, TagGroup, TagGroupProps, TagList, TagListProps, TagProps, Text, TextArea, TextColor, type TextDropItem, TextElement, TextField, TextPreset, TimeField, type TimeValue, ToastVariant, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonPreset, Token, TokenField, type TokenFieldValue, TokenInput, TokenInputProps, TokenProps, Toolbar, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps, Tree, TreeItem, TreeItemContent, TreeItemContentProps, TreeItemProps, TreeLoadMoreItem, TreeLoadMoreItemProps, TreeProps, UnstyledPopover, VerticalTable, VerticalTableAlign, VerticalTableField, VerticalTableProps, Virtualizer, WaterfallLayout, button, dateGroup, dateInput, group, heading, isTextDropItem, previewButton, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, token, tokenInput, tree, treeItem, useAsyncList, useDragAndDrop, useFilter, useListData, useTableDragAndDrop, verticalTable, verticalTableCell, verticalTableRecordHeader };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -1096,6 +1096,39 @@ function PopoverBody({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/preview-trigger.tsx
+const previewButton = cva({ base: { "previewButton": "_previewButton_sepr8_2" }.previewButton });
+/**
+* A term inside running text that reveals a preview: it inherits the size,
+* weight and leading of the sentence it sits in and marks itself with a dashed
+* gold underline, which goes solid while the preview is open.
+*
+* Use it as the trigger of a `PreviewTrigger` for a term the reader may not
+* know — an item, a rune, a stat — where a `Button` would interrupt the
+* sentence and a plain `<span>` would give a keyboard or screen reader user
+* nothing to act on. It is a real button, so it also works as the trigger of a
+* `DialogTrigger` (a toggle tip). When the term should also navigate
+* somewhere, use a `ButtonLink` or apply the exported `previewButton` styles
+* to a `Link` instead — a preview is never the only way to reach content.
+*
+* ```tsx
+* <PreviewTrigger>
+*   <PreviewButton>Doran's Blade</PreviewButton>
+*   <Popover>
+*     <PopoverBody>…</PopoverBody>
+*   </Popover>
+* </PreviewTrigger>
+* ```
+*/
+function PreviewButton({ children, className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Button$1, {
+		ref,
+		...props,
+		className: composeRenderProps(className, (className) => previewButton({ className })),
+		children
+	});
+}
+//#endregion
 //#region src/components/progress-bar.module.css
 var progress_bar_module_default = {
 	"wrapper": "_wrapper_1jgc6_2",
@@ -2116,6 +2149,6 @@ function VerticalTable({ align = "start", className, fields, recordHeader, recor
 	});
 }
 //#endregion
-export { Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, FieldError, Focusable, GridLayout, Group, GroupInput, GroupSeparator, Heading, Label, ListBoxItem, ListLayout, Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, NumberField, PickerDateInput, Popover, PopoverBody, Pressable, PreviewTrigger, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, ResizableTableContainer, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, Size, Slider, SliderOutput, Sonner, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableColumnResizer, TableDropIndicator, TableFooter, TableHeader, TableLayout, TableLoadMoreItem, TableRow, Tabs, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Token, TokenField, TokenFieldValue, TokenInput, Toolbar, ToolbarSeparator, Tree, TreeItem, TreeItemContent, TreeLoadMoreItem, UnstyledPopover, VerticalTable, Virtualizer, WaterfallLayout, button, dateGroup, dateInput, group, heading, isTextDropItem, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, token, tokenInput, tree, treeItem, useAsyncList, useDragAndDrop, useFilter, useListData, useTableDragAndDrop, verticalTable, verticalTableCell, verticalTableRecordHeader };
+export { Autocomplete, AutocompleteContext, AutocompleteStateContext, Breadcrumb, Breadcrumbs, Button, ButtonLink, Calendar, CalendarCell, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarIcon, Checkbox, CheckboxButton, CheckboxField, Collection, DateField, DateInput, DatePicker, DatePickerButton, DatePickerPopover, DateRangePicker, DateSegment, Dialog, DialogButtons, DialogHeading, DialogTrigger, Disclosure, DisclosureButton, DisclosureGroup, DisclosurePanel, Divider, FieldError, Focusable, GridLayout, Group, GroupInput, GroupSeparator, Heading, Label, ListBoxItem, ListLayout, Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuSeparator, MenuTrigger, MenuVirtualizer, Modal, MultipleSelect, NumberField, PickerDateInput, Popover, PopoverBody, Pressable, PreviewButton, PreviewTrigger, ProgressBar, Radio, RadioButton, RadioField, RadioGroup, RangeCalendar, ResizableTableContainer, RouterProvider, SearchField, Select, SelectButton, SelectListBox, SelectListBoxItem, SelectPopover, SelectValue, SelectVirtualizer, Size, Slider, SliderOutput, Sonner, Spinner, SubmenuTrigger, Switch, SwitchButton, SwitchField, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableColumn, TableColumnResizer, TableDropIndicator, TableFooter, TableHeader, TableLayout, TableLoadMoreItem, TableRow, Tabs, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Token, TokenField, TokenFieldValue, TokenInput, Toolbar, ToolbarSeparator, Tree, TreeItem, TreeItemContent, TreeLoadMoreItem, UnstyledPopover, VerticalTable, Virtualizer, WaterfallLayout, button, dateGroup, dateInput, group, heading, isTextDropItem, previewButton, select, sonner, table, tableCell, tableColumn, tableRow, tagGroup, tagList, text, textField, token, tokenInput, tree, treeItem, useAsyncList, useDragAndDrop, useFilter, useListData, useTableDragAndDrop, verticalTable, verticalTableCell, verticalTableRecordHeader };
 
 //# sourceMappingURL=index.mjs.map