open-index/open-npm huggingface dataset:
npm package: @matthewp/bones
Description: A library for DOM manipulation, in CSS.
Author: Matthew Phillips
Latest version: 0.0.2

# Bones

Bones is a library for building apps with CSS.

## Getting Started

```bash
npm install @matthewp/bones
```

```js
import '@matthewp/bones';
```

See https://bones.spooky.click for me.

## Contributing

Join the mailing list: https://lists.sr.ht/~matthewp/bones-devel

## License

BSD-2-Clause
npm package: @matthewp/cdn-spooky-deploy
Description: ```bash AWS_KEY_ID=ENTER SECRET_ACCESS_KEY=ENTER \ npx @matthewp/cdn-spooky-deploy \   --source=./dist \   --pkg=name \   --symlink \   --version=0.1.0 \   --entry=main.js ```
Latest version: 0.0.4

# cdn.spooky.click deployment

```bash
AWS_KEY_ID=ENTER SECRET_ACCESS_KEY=ENTER \
npx @matthewp/cdn-spooky-deploy \
  --source=./dist \
  --pkg=name \
  --symlink \
  --version=0.1.0 \
  --entry=main.js
```
npm package: @matthewp/conditional-view
Description: A plain JavaScript conditional.
Latest version: 1.0.0

# ConditionalView

A plain JavaScript conditional.

```js
let cond = new ConditionalView(trueNode, falseNode);

cond.update(false);
// False is shown.

cond.update(true);
// True is shown.
```

## License

BSD-2-Clause
npm package: @matthewp/fly-out
Description: A fly-out (aka drop-down) web component
Author: Matthew Phillips
Latest version: 2.1.0

# &lt;fly-out&gt;

A fly-out (aka drop-down) menu with the following features:

* Written in light-weight plain JavaScript; no framework dependencies.
* Accessibility is a primary goal.

## Usage / Install

Use directly from unpkg:

```html
<fly-out label="Menu">
  <ul>
    <li><a href="/home">Homepage</a></li>
    <li><a href="/cart">Cart</a></li>
    <li><a href="/shoes">Shoes</a></li>
  </ul>
</fly-out>

<script type="module" src="https://unpkg.com/@matthewp/fly-out/fly-out.js"></script>
```

## Customize

### Content

The content for the fly-out button can be provided 2 ways. The first is to use the `button` slot. The following shows this usage:

```html
<fly-out class="user-menu" caret align="right">
  <img slot="button" alt="@person" src="https://example.com/some-image.png" height="20" width="20">
  <ul slot="menu" class="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul>
</fly-out>
```

As shown above, when you want to customize the button contents you need to add 2 named slots:

* `slot=button`: Used to set the contents of the button.
* `slot=menu`: Used to set the contents of the (initially) hidden menu.

If all you need is text you can use the __label__ attribute, in which case no named slots are necessary:

```html
<fly-out label="Menu">
  <ul>
    <li><a href="/home">Homepage</a></li>
    <li><a href="/cart">Cart</a></li>
    <li><a href="/shoes">Shoes</a></li>
  </ul>
</fly-out>
```

### Alignment

By default the dropdown will be aligned to the *left* of the button. If you would like it to be aligned to the right, such as if your button is all the way to the right end of the screen, use the `align` attribute:

```html
<fly-out label="Menu" align="right">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</fly-out>
```

### Styling

The `<button>` that the fly-out menu displays can be styled as a `part::(button)` like so:

```css
fly-out::part(button) {
  background-color: #f4511e;
  font-size: 1em;
  padding: 12px 16px;
  color: white;
}
```

When the menu is open a boolean `open` attribute is added to the element. This can be used to customize any of the above values while the menu is open. For example:

```css
fly-out[open]::part(button) {
  background-color: grey;
}
```

## License

[BSD 2 Clause](https://opensource.org/licenses/BSD-2-Clause)
npm package: @matthewp/if-else
Description: A __716 byte__ custom element to conditionally render a template.
Author: Matthew Phillips
Latest version: 1.0.1

# &lt;if-else&gt;

A __716 byte__ custom element to conditionally render a template.

```html
<if-else>
  <template slot="if">
    <div>Woo hoo!</div>
  </template>
</if-else>

<script type="module">
  import "https://unpkg.com/@matthewp/if-else/index.js";

  document.querySelector('if-else').value = true;

  // Content is now shown!
</script>
```

## Install

Install with [npm](https://www.npmjs.com/package/@matthewp/if-else)

```shell
npm install @matthewp/if-else
```

Or [Yarn](https://yarnpkg.com/en/package/@matthewp/if-else)

```shell
yarn add @matthewp/if-else
```

## Usage

`<if-else>` is an element. It has an attribute `true` that when set, shows the slot named `if`. This works like so:

```html
<if-else true>
  <template slot="if">This will be shown</template>
</if-else>
```

The children of `if-else` must be template elements.

If you would like to show an `else` condition provide a slot for `else`:


```html
<if-else>
  <template slot="if">This is NOT shown</template>
  <template slot="else">This is shown because no true attribute</template>
</if-else>
```

*Also* there is a `value` property. It is set to `true` when the condition is true and set to `false` when the condition is false.

Just remember:

* __true__: Renders the `if` slot.
* __false__: Renders the `else` slot.

## License

BSD-2-Clause