<commit_before>app-components
==============

Set of web components for use in building Open Web App UIs


# Web Components

First Draft- Names are not necessarily final.

For the purposes of this document, layout terminology assumes a small-screen handheld phone.
Positions/appearances will likely differ on larger displays or with different input techniques.

## Structural Components

### ['View'](https://github.com/x-tag/view)

* Primary layout container, holds app structure.
* Allows whole "app" space to have layout properties like flexbox without affecting <body>

### ['App Bar' (header)](https://github.com/x-tag/appbar)

* Contains top-level information and UI
* Similar to a toolbar or roughly equivalent to Android's action bar

### ['Tab Bar' (navigation, footer)](https://github.com/mozilla/app-components/tree/master/tabbar)

* Used to display an app-level navigation at the bottom of the UI
* Usually a series of icons with labels.
* Tabs are linked to panels/views. Changing tab changes the active panel, and changing the active panel changes the tab
* Essentially fires a 'show' event at targeted elements. It is up to target elements to respond appropriately.
    - Components with default support for show event:
        - Slidebox
        - Flipbox
        - Shuffledeck<commit_msg>updating main readme to account for x-view -> x-layout rename<commit_after>app-components
==============

Set of web components for use in building Open Web App UIs


# Web Components

First Draft- Names are not necessarily final.

For the purposes of this document, layout terminology assumes a small-screen handheld phone.
Positions/appearances will likely differ on larger displays or with different input techniques.

## Structural Components

### ['Layout'](https://github.com/x-tag/layout)

* Primary layout container, holds app structure.
* Allows whole "app" space to have layout properties like flexbox without affecting <body>

### ['App Bar' (header)](https://github.com/x-tag/appbar)

* Contains top-level information and UI
* Similar to a toolbar or roughly equivalent to Android's action bar

### ['Tab Bar' (navigation, footer)](https://github.com/mozilla/app-components/tree/master/tabbar)

* Used to display an app-level navigation at the bottom of the UI
* Usually a series of icons with labels.
* Tabs are linked to panels/views. Changing tab changes the active panel, and changing the active panel changes the tab
* Essentially fires a 'show' event at targeted elements. It is up to target elements to respond appropriately.
    - Components with default support for show event:
        - Slidebox
        - Flipbox
        - Shuffledeck
{'fraction_non_alphanumeric': 0.08715251690458302, 'fraction_numerical': 0.0, 'mean_word_length': 4.111324376199616, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 6, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '842996', 'n_tokens_mistral': 701, 'n_tokens_neox': 667, 'n_words': 321}