@blakesteve/roster 2.9.4 → 3.0.0

package/README.md

@@ -2,16 +2,16 @@
 
 A production-grade atomic component library built with **React 19**, **TypeScript**, **Tailwind CSS v4**, and **Vite**.
 
-Roster ships a curated set of accessible, theme-aware components organized around the Atomic Design methodology — atoms, molecules, and organisms — each with Storybook documentation and full test coverage.
+Roster ships a curated set of accessible, theme-aware components organized around the Atomic Design methodology (atoms, molecules, and organisms), each with Storybook documentation and full test coverage.
 
 ## Features
 
-- **Atomic Design** — components organized as atoms, molecules, and organisms
-- **TypeScript first** — fully typed props with exported variant types for maximum DX
-- **Adaptive dark mode** — class-based toggling (`.dark`) independent of OS preferences
-- **`"use client"` pre-bundled** — all outputs include the directive for seamless Next.js App Router integration
-- **Accessible** — interactive components powered by [`@headlessui/react`](https://headlessui.com) and [`@radix-ui`](https://radix-ui.com)
-- **Tree-shakeable** — import only what you need
+- **Atomic Design**: components organized as atoms, molecules, and organisms
+- **TypeScript first**: fully typed props with exported variant types for maximum DX
+- **Adaptive dark mode**: class-based toggling (`.dark`) independent of OS preferences
+- **`"use client"` pre-bundled**: all outputs include the directive for seamless Next.js App Router integration
+- **Accessible**: interactive components powered by [`@headlessui/react`](https://headlessui.com) and [`@radix-ui`](https://radix-ui.com)
+- **Tree-shakeable**: import only what you need
 
 ## Installation
 
@@ -19,7 +19,7 @@ Roster ships a curated set of accessible, theme-aware components organized aroun
 npm install @blakesteve/roster
 ```
 
-Roster ships pre-compiled CSS — you do not need Tailwind installed in your host app to use it.
+Roster ships pre-compiled CSS, so you do not need Tailwind installed in your host app to use it.
 
 ### Peer dependencies
 
@@ -30,12 +30,25 @@ Roster ships pre-compiled CSS — you do not need Tailwind installed in your hos
 }
 ```
 
+`DataTable` additionally needs TanStack Table v9, declared as an **optional**
+peer. Install it only if you use `DataTable`; every other component works
+without it.
+
+```bash
+npm install @tanstack/react-table
+```
+
+It is a peer rather than a bundled dependency because v9 types column
+definitions against the feature set that built the table. Two copies of the
+package would mean two incompatible sets of those types, so roster and your
+app have to resolve the same one.
+
 ## Setup
 
 Import Roster's CSS once at the root of your application (`layout.tsx`, `main.tsx`, or `App.tsx`):
 
 ```tsx
-// Compiled component styles — always required
+// Compiled component styles (always required)
 import "@blakesteve/roster/style.css";
 
 // Default design tokens (color palette, spacing, radius)
@@ -43,6 +56,41 @@ import "@blakesteve/roster/style.css";
 import "@blakesteve/roster/tokens.css";
 ```
 
+### Import Roster before Tailwind
+
+If your app uses Tailwind, import Roster's CSS **before** it:
+
+```css
+/* globals.css */
+@import "@blakesteve/roster/tokens.css";
+@import "@blakesteve/roster/style.css";
+@import "tailwindcss";
+```
+
+Roster ships its styles inside a `roster` cascade layer, and CSS orders layers
+by *first registration*. Importing Roster first places its layer beneath your
+app's own utilities, so your styles always win. Import it second and the
+opposite happens: Roster's `.block` starts beating your `dark:hidden`, and
+variants fail silently with the rule present in the stylesheet.
+
+### The global reset is opt-in
+
+Roster ships **no** preflight. A component library has no business resetting
+its host's document, so importing Roster will not change your headings, lists,
+or box sizing.
+
+Roster's components do assume that normalization exists, though. If your app
+runs Tailwind, you already have it and there is nothing to do. If it does not,
+opt in, before the component styles:
+
+```tsx
+import "@blakesteve/roster/preflight.css";
+import "@blakesteve/roster/style.css";
+```
+
+Skip it and components render against browser defaults: serif type, bulleted
+lists, and `content-box` sizing.
+
 ## Quick start
 
 ```tsx
@@ -75,27 +123,30 @@ function App() {
 |---|---|
 | `Avatar` | User avatar with image, initials fallback, and optional popover |
 | `Badge` | Status label with semantic color schemes and fill variants |
-| `Button` | Primary interactive element — solid, soft, outline, ghost, link variants |
+| `Button` | Primary interactive element: solid, soft, outline, ghost, link variants |
 | `Card` | Bordered surface container |
 | `Checkbox` | Accessible checkbox with label support |
 | `Disclosure` | Show/hide toggle using HeadlessUI |
 | `Input` | Text input with label, error state, and icon slots |
 | `Link` | Styled anchor with variant support |
+| `PasswordInput` | Password field with a show/hide reveal toggle |
+| `Pill` | Inline phrase chrome: social proof, live state, applied filters |
 | `AvatarStrip` | Stacked avatar row with overflow chip, dismiss button, trailing slot, and label area |
 | `CollapsibleSection` | Clamps any content (prose, chips, image grids) to a fixed height with a fade and expand/collapse toggle |
-| `LiquidTabs` | Controlled tab strip with a liquid sliding pill indicator — pill and filled variants |
+| `LiquidTabs` | Controlled tab strip with a liquid sliding pill indicator: pill and filled variants |
 | `Select` | Dropdown selector |
 | `SegmentBar` | Proportional horizontal bar divided into colored segments with optional legend |
 | `Spinner` | Loading indicator |
 | `Switch` | Toggle switch |
 | `Textarea` | Multi-line text input |
-| `Tooltip` | Radix-powered tooltip — hover/focus on desktop, tap-to-toggle on mobile |
+| `Tooltip` | Radix-powered tooltip: hover/focus on desktop, tap-to-toggle on mobile |
 
 ### Molecules
 
 | Component | Description |
 |---|---|
 | `Accordion` | Collapsible content sections (single or multi-expand) |
+| `Alert` | Inline notice strip with optional title and dismiss |
 | `Breadcrumbs` | Navigation trail |
 | `CallToAction` | Prominent hero-style CTA block |
 | `EmptyState` | Zero-data placeholder with icon and action slot |
@@ -108,12 +159,39 @@ function App() {
 |---|---|
 | `ActionBar` | Sticky bottom action strip |
 | `Countdown` | Live countdown timer |
-| `DataTable` | Full-featured table with sorting and pagination via TanStack Table |
+| `DataTable` | Full-featured table with sorting and pagination via TanStack Table v9 (see [DataTable columns](#datatable-columns)) |
 | `Dialog` | Modal dialog |
 | `Footer` | Site footer |
 | `Navbar` | Responsive navigation bar with mobile slide-out |
 | `Table` | Static data table |
 
+### DataTable columns
+
+TanStack Table v9 types column definitions against the feature set that built
+the table. `DataTable` registers sorting and pagination and exports that set as
+`RosterTableFeatures`, so your columns name it:
+
+```tsx
+import { DataTable, type RosterTableFeatures } from "@blakesteve/roster";
+import { createColumnHelper, type ColumnDef } from "@tanstack/react-table";
+
+type Player = { name: string; points: number };
+
+const columns: ColumnDef<RosterTableFeatures, Player>[] = [
+  { accessorKey: "name", header: "Player" },
+  { accessorKey: "points", header: "Points" },
+];
+
+// Or, to keep each column's value type:
+const helper = createColumnHelper<RosterTableFeatures, Player>();
+```
+
+Upgrading from roster 2.x: `ColumnDef<Player, unknown>` becomes
+`ColumnDef<RosterTableFeatures, Player>`, and `DataTableProps` takes one type
+argument instead of two. A columns array is heterogeneous, so v9 types each
+entry's value as `unknown` and recovers the real type per column through
+`createColumnHelper`.
+
 ### Hooks
 
 | Hook | Description |
@@ -155,8 +233,9 @@ Output in `dist/`:
 |---|---|
 | `roster.es.js` | ES module bundle |
 | `roster.umd.js` | UMD bundle |
-| `roster.css` | Compiled component styles |
+| `roster.css` | Compiled component styles, in the `roster` cascade layer |
 | `tokens.css` | Design token CSS variables |
+| `preflight.css` | Optional global reset (see Setup) |
 | `index.d.ts` | TypeScript definitions |
 
 ## Contributing

package/dist/components/atoms/Button/Button.d.ts

@@ -5,6 +5,16 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     isLoading?: boolean;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
+    /**
+     * Which surface the button sits on.
+     *
+     * Roster's dark styling keys off an ancestor carrying `.dark`, so a button
+     * placed on a hard-coded dark panel that never carries that class (a
+     * campfire overlay, a lantern-night backdrop) falls back to the LIGHT
+     * styles and flashes a near-white hover. Pass `surface="dark"` to force the
+     * dark treatment regardless of the app's theme.
+     */
+    surface?: "auto" | "dark";
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/components/atoms/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { InputProps } from '../Input/Input';
+export interface PasswordInputProps extends Omit<InputProps, "type" | "endIcon"> {
+    /**
+     * Whether to render the reveal toggle at all. Turn it off where policy
+     * forbids showing the value on screen.
+     */
+    revealable?: boolean;
+    /** Starts revealed. Uncontrolled; pair with `onRevealChange` to observe. */
+    defaultRevealed?: boolean;
+    /** Controls the reveal state. Pass with `onRevealChange` for a controlled field. */
+    revealed?: boolean;
+    /** Fires whenever the reveal state changes, controlled or not. */
+    onRevealChange?: (revealed: boolean) => void;
+    /** Accessible label for the toggle while the value is hidden. */
+    showLabel?: string;
+    /** Accessible label for the toggle while the value is visible. */
+    hideLabel?: string;
+}
+/**
+ * A password field with a reveal toggle: the pattern every sign-in form needs
+ * and nobody should rewrite.
+ *
+ * Wraps `Input`, so labels, helper and error text, and every variant behave
+ * exactly as they do everywhere else. The toggle is a real button: keyboard
+ * reachable, `type="button"` so it never submits the form, and disabled
+ * alongside the field.
+ */
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+export { PasswordInput };

package/dist/components/atoms/Pill/Pill.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { pillVariants } from './pill-variants';
+export interface PillProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillVariants> {
+    children: React.ReactNode;
+    /** Leading status dot, in the pill's color scheme. */
+    dot?: boolean;
+    /**
+     * Animates the dot for genuinely live state: "Live now", "12 watching".
+     * Requires `dot`. Honors `prefers-reduced-motion`, in which case the dot
+     * still renders, it just stops moving.
+     */
+    pulse?: boolean;
+    /** Leading icon or avatar. Ignored when `dot` is set. */
+    leadingIcon?: React.ReactNode;
+}
+/**
+ * Inline chrome for a short phrase: social proof, live state, an applied
+ * filter. See pill-variants.ts for how this differs from Badge.
+ */
+declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLSpanElement>>;
+export { Pill };

package/dist/components/atoms/Pill/pill-variants.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Pill vs Badge.
+ *
+ * Badge is a compact label attached to something else: a count on an avatar,
+ * a status on a table row. It is sized to sit in a corner.
+ *
+ * Pill is standalone inline chrome carrying a short phrase: social proof
+ * ("3 friends voted"), live state ("Live now"), or a filter that reads as a
+ * sentence fragment. It is always fully rounded, has roomier horizontal
+ * padding so words breathe, and can lead with a status dot.
+ */
+export declare const pillVariants: (props?: ({
+    colorScheme?: "primary" | "amber" | "success" | "error" | "neutral" | "info" | null | undefined;
+    variant?: "soft" | "solid" | "outline" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The leading status dot. On solid pills it borrows the text color so it
+ * stays legible against the filled background; elsewhere it takes the scheme.
+ */
+export declare const pillDotVariants: (props?: ({
+    colorScheme?: "primary" | "amber" | "success" | "error" | "neutral" | "info" | null | undefined;
+    variant?: "soft" | "solid" | "outline" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/molecules/Alert/Alert.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { alertVariants } from './alert-variants';
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof alertVariants> {
+    /** Optional bolded first line above the message. */
+    title?: React.ReactNode;
+    /** The message itself. */
+    children: React.ReactNode;
+    /** Replaces the icon chosen for the color scheme. Pass `null` for none. */
+    icon?: React.ReactNode;
+    /** Renders a dismiss button when provided. */
+    onDismiss?: () => void;
+    /** Accessible label for the dismiss button. */
+    dismissLabel?: string;
+}
+/**
+ * Inline notice strip for feedback in the flow of a page: "this action
+ * failed", "changes saved". For a full zero-data panel reach for EmptyState or
+ * ErrorState instead.
+ *
+ * Errors announce themselves assertively; every other scheme is polite, so a
+ * success note does not interrupt whatever a screen reader is currently saying.
+ */
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export { Alert };

package/dist/components/molecules/Alert/alert-variants.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Inline notice strip. Deliberately lighter than ErrorState, which is a full
+ * empty-state panel. Alert is for "this action failed" feedback sitting in
+ * the flow of a page or a form.
+ *
+ * The left stripe carries the color weight so the fill can stay quiet enough
+ * to sit inside a form without shouting.
+ */
+export declare const alertVariants: (props?: ({
+    colorScheme?: "primary" | "amber" | "success" | "error" | "neutral" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/organisms/DataTable/DataTable.d.ts

@@ -1,7 +1,41 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, RowData } from '@tanstack/react-table';
 import { TableProps } from '../Table/Table';
-export interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
+/**
+ * The feature set DataTable registers: sorting and pagination, plus the row
+ * models each one needs. v9 requires features to be declared up front, and it
+ * types column definitions against them, so consumers need this type to write
+ * their columns:
+ *
+ * ```ts
+ * const columns: ColumnDef<RosterTableFeatures, Person>[] = [...]
+ * // or
+ * const helper = createColumnHelper<RosterTableFeatures, Person>()
+ * ```
+ *
+ * Built statically at module scope, as v9 requires.
+ */
+declare const dataTableFeatures: {
+    rowSortingFeature: import('@tanstack/table-core').TableFeature;
+    rowPaginationFeature: import('@tanstack/table-core').TableFeature;
+    sortedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+    paginatedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+    sortFns: {
+        alphanumeric: import('@tanstack/table-core').CreatedSortFn<any, any>;
+        alphanumericCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+        basic: import('@tanstack/table-core').CreatedSortFn<any, any>;
+        datetime: import('@tanstack/table-core').CreatedSortFn<any, any>;
+        text: import('@tanstack/table-core').CreatedSortFn<any, any>;
+        textCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+    };
+};
+export type RosterTableFeatures = typeof dataTableFeatures;
+/**
+ * `TValue` is gone from v8's `DataTableProps<TData, TValue>`: a columns array
+ * is heterogeneous, so v9 types each entry's value as `unknown` and recovers
+ * the real type per column through `createColumnHelper`.
+ */
+export interface DataTableProps<TData extends RowData> {
+    columns: ColumnDef<RosterTableFeatures, TData>[];
     data: TData[];
     className?: string;
     tableClassName?: string;
@@ -10,4 +44,5 @@ export interface DataTableProps<TData, TValue> {
     size?: TableProps["size"];
     hoverable?: boolean;
 }
-export declare function DataTable<TData, TValue>({ columns, data, className, tableClassName, paginationClassName, variant, size, hoverable, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData extends RowData>({ columns, data, className, tableClassName, paginationClassName, variant, size, hoverable, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/organisms/Navbar/Navbar.d.ts

@@ -1,16 +1,35 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { navbarVariants } from './navbar-variants';
+/**
+ * Content for a consumer-supplied slot. Pass a plain node, or a function that
+ * receives `close` so anything inside the slot can dismiss the mobile panel —
+ * needed when the slot holds a link, since the nav has no way to know a click
+ * on arbitrary content was a navigation.
+ */
+export type NavbarSlot = React.ReactNode | ((props: {
+    close: () => void;
+}) => React.ReactNode);
 export interface NavItem {
     label: string;
     path: string;
-    /** Optional badge rendered inline after the link label — any ReactNode.
+    /** Optional badge rendered inline after the link label. Any ReactNode.
      *  Use for "New" labels, notification counts, or status indicators.
      *  Appears in both the desktop nav and the mobile slide-out panel. */
     badge?: React.ReactNode;
 }
 export interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof navbarVariants> {
     logoSrc: string;
+    /**
+     * Size of the logo image. Accepts any CSS length (`"2.75rem"`, `44`).
+     * Defaults to `2rem`, the previous hard-coded `h-8 w-8`.
+     */
+    logoSize?: string | number;
+    /**
+     * Classes applied to the logo image. Replaces the default rounding, so a
+     * circular mark can pass `"rounded-full"` and a square one `""`.
+     */
+    logoClassName?: string;
     brandName: string;
     items: NavItem[];
     activePath?: string;
@@ -25,17 +44,34 @@ export interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantP
     onLogout?: () => void;
     onInboxClick?: () => void;
     onThemeToggle?: () => void;
-    themeMode?: "light" | "dark";
+    /**
+     * Which palette the nav paints itself with.
+     *
+     * `"auto"` follows the nearest ancestor carrying the `.dark` class, matching
+     * how the rest of Roster handles dark mode. Use it in class-based dark apps
+     * so the nav does not need wiring into your theme state. Omit the prop
+     * entirely and the mode is inferred from `variant`, as before.
+     */
+    themeMode?: "light" | "dark" | "auto";
     notificationVariant?: "primary" | "error" | "amber" | "success" | "neutral" | "orange" | "teal" | "purple";
+    /**
+     * Fill style of the notification count badge. Defaults to `"solid"`, which
+     * is what the nav rendered before this was configurable. Use `"soft"` or
+     * `"outline"` where a solid dot competes with a busy or colored nav surface.
+     */
+    notificationFill?: "soft" | "light" | "solid" | "outline";
     /**
      * Custom content rendered in the right-side action area. When provided it
      * replaces the built-in user menu / "Log In" button on desktop and the user
      * section in the mobile panel, giving you full control over auth UI.
+     *
+     * Pass a function to receive `close` and dismiss the mobile panel from
+     * inside the slot: `actions={({ close }) => <Link onClick={close} … />}`.
      */
-    actions?: React.ReactNode;
+    actions?: NavbarSlot;
     /**
      * Replaces the default brand name `<span>` with arbitrary markup. Use this
-     * when you need mixed weights, colours, or other rich styling that a plain
+     * when you need mixed weights, colors, or other rich styling that a plain
      * string cannot express (e.g. bold "GAME" + thin "VERDICT").
      * The logo image is always rendered; this only affects the text element.
      */
@@ -44,10 +80,13 @@ export interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantP
      * Extra content rendered between the nav link list and the user menu / Log In
      * button on desktop, and above the nav links in the mobile slide-out panel.
      * Use this for persistent nav-level controls like a search toggle that should
-     * coexist with the built-in user menu. Does not replace the user menu —
+     * coexist with the built-in user menu. Does not replace the user menu;
      * see `actions` for full replacement.
+     *
+     * Pass a function to receive `close` and dismiss the mobile panel from
+     * inside the slot: `navActions={({ close }) => <Link onClick={close} … />}`.
      */
-    navActions?: React.ReactNode;
+    navActions?: NavbarSlot;
     /**
      * Auth-gated navigation items appended to the built-in user avatar dropdown
      * on desktop and to the nav section of the mobile slide-out panel. Only
@@ -55,5 +94,5 @@ export interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantP
      */
     userMenuItems?: NavItem[];
 }
-declare const Navbar: ({ logoSrc, brandName, items, activePath, routerElement, user, onLogin, onLogout, onInboxClick, onThemeToggle, actions, brandElement, navActions, userMenuItems, className, variant, position, themeMode, notificationVariant, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element;
+declare const Navbar: ({ logoSrc, logoSize, logoClassName, brandName, items, activePath, routerElement, user, onLogin, onLogout, onInboxClick, onThemeToggle, actions, brandElement, navActions, userMenuItems, className, variant, position, themeMode, notificationVariant, notificationFill, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element;
 export { Navbar };

package/dist/index.d.ts

@@ -14,6 +14,9 @@ export * from './components/atoms/Input/Input';
 export * from './components/atoms/Input/input-variants';
 export * from './components/atoms/Link/Link';
 export * from './components/atoms/Link/link-variants';
+export * from './components/atoms/PasswordInput/PasswordInput';
+export * from './components/atoms/Pill/Pill';
+export * from './components/atoms/Pill/pill-variants';
 export * from './components/atoms/Select/Select';
 export * from './components/atoms/Select/select-variants';
 export * from './components/atoms/Spinner/Spinner';
@@ -26,6 +29,8 @@ export * from './components/atoms/LiquidTabs/LiquidTabs';
 export * from './components/atoms/Tooltip/Tooltip';
 export * from './components/atoms/CollapsibleSection/CollapsibleSection';
 export * from './components/atoms/SegmentBar/SegmentBar';
+export * from './components/molecules/Alert/Alert';
+export * from './components/molecules/Alert/alert-variants';
 export * from './components/molecules/Accordion/Accordion';
 export * from './components/molecules/Breadcrumbs/Breadcrumbs';
 export * from './components/molecules/Breadcrumbs/breadcrumb-variants';

package/dist/preflight.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";

package/dist/preflight.css

@@ -0,0 +1 @@
+@layer roster-preflight{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentColor}::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::-moz-placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer roster;

package/dist/preflight.es.js

@@ -0,0 +1 @@
+"use client";