open-index/open-npm huggingface dataset:
npm package: @springdragon/chat-ui
Description: VueChatUI - 一个现代的 Vue 3 组件库，专为构建交互式聊天界面设计。结合 Vue 3 的响应式特性和高性能，提供了一套丰富、灵活且易于集成的聊天 UI 组件，适用于构建高度交互和定制化的聊天应用。
Author: zcl
Latest version: 0.0.13

# chat-ui

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
pnpm install
```

### Compile and Hot-Reload for Development

```sh
pnpm dev
```

### Type-Check, Compile and Minify for Production

```sh
pnpm build
```

### Run Unit Tests with [Vitest](https://vitest.dev/)

```sh
pnpm test:unit
```

### Run End-to-End Tests with [Cypress](https://www.cypress.io/)

```sh
pnpm test:e2e:dev
```

This runs the end-to-end tests against the Vite development server.
It is much faster than the production build.

But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):

```sh
pnpm build
pnpm test:e2e
```

### Lint with [ESLint](https://eslint.org/)

```sh
pnpm lint
```


发布到npm
由于项目使用了pnpm。所以在登陆和发布的时候，需要将注册地址修改下

npm login --registry=https://registry.npmjs.org

在package.json修改版本号后，执行下面的发布命令
npm publish --registry=https://registry.npmjs.org --access=public
npm package: @springernature/brand-context
Description: Bootstrapping for all components and products
Author: Springer Nature
Latest version: 32.0.1

# Brand Context

[![NPM version][badge-npm]][info-npm]

The `brand-context` package contains baseline configurations that provide scaffolding for products and toolkit components within each of the supported brands:

- [Default](./default/README.md)
- [Nature](./nature/README.md)
- Springer
- SpringerNature

> **Note**  
> As of brand-context `28.0.0`, all versions of Internet Explorer have been classfied for core browser support. Please refer to the latest [browser support guidelines](https://github.com/springernature/frontend-playbook/blob/main/practices/graded-browser-support.md) for help with how to include the brand-context in your application. To continue supporting IE11 as an enhanced browser, please use brand-context `<= 27.1.0`, and follow the [legacy browser support guidelines](https://github.com/springernature/frontend-playbook/blob/8b9df1bd729f0e737f33399238c1199a40034f30/practices/graded-browser-support.md)

## Using `brand-context` in your product

Pick a context brand to use in your product and make sure it is the first thing included in your SASS endpoints. For example, to use the `Nature` brand:


```scss
// core.scss
@import '@springernature/brand-context/nature/scss/core';

// components and product imports...
```

```scss
// enhanced.scss
@import '@springernature/brand-context/nature/scss/enhanced';

// components and product imports...
```

Make sure that the product and all components used by that product depend on the same version of the `brand-context` package, and that your component is configured to support your chosen brand.

## License

[MIT License][info-license] &copy; 2020, Springer Nature

[info-license]: https://github.com/springernature/frontend-nature-toolkit/blob/master/LICENCE
[info-npm]: https://www.npmjs.com/package/@springernature/brand-context
[badge-npm]: https://img.shields.io/npm/v/@springernature/brand-context.svg
npm package: @springernature/breeze-ui-bt
Description: BreezeUI 3 is UI library for Springer Nature React applications
Author: Springer Nature UXUI Team
Latest version: 1.0.4

# Breeze UI 3

## Project Overview

Breeze UI 3 is a React UI library written in TypeScript, designed for non-Mendix applications. It’s built on top of Radix primitives and themes, and provides a consistent set of reusable components with well-typed APIs.

The goal of the library is simple: help teams build interfaces faster while keeping a unified look, behavior, and developer experience across projects.

It includes all the common building blocks you’d expect — buttons, inputs, modals, dropdowns, tabs, navigation, typography, notifications, and layout utilities. Components are designed to be composable, accessible, and easy to integrate, while keeping complexity and implementation details inside the design system.

By centralizing UI logic, Breeze UI 3 helps reduce duplication, improves maintainability, and ensures consistency across different products.

The library is developed and documented using Storybook, making it easy to explore and test components in isolation. Under the hood, it uses a modern Vite + TypeScript setup for fast development and reliable builds.

Demo: https://breeze-ui-bt.apps.private.k8s.springernature.io/


## Copilot Guidelines

Please follow the existing conventions of this repository and keep all changes aligned with the current codebase.

### General Rules
- Follow existing architecture, file structure, naming, and component patterns.
- Prefer simple, clear, and maintainable solutions.
- Reuse existing components and utilities instead of duplicating logic.
- Avoid unnecessary abstractions and over-engineering.
- Do not add new dependencies unless explicitly requested.
- Avoid using `any`; prefer proper TypeScript types and generics.
- Keep exported APIs clearly typed.
- Do not refactor or modify unrelated code.
- Do not change public APIs unless the task explicitly requires it.
- Make minimal, focused changes that solve only the requested problem.

### Git Rules
- Do not create commits.
- Do not write commit messages.
- Do not push changes.
- Do not manage branches.

### Expected Behavior
- Stay consistent with the existing implementation style.
- Prefer the simplest solution that fits the current project.
- If something is unclear, do not invent missing requirements.
npm package: @springernature/fec-box
Description: css box pattern
Author: Alex Kilgour
Latest version: 1.0.1
Deprecated: fec-box has been renamed to global-box

# CSS box pattern

Simple box pattern. Import each `scss` file into the respective level in your application. If not using the defaults then create your own settings level file within your application.

## Examples

### Standard using classes
```html
<div class="p-box">box content</div>
```

### Circle using classes
```html
<div class="p-box p-box--circle">box content</div>
```

### Standard using @mixin
```scss
.class-name {
    @include fec-box;
}
```

### Circle using @mixin
```scss
.class-name {
    @include fec-box;
    @include fec-box--circle;
}
```
npm package: @springernature/fec-mq
Description: css media-query pattern
Author: Charlie Owen
Latest version: 0.0.1
Deprecated: fec-mq has been renamed to global-mq

# Media Query

This module makes available the [Breakpoint](http://breakpoint-sass.com/) mixin, for dealing with media queries.  

## Examples

```
.c-yourcomponent {
    color: plum;

    @include fec-mq('500px') {
        color: hotpink;
    }
}
```
npm package: @springernature/global-ad
Description: adverts
Author: Springer Nature
Latest version: 4.0.0

# Global Ad

Catering for ad slots, specifically:
- leaderboard ad slots (970x90, 728x90)
- mpu ad slots (300x250)
- skyscraper ad slots (160x600)

Minimum height set for leaderboard and mpu slots to prevent reflow of layout.

## Branding

To include `global-ad` in your application, you need to choose **ONE** brand from those available. The `DEFAULT` brand is included in all other brands, and any settings that are not configured will fall back to default.

```scss
// Pick ONE of the brands below to include
@import '@springernature/global-ad/scss/10-settings/default';
@import '@springernature/global-ad/scss/10-settings/nature';

// Include this with your other components
@import '@springernature/global-ad/scss/50-components/ad';
```

## Usage

#### HTML
```html
<!--leaderboard-->
<aside class="c-ad c-ad--728x90">
    <div class="c-ad__inner">
        <p class="c-ad__label">Advertisement</p>
        <!--ad slot content here-->
    </div>
</aside>

<aside class="c-ad c-ad--970x90">
    <div class="c-ad__inner">
        <p class="c-ad__label">Advertisement</p>
        <!--ad slot content here-->
    </div>
</aside>

<!--mpu-->
<aside class="c-ad c-ad--300x250">
    <div class="c-ad__inner">
        <p class="c-ad__label">Advertisement</p>
        <!--ad slot content here-->
    </div>
</aside>

<!--skyscraper-->
<aside class="c-ad c-ad--160x600">
    <div class="c-ad__inner">
        <p class="c-ad__label">Advertisement</p>
        <!--ad slot content here-->
    </div>
</aside>
```
npm package: @springernature/global-autocomplete
Description: Autocomplete/suggest component
Author: Jon Stevens
Latest version: 7.0.0

# Autocomplete component

Basic autocomplete function that listens to key events on a text input and fetches suggestions from a specified endpoint.

## Branding

The `global-autocomplete` component currently uses the `DEFAULT` brand only.

```scss
// Inlcude this with your settings
@import '@springernature/global-autocomplete/scss/10-settings/default';

// Include this with your other components
@import '@springernature/global-autocomplete/scss/50-components/autocomplete';
```

## Example usage

Please see contents of `demo/` folder for sample client JS.

A full handlebars demo is also in the demo folder, but following is the only HTML the
 component actually requires:

```html
<input type="text" autocomplete="off" class="c-autocomplete" aria-expanded="false" data-component-autocomplete>
```
npm package: @springernature/global-banner
Description: Full width banner used for displaying informational messages
Author: Springer Nature
Latest version: 6.0.0

# Banner

Full width banner used for displaying informational messages.

## Branding

To include `global-banner` in your application, you need to choose **ONE** brand from those available. The `DEFAULT` brand is included in all other brands, and any settings that are not configured will fall back to default.

```scss
// Pick ONE of the brands below to include
@import '@springernature/global-banner/scss/10-settings/default';
@import '@springernature/global-banner/scss/10-settings/springer';
@import '@springernature/global-banner/scss/10-settings/nature';

// Include this with your other components
@import '@springernature/global-banner/scss/50-components/banner';
```

## Usage

```html
<div class="c-banner">
    Simple banner example
</div>
```

`c-banner__container` allows you to have two child items, one on either side of the banner. For example:

```html
<div class="c-banner">
    <div class="c-banner__container">
        <div class="c-banner__item">
            <a href="#">
                <img class="c-banner__image" src="http://placehold.it/430x36" alt=""/>
            </a>
        </div>
        <p class="c-banner__item">
            <a class="c-banner__link" href="#">Link</a>
        </p>
    </div> 
</div>
```

If `c-banner__container` is used with just one child item, this item will be placed in the center of the banner.

### Modifiers

**Inverted**

Sets opposite colors of banner background, text and links. For example, to increase contrast of light colored logo with dark background.

```html
<div class="c-banner c-banner--inverted">...</div>
```

**Flush**

Removes the left and right padding on the banner.

```html
<div class="c-banner c-banner--flush">...</div>
```

### Constraining the width of the banner

If you want to constrain the width of the banner or the contents of the banner, it is best to use a utility class such as `u-container` or an application specific class that you can apply styles to.

**Constrain entire banner**

```html
<div class="u-container">
    <div class="c-banner">
        <div class="c-banner__container">
            <p class="c-banner__item">Simple banner example</p> 
        </div>
    </div>
</div>
```

**Constrain banner content**

If you are constraining just the content of the banner and your container utility has padding on each side, then you can use the `c-banner--flush` modifier.

```html
<div class="c-banner c-banner--flush">
    <div class="u-container">
        <div class="c-banner__container">
            <p class="c-banner__item">Simple banner example</p> 
        </div>
    </div>
</div>
```
npm package: @springernature/global-breadcrumbs
Description: breadcrumbs
Author: Springer Nature
Latest version: 5.1.0

# Global Breadcrumbs

## Branding

To include `global-breadcrumbs` in your application, you need to choose ONE brand from those available. The DEFAULT brand is included in all other brands, and any settings that are not configured will fall back to default.

```scss
// Pick ONE of the brands below to include
@import '@springernature/global-breadcrumbs/scss/10-settings/default';
@import '@springernature/global-breadcrumbs/scss/10-settings/nature';
@import '@springernature/global-breadcrumbs/scss/10-settings/springernature';

// Include this with your other components
@import '@springernature/global-breadcrumbs/scss/50-components/breadcrumbs';
```

## Usage

#### HTML
```html
<ul class="c-breadcrumbs">
   <li class="c-breadcrumbs__item">
        <a class="c-breadcrumbs__link">Link 1</a>
        <svg class="c-breadcrumbs__chevron" width="12" height="12" aria-hidden="true" focusable="false">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
    </li>
    <li class="c-breadcrumbs__item">
        <a class="c-breadcrumbs__link">Link 2</a>
        <svg class="c-breadcrumbs__chevron" width="12" height="12" aria-hidden="true" focusable="false">
            <use xlink:href="#icon-chevron-right"></use>
        </svg>
    </li>
    <li class="c-breadcrumbs__item">
        Text 3
    </li>
</ul>
```
npm package: @springernature/global-button
Description: Button styles to use on buttons and links
Author: Springer Nature
Latest version: 1.0.1

# Global Button

Button styles to use on buttons and links.

## Usage

To include `global-button` in your application, you need to choose **ONE** brand from those available. The `DEFAULT` brand is included in all other brands, and any settings that are not configured will fall back to default.

```scss
// Pick ONE of the brands below to include
@import '@springernature/global-button/scss/10-settings/default';
@import '@springernature/global-button/scss/10-settings/springer';
@import '@springernature/global-button/scss/10-settings/nature';

// Incude this with your other mixins
@import '@springernature/global-button/scss/30-mixins/button';

// Incude this with your other components
@import '@springernature/global-button/scss/50-components/button';
```

### Basic usage

```html
<button class="c-button">text</button>

<a class="c-button" href="#">text</a> 
```

### Themes

Add theme classes for different branding styles. If a theme does not exist for the brand you are using it will fallback to the default syle.

**Primary**
```html
<button class="c-button c-button--primary">text</button>
```

**Ghost**
```html
<button class="c-button c-button--ghost">text</button>
```

**Disabled**
```html
<button class="c-button c-button--disabled" disabled>text</button>
```

### Variants

Variant modifiers can be added to the default class, as well as to themes.

**Small**
```html
<button class="c-button c-button--small">text</button>
```

**Large**
```html
<button class="c-button c-button--large">text</button>
```

**Full width**
```html
<button class="c-button c-button--full-width">text</button>
```

**Icon left**
```html
<button class="c-button c-button--icon-left">
    <svg></svg>
    <span>text</span>
</button>
```

**Icon right**
```html
<button class="c-button c-button--icon-right">
    <span>text</span>
    <svg></svg>
</button>
```
npm package: @springernature/global-card
Description: card component
Author: Springer Nature
Latest version: 9.0.0

# Global card

## Branding

To include `global-card` in your application, you need to choose **ONE** brand from those available. The `DEFAULT` brand is included in all other brands, and any settings that are not configured will fall back to default.

## Usage

First include the styling to be compiled:

```scss
// Pick ONE of the brands below to include
@import '@springernature/global-card/scss/10-settings/default';
@import '@springernature/global-card/scss/10-settings/nature';
@import '@springernature/global-card/scss/10-settings/springer';
@import '@springernature/global-card/scss/10-settings/springernature';

// Include this with your other components
@import '@springernature/global-card/scss/50-components/card';
```

Then compile the template located in the `./view` folder whenever the component is needed. See the `./demo/context.json` to see what the data would look like. 

## Grouping

Cards should almost always exist as list items for accessibility. It is highly recommended the parent list element (`<ul>`) takes the `l-grid` class from the `global-layout-grid` component (and accompanying custom property-based settings) and that each card is placed inside an `<li>`.

In the following example, custom properties are used to adjust the gap (gutter) and target/idealized card width (here set to `230px`):

```html
<!-- cards are always list items, organized in a `<ul>` -->
<ul class="l-grid" style="--grid-gap: 1.5em; --grid-basis: min(230px, 100%)">
{{#with data}}
    {{#each cards}}
        {{>card}}
    {{/each}}
{{/with}}
</ul>
```

## Variants

### Aspect ratio

By default, the aspect ratio for the space into which the image is placed is `16 / 9`. This can be adjusted by placing an `aspectRatio` property on the card’s data. This is a string.

```json
"aspectRatio": "1 / 1"
```

### Heading level

For cards that have a title/heading, you may need to adjust their heading levels to befit the context. For example, if a set of cards are introduced with an `<h3>` heading, the cards should each have a heading level of `4` to mark them as subsections under the `<h3>` (they belong the the `<h3>`’s section in the document outline). You can control the the heading level with the `level` property. Note that `level` should be a string, not an integer.

```json
"level": "4"
```

Note that this is achieved using `aria-level`, so the appearance (font size) of the heading/title remains unaffected.

Each card should have the same heading level, so if you change it to, say, `4` for one card, you need to apply it to each of the accompanying cards in the array.

### No shape

By applying `noShape: true`, the border, background, and `box-shadow` are removed (and padding is removed from the content area accordingly). 

```json
"noShape": true
```

### No faux block link

If your card contains links in the body text, they will not be reachable when `u-link-faux-block()` is included and active. By applying `noBlockLink` to the card, you can remove this feature.

```json
"noBlockLink": true
```
npm package: @springernature/global-colors
Description: sass color variables
Author: Ollie W
Latest version: 0.0.1
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# global-colours

Defines colour variable names.

These (dummy) values should not be used directly by client applications but instead overridden at the Brand level. Client applications should consume the Brand level equivalents, not this package.

Thereby variable names can be consistent across Brand and Application-level SASS, facilitating re-skinning.
npm package: @springernature/global-details
Description: A JS-independent, accessible disclosure component
Author: SpringerNature
Latest version: 2.0.0

# Global Details

The `global-details` component is for collapsing sections of content and making them expandable. SOme call this a "disclosure pattern". It uses `<details>` and `<summary>` and, as such, is JavaScript independent. In older browsers, the sections are expanded by default.

## Usage

First, import the `global-details` styles—selecting the brand settings you require.

```scss
@import '../node_modules/@springernature/global-details/scss/10-settings/default';
@import '../node_modules/@springernature/global-details/scss/50-components/details';
```

Then compile the template located in the `./view` folder whenever the component is needed. See the `./demo/context.json` to see an example of the expected data.

### Variants

#### `open`

You can make a details instance open/expanded by default (on page load) by applying `open: true` to the data used to compile its template. This adds the `open` attribute to its `<details>` element.

#### `headingLevel`

By including a `headingLevel` property with a number (of type `String`) you can add heading semantics to the summary’s title. This is recommended in most cases, since these components typically represent collapsed sections of the page.

With `headingLevel: '2'`, the markup for the header becomes:

```html
<div class="c-details__header" role="heading" aria-level="2">
    ...
</div>
```

#### `listItem`

If you set `listItem: true`, the outer `class="c-details"` element becomes an `<li>`. Where heading semantics are not provided (see `headingLevel`), list semantics are recommended. In general, use heading semantics where a set of successive details instances represent large sections of content. Use list semantics where each instance discloses only a sentence or two. 

Be careful to wrap the set of `<li>` instances in a `<ul>`.
npm package: @springernature/global-dropdown
Description: Display a contextual list of links controlled by a toggle
Author: Springer Nature
Latest version: 5.0.0

# Global Dropdown

Global branded dropdown

## CSS

Include the SCSS in your application

```scss
// Pick ONE of the brands below to include
@import '@springernature/global-dropdown/scss/10-settings/default';
@import '@springernature/global-dropdown/scss/10-settings/nature';

// Include this with your other components
@import '@springernature/global-dropdown/scss/50-components/dropdown';
```

## Example usage

The core experience will show a label and a list of items underneath. JavaScript and more advanced CSS options are available by using the class `.js` on the document root element.

```html
<div class="c-dropdown">
    <span class="c-dropdown__label">dropdown</span>
    <button class="c-dropdown__button" aria-expanded="false" data-dropdown data-dropdown-target="#dropdown">Dropdown
        <svg aria-hidden="true" width="10" height="10" aria-hidden="true" focusable="false">
            <use xlink:href="i-chevron-more"></use>
        </svg>
    </button>
    <ul class="c-dropdown__menu" id="#dropdown">
        <li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 1</a></li>
        <li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 2</a></li>
        <li><a href="#" class="c-dropdown__link" data-dropdown-item>Option 3</a></li>
    </ul>
</div>
```

### Enhanced dropdown

```javascript
import {dropdown} from 'global-dropdown/js';

dropdown();
```

The component uses the Expander from the `brand-context` package to handle the events. 

You can get a quick implementation by adding these two attributes `data-dropdown` and `data-dropdown-target` in your HTML as shown at the example above.

If you need more flexibility, use the expander component directly following its [documentation](https://github.com/springernature/frontend-toolkits/blob/master/context/brand-context/default/js/README.md#expander).
npm package: @springernature/global-expandable-box
Description: height of box expands and contracts
Author: Ollie Williams
Latest version: 0.1.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

To use expandable box: 

```
import init from './expandable.js';
```

```
var boxArray = Array.from(document.querySelectorAll('.box')); 
init(boxArray);
```

The init function can take additional arguments to specify a maximum height and button text for when the box is closed and open. 

```
function init(boxes, "90px", "close", "open")
```

The default values are a height of "200px", closetext of "Show less" and opentext of "Show more".


Expandable box offers two custom event listeners - open and close. 

```
box.addEventListener('close', function() {
	console.log('closed!!');
})
```
npm package: @springernature/global-grid
Description: css layout pattern
Author: Charlie Owen
Latest version: 2.0.1

# Grids

This module makes available tools for building a classic grid system (note: nothing to do with the CSS Grid spec, for now).

You need to install `bourbon-neat` version `4.0.0` or higher at the same level as this component e.g.

```json
"devDependencies": {
  "@springernature/global-grid": "^2.0.0",
  "bourbon-neat": "^4.0.0"
}
```
npm package: @springernature/global-layout-cluster
Description: A layout primitive for grouping elements together in an inline fashion but using Flexbox and gap to eliminate unneeded whitespace
Author: Springernature
Latest version: 1.0.0

# Global layout cluster

The Cluster component is a simple layout primitive for grouping (_clustering_) elements together. It improves upon basic `inline` and `inline-block` solutions by using Flexbox and the `gap` property to apportion space only _between_ the child elements.

## Branding

The `global-layout-cluster` component can be used in any brand context. You just need to import the component itself:

```scss
@import '@springernature/global-layout-stack/scss/10-settings/default';
@import '@springernature/global-layout-stack/scss/50-components/layout-cluster';
```

## Usage

### Default settings

A cluster of buttons:

```html
<fieldset class="l-cluster">
    <button class="u-button" type="button">Edit</button>
	<button class="u-button" type="button">Save</button>
	<button class="u-button" type="button">Delete</button>
	<button class="u-button" type="button">Share</button>
</fieldset>
```

### Alignment

You can align the cluster’s child elements along both axes with the modifiers `l-cluster--right`, `l-cluster--center`, `l-cluster--top`, `l-cluster--middle`, and `l-cluster--bottom`.

By default, the elements are justified to the left and aligned with `stretch`. This is particularly useful for clustering text inputs with (submit) buttons, since the elements will stretch to share the same height regardless of padding and `font-size`.

```html
<label for="name">Name:</label>
<div class="l-cluster">
    <input type="text" id="name" name="name">
</div>
```

### Custom gap

The `global-layout-cluster` component’s gap setting is mapped to a CSS custom property, meaning you can alter it inline. In the following example, the gap is `0`, making the submit button flush with the input (`1em` is the default value).

```html
<label for="name">Name:</label>
<div class="l-cluster" style="--cluster-gap: 0">
    <input type="text" id="name" name="name">
</div>
```
npm package: @springernature/global-layout-grid
Description: A versatile responsive grid using CSS Grid (no media queries necessary)
Author: Springer Nature
Latest version: 1.0.0

# Global grid

The `global-layout-grid` component is a generic layout utility for creating responsive grid layouts where 

* Each grid item should be the same width
* Grid items should wrap according to available space

The purpose of `global-layout-grid` is to enable basic grid layouts—suitable for all kinds of content and product teasers—without having to defer to `@media` queries. Grid items are sized based around an ideal width (set as `$grid--basis` in Sass and `--grid--basis` in CSS).

## Branding

The `global-layout-grid` component can be used in any brand context. You just need to import the component itself:

```scss
@import '@springernature/global-layout-grid/scss/10-settings/default';
@import '@springernature/global-layout-grid/scss/50-components/layout-grid';
```

## Usage

### Default settings

Using the default settings, `$grid--basis` is equal to `min(300px, 100%)`. This means each item will be the same width and as close to `300px` in width as the context will allow. The `min()` function prevents items using more than `100%` of the horizontal space and causing overflow (obscured content; horizontal scrolling).

Note the use of list semantics. Collections of teasers/products should ordinarily be identified as lists in screen reader software. However, `<ul>` and `<li>` are not mandatory, allowing you to repurpose the component.

```html
<ul class="l-grid">
    <li>
        Item 1
    </li>
    <li>
        Item 2
    </li>
    <li>
        Item 3
    </li>
    <li>
        Item 4
    </li>
</ul>
```

### Custom settings

The component maps `$grid--basis` and `$grid--gap` to CSS custom properties, allowing you to adjust the values inline. In the following example, `--grid--gap` is set to `2em` and `--grid--basis` to `20ch`.

```html
<ul class="l-grid" style="--grid--gap: 2em; --grid--basis: min(20ch, 100%)">
    <li>
        Item 1
    </li>
    <li>
        Item 2
    </li>
    <li>
        Item 3
    </li>
    <li>
        Item 4
    </li>
</ul>
```

Note that the `20ch` has to be wrapped in the `min()` function. This is the result of the initial Sass value having to include the `min()` function inside Sass’s `unquote()` function. The version of Sass we are running at the time of writing cannot interpret `min()` and this is a workaround.
npm package: @springernature/global-layout-stack
Description: Layout primitive for spacing sibling elements from a parent
Author: Springernature
Latest version: 1.0.0

# Global layout stack

The Stack component (see [Every Layout](https://every-layout.dev/layouts/stack/)) is a layout primitive for apportioning equal space between sibling block elements. It is an antidote to adding margin to individual components—without consideration of context—resulting in missing or unnecessary white space.

## Branding

The `global-layout-stack` component can be used in any brand context. You just need to import the component itself:

```scss
@import '@springernature/global-layout-stack/scss/10-settings/default';
@import '@springernature/global-layout-stack/scss/50-components/layout-stack';
```

## Usage

### Default settings

By default, an element with `class="l-stack"` will add a space/gap of `1.5em` (one line) between each of its child elements. Any existing margin is removed. The child elements can be any element type.

```html
<div class="l-stack">
    <p>child 1</p>
    <blockquote>child 2</blockquote>
    <p>child 3</p>
    <figure>child 4</figure>
</div>
```

### Custom gap

The `global-layout-stack` component’s gap setting is mapped to a CSS custom property, meaning you can alter it inline. In the following example, the gap is `3em`.

```html
<div class="l-stack" style="--stack--gap: 3rem">
    <p>child 1</p>
    <blockquote>child 2</blockquote>
    <p>child 3</p>
    <figure>child 4</figure>
</div>
```

Note that older browsers inject margin, but newer browsers use the `gap` property with Flexbox. Since IE11 (for example) does not support custom properties, the default gap/margin will remain.

### Nesting

```html
<div class="l-stack" style="--stack--gap: 3em">
    <p>child 1</p>
    <blockquote>child 2</blockquote>
    <p>child 3</p>
    <figure>child 4</figure>
    <div class="l-stack" style="--stack--gap: 0.5em">
        <div>tightly</div>
        <div>stacked</div>
        <div>elements</div>
    </div>
</div>
```
npm package: @springernature/global-layout-with-sidebar
Description: A two column layout with one column as a sidebar
Author: Springer Nature
Latest version: 1.0.0

# Global layout with sidebar

The `global-layout-with-sidebar` component is a generic layout utility for creating two column layouts where

* One column is a sidebar with a chosen optimal width
* The other column takes up the rest of the available space
* The layout automatically wraps into one column based on a minimum percent-based width for the non-sidebar element

The purpose of the `global-layout-with-sidebar` is to enable responsive 1-2 column layouts without the necessity of media query breakpoints. It is based on [Every Layout’s Sidebar](https://every-layout.dev/layouts/sidebar/).

## Branding

The `global-layout-with-sidebar` component can be used in any brand context. You just need to import the component itself:

```scss
@import '@springernature/global-layout-with-sidebar/scss/10-settings/default';
@import '@springernature/global-layout-with-sidebar/scss/50-components/layout-with-sidebar';
```

## Usage

### Default settings

Using the default settings, the `l-with-sidebar` element will be `400px` in the 2-column configuration. Both columns grow to 100% width of their parent `l-with-sidebar` where they wrap into 1 column. By default, this happens when the non-sidebar (“Main content” below) becomes less than `50%` of the total width.

```html
<div class="l-with-sidebar">
    <div>
        Main content
    </div>
    <div class="l-with-sidebar__sidebar">
        Sidebar content
    </div>
</div>
```

### Sidebar on left

Somewhat unconventional, but the component can take it!

```html
<div class="l-with-sidebar">
    <div class="l-with-sidebar__sidebar">
        Sidebar content
    </div>
    <div>
        Main content
    </div>
</div>
```

### Custom settings

The `global-layout-with-sidebar` component’s settings are mapped to CSS custom properties, meaning you can alter them inline.

In the following example, the `gap` between the columns is `2em`, the 1-column layout is triggered when the main content goes under `66.666%`, and the sidebar is `300px` wide in the 2-column layout.

```html
<div class="l-with-sidebar" style="--with-sidebar--gap: 2em">
    <div style="--with-sidebar--min: 66.666%">
        Main content
    </div>
    <div class="l-with-sidebar__sidebar" style="--with-sidebar--basis: 300px">
        Sidebar content
    </div>
</div>
```

Note that these custom values will not take effect in IE11, which retains the original values, with no impact on the accessibility of the content.
npm package: @springernature/global-lists
Description: Provide different styled lists
Author: Springer Nature
Latest version: 6.0.0

# Global lists components

Components for working with lists.

## Examples

### List Columned
#### HTML
```html
<ul class="c-list-columned">
    <li class="c-list-columned__item">
        <!-- Content -->
    </li>
    <li class="c-list-columned__item">
        <!-- Content -->
    </li>
</ul>
```

### List Description
#### HTML
```html
<div class="c-list-description__item">
    <dt class="c-list-description__term">
        <!-- Content -->
    </dt>
    <dd class="c-list-description__details">
        <!-- Content -->
    </dd>
</div>
```

### List Group
#### HTML
```html
<ul class="c-list-group c-list-group--bordered">
    <li class="c-list-group__item">
        <!-- Content -->
    </li>
    <li class="c-list-group__item">
        <!-- Content -->
    </li>
</ul>
```

### List Header
![image](https://i.imgur.com/wHNpnJt.png)

#### HTML
```html
<div class="c-list-header">
    <span><!-- Left aligned content --></span>
    <button><!-- Right aligned content --></button>
</div>
```

#### Example

![image](https://i.imgur.com/g8jZ24b.png)
npm package: @springernature/global-loader-animation
Description: Loader animation to show when making requests
Author: Springernature
Latest version: 2.0.1

# Global loader animation

Show a loading animation for async stuff, like requests etc

```scss

// Include this with your other components
@import '@springernature/global-loader-animation/scss/10-settings/default';
@import '@springernature/global-loader-animation/scss/50-components/loader';
```

### Basic usage

```js
import CssLoader from '@springernature/global-loader-animation/js';

const loader = new CssLoader();

// Show loader animation
loader.add();

// Remove loader animation
loader.remove();

```
npm package: @springernature/global-menu
Description: Create common navigation patterns for list elements
Author: Springernature
Latest version: 4.0.0

# Global Menu

Create common navigation patterns for list elements.

## Branding

The `global-menu` component currently uses the `DEFAULT` brand only.

```scss
// Inlcude this with your settings
@import '@springernature/global-menu/scss/10-settings/default';

// Include this with your other components
@import '@springernature/global-menu/scss/50-components/menu';
```

## Usage

### Basic usage

Menu items are displayed horizontally.

```html
<ul class="c-menu">
    <li class="c-menu__item">
        <a class="c-menu__link" href="#">Item One</a>
    </li>
    <li class="c-menu__item">
        <a class="c-menu__link" href="#">Item Two</a>
    </li>
    <li class="c-menu__item">
        <a class="c-menu__link" href="#">Item Three</a>
    </li>
</ul>
```

### Modifiers

#### Small

Reduces the menu font-size.

```html
<ul class="c-menu c-menu--small">
   ...
</ul>
```

#### Inherit

Sets the colour on the links to inherit.

```html
<ul class="c-menu c-menu--inherit">
   ...
</ul>
```

#### Keyline

Adds a keyline in between each item.

```html
<ul class="c-menu c-menu--keyline">
   ...
</ul>
```

#### Vertical

Displays the items vertically.

```html
<ul class="c-menu c-menu--vertical">
   ...
</ul>
```

#### Padded

Creates spacing using padding on the links instead of margins on the items, increasing the clickable area.

```html
<ul class="c-menu c-menu--padded">
   ...
</ul>
```

### Combining Modifiers

Any of the above modifiers can be combined to create menu variations, for example:

```html
<ul class="c-menu c-menu--small c-menu--vertical c-menu--keyline c-menu--padded">
   ...
</ul>
```
npm package: @springernature/global-meta
Description: Brief information about the content
Author: Springer Nature
Latest version: 7.0.0

# Global Meta

Brief information about the content.

## Branding

To include `global-meta` in your application, you need to choose **ONE** brand from those available. The `DEFAULT` brand is included in all other brands, and any settings that are not configured will fall back to default.

```scss
// Pick ONE of the brands below to include
@import '@springernature/global-meta/scss/10-settings/default';
@import '@springernature/global-meta/scss/10-settings/nature';
@import '@springernature/global-meta/scss/10-settings/springer';
@import '@springernature/global-meta/scss/10-settings/springernature';

// Include this with your other components
@import '@springernature/global-meta/scss/50-components/meta';
```

## Usage

```html
<!-- single item-->
<div class="c-meta">
    <span class="c-meta__item">Article</span>
</div>

<!-- multiple items-->
<div class="c-meta">
    <span class="c-meta__item">Editorial</span>
    <span class="c-meta__item">15 October 2019</span>
</div>

<!-- differentiate an item -->
<div class="c-meta">
    <span class="c-meta__item">
        <span class="c-meta__type">Editorial</span>
    </span>
</div>

<!-- larger font size -->
<div class="c-meta c-meta--large">
    <span class="c-meta__item">Article</span>
</div>
```
npm package: @springernature/global-mq
Description: css media-query pattern
Author: Charlie Owen
Latest version: 1.0.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Media Query

This module makes available the [Breakpoint](http://breakpoint-sass.com/) mixin, for dealing with media queries.

You need to install `breakpoint-sass` version `2.0.0` or higher at the same level as this component e.g.

```json
"devDependencies": {
  "@springernature/global-mq": "^1.0.0",
  "breakpoint-sass": "^2.0.0"
}
```

## Examples

```
.c-yourcomponent {
    color: plum;

    @include global-mq('500px') {
        color: hotpink;
    }
}
```
npm package: @springernature/global-pagination
Description: A component for the controls of pagination
Author: Springer Nature
Latest version: 3.1.0

# Global Pagination

A component for the controls of pagination.

## Branding

To include `global-pagination` component currently uses the `DEFAULT` brand only.

```scss
@import '@springernature/global-pagination/scss/10-settings/default';
// Include this with your other components
@import '@springernature/global-pagination/scss/50-components/pagination';
```

## Example

#### HTML
```html
<nav>
    <ul class="c-pagination">
        <li class="c-pagination__item">
            <span class="c-pagination__link c-pagination__link--disabled">
                <svg class="c-icon c-pagination__icon" aria-hidden="true">
                    <use xlink:href="#icon-arrow-left"></use>
                </svg>
            </span>
        </li>
        <li class="c-pagination__item">
            <span class="c-pagination__link c-pagination__link--active">1</span>
        </li>
        <li class="c-pagination__item">
            <a href="/news?type=articles&amp;pageSize=1&amp;page=2" class="c-pagination__link">
                2
            </a>
        </li>
        <li class="c-pagination__item">
            <a href="/news?type=articles&amp;pageSize=1&amp;page=3" class="c-pagination__link">
                3
            </a>
        </li>
        <li class="c-pagination__item">
            <span class="c-pagination__link c-pagination__link--disabled c-pagination--ellipsis">…</span>
        </li>
        <li class="c-pagination__item">
            <a href="/news?type=articles&amp;pageSize=1&amp;page=22" class="c-pagination__link">
                22
            </a>
        </li>
        <li class="c-pagination__item">
            <a href="/news?type=articles&amp;pageSize=1&amp;page=2" rel="next" class="c-pagination__link">
                <svg class="c-icon c-pagination__icon c-pagination__icon--active" aria-hidden="true">
                    <use xlink:href="#icon-arrow-right"></use>
                </svg>
            </a>
        </li>
    </ul>
</nav>
```
npm package: @springernature/global-pill
Description: A pill shape container with background
Author: Springer Nature
Latest version: 2.0.0

# Global Pill

## Branding

To include `global-pill` in your application, you need to choose **ONE** brand from those available. The `DEFAULT` brand is included in all other brands, and any settings that are not configured will fall back to default.

```scss
// Pick ONE of the brands below to include
@import '@springernature/global-pill/scss/10-settings/default';
@import '@springernature/global-pill/scss/10-settings/nature';

// Include this with your other components
@import '@springernature/global-pill/scss/50-components/pill';
```

## Modifiers

### Secondary
Allows for an alternative colour scheme to be used. This includes text colour, border colour, and background colour.

```scss
<div class="c-pill c-pill--secondary">Pill</div>
```

### Borderless
Allows for a borderless component.

```scss
<div class="c-pill c-pill--borderless">Pill</div>
```

#### HTML

```html
<ul>
    <li>
        <a href="/path/to/1" class="c-pill">Link</a>
    </li>
    <li>
        <p href="/path/to/2" class="c-pill">Some text</p>
    </li>
    <li>
        <a href="/path/to/3" class="c-pill">Another link</a>
    </li>
</ul>
```
npm package: @springernature/global-popup
Description: Builds and styles a popup that can be opened and closed
Latest version: 6.0.0

# Global Popup

Click a trigger element to build and display a popup. Popups are built from existing html in the DOM and require it to be there prior to initialisation.

Popups are absolutely positioned either above or below the trigger, based on a calculation of space in the viewport. Defaults to above. By default the popups calculate their width based on their contents.

The Popup is based on the Expander but differs in the following ways:

1. It moves keyboard focus to the target element on opening (necessitating the `aria-haspopup="true"` attribution as a warning to screen reader users)
2. It supplies a close button which sends focus back to trigger element on close

## Usage
There are two approaches for using Global Popup:
1. Data attribute API
2. Directly in your application

#### Data attribute API

```javascript
import {popup} from 'global-popup/js';

popup();
```

```html
<button type="button" data-popup data-popup-target="popupContent1">Popup trigger</button>
<div id="popupContent1">
    <p>Some popup text</p>
</div>
```

(The trigger must be a `<button>` element with `type="button"` for keyboard and screen reader accessibility.)

Two data attributes are required:

| Data attribute     | Type    | Description |
|--------------------|---------|-------------|
| data-popup         | Boolean | This is the popup trigger i.e. clicking this will open a popup |
| data-popup-target  | String  | This is the id of the element in the DOM that Global Popup will use to build the popup contents |

There are also options (add these to trigger element):

| Data attribute        | Type    | Description |
|-----------------------|---------|-------------|
| data-popup-min-width  | String  | Sets a min-width in css on the popup, e.g. "100px" |
| data-popup-max-width  | String  | Sets a max-width in css on the popup, e.g. "600px" |

#### Directly

```javascript
import {Popup} from 'global-popup/js/popup';

const trigger = document.querySelector('button');
new Popup(trigger, 'popupContent1', { MIN_WIDTH: "100px", MAX_WIDTH: "600px" });
```

```html
<div>
    <button type="button">Popup trigger</button>
    <div id="popupContent1">
        <p>Some popup text</p>
    </div>
</div>		
```

### Lazily

If you wish to lazily create a popup the first time the trigger is clicked - for example if building the html for your popup is an expensive operation that you'd like to defer until needed - you can use this pattern:


```javascript
import {Popup} from 'global-popup/js/popup';

const trigger = document.querySelector('button');
trigger.addEventListener('click', function() {
    const popup = new Popup(trigger, 'popupContent1');
    popup.open();
}, {capture: false, once: true});
```

```html
<div>
    <button type="button">Popup trigger</button>
    <div id="popupContent1">
        <p>Some popup text</p>
    </div>
</div>
```