export const meta = {
  title: 'Component Architecture',
  previous: { url: "/icon-viewer", name: "Icons" },
  next: { url: '/theming-specification', name: 'Theming specification' },
}

The design and architecture of components should follow from a set of first principles.

- There is 1 right way to do things, and it's easy to do the right thing.
- Consumers should not be penalized for code they don't use (through bundle size, perf, etc).
- Don't overgeneralize until we have a clear need (abstracting should solve a bundle size goal, or DRY goal, or partner use case)

#### The consumer should be able to override, extend, or replace any opinions of the library.

TODO: expand on what this means for the following aspects of the library:

- State
- Styling
- Acessibility
- Slots
- Styling approach (css, css-in-js, etc)

#### Components should be composable

#### There should be one JSX element in the tree per rendered component

#### Applications which load their own CSS in other means should not pay the penalty of loading a runtime CSS-in-JS package, especially if the class names are known at time of authoring.

#### Applications which want to override specific aspects of a component should not incur a penalty of loading a concretely referenced component that will not be rendered in the final output.

#### Any external dependencies mean negative parsing time, bundle size and runtime impact for consumers that don't intend to use them.

#### There is a limited set of accessibility options that work well together, and each combination should be tested cohesively.

#### Consumers should be able to import one component and have an appropriately minimal bundle size.

#### We want to offer a delightful first-run experience, and bundle size will not be negatively impacted by including the default theme.

#### As a component library cannot anticipate all needs to applications' design systems, allowances should be made to extend the design system while maintaining rich levels of type safety.

#### Components should leverage a platform library's function to pass all relevant native props to appropriate controls whenever available.

#### A component should be able to render any theme (including tokens, styles, icons and animations).

#### Themes should cascade and merge allowing subtree themes to be updated at runtime and have the ability to adjust the incoming theme.

#### RTL/LTR mode should be configurable for the entire application or a subtree of the application.

#### Animations should be configurable for the entire application or a subtree of the application.