@askrjs/themes 0.0.3 → 0.0.6

package/src/components/theme/theme.tsx

@@ -3,7 +3,10 @@ import { resource } from "@askrjs/askr/resources";
 import { Button } from "@askrjs/ui";
 import type { ButtonNativeProps, PressEvent } from "@askrjs/ui";
 
-export type ThemeName = "light" | "dark" | "system" | (string & {});
+export const CAT_THEME_NAMES = ["tabby", "ginger", "tuxedo", "calico", "torty"] as const;
+
+export type CatThemeName = (typeof CAT_THEME_NAMES)[number];
+export type ThemeName = "light" | "dark" | "system" | CatThemeName | (string & {});
 
 export type ThemeOption = {
   value: ThemeName;
@@ -42,7 +45,7 @@ export type ThemeToggleProps = Omit<ButtonNativeProps, "children" | "onPress"> &
   lightIcon?: unknown;
   darkIcon?: unknown;
   systemIcon?: unknown;
-  toggleThemes?: readonly ThemeName[];
+  themes?: readonly ThemeName[];
   onPress?: (event: PressEvent) => void;
 };
 
@@ -52,6 +55,14 @@ export const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [
   { value: "dark", label: "Dark" },
 ];
 
+export const CAT_THEME_OPTIONS: readonly ThemeOption[] = [
+  { value: "tabby", label: "Tabby" },
+  { value: "ginger", label: "Ginger" },
+  { value: "tuxedo", label: "Tuxedo" },
+  { value: "calico", label: "Calico" },
+  { value: "torty", label: "Torty" },
+];
+
 const DEFAULT_STORAGE_KEY = "askr-theme";
 
 const ThemeContext = defineContext<ThemeContextValue>({
@@ -161,13 +172,13 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
     lightIcon,
     darkIcon,
     systemIcon,
-    toggleThemes = ["light", "dark"],
+    themes = ["light", "dark"],
     onPress,
     ...rest
   } = props;
 
   const currentTheme = theme.theme();
-  const nextTheme = getNextTheme(currentTheme, toggleThemes);
+  const nextTheme = getNextTheme(currentTheme, themes);
   const renderContext = { theme: currentTheme, nextTheme };
   const ariaLabel = (rest as Record<string, unknown>)["aria-label"];
   const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {

package/src/controls.ts

@@ -0,0 +1,18 @@
+import "./themes/default/index.css";
+
+// Button stays in @askrjs/ui because it owns behavior, keyboard, and ARIA.
+export { Button } from "@askrjs/ui";
+export type {
+  ButtonAsChildProps,
+  ButtonNativeProps,
+  ButtonOwnProps,
+  ButtonProps,
+} from "@askrjs/ui";
+export { ButtonGroup } from "./components/button-group";
+export type * from "./components/button-group";
+export { Close } from "./components/close";
+export type * from "./components/close";
+export { Field, FieldError, FieldHint } from "./components/field";
+export type * from "./components/field";
+export { InputGroup, InputGroupText } from "./components/input-group";
+export type * from "./components/input-group";

package/src/feedback.ts

@@ -0,0 +1,6 @@
+import "./themes/default/index.css";
+
+export { EmptyState } from "./components/empty-state";
+export type * from "./components/empty-state";
+export { Spinner } from "./components/spinner";
+export type * from "./components/spinner";

package/src/layouts.ts

@@ -0,0 +1,19 @@
+import "./themes/default/index.css";
+
+export { AspectRatio } from "./components/aspect-ratio";
+export type * from "./components/aspect-ratio";
+export { Block } from "./components/block";
+export type * from "./components/block";
+export { Box } from "./components/box";
+export type * from "./components/box";
+export { Container } from "./components/container";
+export type * from "./components/container";
+export { Flex } from "./components/flex";
+export { Inline } from "./components/inline";
+export type * from "./components/inline";
+export { Section } from "./components/section";
+export type * from "./components/section";
+export { Spacer } from "./components/spacer";
+export type * from "./components/spacer";
+export { Stack } from "./components/stack";
+export type * from "./components/stack";

package/src/navs.ts

@@ -0,0 +1,26 @@
+import "./themes/default/index.css";
+
+export {
+  Breadcrumb,
+  BreadcrumbCurrent,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "./components/breadcrumb";
+export { BREADCRUMB_A11Y_CONTRACT } from "./components/breadcrumb";
+export type * from "./components/breadcrumb";
+export { Nav, NavItem, NavLink } from "./components/nav";
+export type * from "./components/nav";
+export { NavBrand, Navbar, NavGroup, NavToggle } from "./components/navbar";
+export type * from "./components/navbar";
+export type * from "./components/shell/shell-nav.types";
+export { Sidebar, SidebarPanel } from "./components/sidebar";
+export type * from "./components/sidebar";
+export {
+  Pagination,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+} from "./components/pagination";
+export type * from "./components/pagination";

package/src/overlays.ts

@@ -0,0 +1,90 @@
+import "./themes/default/index.css";
+
+export {
+  DROPDOWN_A11Y_CONTRACT,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownLabel,
+  DropdownPortal,
+  DropdownSeparator,
+  DropdownTrigger,
+  MENU_A11Y_CONTRACT,
+  MENUBAR_A11Y_CONTRACT,
+  Menu,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator,
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@askrjs/ui";
+export { DropdownContent } from "./components/overlays/dropdown-content";
+export type {
+  DropdownA11yContract,
+  DropdownContentAsChildProps,
+  DropdownContentOwnProps,
+  DropdownContentProps,
+  DropdownGroupAsChildProps,
+  DropdownGroupProps,
+  DropdownItemAsChildProps,
+  DropdownItemOwnProps,
+  DropdownItemProps,
+  DropdownLabelAsChildProps,
+  DropdownLabelProps,
+  DropdownOwnProps,
+  DropdownPortalProps,
+  DropdownProps,
+  DropdownSeparatorAsChildProps,
+  DropdownSeparatorProps,
+  DropdownTriggerAsChildProps,
+  DropdownTriggerProps,
+  MenuA11yContract,
+  MenuContentAsChildProps,
+  MenuContentProps,
+  MenuGroupAsChildProps,
+  MenuGroupProps,
+  MenuItemAsChildProps,
+  MenuItemOwnProps,
+  MenuItemProps,
+  MenuLabelAsChildProps,
+  MenuLabelProps,
+  MenuOwnProps,
+  MenuProps,
+  MenuSeparatorAsChildProps,
+  MenuSeparatorProps,
+  MenubarA11yContract,
+  MenubarContentAsChildProps,
+  MenubarContentOwnProps,
+  MenubarContentProps,
+  MenubarGroupAsChildProps,
+  MenubarGroupProps,
+  MenubarItemAsChildProps,
+  MenubarItemProps,
+  MenubarLabelAsChildProps,
+  MenubarLabelProps,
+  MenubarMenuProps,
+  MenubarOwnProps,
+  MenubarPortalProps,
+  MenubarProps,
+  MenubarSeparatorAsChildProps,
+  MenubarSeparatorProps,
+  MenubarSubContentAsChildProps,
+  MenubarSubContentProps,
+  MenubarSubProps,
+  MenubarSubTriggerAsChildProps,
+  MenubarSubTriggerProps,
+  MenubarTriggerAsChildProps,
+  MenubarTriggerProps,
+} from "@askrjs/ui";

package/src/shells.ts

@@ -0,0 +1,13 @@
+import "./themes/default/index.css";
+
+export { Header } from "./components/header";
+export { HEADER_A11Y_CONTRACT } from "./components/header";
+export type * from "./components/header";
+export { Sidebar, SidebarPanel, SidebarToggle } from "./components/sidebar";
+export type * from "./components/sidebar";
+export { NavBrand, Navbar, NavGroup, NavItem, NavLink, NavToggle } from "./components/navbar";
+export type * from "./components/navbar";
+export type * from "./components/shell/shell-nav.types";
+export { SHELL_A11Y_CONTRACT } from "./components/shell";
+export { Shell, ShellMain, ShellNav } from "./components/shell";
+export type * from "./components/shell";

package/src/surfaces.ts

@@ -0,0 +1,23 @@
+import "./themes/default/index.css";
+
+export { Alert } from "./components/alert";
+export type * from "./components/alert";
+export { Badge } from "./components/badge";
+export type * from "./components/badge";
+export {
+  Card,
+  CardActions,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./components/card";
+export type * from "./components/card";
+export { ListGroup, ListGroupItem } from "./components/list-group";
+export type * from "./components/list-group";
+export { Divider, Separator } from "./components/separator";
+export { SEPARATOR_A11Y_CONTRACT } from "./components/separator";
+export type * from "./components/separator";
+export { Skeleton } from "./components/skeleton";
+export type * from "./components/skeleton";

package/src/theme.ts

@@ -0,0 +1,21 @@
+import "./themes/default/index.css";
+
+export {
+  CAT_THEME_NAMES,
+  CAT_THEME_OPTIONS,
+  DEFAULT_THEME_OPTIONS,
+  ThemePicker,
+  ThemeProvider,
+  ThemeToggle,
+  useTheme,
+} from "./components/theme";
+export type {
+  CatThemeName,
+  ThemeContextValue,
+  ThemeName,
+  ThemeOption,
+  ThemePickerProps,
+  ThemeProviderProps,
+  ThemeToggleProps,
+  ThemeToggleRenderContext,
+} from "./components/theme";

package/src/themes/default/index.css

@@ -1,20 +1,27 @@
 @import "./tokens.css";
+@import "./styles/base/reset.css";
 @import "./styles/base/typography.css";
 @import "./styles/base/icon.css";
 @import "./styles/base/utilities.css";
 @import "./styles/layout/layout.css";
 @import "./styles/layout/responsive-layout.css";
+@import "./styles/layout/block.css";
 @import "./styles/layout/patterns.css";
 @import "./styles/layout/aspect-ratio.css";
 @import "./styles/shell/theme.css";
 @import "./styles/shell/header.css";
 @import "./styles/shell/navbar.css";
+@import "./styles/shell/sidebar.css";
 @import "./styles/actions/button.css";
+@import "./styles/actions/button-group.css";
 @import "./styles/actions/toggle.css";
 @import "./styles/actions/toggle-group.css";
+@import "./styles/display/alert.css";
 @import "./styles/forms/input.css";
+@import "./styles/forms/input-group.css";
 @import "./styles/forms/textarea.css";
 @import "./styles/forms/form.css";
+@import "./styles/forms/field.css";
 @import "./styles/forms/checkbox.css";
 @import "./styles/forms/switch.css";
 @import "./styles/forms/radio-group.css";
@@ -22,6 +29,8 @@
 @import "./styles/forms/slider.css";
 @import "./styles/forms/label.css";
 @import "./styles/display/card.css";
+@import "./styles/display/list-group.css";
+@import "./styles/display/virtual-list.css";
 @import "./styles/display/progress.css";
 @import "./styles/display/progress-circle.css";
 @import "./styles/display/badge.css";
@@ -29,18 +38,19 @@
 @import "./styles/display/avatar.css";
 @import "./styles/display/separator.css";
 @import "./styles/display/table.css";
+@import "./styles/display/virtual-table.css";
 @import "./styles/display/scroll-area.css";
 @import "./styles/display/spinner.css";
 @import "./styles/display/coverage.css";
 @import "./styles/navigation/breadcrumb.css";
-@import "./styles/navigation/tabs.css";
+@import "./styles/navigation/nav.css";
+@import "./styles/navigation/pagination.css";
 @import "./styles/navigation/menu.css";
 @import "./styles/navigation/menubar.css";
-@import "./styles/navigation/navigation-menu.css";
 @import "./styles/disclosure/accordion.css";
 @import "./styles/disclosure/collapsible.css";
 @import "./styles/overlays/alert-dialog.css";
-@import "./styles/overlays/dropdown-menu.css";
+@import "./styles/overlays/dropdown.css";
 @import "./styles/overlays/toast.css";
 @import "./styles/overlays/dialog.css";
 @import "./styles/overlays/popover.css";

package/src/themes/default/styles/actions/button-group.css

@@ -0,0 +1,74 @@
+:where(.btn-group, [data-slot="button-group"]) {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.btn-group[data-attached="true"], [data-slot="button-group"][data-attached="true"]) {
+  flex-wrap: nowrap;
+}
+
+:where(.btn-group[data-attached="false"], [data-slot="button-group"][data-attached="false"]) {
+  flex-wrap: wrap;
+}
+
+:where(.btn-group-vertical, [data-slot="button-group"][data-orientation="vertical"]) {
+  flex-direction: column;
+}
+
+:where(.btn-group[data-attached="false"], [data-slot="button-group"][data-attached="false"]) {
+  gap: var(--ak-space-xs);
+}
+
+:where(.btn-group, [data-slot="button-group"]) > :where(.btn, [data-slot="button"]) {
+  position: relative;
+  min-inline-size: 0;
+  box-shadow: none;
+}
+
+:where(.btn-group[data-attached="false"], [data-slot="button-group"][data-attached="false"])
+  > :where(.btn, [data-slot="button"]) {
+  border-radius: var(--ak-radius-md);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn-group[data-attached="true"], [data-slot="button-group"][data-attached="true"])
+  > :where(.btn, [data-slot="button"]) {
+  border-radius: 0;
+}
+
+:where(.btn-group[data-attached="true"], [data-slot="button-group"][data-attached="true"])
+  > :where(.btn, [data-slot="button"]):first-child {
+  border-start-start-radius: var(--ak-radius-md);
+  border-end-start-radius: var(--ak-radius-md);
+}
+
+:where(.btn-group[data-attached="true"], [data-slot="button-group"][data-attached="true"])
+  > :where(.btn, [data-slot="button"]):last-child {
+  border-start-end-radius: var(--ak-radius-md);
+  border-end-end-radius: var(--ak-radius-md);
+}
+
+:where(.btn-group[data-attached="true"], [data-slot="button-group"][data-attached="true"])
+  > :where(.btn, [data-slot="button"])
+  + :where(.btn, [data-slot="button"]) {
+  margin-inline-start: -1px;
+}
+
+:where(
+    .btn-group-vertical,
+    [data-slot="button-group"][data-orientation="vertical"][data-attached="true"]
+  )
+  > :where(.btn, [data-slot="button"])
+  + :where(.btn, [data-slot="button"]) {
+  margin-inline-start: 0;
+  margin-block-start: -1px;
+}
+
+:where(.btn-group-vertical, [data-slot="button-group"][data-orientation="vertical"])
+  > :where(.btn, [data-slot="button"]) {
+  inline-size: 100%;
+  justify-content: center;
+}

package/src/themes/default/styles/actions/button.css

@@ -1,4 +1,4 @@
-:where(.btn, [data-slot="button"]) {
+:where(.btn, .btn-close, [data-slot="button"]) {
   --_button-height: var(--ak-density-control-height-md);
   --_button-padding-x: var(--ak-density-control-padding-x-md);
   --_button-radius: var(--ak-radius-md);
@@ -18,11 +18,13 @@
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
-  letter-spacing: -0.015em;
+  letter-spacing: 0;
   text-decoration: none;
+  text-align: center;
   cursor: pointer;
   user-select: none;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  white-space: normal;
   vertical-align: middle;
   -webkit-tap-highlight-color: transparent;
   transition:
@@ -55,7 +57,7 @@
   outline: none;
   box-shadow:
     0 0 0 1px var(--ak-color-surface),
-    0 0 0 4px var(--ak-color-focus-ring);
+    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
 }
 
 :where(.btn[data-disabled], .btn:disabled, [data-slot="button"][data-disabled]) {
@@ -143,12 +145,12 @@
 }
 
 :where(.btn-destructive:hover, [data-slot="button"][data-variant="destructive"]:hover) {
-  background: color-mix(in srgb, black 4%, var(--ak-color-danger));
+  background: color-mix(in srgb, var(--ak-color-danger) 94%, var(--ak-color-danger-ink) 6%);
   border-color: color-mix(in srgb, var(--ak-color-danger-ink) 48%, var(--ak-color-danger));
 }
 
 :where(.btn-destructive:active, [data-slot="button"][data-variant="destructive"]:active) {
-  background: color-mix(in srgb, black 9%, var(--ak-color-danger));
+  background: color-mix(in srgb, var(--ak-color-danger) 88%, var(--ak-color-danger-ink) 12%);
   border-color: color-mix(in srgb, var(--ak-color-danger-ink) 56%, var(--ak-color-danger));
 }
 
@@ -178,16 +180,54 @@
   color: var(--ak-color-link-hover);
 }
 
+:where(.btn-close) {
+  justify-content: center;
+  gap: 0;
+  inline-size: var(--_button-height);
+  padding-inline: 0;
+  border-color: transparent;
+  border-radius: var(--ak-radius-round);
+  background: transparent;
+  box-shadow: none;
+}
+
+:where(.btn-close:hover) {
+  background: var(--ak-color-hover);
+  border-color: transparent;
+}
+
+:where(.btn-close:active) {
+  background: var(--ak-color-active);
+  border-color: transparent;
+}
+
+:where(.btn-close:focus-visible) {
+  outline: none;
+  box-shadow:
+    0 0 0 1px var(--ak-color-surface),
+    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+}
+
+:where(.btn-close[data-disabled], .btn-close:disabled) {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 1;
+}
+
 :where(.btn-sm, [data-slot="button"][data-size="sm"]) {
   --_button-height: var(--ak-density-control-height-sm);
   --_button-padding-x: var(--ak-density-control-padding-x-sm);
-  font-size: 0.8125rem;
+  font-size: var(--ak-font-size-xs);
 }
 
 :where(.btn-lg, [data-slot="button"][data-size="lg"]) {
   --_button-height: var(--ak-density-control-height-lg);
   --_button-padding-x: var(--ak-density-control-padding-x-lg);
-  font-size: 0.9375rem;
+  font-size: var(--ak-font-size-sm);
 }
 
 :where(.btn-icon, [data-slot="button"][data-size="icon"]) {

package/src/themes/default/styles/actions/toggle-group.css

@@ -1,22 +1,26 @@
-[data-slot="toggle-group"] {
+:where([data-slot="toggle-group"]) {
   display: inline-flex;
+  flex-wrap: wrap;
   gap: 0.25rem;
 }
 
-[data-slot="toggle-group"][data-orientation="vertical"] {
+:where([data-slot="toggle-group"][data-orientation="vertical"]) {
   flex-direction: column;
 }
 
-[data-slot="toggle-group-item"] {
+:where([data-slot="toggle-group-item"]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 2.5rem;
-  padding: 0 var(--ak-space-md);
+  min-height: var(--ak-density-control-height-md);
+  padding: 0 var(--ak-density-control-padding-x-md);
   border: 1px solid var(--ak-color-border);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -25,28 +29,31 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="toggle-group-item"]:hover {
+:where([data-slot="toggle-group-item"]:hover) {
   background: var(--ak-color-hover);
   border-color: var(--ak-color-border-strong);
 }
 
-[data-slot="toggle-group-item"]:active {
+:where([data-slot="toggle-group-item"]:active) {
   background: var(--ak-color-active);
 }
 
-[data-slot="toggle-group-item"][data-state="on"] {
+:where([data-slot="toggle-group-item"][data-state="on"]) {
   border-color: var(--ak-color-primary);
   background: var(--ak-color-primary-soft);
   color: var(--ak-color-primary-ink);
 }
 
-[data-slot="toggle-group-item"]:focus-visible {
+:where([data-slot="toggle-group-item"]:focus-visible) {
   outline: none;
-  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-[data-slot="toggle-group-item"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="toggle-group-item"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
 }

package/src/themes/default/styles/actions/toggle.css

@@ -1,14 +1,17 @@
-[data-slot="toggle"] {
+:where([data-slot="toggle"]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--ak-space-sm);
-  min-height: 2.5rem;
-  padding: 0 var(--ak-space-md);
+  min-height: var(--ak-density-control-height-md);
+  padding: 0 var(--ak-density-control-padding-x-md);
   border: 1px solid var(--ak-color-border);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -17,28 +20,31 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="toggle"]:hover {
+:where([data-slot="toggle"]:hover) {
   background: var(--ak-color-hover);
   border-color: var(--ak-color-border-strong);
 }
 
-[data-slot="toggle"]:active {
+:where([data-slot="toggle"]:active) {
   background: var(--ak-color-active);
 }
 
-[data-slot="toggle"][data-state="on"] {
+:where([data-slot="toggle"][data-state="on"]) {
   border-color: var(--ak-color-primary);
   background: var(--ak-color-primary-soft);
   color: var(--ak-color-primary-ink);
 }
 
-[data-slot="toggle"]:focus-visible {
+:where([data-slot="toggle"]:focus-visible) {
   outline: none;
-  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-[data-slot="toggle"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="toggle"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
 }

package/src/themes/default/styles/base/icon.css

@@ -1,6 +1,8 @@
 :where([data-slot="icon"]) {
   display: inline-block;
   flex: 0 0 auto;
+  inline-size: var(--ak-icon-size, 1em);
+  block-size: var(--ak-icon-size, 1em);
   vertical-align: -0.125em;
   color: inherit;
 }